Animazioni performanti con KUTE.js Parte 1, Introduzione

KUTE.js è un motore di animazione basato su JavaScript che si concentra sulle prestazioni e sull'efficienza della memoria durante l'animazione di diversi elementi su una pagina web. Ho già scritto una serie sull'uso di Anime.js per creare animazioni basate su JavaScript. Questa volta impareremo a conoscere KUTE.js e come possiamo usarlo per animare proprietà CSS, SVG ed elementi di testo, tra le altre cose.

Installazione

Prima di immergerci in alcuni esempi, installiamo prima la libreria. KUTE.js ha un motore di base e poi ci sono plugin per animare il valore di diverse proprietà CSS, attributi SVG o testo. Puoi collegarti direttamente alla libreria da CDN popolari come cdnjs e jsDelivr.

 

Puoi anche installare KUTE.js utilizzando NPM o Bower con l'aiuto dei seguenti comandi:

npm install --save kute.js bower install --save kute.js

Una volta inclusa la libreria nei tuoi progetti, puoi iniziare a creare le tue sequenze di animazione.

Tween Objects

Quando crei la tua animazione utilizzando KUTE.js, devi definire gli oggetti interpolazione. Questi oggetti di interpolazione forniscono tutte le informazioni relative all'animazione per un dato elemento o elementi. Ciò include l'elemento stesso, le proprietà che si desidera animare, la durata dell'animazione e altri attributi come il conteggio delle ripetizioni, il ritardo o l'offset.

Puoi usare il .a() metodo o il .da A() metodo per animare un set di proprietà CSS da un valore all'altro. Il .a() metodo anima le proprietà dal loro valore predefinito o il loro valore calcolato / corrente a un valore fornito finale. Nel caso del .da A() metodo, devi fornire sia i valori di animazione iniziale che finale.

Il .a() il metodo è utile quando non si conosce il valore corrente o predefinito per la proprietà che si desidera animare. Uno dei principali svantaggi di questo metodo è che la libreria deve calcolare da sola il valore corrente di tutte le proprietà. Ciò provoca un ritardo di alcuni millisecondi dopo la chiamata .inizio() per avviare l'animazione.

Il .da A() metodo ti permette di specificare tu stesso i valori di animazione iniziale e finale. Ciò può migliorare marginalmente le prestazioni delle animazioni. Ora puoi anche specificare le unità per i valori iniziali e finali ed evitare sorprese durante il corso dell'animazione. Uno svantaggio dell'uso .da A() è che non sarà possibile impilare più proprietà di trasformazione su interpolazioni concatenate. In questi casi, dovrai usare il .a() metodo.

Ricorda che entrambi .da A() e .a() sono pensati per essere usati quando si animano i singoli elementi. Se vuoi animare più elementi contemporaneamente, dovrai usare entrambi .Allto () o .allFromTo (). Questi metodi funzionano proprio come le loro controparti degli elementi singoli e ereditano tutti i loro attributi. Hanno anche un extra compensare attributo che determina il ritardo tra l'inizio dell'animazione per elementi diversi. Questo offset è definito in millisecondi.

Ecco un esempio che anima l'opacità di tre diversi riquadri in sequenza.

Il seguente codice JavaScript viene utilizzato per creare la sequenza di animazione sopra descritta:

var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector (". start"); var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 700); startButton.addEventListener ("click", function () animateOpacity.start ();, false);

Tutte le caselle sopra hanno a scatola classe che è stata usata per selezionarli tutti usando il querySelectorAll () metodo. Il allFromTo () il metodo in KUTE.js viene utilizzato per animare l'opacità di queste caselle da 1 a 0.1 con un offset di 700 millisecondi. Come puoi vedere, l'oggetto tween non avvia l'animazione da solo. Devi chiamare il inizio() metodo per avviare l'animazione.

Controllo della riproduzione dell'animazione

Nella sezione precedente, abbiamo usato il inizio() metodo per iniziare le nostre animazioni. La libreria KUTE.js fornisce anche alcuni altri metodi che possono essere utilizzati per controllare la riproduzione dell'animazione. 

Ad esempio, puoi interrompere qualsiasi animazione attualmente in corso con l'aiuto di Stop() metodo. Tenere presente che è possibile utilizzare questo metodo per interrompere l'animazione solo degli oggetti interpolati che sono stati memorizzati in una variabile. L'animazione per qualsiasi oggetto Tween creato al volo non può essere interrotta con questo metodo.

Hai anche la possibilità di mettere in pausa un'animazione con l'aiuto di pausa() metodo. Questo è utile quando si desidera riprendere l'animazione di nuovo in un secondo momento. Puoi usare curriculum vitae() o giocare() per riprendere qualsiasi animazione che è stata messa in pausa.

L'esempio seguente è una versione aggiornata della demo precedente con tutti e quattro i metodi aggiunti.

Ecco il codice JavaScript necessario per aggiungere le funzionalità di avvio, arresto, riproduzione e pausa.

var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector (". start"); var stopButton = document.querySelector (". stop"); var pauseButton = document.querySelector (". pause"); var resumeButton = document.querySelector (". resume"); var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 700, duration: 2000); startButton.addEventListener ("click", function () animateOpacity.start ();, false); stopButton.addEventListener ("click", function () animateOpacity.stop ();, false); pauseButton.addEventListener ("click", function () animateOpacity.pause ();, false); resumeButton.addEventListener ("click", function () animateOpacity.resume ();, false); 

Ho modificato la durata dell'animazione a 2000 millisecondi. Questo ci dà abbastanza tempo per premere diversi pulsanti e vedere come influenzano la riproduzione dell'animazione.

Incatenare i Tween insieme

Puoi usare il catena() metodo per concatenare interpolazioni diverse. Una volta che diverse interpolazioni sono state incatenate, chiamano il inizio() metodo su altre interpolazioni dopo che la loro animazione è terminata. 

In questo modo, puoi riprodurre diverse animazioni in sequenza. Puoi concatenare diverse interpolazioni l'una con l'altra per riprodurle in un ciclo. Il seguente esempio dovrebbe chiarire:

var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 100, duration: 800); var animateRotation = KUTE.allFromTo (theBoxes, rotazione: 0, rotazione: 360, offset: 250, durata: 800); opacityButton.addEventListener ("click", function () animateOpacity.start ();, false); rotateButton.addEventListener ("click", function () animateRotation.start ();, false); chainButton.addEventListener ("click", function () animateOpacity.chain (animateRotation); animateOpacity.start ();, false); loopButton.addEventListener ("click", function () animateOpacity.chain (animateRotation); animateRotation.chain (animateOpacity); animateOpacity.start ();, false);

Abbiamo già avuto un tween per animare l'opacità. Ora ne abbiamo aggiunto un altro che anima la rotazione delle nostre scatole. I primi due pulsanti animano l'opacità e la rotazione uno alla volta. Il terzo pulsante attiva il concatenamento di animateOpacity con animateRotation

La catena stessa non avvia l'animazione, quindi usiamo anche il inizio() metodo per avviare l'animazione di opacità. L'ultimo pulsante viene utilizzato per concatenare entrambi i tween l'uno con l'altro. Questa volta, le animazioni continuano a giocare indefinitamente una volta che sono state avviate. Ecco una demo di CodePen che mostra tutto il codice sopra in azione:

Per comprendere appieno come funziona il concatenamento, dovrai premere i pulsanti in una sequenza specifica. Clicca sul Animare l'opacità per primo e vedrai che l'animazione di opacità viene riprodotta una sola volta e poi non succede nient'altro. Ora, premi il Animazione rotazione e vedrai che le caselle ruotano una volta e poi non succede nient'altro.

Quindi, premere il tasto Animazioni a catena e vedrai che l'animazione di opacità viene riprodotta per prima e, una volta completata l'iterazione, l'animazione di rotazione inizia a suonare da sola. Questo è successo perché l'animazione di rotazione è ora incatenata all'animazione dell'opacità. 

Ora, premi il Animare l'opacità di nuovo e vedrai che sia l'opacità che la rotazione sono animate in sequenza. Questo perché erano già stati incatenati dopo aver cliccato su Animazioni a catena.

A questo punto, premendo il tasto Animazione rotazione il pulsante animerà solo la rotazione. La ragione di questo comportamento è che abbiamo solo collegato l'animazione di rotazione all'animazione di opacità. Ciò significa che le caselle verranno ruotate ogni volta che l'opacità è animata, ma un'animazione di rotazione non significa che anche l'opacità sarà animata. 

Infine, è possibile fare clic sul Gioca in un loop pulsante. Ciò concatenerà entrambe le animazioni l'una con l'altra, e una volta che ciò accade, le animazioni continueranno a giocare in un ciclo indefinito. Questo perché la fine di un'animazione attiva l'inizio dell'altra animazione.

Pensieri finali

In questo tutorial introduttivo su KUTE.js, hai imparato le basi della libreria. Abbiamo iniziato con l'installazione e poi passati a diversi metodi che possono essere utilizzati per creare oggetti interpolati. 

Hai anche imparato come controllare la riproduzione di un'animazione e come concatenare interpolazioni diverse. Una volta compreso il concatenamento, potrai creare alcune animazioni interessanti utilizzando questa libreria.

Nel prossimo tutorial della serie, imparerai come animare diversi tipi di proprietà CSS usando KUTE.js.