Animaciones CSS
1.- Animación basada en CSS
Vamos a crear una animación que consiste en el movimiento de un objeto. Para ello vamos a insertar una imagen de un cohete en el escenario.
Insertamos una imagen (imagen 1) de tipo PNG transparente. Y en el cuadro de propiedades la damos el nombre en la propiedad id de cohete.
Situamos la imagen en la parte inferior del escenario concretamente en la coordenada X = 500, Y=480. Introducimos el siguiente código al inicio de la página.
MoveObject "cohete" 500 480
Vamos programar que al hacer clic en el cohete éste se mueva hacia la parte superior del escenario. Para ello hacemos doble clic en la imagen e insertamos este código:
AnimateObject "cohete" "500" "10" 2000 "linear" ""
Este código hará que el objeto se mueva desde su coordenada Y= 480 que es donde se encuentra inicialmente hasta su coordenada Y= 10. Como la coordenada X es la misma el movimiento será solo vertical.
Esta función tiene 6 parámetros. Los tres primeros ya los he explicado. El valor 2000 indica la duración del movimiento en milisegundos. Esto quiere decir que esta animación durará dos segundos. A menor duración mayor velocidad tendrá el objeto.
El quinto parámetro permite configurar un estilo o efecto de movimiento. Por defecto es linear que establece un movimiento uniforme. Pero si queremos podemos aplicar otros tipos de efectos como el de aceleración, desaceleración, efecto bote, elástico etc. (Imagen 3).
AnimateObject "cohete" "200" "10" 2000 "easeInQuad" ""
AnimateObject "cohete2" "400" "10" 2000 "easeOutQuad" ""
AnimateObject "cohete3" "600" "10" 2000 "easeOutElastic" ""
AnimateObject "cohete4" "800" "10" 2000 "easeOutBounce" ""
El último parámetro corresponde con una acción programada cuando se termine la animación. Y deberíamos poner el nombre de una función. Si no se pone nada, como en nuestro caso, no se tendrá en cuenta. Por ejemplo podríamos programar un mensaje saliera en la pantalla.
Encadenar animaciones
En este ejercicio crearemos una animación de un coche que hará un movimiento de ida y vuelta. Para ello tendremos que encadena dos las los animaciones.
Una forma simple de encadenar animaciones es usando la acción: Wait n... EndWait. Por ejemplo en el siguiente código programamos que una vez que terminen los dos segundos de la animación el coche se gire hacia el dado contrario de forma simétrica y realice el movimiento inverso (Imagen 4).
AnimateObject "coche" "800" "460" 2000 "" ""
Wait 2000
SetObjectStyle "coche" "transform" "scale(-1,1)"
AnimateObject "coche" "10" "460" 2000 "" ""
endWait
Imagen 1
Imagen 2
Imagen 3
Imagen 4
En la Imagen 5 podemos ver una tres animaciones encadenadas. El pájaro (gif animado) realiza el vuelo pasando por los tres puntos de colores.
El código sería este:
AnimateObject "pajaro" "197" "182" 2000 "" ""
Wait 2000
AnimateObject "pajaro" "560" "47" 2000 "" ""
EndWait
Wait 4000
AnimateObject "pajaro" "763" "345" 2000 "" ""
EndWait
En la imagen 6 podemos ver otro ejemplo. En este caso se trata de una sincronización de animaciones.
AnimateObject "excavadora" "532" "424" 4000 "linear" ""
Wait 5000
AnimateObject "roca" "70" "424" 4000 "linear" ""
AnimateObject "excavadora" "206" "424" 4000 "linear" ""
EndWait
Imagen 5
Imagen 6
En el siguiente ejemplo hemos añadido a la imagen de la escavadora un efecto de rebote: easeOutBounce
AnimateObject "excavadora1" "532" "424" 2000 "easeOutBounce" ""
Wait 3000
AnimateObject "roca1" "70" "424" 4000 "linear" ""
AnimateObject "excavadora1" "206" "424" 4000 "linear" ""
EndWait
Imagen 7
Animaciones basadas en la rotación
Para crear una animación basada en la rotación lo primero que hay que determinar es el origen por donde rotará el objeto. No es lo mismo el movimiento de rotación producido por la rotación de una manecilla de reloj que por las aspas de un molino.
Para crear este tipo animaciones crearemos objetos y les asignaremos variables donde almacenaremos las propiedades de estilo.
Vamos a crear los dos objetos necesarios para animar la manecilla.
CreateEmptyObject [mycss1]
SetVar [mycss1("transform-origin")] "bottom center"
neoSetProperties "manecilla" [mycss1] 0
CreateEmptyObject [mycss2]
SetVar [mycss2("transform")] "rotate(60deg)"
neoAnimateTo "manecilla" [mycss2] 6 0 "none" "easenone"
Como se puede observar, en el primer objeto (mycss1) establecemos el origen de la rotación y lo aplicamos.
En el segundo (mycss2) establecemos la rotación y finalmente la aplicamos con neoAnimateTo.
También podemos establecer un orden en la animaciones con neoAnimateTo . Podemos establecer que cada animación se inicie un segundo después de otra (ver imagen 9). Por ejemplo con la siguiente instrucción:
neoAnimateTo "aspa" [mycss2] 6 7 "none" "easenone"
estamos programando que el aspa del molino empiece a girar después de 7 segundos. De esta forma podemos encadenar animaciones también.
Imagen 8
Para el resto de animaciones solamente se ha de cambiar el punto de origen de la rotación.
Imagen 9
Cada animación se inicia un segundo después de la anterior.