Animación con capas
1.- Introducción
Cuando tenemos más de una animación se usan capas para que cada una de estas animaciones se sitúe en un nivel disitinto de profundidad en el espacio. Tambén se usan para posicionar escenarios e imágenes estáticas. Imaginemos una imagen del mar como fondo, y dos animaciones de dos barcos que navegan. Cada una de las imágenes estará en una capa diferente. La imagen de fondo tiene un nivel de profundidad 1 y las de los dos barcos respectivamente 2 y 3. A mayor número más cerca está en el plano a nosotros.
2. Situar los objetos en capas
Podemos iniciar la posición de los objetos en las capas con esta instrucción:
SetObjectStyle "NombreObjeto" "z-index" "OrdenApilamiento"
Con esta instrucción de VisualNeo lo que hacemos es aplicar una propiedad CSS: z-index, que nos indica el oeden de aplilamiento del objeto. Es decir se utiliza para ordenar los elementos que se superpongan entre sí.
En la imagen 1 tenemos tres objetos con los siguientes nombres:
paisaje, barcoBlanco, barcoNegro.
SetObjectStyle "paisaje" "z-index" "1"
SetObjectStyle "barcoBlanco" "z-index" "2"
SetObjectStyle "barcoNegro" "z-index" "3"
Este código lo podemos añadir al inicio de la página page-enter.
Imagen 1
Como podemos ver con la propiedad z-index podemos controlar qué elemento iría encima y cual debajo, como si el documento tuviera profundidad, tres dimensiones en lugar de dos.
3.- Modificar el orden de las capas en animaciones
Durante el proceso de una animación a veces es necesario cambiar la capa donde se encuentra una animación. Vamos a empezar con un ejemplo sencillo en el queuna carta de barajas se moverá y cambiará su posición de capa como se puede obsevar en la imagen 2. En esta animación podemos obervar como el as de oros va ocupando la psoición de apilamiento que tienen las que est´´an sobre ella hasta ponerse la primera.
Imagen 2
Vamos a empezar colocando las cartas en el escenario como podemos observar en la imagen 3. Una vez colocadas vamos a programar con código para que cada una tenga un número de capa. Usaremos la instrucción que ya conocemos:
SetObjectStyle "oros" "z-index" "1"
SetObjectStyle "espadas" "z-index" "2"
SetObjectStyle "copas" "z-index" "3"
SetObjectStyle "bastos" "z-index" "4"
Según este orden el as de oros estaria en el fondo y le seguría consecutivamente el as de espadas, el as de copas y el as de bastos que se viualizará en el primer plano tal como se muestra en la imagen 4.
Imagen 3
Una vez que tenemos colocadas las cartas cada una en su capa, vamos hacer una animación en la que la carta del fondo, es as de oros, se ira moviendo hacia delanta ocupando la posición de las qu tiene delante como en la imagen2.
Para ello vamos a crear la animación con esté código que podremos en la pestaña Estilos.
@keyframes animarCartas {
25% {z-index: 1;}
50% {z-index: 2;top:34px;left:53px}
75% {z-index: 3;top:65px;left:90px}
100% {z-index: 4;top:85px;left:111px}
}
Con este código dividimos el tiempo de la animación en cuatro partes (%),y en cada parte le decimos en qué capa debe estar la carta que queramos animar y en que coordenadas X,Y. Las coordenadas X e Y serán las coordenadas que teine la carta a la que se va a sustituir su capa y posición.
Una vez creada la animació ya nos queda ajustar los parámetros:
.animacionCartas {
animation-name:animarCartas;
animation-duration: 4s;
animation-iteration-count:infinite;
}
Ahora ya solo hace falta aplicar la animación a la carta del as de oros, y esto lo haremos seleccionando la imgen en el panel de propiedades y añadiendo al campo clase CSS el nombre de la animación animacionCartas
Imagen 4
4.- Animación con cambio de capas
Vamos a crear una animación en la que una de los objetos cambie de capa en el transcurso de una animación tal como podemos observar en la imagen 5.
Imagen 5
Como podemos observar inicialmente el barco negro se situa en una capa por detrás la del barco blanco. Hacia la mitad de la animación los dos barcos se paran momentanemente y el barco negro cambia su capa en un nivel de produndidad por encima del barco negro.
Ahora pasamos a crear las dos animaciones. Añadiremos el código siguiente a la pestaña Estilos. Con este código vamos hacer que barcos inicien el movimiento y se trasladen 300px, haga una pausa del 20% del tiempo de la animación y siga su movimiento hasta 700px más.
@keyframes animarBarcoBlanco {
0% {transform: translateX(0px);z-index: 2;} /* Posicionamineto en la capa 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);}
}
@keyframes animarBarcoNegro {
0% {transform: translateX(0px);z-index: 1;} /* Posicionamineto en la capa 1 */
50% {transform: translateX(300px);}
70% {transform: translateX(300px);}
100% {transform: translateX(700px);z-index: 2;} /* Posicionamineto en la capa 2 */
}
Ahora ya solo hace falta aplicar la animación a las imágenes, y esto lo haremos seleccionando las imágenes en el panel de propiedades y añadiendo al campo clase CSS el nombre de cada animación.