Animación
Hay tres formas de hacer que algo se mueva. Esta página te ayuda a elegir la adecuada y a configurarla.
Elegir cómo animar
| Forma | Ideal para | Dónde se configura |
|---|---|---|
| Transición | un cambio suave de un punto a otro | una duración en el paso Set state |
| Línea de tiempo | un movimiento con fotogramas clave o varios objetos que se mueven juntos | el panel Animation; la inicia el paso Play animation |
| Clip del modelo | una animación que venía con un modelo importado | el panel Animation, donde la deja la importación |
Por ejemplo:
- un botón que se desvanece o una puerta que se abre al tocarla es una transición a otro estado;
- una cinemática es una línea de tiempo;
- un personaje que camina es un clip del modelo.
Nunca animes el mismo objeto de dos formas a la vez. La línea de tiempo sobrescribe una transición sin avisar. Si una animación parece pelearse consigo misma, este es el motivo.
Transiciones
Dale una duración a un cambio y ocurrirá de forma suave, sin saltos. Los pasos Set state y Override properties tienen los dos una duración y un easing, es decir, la curva que marca cómo acelera y frena el cambio.
Algunas propiedades cambian de forma suave y las demás cambian al final de la transición. Consulta qué se anima de forma suave.
En un script, ctx.startTransition también puede repetirse y reproducirse de ida y vuelta
(yoyo).
Para la ida y vuelta hace falta repeat: 2 o más.
Pasos de animación
Los eventos inician y detienen animaciones con dos pasos:
| Paso | Qué hace |
|---|---|
| Play animation | reproduce una animación de la línea de tiempo, en cualquier objeto; tú eliges el modo de bucle, las repeticiones, la velocidad y el retardo |
| Stop animation | la detiene |
Para mover, girar, escalar, desvanecer o cambiar de color algo desde un evento, crea una animación en el panel Animation y reprodúcela con Play animation. Para un solo cambio basta con Set state con una duración.
Los proyectos creados antes también pueden tener los pasos Transformation, Opacity, Material, Bone transform y Built-in animation. Siguen funcionando en esos proyectos, pero el editor ya no los ofrece. Material, por ejemplo, mezcla el color, la opacidad, el brillo y los ajustes de superficie de los objetos con los de un material guardado, y conserva el tipo y las texturas de cada ranura.
Fotogramas clave y easing
Un fotograma clave es un valor en un momento concreto. El easing define cómo cambia el valor de un fotograma clave al siguiente.
El easing pertenece al fotograma clave al que vas, no al que dejas. Sin easing, el valor avanza en línea recta.
El easing es una curva con dos tiradores, como cubic-bezier en CSS. Los presets con nombre son
posiciones de tiradores ya preparadas: quad, quart, circular, expo y back, cada uno en versión In,
Out o InOut.
| Easing | Qué sensación da |
|---|---|
| In | empieza despacio y acelera, como algo que arranca |
| Out | llega y se asienta; la opción más natural para interfaces |
| InOut | va despacio al principio y al final; bueno para recorridos largos |
| Back | se pasa un poco del final y vuelve; tiene un toque divertido |
| Elastic | se pasa del final y oscila; tú eliges la amplitud y el periodo |
| Step | se queda quieto y salta al final; para cambiar, no para deslizar |
Si no lo tienes claro, empieza con Out.
La línea de tiempo
Usa el panel Animation cuando varias cosas tengan que moverse juntas con un mismo reloj. Cómo se trabaja en el panel se explica en panel Animation.
Una línea de tiempo tiene tres niveles:
- un preset es una animación que puedes reproducir por su nombre;
- una barra es la parte de un objeto dentro de ese preset y se coloca en una pista;
- dentro de una barra, cada propiedad tiene sus propios fotogramas clave.
Una barra también puede ser una barra de reproducción. No anima nada por sí misma: cuando el cabezal de reproducción llega a ella, inicia el preset de otro objeto. Así un personaje se mantiene sincronizado aunque cada extremidad tenga su propio preset.
- El bucle y la velocidad se transmiten a todos los presets que inicia una barra de reproducción.
- Al detener un preset, se detiene todo lo que ese preset haya iniciado.
Puedes silenciar una sola propiedad dentro de una barra. Por ejemplo, en una barra que anima la posición y la rotación puedes desactivar la rotación, y sus fotogramas clave se conservan.
La animación que trae un modelo conserva sus curvas originales. Un ciclo de caminar importado se reproduce exactamente como se creó.
Clips del modelo
Un modelo puede traer sus propios clips con nombre. Al importar el modelo, cada clip se convierte en una animación del modelo, con el nombre del clip. La encontrarás en el panel Animation, como cualquier animación que hayas creado tú.
Para reproducir un clip desde un evento, usa el paso Play animation y elige esa animación.
Unidades
- El tiempo va en segundos. Las duraciones de los cambios de estado van en milisegundos.
- La rotación va en grados en todos los sitios donde la ves.
Ninguna de las tres formas avisa cuando termina una animación. Para iniciar algo después de una animación, usa un paso Wait, then con la misma duración o controla el tiempo desde un script.
Siguiente: Estados — guarda distintos aspectos de un objeto y cambia entre ellos.