Easing personalizzato

Vai fuori strada e crea animazioni completamente personalizzate per i tuoi progetti.

A volte potresti non voler utilizzare le parole chiave di interpolazione incluse nel CSS oppure potresti utilizzare animazioni web o un framework JavaScript. In questi casi, puoi definire personalmente le curve (o equazioni) e questo ti offre un maggiore controllo sull'aspetto delle animazioni del progetto.

Riepilogo

  • L'easing personalizzato ti consente di conferire maggiore personalità ai tuoi progetti.
  • Puoi creare curve di Bézier cubiche simili alle curve di animazione predefinite (ease-out, ease-in e così via), ma con enfasi 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 esegui l'animazione con CSS, scoprirai che puoi definire curve di Bézier cubiche per definire i tempi. Infatti, le parole chiave ease, ease-in, ease-out e linear corrispondono a curve di Bézier predefinite, descritte in dettaglio nelle specifiche delle transizioni CSS e nella specifica delle animazioni web.

Queste curve di Bézier assumono quattro valori o due coppie di numeri e ciascuna 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 le coordinate (0, 0) e il punto finale ha le coordinate (1, 1); si impostano i valori X e Y dei due punti di controllo. I valori X per i 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 produce una curva molto diversa e, di conseguenza, un'idea molto diversa dell'animazione. Ad esempio, se il primo punto di controllo si trova nell'area in basso a destra, l'avvio dell'animazione sarà lento. Se si trova nell'area in alto a sinistra, si avvia rapidamente. 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, il processo sarà lento.

Per un confronto, di seguito vengono riportate due curve: una tipica di facilitazione in uscita e una personalizzata:

Curva dell'animazione di variazione in entrata e uscita.

Curva di animazione 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 notevole controllo sull'aspetto dell'animazione. Ad esempio, data la curva precedente, puoi vedere che assomiglia a una classica curva di facilitazione in uscita, ma con una parte di facilitazione in entrata abbreviata o "iniziare" e un rallentamento allungato alla fine.

Prova questo strumento per le curve di animazione e scopri in che modo la curva influisce sull'aspetto di un'animazione.

Utilizzare i framework JavaScript per un maggiore controllo

A volte hai bisogno di un controllo ancora maggiore di quello che una curva di Bézier cubica può fornire. Se volessi una sensazione di rimbalzo elastica, potresti considerare l'utilizzo di un framework JavaScript, perché questo è un effetto difficile da ottenere con CSS o con le animazioni web.

TweenMax

Un framework efficace è GreenSock's TweenMax (o TweenLite se vuoi tenere il tutto leggero), perché il suo controllo è elevato in una piccola libreria JavaScript ed è un codebase molto maturo.

Visualizzazione di un'animazione della variazione di elasticità

Per utilizzare TweenMax, includi questo script nella pagina:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Dopo aver implementato lo script, puoi chiamare TweenMax sul tuo elemento e indicare le proprietà desiderate insieme all'interpolazione desiderata. Esistono molte opzioni di easing; il codice riportato di seguito utilizza un processo di variazione elastica:

    var box = document.getElementById('my-box');
    var animationDurationInSeconds = 1.5;

    TweenMax.to(box, animationDurationInSeconds, {
      x: '100%',
      ease: 'Elastic.easeOut'
    });

La documentazione diTweenMax mette in evidenza tutte le opzioni disponibili, pertanto ti consigliamo di leggerlo.