Esci e crea animazioni completamente personalizzate per i tuoi progetti.
A volte potresti non voler utilizzare le parole chiave di easing incluse in CSS o utilizzare animazioni web o un framework JavaScript. In questi casi, puoi generalmente definire le tue curve (o equazioni) e in questo modo avrai un ampio controllo sulla percezione delle animazioni del tuo progetto.
Riepilogo
- La transizione personalizzata ti consente di dare più personalità ai tuoi progetti.
- Puoi creare curve cubiche di Bézier simili alle curve di animazione predefinite (decrescente, crescente e così via), ma con l'accento in punti diversi.
- Utilizza JavaScript quando hai bisogno di un maggiore controllo sui tempi e sul comportamento dell'animazione, ad esempio animazioni elastiche o con rimbalzo.
Se utilizzi l'animazione con CSS, scoprirai che puoi definire curve di Bézier cubiche per definire il timing. Infatti, le parole chiave ease, ease-in, ease-out e linear corrispondono a curve di Bézier predefinite, descritte in dettaglio nella specifica delle transizioni CSS e nella specifica delle animazioni web.
Queste curve di Bézier prendono quattro valori, o due coppie di numeri, e ogni coppia descrive le coordinate X e Y dei punti di controllo di una curva di Bézier cubica. Il punto iniziale della curva di Bézier ha coordinate (0, 0) e il punto finale ha coordinate (1, 1); puoi impostare i valori X e Y dei due punti di controllo. I valori X dei due punti di controllo devono essere compresi tra 0 e 1 e il valore Y di ciascun punto di controllo può superare il limite [0, 1], anche se la specifica non è chiara di quanto.
La modifica dei valori X e Y di ciascun punto di controllo genera una curva molto diversa e, di conseguenza, un'animazione molto diversa. Ad esempio, se il primo punto di controllo si trova nell'area in basso a destra, l'animazione inizierà lentamente. Se si trova nell'area in alto a sinistra, sarà veloce ad avviarsi. Al contrario, se il secondo punto di controllo si trova nell'area in basso a destra della griglia, alla fine sarà veloce; se si trova in alto a sinistra, alla fine sarà lento.
A titolo di confronto, ecco due curve: una tipica di variazione in uscita e una personalizzata:
Visualizzare un'animazione con easing personalizzato
Il CSS per la curva personalizzata è:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
I primi due numeri sono le coordinate X e Y del primo punto di controllo, mentre i secondi due numeri sono le coordinate X e Y del secondo punto di controllo.
Creare una curva personalizzata è molto divertente e ti offre un controllo significativo sull'aspetto dell'animazione. Ad esempio, data la curva precedente, puoi vedere che la curva assomiglia a una classica curva di ease-in-out, ma con una parte accorciata di ease-in (per iniziare) e un rallentamento allungato alla fine.
Fai delle prove con questo strumento per le curve di animazione e scopri come la curva influisce sull'aspetto di un'animazione.
Utilizzare framework JavaScript per un maggiore controllo
A volte è necessario un controllo ancora maggiore di quello che può offrire una curva di Bézier cubica. Se vuoi un effetto elastico, ti consigliamo di utilizzare un framework JavaScript, perché si tratta di un effetto difficile da ottenere con CSS o animazioni web.
TweenMax
Un framework efficace è TweenMax di GreenSock (o TweenLite se vuoi mantenere le cose molto leggere), perché offre un'ampia gamma di controlli in una piccola libreria JavaScript ed è una base di codice molto matura.
Guarda un'animazione con semplicità elastica
Per utilizzare TweenMax, includi questo script nella tua pagina:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Una volta installato lo script, puoi chiamare TweenMax per l'elemento e specificare le proprietà che ti interessano, oltre a eventuali animazioni graduali. Esistono molte opzioni di easing che puoi utilizzare. Il codice seguente utilizza un ease-out elastico:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
La documentazione di TweenMax evidenzia tutte le opzioni disponibili, pertanto ti consigliamo di leggerle.