Animaciones @keyframes
- Introducción
La animación con keyframes permite controlar los pasos intermedios (fotogramas clave) en una secuencia de animación. Esto permite crear animaciones más complejas. En VisualNeo podemos hacer uso de la función CSS llamada @keyframes. Para ello el código debe insertarse en: Proyectos->Propiedades de la apliación->Estilos.
2. Animación de color
La primera animación que haremos sera una transición de colores. Pare ello lo primero que haremos es crear un Container en la página. Una vez creado este objeto, en la pestaña Estilos introduciremos el siguiente código:
@keyframes animarColor {
0% {background-color: blue;}
25% {background-color: yellow;}
50% {background-color: pink;}
75% {background-color: red;}
100% {background-color: green;}
}
Usaremos la función @keyframes para crear los diferentes fotogramas clave de la animación, seguido del nombre que le queramos dar. En nuestro caso: animarColor. En este caso vamos a usar el tanto por ciento para determinar qué duración tendrá cada fotograma clave. Con el código background-color vamos a camiar el color de relleno del objeto. Hemos creado 5 fotogramas clave con colores diferentes. Cada color tendrá la misma duración en la animación.
Una vez que hemos creado los fotogramas clave con @keyframes, ahora definiremos el tipo de animación con los parámetros que deseemos. Para ello vamos a introducir en la pestaña Estilos el código siguiente:
.animacionColor {
animation-name: animarColor; /* Nombre de la nimación*/
animation-delay: 0s; /* Tiempo de espera antes de iniciar la animación */
animation-duration: 5s; /* Duración de la animación */
animation-iteration-count: infinite; /* Número de veces que se repitirá */
animation-timing-function: linear; /* Tipo movimiento. En este caso es un movimiento constante*/
}
Una vez que que tenemos ya la animación creada debemos asociarla al objeto en el que queremos aplicarla. Para ello seleccionamos el objeto y en el panel propiedades ponemos el nombre animacionColor en la propiedad Clase CSS. También podríamos ejecutarla añadiendo a un botón el siguiente código: AddClass "Container1" "animacionEscala. Container1 es el id del objeto en el que aplicamos la animación.
3. Animación de forma
También podemos animar la forma de los objetos. Vamos a ver un ejemplo en el que vamos a transformar un container cuadrado en circular. Para ello usaremos la propiedad border-radius. Vamos a aprovechar la animación anterior de color para añadirle esta nueva animación. Añadiremos al código anterior el correspondiente al de border-radius que lo que hará será transformar progresivamente la forma a circular.
Para conseguir añadiremos el código border-radius seguido del tanto por ciento.
@keyframes animarFormaColor {
0% {background-color: blue; border-radius:0%}
25% {background-color: yellow; border-radius:25%}
50% {background-color: pink; border-radius:50%}
75% {background-color: red; border-radius:75%}
100% {background-color: green; border-radius:100%}
}
Imagen 1
La animación de la derecha corresponde a la primera animación de color. La de la derecha incluye también la animación de forma.
4. Animación de escala.
También podemos hacer animaciones a partir del cambio de escala de los objetos. Esto podría ser útil para aplicaciones por ejemplo donde queramos hacer zoom. Otro ejemplo podría ser simular cuando un objeto se desplaza y reduce visualmente su tamaño.
Ahora vamos a crear una animación que cambie primero la escala de la altura y anchura de un objeto y posteriormente la anchura y altura por separado.
Empezaremos introduciendo el siguiente código:
@keyframes animarEscala {
0% {transform: scale(0);}
40% {transform: scale(1);}
50% {transform: scaleX(2);}
60% {transform: scaleY(2);}
70% {transform: scaleY(3);}
100% {transform: scale(9);}
}
Imagen 2
La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés.
En el anterior código partimos de una escala 0 donde el objeto no es visible y hasta el 40% de la animación vamos aumentando su escala tanto en anchura como en altura. A partir del 40% hasta el 50% duplicamos su anchura. Del 50% al 60% duplicamos su altura. Del 60% al 70% triplcamos la altura. Y del 70% al 100% aumentamos 9 veces su escala.
.animacionEscala {
animation-name: animarEscala;
animation-delay: 0s;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate; /* Ver explicación en imagen 2 */
}
5. Animación de escala y movimiento
Cambiando la escala al mismo tiempo que se mueve un objeto podemos simular el efecto lejanía que comentábamos al principio. En el sguiente código programamos la imagen del avión para que mueva sus coordenadas actuales top:283px;left:23px hasta otras: top:-200px;left:800px. Enviamos el objeto fuera de la pantalla a 200 pixels y al extremo izquierdo: 800px.
@keyframes animarAvion {
0% {transform: scale(1);top:283px;left:23px;}
100% {transform: scale(0.01);top:-200px;left:800px;
}
.animacionAvion {
animation-name: animarAvion;
animation-delay: 0s;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
Imagen 3
En esta animación hemos combinado la propiedad scale con la modificación de las coordenadas de localización. Usando las propiedades top y left.
6. Animación de Zoom
La propiedad scale nos puede servir para crear el conocido efecto Zoom. Podemos aplicar a una imagen este efecto aumentando o disminuyendo la escala. Por defecto la escala en un objeto seria de 1: scale(1). Así de de este modo podemos aumentarla scale(2) o disminuirla scale(0.5).
Con la propiedad transform-origin además podemos cambiar el punto origen en el que se producirá la escala. Una escala que se produce desde el centro de la imagen se puede conseguir con transform-origin: 50% 50% . Esto permite hacer un zoom clásico desde el centro de la imagen.
Pero en la animación que vamos hacer ahora queremos hacer dos efectos zoom en la misma imagen y en zonas diferentes. Se trata de una imagen de 1024px por 600px.
En la imagen 4 pomos observar una animación que va aplicar el efecto zoom en dos zonas diferentes que coinciden con dos planetas. Este recurso se puede usar para enfatizar una parte de una imagen, comentarla...
Esto implica cambiar el origen de la escala con transform-origin.
Imagen 4
Vamos a crear ahora esta animación. Una vez tenemos la imagen en la pantalla introduciremos el siguiente código:
@keyframes zoom {
0% {transform: scale(1);transform-origin: 1px 1px;} /* Iniciamos el origen en las coordenadas 1,1 (esquina superior izquierda */
20% {transform: scale(3);transform-origin: 1px 1px} /* Aumentamos tres veces la escala en esta zona */
30% {transform: scale(1);transform-origin: 50% 50%} /* Modificamos el origen de la escala en el centro de la imagen */
90% {transform: scale(3);transform-origin: 1200px 1px} /* Origen de la escala en la esquina superior derecha y aumentamos escala */
100% {transform: scale(3);transform-origin: 1200px 1px} /*Mantenemos la escala */
}
Finalmente definimos los parámetros de la animación.
.animacionZoom {
animation-name: zoom;
animation-delay: 0s;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
7. Simulación de traslación
Una forma de simular una traslación, es decir un objeto que rota alrededor de otro, es usando un Container que gira en las coordenadas 0,0, es decir en su esquina superior izquierda; y dentro de él un objeto que se encuentra a una determinada distancia del punto de origen anteriormente mencionado.
Como vemos en la imagen 5 hemos creado un Container y dentro de el hemos insertado la imagen de un planeta. La circunferencia de color rojo es solamente una anotación para indicar donde debe tener el origen de rotación. Como ya sabemos esto se puede definir con el siguiente código:
transform-origin: 0% 0%;
Pero esta vez queremos que este origen quede determinado antes de que se produzca la animación. Y esto podemos indicarlo también en la misma pestaña Estilo con el código siguiente:
#Container20 {
transform-origin: 0% 0%;
}
Imagen 5
Esta vez usamos el caracter "#" para aplicar los estilos a objetos que pueden ser un container u otros objetos como imágenes.
Ahora vamos a crear la rotación del container con el siguiente código:
@keyframes animarContainer1 {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
Y creamos también la animación con los parámetros necesarios:
.animacionContainer1 {
animation-name: animarContainer1;
animation-delay: 0s;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
Imagen 6
Si aplicamos la animación veremos como el container gira sobre su punto 0,0. Al mismo tiempo podremos observar como la imagen del planeta se traslada circularmente en torno al punto de origen del container. Pero pare conseguir un efecto más realista haremos que el container sea transparente.
Para hacer transparente el container añadiremos el código: background-color: rgba(0, 0, 0, 0);
#Container20 {
transform-origin: 0% 0%;
background-color: rgba(0, 0, 0, 0);
}
Imagen 7
En la imagen 7 ya podemos ver el resultado. Hemos añadido la imagen del Sol en el punto del origen del container. Y también hemos creado la animación para que el planeta haca su propia rotación.
8. Sincronizar animaciones
En esta nueva actividad vamos a crear dos animaciones sincronizadas en el tiempo. Se trata del movimiento de un coche y la rotación de sus ruedas. Crearemos un container, como en la animación anterior, donde colocaremos el coche sin ruedas que será una imagen y dos imágenes correspondientes a cada rueda. Al estar en el mismo container cuando apliquemos la animación de movimiento se desplazarán todas las imágenes. Para la rotación de ruedas realizaremos otra animación independiente.
Imagen 8
La animación se iniciará con el coche parado, y esto incluye que las ruedas no giren. Una vez se inicie el movimiento las ruedas deben girar. A la mitad el tiempo (50%), el coche debe para un 20% del tiempo y seguir su movimiento hasta el final.
El código será el siguiente:
@keyframes animarCoche {
0% {transform: translateX(0px);}
50% {transform: translateX(300px);} /* Inicio de parada del movimiento */
70% {transform: translateX(300px);} /* Fin de la pausa acabado el 70%*/
100% {transform: translateX(700px);}
}
@keyframes animarRueda{
0% { transform: rotate(0deg);}
50% { transform: rotate(180deg);} /* Inicio de parada de rotación de las ruedas*/
70% { transform: rotate(180deg);} /* Fin de la pausa acabado el 70% */
100% { transform: rotate(360deg);}
}
Y finalmente aplicamos la imagen al container y a las imágenes de las ruedas:
AddClass "Container1" "animacionCoche"
AddClass "rueda1" "animacionRueda"
AddClass "rueda2" "animacionRueda"
Podemos añadir este código en un botón o al iniciarse la aplicación.
9. Animaciones steps (paso a paso)
A veces queremos que la animación se produzca paso a paso como si diera saltos La forma más clara de ver este efecto son los movimientos de la manecilla del segundero de un reloj. Cada segundo de tiempo la aguja se posiciona paso más. Es decir el movimiento de rotación no se reliza de forma continua como podemos obervar en la Imagen 9.
Para crear esta animación usaremos la función
animation-timing-function: steps(60). Steps sería como los pasos o saltos que debe hacer la animación.
Por lo tanto para crear esta animación necesitaríamos primero de todo crear un movimeinto de rotación de 360 grados de la manecilla:
@keyframes rotacion {
from {transform: rotate(0deg); }
to {transform: rotate(360deg);}
}
Para que la imagen rote por el origen adecuado que sería la parte inferior media de la manecilla añadiríamos este código:
#Image1 {
transform-origin: 50% 100%;
}
Finalmente creamos la animación con los parámetros:
.second {
animation-name: rotacion;
animation-duration: 60s;
animation-timing-function: steps(60);
animation-iteration-count: infinite;
}
Imagen 9