Share
Nel tutorial precedente della serie Anime.js, hai imparato a conoscere diversi tipi di parametri che controllano il modo in cui i diversi elementi target devono essere animati. Hai anche imparato a usare i parametri di funzione per modificare gradualmente il ritardo o la durata degli elementi.
In questo tutorial faremo un ulteriore passo avanti e impareremo come specificare i valori delle proprietà stessi usando numeri regolari, valori basati sulle funzioni e fotogrammi chiave. Imparerai anche come riprodurre animazioni in sequenza usando le timeline.
Anime.js consente di specificare i valori finali o finali per le proprietà animabili degli elementi di destinazione. Il valore iniziale o iniziale per l'animazione è il valore predefinito di tale proprietà. Qualsiasi valore specificato nel CSS può anche fungere da valore iniziale. Esistono diversi modi per specificare un valore finale.
Può anche essere un numero senza unità. In questo caso, le unità originali o predefinite della proprietà vengono utilizzate durante il calcolo di qualsiasi valore di proprietà. È inoltre possibile specificare il valore come stringa, ma la stringa deve contenere almeno un valore numerico. Esempi di valori stringa potrebbero essere 10vh, 80%, e 9.125turn.
Invece di specificare un valore assoluto, puoi anche specificare i valori delle proprietà relative al loro valore corrente. Ad esempio, puoi impostare il finale translateY valore da essere 150px superiore al valore corrente usando += 150px come valore Tenere presente che è possibile utilizzare solo addizione, moltiplicazione e sottrazione durante la specifica dei valori relativi.
Durante l'animazione dei colori, non è possibile utilizzare nomi di colori come rosso, nero e blu per impostare un valore di colore finale per l'animazione. In questi casi, l'animazione del colore non avverrà affatto e il cambiamento sarà istantaneo. L'unico modo per animare i colori è specificare i valori come cifre esadecimali o in termini di valori RGB e HSL.
Come avrai notato, non abbiamo specificato un valore iniziale per i nostri elementi di destinazione per animarli. Anime.js determina automaticamente il valore iniziale in base al nostro CSS e ai valori predefiniti di tali proprietà. Tuttavia, è possibile specificare un valore iniziale diverso dal valore predefinito per una proprietà utilizzando le matrici. Il primo elemento nell'array indica il valore iniziale e il secondo elemento indica il valore finale.
Invece di utilizzare lo stesso valore finale per tutti gli elementi di destinazione, è possibile utilizzare le funzioni per impostare valori diversi per diversi parametri. Il processo è simile alla specifica dei parametri di proprietà basati sulle funzioni.
var uniqueTranslation = anime (targets: '.square', translateY: function (el, i) return 50 * (i + 1);, autoplay: false); var randomScaling = anime (targets: '.square', scale: function (el, i) return Math.random () * 1.5 + i / 10;, autoplay: false); var randomRotation = anime (targets: '.square', ruotare: function () return anime.random (-180, 180);, autoplay: false); var randomRadius = anime (targets: '.square', borderRadius: function (el) return 20 + Math.random () * el.offsetWidth / 4;, autoplay: false); var randomAll = anime (targets: '.square', translateY: function (el, i) return 50 + 50 * i;, scale: function (el, i) return Math.random () * 1.5 + i / 10;, rotate: function () return anime.random (-180, 180);, borderRadius: function (el) return Math.random () * el.offsetWidth / 2;, duration: function ( ) return anime.random (1500, 2400); delay: function () return anime.random (0, 1000);, autoplay: false);
Per il translateY proprietà, stiamo usando l'indice dell'elemento per impostare un valore di traduzione. utilizzando 50 * (i + 1) aumenta il translateY valore per ogni elemento di 50 pixel.
L'animazione di ridimensionamento utilizza anche l'indice dell'elemento insieme al built-in Math.random () funzione per restituire un numero pseudo-casuale a virgola mobile inferiore a 1. In questo modo gli elementi vengono scalati casualmente, ma il i / 10 parte della proprietà aumenta leggermente la possibilità di elementi che si verificano alla fine con una dimensione maggiore.
All'interno del codice per l'animazione di rotazione, stiamo usando il anime.random (a, b) funzione di supporto per ottenere numeri interi casuali compresi tra -180 e 180. Questa funzione è utile per assegnare valori integrali casuali a proprietà come translateY e ruotare. L'utilizzo di questa funzione per assegnare valori di scala casuali produrrà risultati estremi.
Il valore del raggio del bordo per i diversi elementi è determinato calcolando la larghezza degli elementi target usando il EL parametro di funzione. Infine, l'ultima parte del codice assegna valori casuali a durata e ritardo anche i parametri.
Puoi vedere che l'animazione ottenuta dall'ultima parte è molto casuale. Non esiste alcuna relazione tra i valori delle diverse proprietà degli elementi o i loro valori di ritardo e durata. Nella vita reale, è più sensato usare valori che possano aggiungere un senso di direzione all'animazione.
È anche possibile animare diverse proprietà degli elementi di destinazione usando i fotogrammi chiave. Ogni keyframe è costituito da una matrice dell'oggetto proprietà. È possibile utilizzare l'oggetto per specificare il valore della proprietà, durata, ritardo e facilitando per quella parte dell'animazione. Il codice seguente crea un'animazione di traduzione basata su fotogrammi chiave.
var keyframeTranslation = anime (target: '.square', translateY: [valore: 100, durata: 500, valore: 300, durata: 1000, ritardo: 1000, valore: 40, durata: 500, ritardo : 1000], autoplay: false); var keyframeAll = anime (target: '.square', translateY: [valore: 100, durata: 500, valore: 300, durata: 1000, ritardo: 1000, valore: 40, durata: 500, ritardo : 1000], scala: [valore: 1.1, durata: 500, valore: 0.5, durata: 1000, ritardo: 1000, valore: 1, durata: 500, ritardo: 1000], ruota: [ valore: 60, durata: 500, valore: -60, durata: 1000, ritardo: 1000, valore: 75, durata: 500, ritardo: 1000], borderRadius: [valore: 10, durata: 500, valore: 50, durata: 1000, ritardo: 1000, valore: 25, durata: 500, ritardo: 1000], ritardo: funzione (el, i) return 100 * (i + 1) , autoplay: false);
È inoltre possibile animare più proprietà contemporaneamente specificando valori diversi o uguali per tutti i parametri. Nel secondo caso, il globale ritardo parametro applica un ritardo iniziale a tutti gli elementi in base al loro indice. Questo ritardo è indipendente dal ritardo applicato a ciascuna proprietà all'interno dei fotogrammi chiave.
Finora nella serie, abbiamo usato il ritardo parametro per riprodurre animazioni diverse in una sequenza specifica. Per utilizzare il ritardo per questo scopo, è necessario conoscere anche la durata dell'animazione precedente.
Con la crescente complessità della sequenza di animazione, mantenere il giusto valore di delay diventa molto noioso. Qualsiasi modifica della durata di una delle animazioni ci costringerà a ricalcolare tutti i valori di ritardo per mantenere le animazioni nella sequenza originale.
Una soluzione migliore a questo problema è l'uso delle linee temporali per controllare la sequenza di animazione. Devi usare il anime.timeline () funzione per creare una timeline in Anime.js. È anche possibile passare diversi parametri a questa funzione come oggetto. Questi parametri possono specificare la direzione in cui viene riprodotta la timeline, il numero di cicli e un riproduzione automatica parametro per determinare se l'animazione debba essere riprodotta automaticamente. Tutti questi parametri sono stati discussi in dettaglio nei parametri tutorial di questa serie.
Puoi aggiungere diverse animazioni ad una timeline usando il Inserisci() metodo. Tutte le animazioni aggiunte alla timeline verranno riprodotte nell'ordine in cui sono state aggiunte. È possibile specificare valori di offset assoluti o relativi per controllare l'ordine in cui vengono riprodotte le animazioni.
Quando vengono utilizzati i valori di offset relativi, il tempo di avvio dell'animazione corrente viene determinato in base ai tempi dell'animazione precedente. Gli offset relativi possono essere di tre tipi:
Il codice seguente mostra come creare una timeline di base e una timeline con i relativi valori di offset.
var basicTimeline = anime.timeline (direction: "alternate", loop: 2, autoplay: false); basicTimeline.add (targets: '.square', translateY: 200). add (target: '.red', translateY: 100). add (target: '.blue', translateY: 0); var offsetTimeline = anime.timeline (direction: "alternate", loop: 2, autoplay: false); offsetTimeline.add (target: '.square', translateY: 200). add (target: '.red', offset: '+ = 1000', translateY: 100). add (target: '.blue ', offset:' * = 2 ', translateY: 0);
Prova a fare clic su Timeline offset pulsante nella demo sopra. Vedrai che c'è un ritardo di 2 secondi tra la fine dell'animazione dei quadrati rossi e l'inizio dell'animazione dei quadrati blu.
Non abbiamo specificato a durata per l'animazione del quadrato rosso. Pertanto, un valore predefinito di 1000ms o 1s viene utilizzato come durata. Lo sfasamento del moltiplicatore dell'animazione quadrata blu raddoppia tale valore e ciò determina un ritardo di due secondi nell'animazione.
Quando vengono utilizzati i valori di offset assoluti, il tempo di inizio della sequenza temporale viene utilizzato come punto di riferimento. È possibile invertire la sequenza in cui le animazioni vengono riprodotte utilizzando i grandi valori di offset per le animazioni che si verificano all'inizio della timeline.
Anime.js ha una varietà di opzioni per giocare, mettere in pausa, riavviare o cercare animazioni o timeline in qualsiasi punto.
Il giocare() la funzione ci consente di avviare l'animazione dal suo stato attuale. Il pausa() funzione bloccherà l'animazione nel momento in cui la funzione è stata chiamata. Il ricomincia() la funzione avvia l'animazione dall'inizio, indipendentemente dal suo stato attuale. Il seek (value) la funzione può essere utilizzata per far avanzare l'animazione di valore numero di millisecondi.
Dovresti tenere a mente che il giocare() la funzione riprende solo l'animazione dal momento in cui è stata messa in pausa. Se l'animazione ha già raggiunto la fine, non puoi riprodurre l'animazione usando giocare(). Per riprodurre l'animazione, dovrai usare il ricomincia() funzione.
Accentsconagua
var slowAnimation = anime (target: '.square', translateY: 250, borderRadius: 50, durata: 4000, easing: 'linear', autoplay: false); document.querySelector ('. play'). onclick = slowAnimation.play; document.querySelector ('. pause'). onclick = slowAnimation.pause; document.querySelector ('. restart'). onclick = slowAnimation.restart; var seekInput = document.querySelector ('. seek'); seekInput.oninput = function () slowAnimation.seek (slowAnimation.duration * (seekInput.value / 100)); ;Nota che non stiamo usando seekInput.value per impostare un valore per la funzione di ricerca. Questo perché il valore massimo per l'input dell'intervallo è stato impostato su 100 nel markup. L'utilizzo diretto del valore per il campo di input ci consentirà di cercare solo fino a 100 ms. Moltiplicando il valore di input dell'intervallo con la durata dell'animazione assicuriamo di poter cercare l'animazione dall'inizio alla fine sul nostro cursore di intervallo.
In questo tutorial, hai imparato come animare diversi valori di proprietà come numeri, funzioni o fotogrammi chiave. Hai anche imparato a controllare e manipolare le timeline in Anime.js per controllare l'ordine in cui viene riprodotta una sequenza di animazione.
Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.
Se avete domande relative a questo tutorial, fatemelo sapere nei commenti.
