Share
Dopo aver completato i primi tre tutorial della serie, ora dovresti essere molto a tuo agio con molte funzionalità di Anime.js. Il primo tutorial ti ha mostrato come selezionare gli elementi target. Nel secondo tutorial, hai imparato a conoscere diversi tipi di parametri che possono essere utilizzati per avere un controllo preciso sul ritardo e sulla durata delle animazioni di elementi diversi. Il terzo tutorial si è concentrato sull'imparare ad avere un maggiore controllo sui valori di una singola proprietà durante il corso dell'animazione.
In questo tutorial, verranno illustrati i diversi callback che possono essere utilizzati per eseguire una funzione in base all'avanzamento dell'animazione. Quasi tutti gli esempi delle esercitazioni precedenti utilizzavano proprietà CSS per dimostrare come funzionano diversi metodi e parametri. Questo potrebbe averti dato l'idea che la libreria sia più adatta per animare le proprietà CSS. Questa volta, avremo una sezione dedicata alla creazione di interessanti animazioni correlate a SVG in Anime.js.
Come accennato nell'introduzione, è possibile utilizzare i callback per eseguire le funzioni in base all'avanzamento dell'animazione. Esistono quattro diversi callback: inizio, correre, aggiornare, e completare. Ogni funzione di callback viene attivata in un momento specifico e ognuno accetta un oggetto di animazione come argomento.
Il inizio() la funzione viene chiamata quando l'animazione inizia effettivamente. Ciò significa che se un'animazione ha un ritardo di 800 ms, inizio() sarà chiamato solo dopo che il ritardo è finito. Puoi controllare se un'animazione ha iniziato a giocare o non la usa animationName.begin, che tornerà vero o falso rispettivamente.
Il correre callback può essere usato per eseguire una funzione in ogni fotogramma dopo che un'animazione inizia effettivamente a suonare. Se si desidera eseguire una funzione in ogni fotogramma sin dall'inizio dell'animazione indipendentemente dal suo ritardo, dovresti usare il aggiornare callback invece.
Il completare il callback è simile a inizio tranne per il fatto che viene chiamato una volta che l'animazione ha finito di suonare. Proprio come inizio, Puoi usare animationName.complete per verificare se un'animazione ha finito di giocare o meno.
Hai già visto nel primo tutorial come utilizzare il aggiornare callback durante l'animazione di valori numerici di un oggetto JavaScript. In questo tutorial, modificheremo quell'esempio e vedremo come utilizzare tutte queste callback insieme per fornire maggiori informazioni all'utente.
Accentsconagua
var filesScanned = count: 0, infected: 0; var scanCount = document.querySelector (". scan-count"); var infected = document.querySelector (". infected-count"); var scanning = anime (targets: filesScanning, autoplay: false, count: 100, infected: 8, delay: 1000, duration: 2000, easing: "linear", round: 1, update: function (anim) if (anim .ora attuale < 1000) document.querySelector(".update-cb").innerHTML = "Creating an Index… "; , begin: function() document.querySelector(".begin-cb").innerHTML = "Starting the Scan… "; , run: function() scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; , complete: function() document.querySelector(".complete-cb").innerHTML = "Scan Complete… "; );Ho intenzionalmente aggiunto qualche ritardo in questa animazione in modo che possiamo notare la differenza nei tempi dell'esecuzione di diversi callback. Il aggiornare la callback inizia ad eseguire la sua funzione non appena inizia l'istanza dell'animazione.
L'animazione attuale inizia a suonare dopo 1000 ms, ed è qui che il inizio la funzione mostra il messaggio "Avvio della scansione ..." all'utente. Il correre la funzione inizia anche ad eseguire allo stesso tempo e aggiorna i valori numerici dell'oggetto dopo ogni frame. Al termine dell'animazione, il file completare la funzione di richiamata mostra un messaggio "Scansione completata ..." all'utente.
Le funzioni di easing possono essere utilizzate per controllare il modo in cui il valore di una proprietà passa dal suo valore iniziale al suo valore finale. Queste funzioni di andamento possono essere specificate utilizzando il parametro easing, che può accettare stringhe e le coordinate della curva di Bézier personalizzate (sotto forma di un array).
Esistono 31 diverse funzioni di andamento integrate. Uno di loro è lineare, e gli altri 30 consistono in dieci diverse varianti di easeIn, easeOut, e easeInOut. Ci sono tre equazioni di andamento elastico chiamate easeInElastic, easeOutElastic, e easeInOutElastic. Puoi controllare la loro elasticità usando il elasticità parametro. Il valore di elasticità può essere ovunque tra 0 e 1000.
easeIn le equazioni accelerano il cambiamento di valore della proprietà a partire da zero. Ciò significa che il cambiamento di valore sarebbe lento all'inizio e molto veloce alla fine. Il tasso di variazione è zero all'inizio e massimo alla fine. easeOut le equazioni decelerano il cambio di valore della proprietà a partire dalla variazione massima della velocità.
Ciò significa che il cambiamento di valore sarebbe molto rapido all'inizio e molto lento alla fine. easeInOut le equazioni accelerano il cambio di velocità all'inizio e lo rallentano alla fine. Ciò significa che il tasso di cambiamento sarà lento all'inizio e alla fine e sarà più veloce nel mezzo dell'animazione. La seguente demo mostra la differenza nella velocità di cambiamento per ciascuna di queste funzioni di andamento.
È inoltre possibile aggiungere le proprie funzioni di andamento personalizzate all'elenco incorporato con l'aiuto di anime.easings. Ecco un esempio di creazione di funzioni di andamento personalizzate.
anime.easings ['tanCube'] = function (t) return Math.pow (Math.tan (t * Math.PI / 4), 3); anime.easings ['tanSqr'] = function (t) return Math.pow (Math.tan (t * Math.PI / 4), 2); var tanCubeSequence = anime (target: '.tan-cube', translateX: '75vw', durata: 2000, easing: 'tanCube', autoplay: false); var tanSqrSequence = anime (target: '.tan-sqr', translateX: '75vw', durata: 2000, easing: 'tanSqr', autoplay: false);
Tutte le animazioni relative al movimento che abbiamo creato finora hanno spostato gli elementi bersaglio in linee rette. È anche possibile in Anime.js spostare un elemento lungo un percorso SVG complesso con molte curve. Puoi controllare sia la posizione che l'angolo degli elementi animati sul percorso. Per spostare un elemento sulla coordinata x del percorso, puoi usare percorso (x). Allo stesso modo, un elemento può essere spostato secondo la coordinata y del percorso usando percorso (y).
A meno che il percorso non sia una linea retta, formerà quasi sempre un angolo rispetto alla linea di base orizzontale. Se stai ruotando qualsiasi elemento non circolare, sembrerà più naturale se l'elemento segue l'angolo del percorso. Puoi farlo impostando il ruotare proprietà uguale a percorso ( 'angolo'). Ecco il codice che anima quattro elementi con diversi valori di andamento lungo un percorso SVG.
var path = anime.path ('path'); var easings = ['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic']; var motionPath = anime (target: '.square', translateX: path ('x'), translateY: path ('y'), ruotare: path ('angle'), easing: function (el, i) return easings [i];, durata: 10000, loop: true);Puoi vedere nella seguente demo che il quadrato rosso con easeInCubic l'allentamento è più lento all'inizio e il più veloce alla fine. Allo stesso modo, il quadrato arancione con easeOutCubic è il più veloce all'inizio e il più lento alla fine.
Puoi anche animare il morphing di diverse forme SVG in un altro usando Anime.js. L'unica condizione è che entrambe le forme dovrebbero avere lo stesso numero di punti. Ciò significa che puoi trasformare i triangoli in altri triangoli e quadrilateri in altri quadrilateri. Provare a trasformarsi in un numero diseguale di punti poligonali comporterà un brusco cambiamento di forma. Ecco un esempio di trasformazione di una forma triangolare.
var morphing = anime (target: 'poligono', punti: [valore: '143 31 21 196 286 223', valore: '243 31 21 196 286 223', valore: '243 31 121 196 286 223 ', valore:' 243 31 121 196 386 223 ', valore:' 543 31 121 196 386 223 '], attenuazione:' lineare ', durata: 4000, direzione:' alternato ', loop: true );
Un altro effetto interessante che è possibile creare con SVG è il disegno a tratteggio. Tutto ciò che devi fare è dare a Anime.js il percorso che vuoi usare per il disegno a tratteggio e altri parametri che ne controllano la durata, il ritardo o l'andamento. Nella seguente demo, ho usato il completare callback per riempire il disegno a tratto dell'icona di ancoraggio Font Awesome con un colore giallo.
var lineDrawing = anime (target: 'path', strokeDashoffset: [anime.setDashoffset, 0], easing: 'easeInOutCubic', durata: 4000, completo: function (anim) document.querySelector ('path'). setAttribute ( "fill", "yellow"););Combinando la conoscenza di tutti i concetti che hai imparato fino ad ora, puoi creare disegni di linea più complessi con un controllo molto migliore sul modo in cui sono disegnati. Ecco un esempio in cui ho scritto il mio nome usando SVG.
var letterTime = 2000; var lineDrawing = anime (target: "path", strokeDashoffset: [anime.setDashoffset, 0], easing: "easeInOutCubic", durata: letterTime, delay: function (el, i) return letterTime * i;, begin: function (anim) var letters = document.querySelectorAll ("path"), i; for (i = 0; i < letters.length; ++i) letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); , update: function(anim) if (anim.currentTime >= letterTime) document.querySelector (". letter-m"). setAttribute ("fill", "# e91e63"); if (anim.currentTime> = 2 * letterTime) document.querySelector (". letter-o"). setAttribute ("fill", "# 3F51B5"); if (anim.currentTime> = 3 * letterTime) document.querySelector (". letter-n"). setAttribute ("fill", "# 8BC34A"); if (anim.currentTime> = 4 * letterTime) document.querySelector (". letter-t"). setAttribute ("fill", "# FF5722"); if (anim.currentTime> = 5 * letterTime) document.querySelector (". letter-y"). setAttribute ("fill", "# 795548"); , autoplay: false); Comincio assegnando il valore 2000 alla variabile letterTime. Questo è il tempo che voglio che Anime.js prenda mentre disegna ogni lettera del mio nome. Il ritardo proprietà utilizza il parametro indice basato su funzione per impostare un appropriato ritardo valore con l'aiuto del letterTime variabile.
L'indice della prima lettera "M" è zero, quindi Anime.js inizia a disegnarlo immediatamente. La lettera "O" ha un ritardo di 2000 ms perché è il tempo necessario per disegnare completamente la lettera "M".
Dentro il inizio callback, ho impostato il ictus valore di tutte le lettere a nero e il loro riempire valori a nessuna. In questo modo possiamo cancellare tutti i valori di colore applicati all'interno aggiornare callback in modo che le lettere possano tornare al loro stato iniziale quando vengono eseguite in loop multipli. Prova a fare clic su Scrivi il nome pulsante nella seguente demo per vedere il codice in azione.
In questo tutorial, hai appreso le diverse funzioni di callback che possono essere utilizzate per eseguire attività come l'aggiornamento del DOM o la modifica del valore di un attributo in base all'avanzamento dell'animazione. Hai anche imparato a conoscere le diverse funzioni di andamento e come crearne uno tuo. La sezione finale del tutorial si concentra sulla creazione di animazioni basate su SVG.
Dopo aver completato tutti e quattro i tutorial della serie, ora dovresti avere una conoscenza sufficiente di Anime.js per creare alcuni effetti interessanti per il tuo prossimo progetto. Se avete domande relative a questo tutorial, fatemelo sapere nei commenti.
