Animación
Hay cuatro formas de hacer que algo se mueva. Son herramientas realmente distintas, no capas de una misma cosa, así que el primer trabajo es elegir la correcta.
| Forma | Mejor para | Se configura en |
|---|---|---|
| Transición | un cambio suave de aquí a allá | una duración en un paso o un state |
| Paso de animación | un movimiento reutilizable enganchado a un evento | un paso dentro de un evento |
| Línea de tiempo | coreografía: varios objetos, varias pistas, un reloj | el Animation Controller |
| Clip de modelo | animación que vino con un modelo importado | los ajustes del propio modelo |
Una regla tosca: un botón que se desvanece es una transición, una puerta que se abre al tocarla es un paso de animación, una cinemática es la línea de tiempo, y un personaje caminando es un clip de modelo.
Nunca animes el mismo objeto de dos maneras a la vez. La línea de tiempo escribe en sus objetos en cada fotograma y sobrescribirá en silencio una transición. Si una animación parece pelear consigo misma, es por esto.
Transiciones
Dale una duración a un cambio y se interpolará en vez de saltar. Eso vale para un cambio de state con duración y para un paso de evento con duración.
Una transición tiene duración, easing y, opcionalmente, un número de repeticiones y modo de ida y vuelta. Lo que puede interpolarse está en qué se anima con suavidad; todo lo demás cambia al final.
El modo de ida y vuelta empieza en 2. Así los proyectos antiguos no se ponen a latir de repente.
Pasos de animación
Un paso de animación mueve, rota, escala o desvanece aquello a lo que apuntes.
Dale un único destino y llegará suavemente. Dale dos o más keyframes y reproducirá la curva entera.
| Paso | Anima |
|---|---|
| Transformación | posición, rotación, escala |
| Opacidad | aparecer y desvanecerse |
| Transformación de hueso | un hueso concreto |
| Material | copia el aspecto de un material guardado sobre tus destinos |
| Reproducir / detener animación | arranca o detiene un preset de la línea de tiempo |
Keyframes y easing
Un keyframe es un instante y un valor.
No al que dejas. Pon el easing en el keyframe de destino. Sin easing hay una línea recta.
El easing es una curva con dos tiradores, igual que el cubic-bezier de CSS. Los preajustes con
nombre —quad, quart, circular, expo, back, cada uno en In, Out o InOut— no son más que posiciones
útiles de esos tiradores.
| Easing | Se siente como |
|---|---|
| In | empezar despacio y coger velocidad: algo que arranca |
| Out | llegar y asentarse: lo más natural para una interfaz |
| InOut | suavizar en ambos extremos: bien para desplazamientos largos |
| Back | pasarse un poco y volver: juguetón |
| Elastic | pasarse y oscilar, con su propia amplitud y periodo |
| Step | mantenerse y saltar al final: para conmutar, no para deslizar |
Si dudas, Out es casi siempre la primera apuesta correcta.
La línea de tiempo
El Animation Controller es para coreografía: varias cosas moviéndose juntas en un mismo reloj.
Su estructura 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 ella, situada en una pista;
- dentro de una barra, cada propiedad tiene sus propios keyframes.
Una barra también puede ser una barra de reproducción: en vez de animar nada por sí misma, arranca el preset de otro objeto cuando el cabezal llega a ella. Así se mantiene sincronizado un personaje cuyos miembros son presets separados. El bucle y la velocidad pasan a todo lo que arranque, y detener un preset detiene todo lo que él lanzó.
Las propiedades individuales dentro de una barra se pueden silenciar, así que una barra que anima posición y rotación puede tener la rotación apagada sin perder los keyframes.
La animación que llega con un modelo no se vuelve a aproximar, así que un ciclo de caminar importado se reproduce exactamente como lo creó el artista.
Clips de modelo
Un modelo trae sus propios clips con nombre. Elige uno y luego define la velocidad, el bucle (una vez, un número de veces o indefinidamente) y un fotograma de inicio, contado a 30 fotogramas por segundo sea cual sea la cadencia del original.
Cambiar el clip o el fotograma de inicio rebobina. Pausar conserva el tiempo actual en vez de reiniciarlo.
Unidades, y una cosa que falta
- el tiempo en segundos (las duraciones de los cambios de state van en milisegundos);
- la rotación en grados en todos los sitios donde la ves;
- los fotogramas de inicio contados a 30 fps.
Ninguno de los cuatro mecanismos lo ofrece. Para encadenar algo tras una animación, usa un paso de espera de la misma duración, o lleva la cuenta del tiempo transcurrido en un script.
Siguiente: States — instantáneas con nombre de un objeto.