Share
Anime.js è una libreria di animazioni leggera basata su JavaScript. Puoi usarlo per animare diverse proprietà CSS, attributi SVG o DOM su una pagina web. La libreria ti consente di controllare tutti gli aspetti dell'animazione e offre molti modi per specificare gli elementi che desideri scegliere come target o le proprietà che desideri animare.
Hai il pieno controllo della sequenza in cui vengono riprodotte le animazioni o di quanto le animazioni dei diversi elementi siano sincronizzate l'una rispetto all'altra. La libreria supporta tutti i browser moderni, incluso IE10+.
In questa serie di tutorial, imparerai a conoscere tutte le funzionalità di Anime.js in modo che tu possa usarli con facilità in progetti reali.
Prima di approfondire l'argomento, installiamo prima la libreria. Puoi usare entrambi npm o pergolato per eseguire l'installazione eseguendo i seguenti comandi:
npm installa animejs bower installa animejs
È anche possibile scaricare la libreria e includerla nel progetto o collegarsi direttamente all'ultima versione della libreria ospitata su una rete CDN.
Dopo aver completato con successo l'installazione, sei pronto per utilizzare questa libreria per aggiungere animazioni interessanti ai tuoi elementi. Inizieremo con le basi della libreria, concentrandoci su una particolare area alla volta.
Per creare animazioni con Anime.js, dovrai chiamare il anime () funzione e passare un oggetto con coppie chiave-valore che specificano gli elementi e le proprietà di destinazione che si desidera animare, tra le altre cose. Puoi usare il obiettivi chiave per dire ad Anime.js quali elementi vuoi animare. Questa chiave può accettare valori in diversi formati.
Selettori CSS: Puoi passare uno o più selettori CSS come valore per il obiettivi chiave.
var blue = anime (target: '.blue', translateY: 200); var redBlue = anime (target: '.red, .blue', translateY: 200); var even = anime (targets: '.square: nth-child (even)', translateY: 200); var notRed = anime (target: '.square: not (.red)', translateY: 200);
Nel primo caso, Anime.js animerà tutti gli elementi con a blu classe. Nel secondo caso, Anime.js animerà tutti gli elementi con il rosso o blu classe. Nel terzo caso, Anime.js animerà tutti i bambini pari con a piazza classe. Nell'ultimo caso, Anime.js animerà tutti gli elementi con a piazza classe che non ha un rosso classe.
Nodo DOM o NodeList: Puoi anche utilizzare un nodo DOM o NodeList come valore per obiettivi chiave. Ecco alcuni esempi di impostazione del obiettivi come nodo DOM.
Accentsconagua
var special = anime (target: document.getElementById ('special'), translateY: 200); var blue = anime (target: document.querySelector ('. blue'), translateY: 200); var redBlue = anime (target: document.querySelectorAll ('. red, .blue'), translateY: 200); var even = anime (targets: document.querySelectorAll ('. square: nth-child (even)'), translateY: 200); var notRed = anime (target: document.querySelectorAll ('. square: not (.red)'), translateY: 200);Nel primo caso, ho usato il getElementById () funzione per ottenere il nostro elemento speciale. Il querySelector () la funzione è usata per ottenere il primo elemento che ha la classe blu. Il querySelectorAll () la funzione viene utilizzata per ottenere tutti gli elementi all'interno del documento che corrispondono al gruppo specificato di selettori.
Ci sono molte altre funzioni che puoi usare per selezionare gli elementi di destinazione che desideri animare. Ad esempio, puoi ottenere tutti gli elementi con un nome di classe dato usando il getElementsByClassName () funzione. Allo stesso modo, puoi anche ottenere tutti gli elementi con un determinato nome di tag usando il getElementsByTagName () funzione.
Qualsiasi funzione che restituisce un nodo DOM o NodeList può essere utilizzata per impostare il valore di obiettivi digitare Anime.js.
Oggetto: Puoi anche utilizzare un oggetto JavaScript come valore per obiettivi chiave. La chiave di quell'oggetto viene utilizzata come identificativo e il valore viene utilizzato come un numero che deve essere animato.
È quindi possibile mostrare l'animazione all'interno di un altro elemento HTML con l'aiuto di JavaScript aggiuntivo. Ecco il codice per animare i valori di due chiavi diverse di un oggetto.
var filesScanned = count: 0, infected: 0; var scanning = anime (targets: filesScanned, count: 1000, infected: 8, round: 1, update: function () var scanCount = document.querySelector ('. scan-count'); scanCount.innerHTML = filesScanned.count ; var infectedCount = document.querySelector ('. infected-count'); infectedCount.innerHTML = filesScanned.infected;);Il codice precedente animerà il conteggio dei file scansionati da 0 a 1.000 e i file infetti contano da 0 a 8. Ricorda che puoi animare solo i valori numerici in questo modo. Cercando di animare una chiave da 'AAA' a 'BOY' si verificherà un errore.
Abbiamo anche usato una funzione di callback per il aggiornare tasto che viene richiamato su ogni fotogramma mentre l'animazione è in esecuzione. Lo abbiamo usato qui per aggiornare il conteggio dei file scansionati e infetti. Tuttavia, puoi fare un ulteriore passo avanti e mostrare agli utenti un messaggio di errore quando il numero di file infetti supera una certa soglia.
schieramento: La possibilità di specificare un array JavaScript come destinazione è utile quando devi animare un gruppo di elementi che rientrano in diverse categorie. Ad esempio, se si desidera animare un nodo DOM, un oggetto e un gruppo di altri elementi basati sui selettori CSS, è possibile farlo facilmente inserendoli tutti all'interno di un array e quindi specificando tale array come valore per il obiettivi chiave. Il seguente esempio dovrebbe renderlo più chiaro:
var multipleAnimations = anime (target: [document.querySelectorAll ('. blue'), '.red, #special'], translateY: 250);Ora che sai come specificare diversi elementi che vuoi animare, è tempo di conoscere tutte le proprietà e gli attributi che possono essere animati usando la libreria.
Proprietà CSS: Anime.js ti consente di animare molte proprietà CSS, come la larghezza, l'altezza e il colore, per diversi elementi di destinazione. I valori finali delle diverse proprietà animabili come colore di sfondo e larghezza del bordo vengono specificati utilizzando una versione del caso cammello di tale proprietà. Pertanto, il colore di sfondo diventa colore di sfondo, e la larghezza del bordo diventa larghezza del bordo. Il seguente frammento di codice mostra come animare la posizione sinistra e il colore di sfondo di un elemento di destinazione in Anime.js.
var animateLeft = anime (targets: '.square', left: '50% '); var animateBackground = anime (target: '.square', backgroundColor: '# f96');
Le proprietà possono accettare tutti i tipi di valori che avrebbero accettato se usati in normali CSS. Ad esempio, la proprietà sinistra potrebbe essere impostato su 50vh, 500px, o 25em. È anche possibile specificare il valore come numero nudo. In questo caso, il numero verrebbe convertito in un valore in pixel. Allo stesso modo, il colore di sfondo può essere specificato come valore di colore esadecimale, RGB o HSL.
Trasformazioni CSS: Puoi anche animare diverse proprietà di trasformazione CSS usando Anime.js. La traduzione lungo gli assi xey può essere ottenuta usando il translateX e translateY proprietà. Allo stesso modo, è possibile ridimensionare, inclinare o ruotare un elemento lungo un asse specifico usando il scala, storto e ruotare proprietà corrispondente a quell'asse specifico.
È possibile specificare diversi angoli in termini o gradi o in termini di turno. Il valore di 1 turno è uguale a 360 °. Questo può facilitare il calcolo quando sai quanto vuoi trasformare gli elementi in termini di rotazione completa. L'esempio seguente mostra come animare il ridimensionamento, la traslazione o la rotazione di un elemento su base individuale e tutto in una volta.
var animateScaling = anime (targets: '.square', scale: 0.8); var animateTranslation = anime (target: '.square', translateX: window.innerWidth * 0.8); var animateRotation = anime (targets: '.square', ruotare: '1turn'); var animateAll = anime (targets: '.square', scale: 0.8, translateX: window.innerWidth * 0.8, rotate: '1turn');
Attributi SVG: È possibile animare gli attributi di diversi elementi SVG utilizzando Anime.js. L'unica condizione è che il valore di tali attributi sia numerico. Questa capacità di animare diversi attributi apre la possibilità di creare effetti davvero fantastici. Dato che stai appena iniziando a conoscere Anime.js, manterremo gli esempi in questo tutorial molto semplici.
Mentre andiamo avanti, imparerai come creare animazioni più complesse. Ecco il codice per animare il cx, cy e stroke-width attributi di un cerchio. Proprio come le proprietà CSS, è necessario utilizzare una versione di caso cammello di stroke-width perché il codice funzioni.
var animateX = anime (target: '.circle', cx: window.innerWidth * 0.6); var animateStrokeWidth = anime (target: '.circle', strokeWidth: '25');
Attributi DOM: Puoi anche animare gli attributi DOM numerici proprio come hai animato gli attributi SVG. Una situazione in cui l'animazione di un attributo DOM può essere utile è l'elemento di avanzamento HTML5. Questo elemento ha due attributi, valore e max. Nel nostro esempio, animeremo l'attributo value per mostrare l'avanzamento del nostro processo di trasferimento file. Ecco il codice per animare il valore attributo.
var animateProgress = anime (target: 'progress', valore: 100, easing: 'linear');
In questo tutorial, hai imparato a conoscere tutti i modi di selezionare gli elementi di destinazione in Anime.js e come animare le diverse proprietà CSS e gli attributi ad essi correlati. A questo punto, non controlliamo nulla relativo all'animazione attuale.
JavaScript è discutibile il lingua del web. Ovviamente non è senza le sue curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, come puoi dire. 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.
Nel prossimo tutorial della serie, imparerai come controllare l'andamento, il ritardo e la durata dell'animazione per le diverse proprietà sia in gruppo che individualmente. Imparerai quindi come controllare tutti questi parametri di animazione per i singoli elementi.
.
