Animation properties 3 (Custom animations) - Forum

Forum Navigation
VisualNEO Products: Web, Win and PixelNEO
You need to log in to create posts and topics.

Animation properties 3 (Custom animations)

You are not limited to predefined animations, you can create your own using CSS Keyframes.

Hola  @luishp,

Sigo estudiando las animaciones @keyframe. Algunas de las cosas que voy aprendiendo las recojo en este nuevo tutorial.

A la hora de crear animaciones interactivas he penado en usar variables en este tipo de animaciones @keyframe, en las que su código  se ubica en las pestaña Estilos.  Mi pregunta es si es posible usar variables Visualneo dentro de este código.  Por ejemplo imagínate que quiero poner una variable como es ese ejmeplo:

animation-duration: [vtiempo];

O bien en el en panel de propiedades.

Lo he probado pero no funciona.  Si no es posible hacerlo podría ser una mejora de VisualNeo, o hay otras soluciones.

Y aprovecho para otra duda. Cuando uso:

GetObjectInfo "Container1" "top" [vtop]

Con la variable [vtop] no puedo hacer operaciones. Por ejemplo:

SetVar [vtop] [votp]+10;

Sé que el  resultado viene dado en  pixels y que se podría hacer extrayendo "px"... ¿pero no hay una foma más directa?

Gracias y saludos,

 

Roger Rey

 

Hola @rrey,

No es posible utilizar variables porque el CSS de la pestaña estilos se aplica antes de la ejecución del código.
Lo que si es posible es crear CSS dinámicamnete utilizando código y aplicarlo después al objecto que quieras con SetObjectCSS, aunque no estoy seguro de como se haría con @keyframe. Tendría que experimentar un poco.

Sé que el  resultado viene dado en  pixels y que se podría hacer extrayendo "px"... ¿pero no hay una foma más directa?

Si, el problema es que obtienes un valor de cadena de texto y no numérico debido a la unidad de medida, habitualmente "px".
Simplemente debes convertirlo a número:

GetObjectInfo "Container1" "top" [vtop]
ToNumber "[vtop]" [vtop]
SetVar [vtop] [vtop]+10;

Saludos!

Por cierto, @rrey me parece muy completo el tutorial ¡enhorabuena!

@luishp muchas gracias por todo. Iremos avanzando con VisuaNeo.

@rrey, estaba pensando que en realidad se puede incluir código CSS en cualquier parte, como por ejemplo en el HTML de un contenedor y ahí si puedes utilizar variables. Por ejemplo esto es válido:

<h1 style="color:[color1]">Texto de prueba</h1>

No se si te servirá.
Saludos!

 

@luishp Sí es verdad funciona. He hecho varias pruebas.

Con varios gradientes, usando variables  en un mismo Container:

<style>
#grad1 {
  height: [altura];
  width:100%;

  background-image: linear-gradient([color1], [color2],[color3]);
}

#grad2 {
  height: 50%;
  width:100%;

  background-image: linear-gradient(red,green);
}



</style>

<div id="grad1"></div>
<div id="grad2"></div>

 

También aplicando animaciones fuera de la pestaña estilo, en un Container. De esta forma se ejecuta después de arrancar la aplicación y permite usar variables, y esto permitirá hacer animaciones interactivas

Estoy probando la función steps que no la conocía y se usa para animación fotograma a fotograma.

 

 

<style>
@keyframes pasos {
to {transform: translateX([altura]);}

}

.animacion {
animation-name: pasos;
animation-duration: 4s;
animation-timing-function: steps(4,end);
}
</style>

 

También me he dado cuenta que se pueden tener varias clases en un Container y apliacarlas a otros containers. Incluso aplicar varias clases a un container en el cuadro de propiedades de un Container.

En este ejemplo un Container tiene dos clases que se aplican al mismo y a otro Container:

 

<style>
@keyframes pasos {
to {transform: translateX([altura]);}

}

.animacion {
animation-name: pasos;
animation-duration: 4s;
animation-timing-function: steps(4,end);

}

.color {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%)

}
</style

Teniendo en cuenta que así si se pueden usar variables da más posibilidades que si se ubican en la pestaña de Estilos.

Hola @luishp,

¿Hay alguna forma de poder obtener los valores de las coordenadas x,y  de un objeto en el proceso de la animación css?

He probado dentro de un temporizador Timer con estas dos instrucciones por separado, pero solo me da el valor inicial. Es decir no se actualiza conforme se va moviendo la imagen.

GetObjectInfo "barcoBlanco" "left" [x]
GetObjectAttribute "barcoBlanco" "left" [x]

ToNumber "[x]" [x]

La animación es esta:

@keyframes animarBarcoBlanco {
0% {transform: translateX(0px);z-index: 2;}
50% {transform: translateX(300px);} /* Inicio de parada del movimiento */
70% {transform: translateX(300px);} /* Fin de la pausa acabado el 70%*/
100% {transform: translateX(800px);}
}

La imagen se mueve y lo que quiero es ir visualizando como cambia su coordenada X.

 

Aprovecho para dejar dos tutoriales más sobre animación: Animación fotograma afotograma y Animación por capas.

Saludos,

 

Roger

 

 

 

 

@rrey utiliza el comando Refresh después de obtener los valores dentro del Timer, de lo contrario tardará demasiado en trasladar los valores a las variables. Yo creo que con eso debería funcionar.

Fantásticos los tutoriales!!

Veo que no Refresh no soluciona el problem., GetObjectInfo no es capaz de obetener la propiedad actualizada left. Lo uso dentro de un Timer cada milisegundo.

 

Hola,

Parce que usando variables CSS se podría:

:root {
 --main-bg-color1: green;
  
}

#uno {
 background-color:  var(--main-bg-color1);

}

Y usando:

BeginJS
uno.style.setProperty("--main-bg-color1", "red");
EndJS

Se podrá cambiar los valores CSS. Ahora me falta recuperarlos con getComputedStyle . A ver si es posible.

 

Hola de nuevo,

Veo que la única forma de recuperar las coordenadas x,y es con este código:

BeginJS
var elemento = document.getElementById('uno');
var posicion = elemento.getBoundingClientRect();

$App.x = posicion.x;
$App.y = posicion.y;
EndJS

El problema es que estando el contqiner uno inicialmente en la posición 0,0. Las coordenadas que se recogen no coincidem, dan 256,61.

Alguien sabe a qué se debe.

 

Hola @rrey

El problema es que estando el contqiner uno inicialmente en la posición 0,0. Las coordenadas que se recogen no coincidem, dan 256,61.

Se debe a que getBoundingClientRect(); recvoge las coordenadas respecto a la esquina superior izquierda de la pantalla, no de la aplicación. Si tu app está centrada en pantalla (como sucede por defecto), el resultado es que te devuelve la posición del elemento más las coordenadas de la app (más concretamente de la página actual) dentro de la pantalla.
Es algo parecido a lo que sucedía aquí:
https://visualneo.com/forum/topic/help-moving-an-object-to-mouse-up

Fíjate al final del hilo.
Seguramente incluiré en la proxima versión un comando para obtener la posición de la página actual en pantalla.

Saludos!

Gracias @luishp,

He aprovechado la variable global  $App.NAB.PageID para que valga para cualquier página y lo he convertido en una función cuyo parametro es el nombre del objeto del cual se obtienen las coordenadas, y devuelve las variables  x1,y1. Sería interesante en la próxima versión integrarlo como pluguin ya que estas funcinones son de uso frecuente.

GetObjectxy "Container6"

var rect = document.getElementById($App.NAB.PageID).getBoundingClientRect();
$App.PageLeft = rect.left;
$App.PageTop = rect.top;
var objeto = document.getElementById(container).getBoundingClientRect();;
$App.x1 = objeto.x-$App.PageLeft;
$App.y1 = objeto.y-$App.PageTop;

 

 

Gracias  a ti @rrey. @gaev me envió una función muy parecida, gracias a los dos.

Open chat
1
Do you need more info?
Hi, do you have any doubt?