La guida completa all’easing dell’animazione
Che si tratti di un’animazione semplice o surreale, la credibilità è tutto. Quindi, creando movimenti nell’animazione, il pubblico si aspetta un certo grado di autenticità. L’easing nell’animazione è un metodo di transizione che modifica il movimento perché sia meno pronunciato ed evidente. Quando applichi l’easing da un programma software come After Effects, Premiere Pro e Animate, puoi controllarne l’uso tramite i fotogrammi chiave inseriti nella timeline dell’animazione. Con questa guida ti mostreremo come fare.
Cosa si intende per easing nell’animazione?
Nel contesto dell’animazione, l’easing produce un movimento naturale e strutturato. Un’animazione lineare, costruita senza easing, genera un movimento meccanico senza rallentamenti né accelerazioni. Poiché in natura non esiste una simile forma di costanza, finiamo per percepire l’innaturalità del gesto.
Nella vita reale, una volta avviati, i movimenti non mantengono la stessa velocità per tutto il tempo: partono lentamente, acquisiscono velocità e rallentano quando si arrestano.
Questo processo è come guidare un’auto: ci si muove da una posizione ferma, si prende velocità e la si mantiene per un certo periodo di tempo; poi alla fine del viaggio si rallenta fino all’arresto del veicolo.
Questi movimenti si riflettono nelle principali funzioni di easing che potresti trovare durante il lavoro di animazione. Tali funzioni rendono più strutturata la sensazione del moto.
- Ease In avvia l’animazione lentamente e velocizza il movimento all’arresto.
- Ease Out è una partenza rapida seguita da un rallentamento finale.
- Ease In Out è una combinazione di entrambe le suddette funzioni.
Come funziona l’easing?
Con l’animazione di un oggetto specifico, è necessario impostare marcatori chiamati fotogrammi chiave, per indicare il punto di inizio e quello di fine del movimento.
Un fotogramma chiave è precisamente un fotogramma molto importante che definisce il valore di tempo e consente al sistema di calcolare in che modo dovranno funzionare tutti i fotogrammi compresi tra quelli chiave.
I fotogrammi chiave in sostanza offrono istruzioni che modificano il valore per ogni animazione tra ciascun fotogramma chiave. L’easing che scegli di usare avrà un impatto sul movimento dell’oggetto, controllando la modalità di animazione tra questi fotogrammi chiave.
Quali vantaggi offre l’easing?
L’easing permette di modificare il movimento, per influenzare il modo in cui chi visualizza reagirà. Ecco alcuni aspetti positivi di cui può beneficiare la tua animazione:
- È un prodotto umano. Non esiste movimento lineare in natura. Perciò, quando lo usiamo nell’animazione, la sua qualità risulta piatta e fastidiosa, spingendo chi guarda fuori dall’esperienza. Realismo e accuratezza sono essenziali perché i movimenti dei fotogrammi chiave appaiano verosimili e credibili.
- È realistico. L’easing offre a chi guarda il tempo di elaborare ciò che succede nella scena. Assicura inoltre che l’animazione abbia un moto uniforme, il cui aspetto si presenti naturale e strutturato, forzando la sospensione dell’incredulità dello spettatore.
- È intenso. L’easing può essere usato anche per creare un effetto comico o drammatico. Ad esempio, le animazioni Ease In partono lentamente e si concludono velocemente. Pensa a Willy il Coyote mentre corre in un canyon, sospeso a mezz’aria prima di cadere improvvisamente nel baratro. Nell’animazione per computer, l’easing dovrebbe servire a generare un effetto simile.
- È personalizzabile. Puoi utilizzare una serie di effetti di easing diversi. Alcuni partono velocemente, altri lentamente. Qualche effetto rallenta alla fine. Qualunque cosa tu stia cercando di ottenere con il tuo movimento, di norma puoi creare l’effetto tramite easing.
Come realizzare l’easing con After Effects
After Effects è il programma di riferimento per gli effetti speciali e la post-produzione. Ecco come usare l’easing per l’animazione.
- Nella tua animazione aperta, sposta il cursore del tempo sul punto di inizio della timeline. I fotogrammi chiave verranno impostati su quelli lineari di base, che servono a creare una velocità costante per l’intera durata.
- Fai clic sul primo fotogramma chiave, poi fai clic con il pulsante destro e seleziona Assistente fotogramma chiave dal menu a discesa.
- Scorri fino a trovare le opzioni Regolazione automatica, Ease In automatico e Ease Out automatico.
- Selezionando una di queste opzioni si passa da un movimento lineare all’easing per il fotogramma chiave. Noterai come la forma del fotogramma chiave cambia. Ad esempio, il movimento lineare ha una forma a diamante, mentre Ease Out automatico è una freccia che punta a sinistra.
- Qui puoi trovare le giuste opzioni di easing che si adattano al movimento che vuoi produrre. Ad esempio, potresti scegliere l’opzione di Ease Out del fotogramma iniziale e di Ease In per quello finale. In questo modo si generano accelerazione e decelerazione realistiche, come si vedono in un movimento naturale.
- Fai attenzione alle differenze di tempo tra i fotogrammi chiave dal tuo pannello Timeline. Minore è l’intervallo di tempo tra i fotogrammi chiave, più veloce è il movimento, perché si deve completare il percorso prima del successivo fotogramma chiave. Se l’intervallo è maggiore, il movimento è molto più lento, perché il percorso può essere più tranquillo.
- Puoi regolare il movimento con facilità semplicemente aggiungendo fotogrammi chiave in avanti o indietro rispetto alla timeline.
- Hai anche la possibilità di usare l’icona dell’editor grafico per scoprire in che modo l’easing influisce sui tuoi fotogrammi chiave in forma grafica.
Come realizzare l’easing con Animate
Su Adobe Animate, puoi persino applicare l’easing immediatamente su più proprietà. Perciò, se hai un oggetto in movimento e in rotazione allo stesso tempo, potresti applicare frequenze diverse di easing a ciascun movimento.
Ecco come procedere:
- Nella tua animazione, seleziona un fotogramma chiave nell’intervallo di easing classico e vai nella relativa sezione nel pannello delle proprietà.
- Nel menu a discesa dell’easing, seleziona “Ogni proprietà separatamente”.
- Vedrai i campi per ciascuna proprietà. Fai clic su Classic Ease per aprire il pannello dell’easing e selezionare le relative opzioni per la proprietà.
- Puoi anche aggiungere effetti di easing personalizzati. Usa il pannello personalizzato dell’easing e il grafico per creare l’azione perfetta per il tuo fotogramma chiave. È facile trascinare e personalizzare la tua animazione easing per adattarla perfettamente.
- Ricorda che puoi sempre aggiungere effetti di easing a tutte le tue proprietà in una sola volta. Basta tornare al relativo menu a discesa e selezionare le opzioni che preferisci.
Scopri di più sulla modifica degli effetti di easing per il movimento da Animate
Ti affascina il mondo dell’animazione?
Continua a scoprirlo leggendo la guida sull’animazione per principianti.
Come realizzare l’easing con Premiere Pro
Su Premiere Pro, puoi scegliere da una gamma di opzioni di easing, come Ease In, Ease Out, Blocco, Curva Bezier automatica e Curva Bezier continua.
Bezier permette di personalizzare il grafico di easing, mentre Curva Bezier automatica contribuisce a creare una frequenza di cambio più fluida.
È facile applicare diverse funzioni di easing ai tuoi fotogrammi chiave.
- Definisci i fotogrammi chiave per la tua animazione.
- Seleziona il fotogramma chiave in questione e vai sul pannello Controllo effetti.
- Sul lato destro del pannello, fai clic sul piccolo diamante blu del fotogramma chiave. Dovrebbe essere lineare come standard.
- Fai clic con il pulsante destro e vai sul menu a discesa Interpolazione temporale.
- Seleziona l’opzione di easing preferita o usa ad esempio Bezier per personalizzare l’easing.
- Fai clic con il pulsante destro sulla timeline di ogni fotogramma chiave e scegli Mostra fotogrammi chiave clip > Movimento > Posizione: da qui puoi modificare il grafico di easing de tuoi fotogrammi chiave nella timeline. Così si creano transizioni più aspre o fluide nel tuo fotogramma chiave.
Scopri di più sull’easing e sui fotogrammi chiave su Premiere Pro
Easing: domande frequenti
Qual è lo scopo principale dell’easing?
L’easing è progettato per modificare il movimento di un’animazione al fine di creare un moto ben fatto e strutturato. L’uso dell’easing impedisce che l’animazione sembri monotona e brusca, aggiungendo fluidità al movimento che offre una finitura globale più professionale. Attutisce l’avvio e la conclusione dell’animazione per rendere questi momenti del movimento più delicati.
Cosa fa l’animazione CSS?
L’animazione CSS (Cascading Style Sheets) costituisce una serie di comandi che definiscono come appare l’animazione sulla pagina in forma di transizioni di un oggetto da una configurazione di stile CSS a un’altra. I fotogrammi chiave sono codificati in CSS, per determinare gli stati di inizio e fine dello stile di animazione e guidarli nell’intero percorso, se necessario. L’animazione CSS di solito permette di effettuare un rendering uniforme e ti offre un grande controllo su come si presenta il prodotto finale.
Quali sono i tipi di funzioni di easing su CSS?
I principali tipi di funzioni di easing su CSS sono Lineare, Ease Out, Ease In e Ease In Out. Tutte queste funzioni possono essere usate su CSS per un aspetto più naturale delle transizioni del fotogramma chiave.
Cos’è una transizione lineare su CSS?
Una transizione lineare preserva la stessa velocità per tutta l’animazione. Il tempo e il valore del fotogramma chiave progrediscono alla stessa frequenza. Questo effetto può apparire robotico o innaturale, perciò si applicano le funzioni di easing per attenuare i movimenti e renderli più autentici.
Cos’è l’effetto Ease Out in CSS?
Gli effetti Ease Out iniziano velocemente e poi rallentano. Funzionano al meglio sulle animazioni che illustrano un’interazione dell’utente, così che la velocità iniziale offra l’impressione di un tempo di reazione veloce. Questa transizione in CSS può essere utilizzata anche per le icone che arrivano sullo schermo dall’esterno, perché sembra che l’animazione si affretti.
Cos’è l’effetto Ease In in CSS?
Per “Ease In” si intende una transizione meno usata di norma, perché l’avvio lento con improvvisa conclusione può risultare sgradevole per chi guarda. Tuttavia, è utile per animare icone o immagini che devono finire fuori campo, soprattutto se l’oggetto da animare abbandona completamente la scena sullo schermo, appena prima di arrestarsi. Le transizioni Ease In devono restare brevi, perché altrimenti appaiono lente e generano impazienza nell’utente.
Cos’è l’effetto Ease In Out in CSS?
La transizione Ease In Out prende elementi da Ease In e Ease Out. Parte lentamente e accelera a metà. È l’ideale se crei un’animazione che procede in loop.