Share
Nel primo tutorial della serie Anime.js, hai imparato diversi modi di specificare gli elementi target che desideri animare e i tipi di proprietà CSS e attributi DOM che possono essere animati. Le animazioni del tutorial precedente erano molto semplici. Tutti gli elementi bersaglio stavano semplicemente spostando una certa distanza o cambiando il raggio del bordo a una velocità fissa.
A volte, potrebbe essere necessario animare gli elementi di destinazione in modo più ritmico. Ad esempio, potresti avere dieci diversi elementi che vuoi spostare da sinistra a destra con un ritardo di 500 ms tra l'inizio dell'animazione per ciascun elemento. Allo stesso modo, potresti voler aumentare o diminuire la durata dell'animazione per ciascun elemento in base alla sua posizione.
In questo tutorial, imparerai come usare Anime.js per programmare correttamente l'animazione di elementi diversi usando parametri specifici. Ciò ti consentirà di controllare l'ordine in cui viene riprodotta una sequenza di animazione per i singoli elementi o tutti gli elementi.
Questi parametri consentono di controllare la durata, il ritardo e l'attenuazione delle singole proprietà o di un gruppo di proprietà contemporaneamente. Il durata e ritardo i parametri sono specificati in millisecondi. Il valore predefinito per la durata è 1000ms o 1s.
Ciò significa che, se non diversamente specificato, qualsiasi animazione applicata a un elemento verrà riprodotta per 1 secondo. Il ritardo parametro specifica la quantità di tempo che l'animazione impiega per iniziare una volta che l'hai già attivata. Il valore predefinito per il ritardo è 0. Ciò significa che le animazioni inizieranno non appena vengono attivate.
Puoi usare il facilitando parametro per controllare la velocità con cui viene riprodotta un'animazione per la durata in cui è attiva. Alcune animazioni iniziano lentamente, prendono ritmo nel mezzo e poi rallentano di nuovo alla fine. Altri iniziano con un buon ritmo e poi rallentano per il resto del tempo.
Tuttavia, in tutti i casi, l'animazione viene sempre completata entro il tempo specificato utilizzando durata parametro. Anime.js offre molte funzioni di andamento che puoi applicare direttamente ai tuoi elementi usando solo i loro nomi. Per alcune funzioni di andamento, puoi anche impostare un valore per elasticità parametro per controllare quanto il valore di un elemento rimbalza avanti e indietro come una molla.
Imparerai di più sulle diverse funzioni di andamento nel tutorial finale della serie. Il seguente frammento di codice mostra come applicare tutti questi parametri a diverse animazioni.
var slowAnimation = anime (target: '.square', translateY: 250, borderRadius: 50, duration: 4000); var delayAnimation = anime (target: '.square', translateY: 250, borderRadius: 50, delay: 800); var cubicAnimation = anime (targets: '.square', translateY: 250, borderRadius: 50, duration: 1200, easing: 'easeInOutCubic');
Come puoi vedere, questi parametri possono essere usati indipendentemente da altri parametri o in combinazione con essi. Il cubicAnimation ha entrambi durata e facilitando parametro applicato ad esso. Se la durata non fosse stata specificata, l'animazione sarebbe stata eseguita per 1 secondo. Ora, verrà eseguito per 1.200 millisecondi o 1.2 secondi.
Una delle principali limitazioni dei parametri di proprietà nell'esempio precedente era che tutte le animazioni dell'elemento di destinazione avranno lo stesso durata, ritardo e facilitando valori.
Questo può o non può essere il comportamento desiderato. Ad esempio, invece di tradurre e modificare il raggio del bordo dell'elemento di destinazione nello stesso momento, potresti prima tradurre l'elemento di destinazione e quindi animare il raggio del suo bordo. Anime.js ti permette di specificare diversi valori per il durata, ritardo, facilitando e elasticità parametri per le singole proprietà. Il seguente codice e demo dovrebbero renderlo più chiaro.
var indiParam = anime (target: '.square', translateY: valore: 250, ruota: valore: '2.125turn', backgroundColor: valore: 'rgb (255,0,0)', durata: 400, delay: 1500, easing: 'linear', durata: 1500);
Nel codice precedente, tutte le proprietà che vogliamo animare hanno valori diversi. L'animazione del colore di sfondo ha una durata di 400 ms, mentre le animazioni di rotazione e traduzione utilizzano il valore di durata globale di 1500 ms.
L'animazione del colore di sfondo ha anche un ritardo, quindi ogni cambiamento nel colore inizia solo dopo che sono passati 1500ms. Il ruotare e translateY proprietà utilizzano il valore predefinito per ritardo e facilitando parametri perché non abbiamo fornito né un valore locale né un valore globale per loro.
I parametri basati su proprietà sono utili quando si desidera modificare l'ordine e la durata per l'animazione di singole proprietà. Tuttavia, lo stesso durata e ritardo sarà comunque applicato per le proprietà individuali su tutti gli elementi di destinazione. I parametri basati sulle funzioni consentono di specificare separatamente il durata, ritardo, elasticità e facilitando per diversi elementi target in modo compatto.
In questo caso, si impostano i valori di diversi parametri utilizzando le funzioni anziché i numeri. Queste funzioni accettano tre parametri: bersaglio, indice, e targetCount. Il bersaglio parametro memorizza il riferimento all'elemento di destinazione corrente. Il indice parametro memorizza l'indice o la posizione dell'elemento di destinazione corrente. Il targetCount parametro memorizza il numero totale di elementi di destinazione.
Il bersaglio parametro è utile quando i valori di animazione devono essere impostati in base ad alcuni attributi dell'elemento di destinazione. Ad esempio, è possibile memorizzare il file ritardo, durata o facilitando valori per un elemento di destinazione negli attributi dei dati e quindi accedervi in seguito.
Allo stesso modo, è possibile accedere al colore di sfondo di un elemento di destinazione e quindi manipolarlo per impostare un valore di colore unico finale per i singoli elementi. In questo modo, è possibile animare tutti gli elementi per avere un colore di sfondo più scuro del 20% rispetto al colore corrente.
Il indice parametro ti dà la posizione del target corrente nella nostra lista di elementi di destinazione. Puoi usarlo per cambiare gradualmente il valore di parametri come durata e ritardo per elementi diversi.
Ciò è generalmente utile quando si desidera impostare i valori in ordine crescente. Puoi anche sottrarre il indice dal targetCount per impostare i valori in ordine decrescente. Il seguente frammento di codice utilizza entrambi questi parametri per specificare i valori in ordine ascendente e discendente.
var delaySequence = anime (target: '.square', translateY: 250, delay: function (target, index) return index * 200;); var delaySequenceR = anime (target: '.square', translateY: 250, delay: function (target, index, targetCount) return (targetCount - index) * 200;);
Il seguente codice imposta un diverso facilitando valore per ogni elemento target utilizzando il indice parametro.
var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic']; var easeInSequence = anime (target: '.square', translateY: 250, durata: 2000, easing: function (target, index) return easeInValues [index];, autoplay: false);
Quest'ultima serie di parametri consente di specificare il numero di volte in cui un'animazione deve essere riprodotta e la direzione in cui deve essere riprodotta. È possibile specificare il numero di volte in cui un'animazione deve essere riprodotta utilizzando il ciclo continuo parametro. C'è anche un riproduzione automatica parametro che può essere impostato su vero o falso. Il suo valore predefinito è vero, ma puoi impedire alle animazioni di avviarsi da sole impostandole falso.
Il direzione parametro controlla la direzione in cui viene riprodotta l'animazione. Può avere tre valori: normale, inverso, e alternato. Il valore predefinito è normale, che mantiene l'animazione normalmente in funzione dai valori iniziali ai valori finali. Una volta che gli elementi target raggiungono il valore finale, se il ciclo continuo il valore è maggiore di 1, gli elementi target tornano bruscamente ai valori di inizio e quindi ricominciano l'animazione.
Quando il direzione è impostato per inverso e il ciclo continuo il valore è maggiore di 1, l'animazione viene invertita. In altre parole, gli elementi target iniziano l'animazione dal loro stato finale e tornano indietro per raggiungere lo stato iniziale. Una volta che si trovano nello stato iniziale, gli elementi tornano allo stato finale e quindi ricominciano l'animazione inversa. Il alternato il valore della direzione cambia la direzione dell'animazione dopo ogni ciclo.
var normalLoop = anime (target: '.square', translateY: 250, delay: function (target, index) return index * 200;, loop: 4, easing: 'easeInSine', autoplay: false);
Nella demo seguente, ho impostato il numero di loop su quattro in modo da poter facilmente notare la differenza nell'animazione degli elementi nelle diverse modalità.
In questo tutorial, hai imparato a conoscere diversi tipi di parametri che possono essere utilizzati per controllare l'animazione degli elementi di destinazione in Anime.js. I parametri di proprietà vengono utilizzati per controllare l'animazione delle singole proprietà.
Puoi usarli per controllare la sequenza in cui viene riprodotta l'animazione per i singoli elementi. I parametri della funzione consentono di controllare il tempo e la velocità dell'animazione per i singoli elementi rispetto all'intero gruppo. I parametri di animazione ti consentono di controllare come viene riprodotta l'animazione stessa per elementi diversi.
Se avete domande relative a questo tutorial, fatemelo sapere nei commenti.
Accentsconagua