18 OTTOBRE 2023
Easing avanzato nell'animazione passo-passo di Tilda
Ora si ha una maggiore flessibilità nella personalizzazione della distensione per ogni fase dell'animazione. In precedenza erano disponibili cinque tipi di facilitazione di base: Lineare, Allungamento, Allungamento, Allungamento e Pinna elastica. Ora è possibile regolare manualmente l'attenuazione, impostare valori precisi per questa funzione e sfruttare 24 nuovi tipi di attenuazione.
Che cos'è l'Easing
L'attenuazione è una variazione della velocità di movimento di un elemento all'interno di una singola animazione, che rallenta o accelera. Conferisce proprietà fisiche a oggetti non fisici: autenticità, carattere e dinamica.

Il movimento lineare risulta il più innaturale. Immaginate che la velocità dell'elemento non cambi durante l'animazione, come se non ci fossero gravità e attrito. Un'animazione di questo tipo sembrerà artificiale e semplicemente sciatta.

Esempio di animazione senza effetto easing. La velocità dell'elemento rimane costante per tutto il movimento.

Un esempio con l'effetto di attenuazione all'inizio e alla fine dell'animazione. L'attenuazione all'inizio e alla fine è simmetrica.

Quando è utile
I diversi tipi di facilitazione e la possibilità di modificarli con le curve di Bezier consentono di sperimentare l'animazione a seconda dello scenario e di scegliere l'impostazione migliore. Ciò si rivelerà particolarmente importante per i progetti che presentano animazioni complesse e di grande effetto.
Un esempio di sito web. Per l'effetto di animazione del cerchio, si utilizza il tipo di facilitazione "Expo In Out".
Come impostare l'attenuazione
  1. Selezionate un elemento e aggiungete una fase di animazione per esso.
  2. Impostate Muovi (o qualsiasi altro parametro) e andate su Easing → Modifica.
  3. Qui è possibile selezionare il tipo di facilitazione dall'elenco, modificare la facilitazione con le curve di Bezier o impostarne i valori precisi. Di seguito è possibile eseguire il modello di animazione per questo passaggio facendo clic sull'icona di riproduzione.

L'attenuazione è personalizzata separatamente per ogni fase dell'animazione.
Impostazione del parametro Easing nell'editor Zero Block di Tilda
Dove trovare l'editor di Easing: Animazione passo-passo → Easing → Modifica.
Vedi anche
Il nuovo blocco trasforma qualsiasi blocco Zero in un pop-up.

 È ora possibile creare e modificare elementi vettoriali nell'editor Zero Block del costruttore di siti web Tilda.

Realizzato su
Tilda