Come modificare l’easing della scala senza deformare le proporzioni di un personaggio
Per modificare l’easing della scala senza deformare un personaggio, fai in modo che ogni asse della scala segua la stessa variazione proporzionale durante tutta l’animazione. Mantieni le dimensioni iniziali e finali desiderate, quindi regola l’interpolazione tra i due valori. Controlla i fotogrammi intermedi: i soli valori agli estremi non garantiscono che il personaggio mantenga le proporzioni.
Questa guida è pensata per chi vuole rifinire l’animazione di crescita, riduzione o assestamento di un personaggio virtuale in un editor di animazione esterno. La procedura pratica usa Adobe After Effects, con un test numerico applicabile anche ad altri strumenti.
Perché modificare l’easing della scala può deformare un personaggio?
La scala controlla le dimensioni lungo ciascun asse. Quando la scala orizzontale e quella verticale usano lo stesso moltiplicatore, il personaggio mantiene le proporzioni. Se i moltiplicatori sono diversi, la forma cambia. La documentazione tecnica di MDN descrive questa distinzione come ridimensionamento uniforme e non uniforme. MDN: funzione CSS scale()
L’easing controlla l’andamento di un valore animato tra i fotogrammi chiave. Supponiamo che entrambi gli assi partano dall’80% e arrivino al 100%. Se la scala orizzontale raggiunge il 96% mentre quella verticale è ancora all’88%, il personaggio diventa temporaneamente più largo rispetto alla sua altezza. I valori agli estremi possono essere corretti, mentre la transizione allunga visibilmente la figura.
Per un personaggio inizialmente non deformato, mantenere uguali i valori di scala X e Y durante tutta la transizione ne preserva le proporzioni. Più in generale, mantieni il rapporto di riferimento approvato: se un asset preparato parte intenzionalmente da valori di scala diversi, moltiplicali entrambi per lo stesso fattore variabile. Non sostituire automaticamente questo riferimento con valori uguali.
Cosa controllare prima di modificare la curva?
Salva una copia di lavoro e individua la trasformazione che controlla l’intero personaggio. Per questa procedura, parti da un singolo livello 2D del personaggio, il cui aspetto sia già corretto alla dimensione di riferimento. Se il disegno è composto da parti separate, prima definisci una trasformazione condivisa per la variazione complessiva delle dimensioni; altrimenti, modificando solo il corpo potresti cambiarne le dimensioni rispetto al viso o agli accessori.
In After Effects, seleziona il livello del personaggio e premi S per visualizzare Scala. Quando inserisci variazioni proporzionali delle dimensioni, attiva Vincola proporzioni, l’icona accanto ai valori della scala. Adobe documenta questo controllo specificamente per le modifiche collegate della scala. Adobe: Regolare le proprietà dei livelli in After Effects
Prima di modificare qualsiasi valore, annota i valori iniziali e finali approvati e i tempi dei fotogrammi chiave. Controlla anche gli eventuali fotogrammi intermedi già presenti. Considera il controllo di collegamento uno strumento di modifica e verifica i valori effettivi durante tutta l’animazione, senza presumere che l’attivazione abbia corretto le modifiche precedenti.
Scegli il punto di origine della crescita prima di rifinire i tempi. In After Effects, la scala si modifica attorno al punto di ancoraggio del livello. Un punto di ancoraggio centrale è adatto a un’espansione attorno al centro; uno in basso al centro può essere indicato quando il personaggio deve sembrare appoggiato a terra mentre cresce. Adobe: Punti di ancoraggio dei livelli
Quale grafico usare per modificare l’easing?
Usa il Grafico dei valori per controllare le dimensioni e il Grafico della velocità per definire la rapidità con cui cambiano. Adobe definisce il grafico dei valori come i valori delle proprietà nel tempo e il grafico della velocità come il loro tasso di variazione. Seleziona esplicitamente il grafico dalle opzioni dell’Editor grafico, senza affidarti alla visualizzazione predefinita. Adobe: Nozioni di base sull’animazione in After Effects
Nel Grafico dei valori, esamina insieme tutti i componenti rilevanti della scala. Se i valori di riferimento sono uguali, le curve dovrebbero sovrapporsi durante tutta l’animazione con scala uniforme. Una distanza tra loro è un segnale utile per controllare il fotogramma corrispondente. Se i valori di riferimento approvati sono diversi, confronta le variazioni proporzionali invece di aspettarti che le curve si sovrappongano.
Usa il Grafico della velocità se vuoi modificare l’accelerazione o l’assestamento mantenendo invariate le dimensioni impostate nei fotogrammi chiave. Dopo ogni modifica significativa, torna al Grafico dei valori. In questo modo puoi fare due verifiche distinte: che i tempi funzionino e che il rapporto tra le dimensioni rimanga corretto.
Come modificare l’easing della scala in After Effects?
Prova questo esempio controllato: un personaggio 2D con proporzioni corrette cresce dall’80%, 80% al 100%, 100% in 12 fotogrammi. Sono impostazioni indicative, non una durata o un intervallo di dimensioni obbligatori.
- Seleziona il livello del personaggio, visualizza Scala e attiva Vincola proporzioni.
- Imposta il primo fotogramma chiave di Scala su 80%, 80% e il secondo, 12 fotogrammi dopo, su 100%, 100%.
- Seleziona entrambi i fotogrammi chiave di Scala e applica Animazione > Assistente fotogrammi chiave > Dissolvenza graduale.
- Apri l’Editor grafico e scegli Modifica grafico della velocità.
- Seleziona insieme le chiavi della scala. Regola i componenti pertinenti in modo coerente, con piccoli ritocchi alle maniglie.
- Passa a Modifica grafico dei valori e controlla i valori degli assi tra le chiavi.
Dissolvenza graduale fornisce una transizione iniziale con velocità zero nei fotogrammi chiave selezionati. Per modifiche più precise, usa Animazione > Velocità fotogramma chiave per intervenire sulla velocità in entrata o in uscita e sull’influenza. Adobe spiega che spostando orizzontalmente le maniglie della velocità si modifica la loro influenza sulle chiavi vicine. Adobe: Applicare e controllare le variazioni di velocità in After Effects
Per questo esempio, prova un ingrandimento rapido seguito da un assestamento più lungo. Regola l’influenza in entrata sulla chiave finale, visualizza l’anteprima e confrontala con l’originale. Durante questa fase, mantieni fisse le dimensioni agli estremi e la durata di 12 fotogrammi, così potrai valutare l’effetto della sola modifica all’easing.
Se il personaggio si allunga dopo una modifica, annullala e controlla quali componenti erano selezionati. Prima di continuare, ricontrolla sia i valori intermedi sia quelli agli estremi. Il tutorial di Adobe sull’Editor grafico mostra come selezionare le chiavi, visualizzarne le maniglie, modificare il Grafico della velocità e visualizzare l’anteprima del risultato. Adobe: Creare movimenti dinamici tra i fotogrammi chiave con l’Editor grafico
Come verificare le proporzioni con i valori numerici?
Usa un test delle variazioni proporzionali quando è difficile confrontare le curve. A un fotogramma a scelta, dividi la scala attuale di ciascun asse per il suo valore di riferimento approvato. Per una variazione uniforme delle dimensioni, i risultati dovrebbero coincidere. Il test deriva direttamente dall’applicazione dello stesso moltiplicatore a entrambe le dimensioni.
| Stato | Scala X | Scala Y | X ÷ valore di riferimento X | Y ÷ valore di riferimento Y | Interpretazione |
|---|---|---|---|---|---|
| Valori di riferimento approvati | 80% | 80% | 1.00 | 1.00 | Forma di riferimento |
| Fotogramma intermedio corretto | 92% | 92% | 1.15 | 1.15 | Proporzioni mantenute |
| Fotogramma intermedio deformato | 96% | 88% | 1.20 | 1.10 | La crescita orizzontale è maggiore |
| Estremi approvati | 100% | 100% | 1.25 | 1.25 | Proporzioni di riferimento ripristinate |
Nell’esempio deformato, il rapporto tra larghezza e altezza è moltiplicato per 96 ÷ 88 ≈ 1.091. Il personaggio risulta quindi circa il 9,1% più largo rispetto alla sua altezza rispetto ai valori di riferimento. Questi valori illustrano il calcolo e non sono misurazioni di un’animazione specifica.
Con valori di riferimento intenzionalmente diversi, pari a 120% e 100%, un ingrandimento uniforme di 1.10 produce 132% e 110%. Entrambi gli assi sono aumentati del 10%, quindi l’aspetto approvato viene mantenuto. Modificare il valore finale in 132%, 132% cambierebbe le proporzioni esistenti.
E se il personaggio continua a sembrare sbagliato?
Prima di intervenire di nuovo sull’easing, individua il sintomo visibile. Metti in pausa un fotogramma per distinguere un cambiamento di forma da uno spostamento di posizione o da una variazione dei dettagli dell’immagine.
| Sintomo | Verifica successiva |
|---|---|
| Larghezza e altezza divergono durante la transizione | Confronta i valori degli assi, le chiavi intermedie e le maniglie delle curve in quel momento. |
| L’intero personaggio si sposta mentre cresce | Controlla il punto di ancoraggio e l’animazione di Posizione. |
| Cambiano solo le dimensioni relative di una parte del personaggio | Controlla la trasformazione di quella parte e la trasformazione condivisa del personaggio. |
| Prima di assestarsi il personaggio diventa più grande del previsto | Controlla nel Grafico dei valori se le dimensioni superano il valore obiettivo. |
| La sagoma mantiene le proporzioni, ma i bordi diventano a blocchi | Controlla la risoluzione del disegno originale e l’entità dell’ingrandimento. |
Un temporaneo superamento delle dimensioni può mantenere le proporzioni, se entrambi gli assi aumentano oltre il valore finale nella stessa misura. Valuta separatamente se quella dimensione maggiore deve comparire nell’animazione. Se il brief richiede una semplice crescita seguita da un arresto, mantieni i valori della scala entro l’intervallo scelto tra inizio e fine.
L’ingrandimento di un’immagine raster può cambiarne l’aspetto senza alterarne le proporzioni. Adobe osserva che ingrandire notevolmente i livelli raster può produrre pixel a blocchi, mentre ridurli può renderli più sfumati. Modificare l’easing non risolverà questo problema dei dettagli originali. Adobe: Ridimensionare o capovolgere un livello
Come verificare l’animazione della scala completata?
Esamina il fotogramma iniziale, diversi fotogrammi intermedi, quello con le dimensioni massime e il fotogramma finale. Controlla più fotogrammi nei punti in cui la scala cambia più rapidamente o la forma sembra variare. I fotogrammi campionati aiutano a individuare i problemi; esaminare le curve complete permette di cogliere le differenze tra un campione e l’altro.
Poi visualizza l’anteprima alla velocità di riproduzione desiderata. Il tutorial di Adobe sull’Editor grafico consiglia di controllare il pannello Info per verificare se l’anteprima viene riprodotta in tempo reale, perché un’anteprima incompleta può rendere più difficile valutare i tempi. Adobe: Visualizzare l’anteprima e regolare l’animazione nell’Editor grafico
Concludi quando il personaggio raggiunge le dimensioni desiderate, mantiene le proporzioni approvate durante tutta la transizione e accelera e si assesta come previsto. Usa un unico moltiplicatore condiviso per la scala come regola di riferimento, controlla i tempi con i grafici e verifica la forma nei fotogrammi intermedi prima di approvare la modifica.