Easing nell’animazione: ease in, ease out e curve
L’easing definisce come un valore animato accelera e rallenta tra i keyframe, invece di muoversi a una velocità costante. Un ease fa sì che il movimento inizi dolcemente, si fermi dolcemente, o entrambi — proprio come si muovono gli oggetti con peso — ed è impostato dalla curva di interpolazione tra due keyframe.
La risposta breve
L’easing controlla l’accelerazione tra i keyframe. Il movimento lineare si muove a velocità costante e si ferma bruscamente; il movimento eased accelera da un keyframe e decelera nel successivo. Poiché gli strumenti non concordano sul significato di “ease in”, è più chiaro dire avvio lento (accelerazione) o fine lenta (decelerazione). Le maniglie bezier su ogni keyframe modellano l’ease esattamente, e una maniglia tirata oltre il valore del keyframe crea un overshoot.
Perché la velocità costante appare innaturale
Gli oggetti reali hanno massa. Un’auto non raggiunge la velocità di crociera nell’istante in cui si muove, e una porta non si ferma di colpo contro il telaio. Un movimento che inizia e si ferma a piena velocità appare meccanico, senza peso o generato al computer, anche quando il pubblico non sa spiegarne il motivo.
Gli animatori Disney hanno chiamato questo principio “slow in” e “slow out” — uno dei dodici principi dell’animazione esposti in The Illusion of Life. Più disegni vicino all’inizio e alla fine di un movimento e meno al centro lo fanno accelerare e decelerare. Nei software 3D lo stesso effetto deriva dalla curva tra i keyframe piuttosto che da disegni aggiuntivi.
“Ease in” ed “ease out” hanno significati opposti
Questa è la fonte di confusione più comune, e non è colpa tua. In CSS e nelle funzioni di easing di Robert Penner, ampiamente copiate, “ease-in” significa che il movimento inizia lentamente e accelera, e “ease-out” significa che inizia velocemente e rallenta fino a fermarsi. La curva appartiene all’intero movimento tra due keyframe.
In After Effects e molti strumenti basati su keyframe, l’easing appartiene invece a un keyframe: “easing into a key” significa rallentare mentre il movimento vi arriva, e “easing out of a key” significa iniziare lentamente mentre il movimento lo lascia. Quindi un “ease in” di After Effects sull’ultimo keyframe e un “ease-out” CSS sul movimento producono la stessa decelerazione con nomi opposti. Descrivere il movimento — avvio lento, fine lenta, lento a entrambe le estremità — evita l’ambiguità.
Tipi di interpolazione e maniglie bezier
L’interpolazione lineare disegna una linea retta tra i keyframe: velocità costante e un cambiamento brusco a ogni keyframe. L’interpolazione costante, a gradini o “hold” mantiene il valore fino al keyframe successivo e poi salta, utile per il blocking, i battiti di ciglia e qualsiasi cosa che debba scattare. L’interpolazione bezier o spline disegna una curva morbida attraverso i keyframe, ed è qui che risiede l’easing.
Un keyframe bezier ha due maniglie, una che controlla la curva in arrivo al keyframe e una che controlla quella in uscita. Una maniglia piatta significa velocità zero al keyframe — un ease. Una maniglia più lunga mantiene quella lentezza per una maggiore parte del movimento. Le maniglie allineate passano attraverso il keyframe in modo fluido; le maniglie separate creano un brusco cambio di direzione, come un rimbalzo. Trascina una maniglia in modo che la curva superi il valore del keyframe e il movimento vada oltre il suo target e si assesti.
Le famiglie di easing standard
Le equazioni di easing di Penner, pubblicate nei primi anni 2000, sono diventate il vocabolario condiviso per le curve nominate: sine, quad, cubic, quart, quint, expo e circ, ciascuna in forma “in”, “out” e “in-out”, che vanno da appena percettibile (sine) a violento (expo). “Back” supera il suo target prima di assestarsi. La maggior parte degli strumenti di motion e delle librerie CSS include una versione di questo set, solitamente approssimata come curve bezier cubiche.
Elastic e bounce sono le eccezioni. Oscillano più volte all’interno di un singolo movimento, cosa che una singola bezier cubica non può fare, quindi gli strumenti li costruiscono da più keyframe o li generano proceduralmente.
Quale ease usare
Applica l’ease a entrambe le estremità per la maggior parte dei movimenti che iniziano e si fermano: una spinta della telecamera, un oggetto che scivola in posizione, una rotazione della testa. Usa una fine lenta per le cose che arrivano e si assestano, e un inizio lento per le cose che partono. Mantieni lineare per i movimenti che devono essere costanti — una ventola che gira, un nastro trasportatore, il centro di un ciclo in loop — e per i keyframe attraverso i quali il movimento dovrebbe passare direttamente. Usa “hold” per scatti, battiti di ciglia e blocking.
Easing in Mixos Studio
Seleziona un keyframe e l’intestazione della timeline offre Linear, Ease in, Ease out, Ease e Hold. Seguono la convenzione basata sui keyframe: Ease in rallenta il movimento in arrivo al keyframe, Ease out lo rallenta in uscita, ed Ease fa entrambe le cose — l’Easy Ease di After Effects. Con la timeline selezionata, F9 applica Ease, ⇧F9 Ease in e ⌘⇧F9 Ease out.
Curve… apre le famiglie di Penner da Sine a Back, ricercabili per sensazione oltre che per nome, insieme a qualsiasi curva tu abbia salvato. La modalità Curve disegna le tracce come curve con maniglie bezier che trascini direttamente, overshoot incluso. Elastic e bounce non sono volutamente nell’elenco delle curve; i generatori di spring e bounce sotto + Motion producono quel tipo di movimento.
Domande frequenti
Cosa significano ease in ed ease out?
Entrambi descrivono cambiamenti graduali di velocità, ma gli strumenti li usano in sensi opposti. In CSS e nelle funzioni di Penner, ease-in è un inizio lento ed ease-out è una fine lenta. In After Effects e altri strumenti basati su keyframe, l'easing in un keyframe rallenta il movimento all'arrivo, e l'easing out da un keyframe lo rallenta alla partenza.
Qual è la differenza tra interpolazione lineare e Bezier?
L'interpolazione lineare sposta un valore a velocità costante e cambia bruscamente a ogni keyframe. L'interpolazione Bezier disegna una curva fluida attraverso i keyframe, con handle che controllano come il movimento accelera e decelera, il che rende possibile l'easing.
Cos'è un hold key?
Un keyframe con interpolazione costante (stepped): il valore rimane esattamente dove si trova fino al keyframe successivo, poi salta. Viene usato per il blocking, i battiti di ciglia, i tagli e qualsiasi cosa che debba scattare piuttosto che muoversi gradualmente.
Come si crea un overshoot in un’animazione?
Aggiungi un keyframe oltre il target e un keyframe di assestamento dopo, oppure trascina la maniglia bezier in modo che la curva superi il valore del keyframe e ritorni. Una curva di easing in stile “back” fa la stessa cosa di un preset.
Perché la mia animazione sembra robotica?
Di solito perché è lineare: velocità costante, con avvii e arresti bruschi a ogni keyframe. Applicare l’easing agli avvii e agli arresti, e sfalsare parti di un movimento di qualche frame in modo che non si muovano tutte contemporaneamente, risolve la maggior parte del problema.
Imposta un movimento, poi prova Linear, Ease e Back sugli stessi due keyframe — la differenza è più facile da vedere che da descrivere.