Animación fotograma a fotograma
- Introducción
La animación fotograma a fotograma como su nombre indica trata de cambiar el contenido en cada forotgrama o parte de él. Así como en un una animación de movimiento solo se mueve un objeto y su contenido es el mismo, en una animación fotograma a fotograma permite crear movimientos muy precisos. Imaginemos una animación de una persona andando. En este caso necesitamos tener los fotogramas de cada movimento. Para conseguir esa ilusión de movimiento necesitamos visualizar cada fotograma en muy poco tiempo y saltar al siguiente. ¿Pero cómo se hace esto en VisualNeo? En otros programas conocidos como Adobe Flash existe una linea de tiempo donde se van creando los fotogramas. En VisualNeo usaremos la tecnologia CSS o las llamadas hojas de estilo en cascada. Y concretamente usaremos la propiedad CSS animation-timing-function: steps() que especifica cómo una animación CSS debe avanzar sobre la duración de cada ciclo
2. Animaciones steps (paso a paso)
Un ejemplo de comprender cómo funciona animation-timing-function: steps() es el movimiento de la manecilla de segundero de un reloj. Cada segundo de tiempo la aguja se posiciona un paso más. Es decir el movimiento de rotación no se reliza de forma continua como podemos obervar en la Imagen 2, sino que da saltos.
Para crear esta animación usaremos este código:
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 movimiento 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); /* Corresponde a 360/60*/
animation-iteration-count: infinite;
}
Finalmente para reproducir la animación debemos añadir al panel de propiedades de la imagen de la manecilla el nombre de la animación en el campo clase CSS.
Imagen 2
En esta animación solo sehan capturado 15 fotogramas.
3. Animación a partir de fotogramas
Para crear una animación fotograma a fotograma primero debemos tener los fotogramas diferentes que corresponde a cada imagen dispuestos en forma de tira como se puede observar en la Imagen 1.
Una vez que tengamos esta imagen en tira la insertaremos detro de un Container .
Posteriormente reduciremos la anchura del container para que se visualice solamente el primer fotograma como se muestra an la Imagen 3. Podemos hacer esto de una forma precisa con el panel de propiedades. Como son 4 fotogramas la anchura del Container será el resultado de dividir el nombre del pixels de la anchura de la imagen entre 4.
Ahora ya podemos introducir el código en la pestaña Proyecto->Propiedades de la Aplicación->Estilos.
Primero crearemos en movimiento de la imagen desplazándola a la izquierda -560px que es su anchura. El valor es negativo porque se desplazará hacia la izquierda con el objetivo de que se vayan viendo los siguientes fotogramas.
@keyframes caminar {
from {transform: translateX(0px);}
to {transform: translateX(-560px);}
}
Y finalmente creamos la animación que tendrá una duración de 1s en el que se visualizarán los cuatro fotogramas. Con la propiedad animati on-timing-function: steps(4) lo que hacemos es que en vez de hacer un scroll continuo de la imagen, lo que hará será un salto fotograma por fotograma.
.second1 {
animation-name:caminar;
animation-duration: 1s;
animation-timing-function: steps(4);
animation-iteration-count: infinite;
}
Finalmente para reproducir la animación debemos añadir al panel de propiedades de la imagen de los fotogramas el nombre de la animación en el campo clase CSS.
Imagen 3
En la imagen 4 podemos observar la animción con una duración de 4 s lo que hace que cada fotograma dure un segundo. En la imagen 5 la duración es de un segundo con lo que es posible producir la ilusión óptica de movimiento.
Imagen 4
Imagen 5