Animation properties 3 (Custom animations)
Quote from luishp on July 26, 2019, 6:54 pmYou are not limited to predefined animations, you can create your own using CSS Keyframes.
https://youtu.be/ETqlh2kVEVQ
You are not limited to predefined animations, you can create your own using CSS Keyframes.
Quote from rrey on July 11, 2020, 7:05 pmHola @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 @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
Quote from luishp on July 11, 2020, 8:11 pmHola @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!
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!
Quote from luishp on July 13, 2020, 4:18 pm@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!
@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!
Quote from rrey on July 14, 2020, 12:20 pm@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>
@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>
Quote from rrey on July 14, 2020, 4:08 pmTambié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%) } </styleTeniendo en cuenta que así si se pueden usar variables da más posibilidades que si se ubican en la pestaña de Estilos.
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.
Quote from rrey on July 30, 2020, 6:57 pmHola @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
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
Quote from luishp on July 30, 2020, 8:02 pm@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!!
@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!!
Quote from rrey on July 30, 2020, 10:50 pmVeo 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.
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.
Quote from rrey on July 31, 2020, 1:31 pmHola,
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");
EndJSSe podrá cambiar los valores CSS. Ahora me falta recuperarlos con getComputedStyle . A ver si es posible.
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.
Quote from rrey on July 31, 2020, 7:12 pmHola 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; EndJSEl 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 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.
Quote from luishp on August 1, 2020, 11:41 amHola @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-upFí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!
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!
Quote from rrey on August 1, 2020, 6:14 pmGracias @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 @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;