Animazioni CSS3 e il nuovo metodo javascript Animate(). Creazione di animazioni in JavaScript Animazione in giochi JavaScript già pronti

Ciao! In questo tutorial esamineremo le animazioni in JavaScript. L'animazione JavaScript viene utilizzata laddove non è adatta.

Ad esempio, l'animazione lungo una traiettoria complessa, con una speciale funzione di timing che va oltre le curve di Bezier, su tela. Viene utilizzato anche per l'animazione nelle versioni precedenti di IE. Anche se va detto che per risparmiare risorse, soprattutto sui dispositivi mobili, è preferibile utilizzare le animazioni CSS.

funzione setInterval

Per prima cosa definiamo l'animazione. Quindi, da un punto di vista HTML/CSS, l'animazione è un cambiamento graduale nello stile di un elemento DOM. Ad esempio, aumentando la coordinata style.left da 0px a 100px si sposta l'elemento a sinistra.

Se aumenti la proprietà sinistra da 0 a 100 utilizzando il metodo, apportando 50 modifiche al secondo, sembrerà un movimento fluido. Lo stesso principio dell'industria cinematografica: per l'animazione sono sufficienti 24 o più chiamate setInterval al secondo.

Il codice dell'animazione è simile al seguente:

Var fps = 50; // 50 fps var timer = setInterval(function() ( if (time up) clearInterval(timer); altrimenti aumenta leggermente a sinistra), 1000 / fps)

Ecco un esempio più completo del codice di animazione:

Var inizio = Date.now(); // salva l'ora di inizio var timer = setInterval(function() ( // calcola quanto tempo è trascorso dall'inizio dell'animazione var timePass = Date.now() - start; if (timePassed >= 2000) ( clearInterval( timer); // termina dopo 2 secondi return; ) // disegna lo stato dell'animazione corrispondente al tempo timePass draw(timePassed), 20); // mentre timePassed va da 0 a 2000 // left assume valori da 0 a 400px funzione draw(timePass) ( train.style.left = timePass / 5 + "px"; )

requestAnimationFrame

Se hai più di un setInterval di questo tipo, ma diversi in punti diversi nel codice, il browser deve funzionare con la pagina più di una volta negli stessi 20 ms. Ma oltre a setInterval, ci sono altre azioni, ad esempio lo scorrimento della pagina, che deve anche essere disegnata.

Se tutte le azioni di ridisegno vengono eseguite in modo indipendente, verrà eseguito molto lavoro doppio.

È molto meglio dal punto di vista delle prestazioni raggruppare tutti i ridisegni in uno solo ed eseguirli centralmente, tutti insieme.

A questo scopo, i framework JavaScript che supportano l'animazione hanno un unico timer:

SetInterval(function() ( /* disegna tutte le animazioni */ ), 20);

Tutte le animazioni lanciate da tale framework vengono aggiunte all'elenco comune globale e una volta ogni 20 ms un singolo timer le controlla, avvia quelle correnti ed elimina quelle completate.
I browser moderni, ad eccezione di IE9-, supportano lo standard Animation timing, che rappresenta un ulteriore passo in questa direzione. Ti consente di sincronizzare tutte le animazioni con i meccanismi di aggiornamento della pagina integrati. Cioè, non verranno raggruppate solo le nostre animazioni, ma anche le animazioni CSS e altri ridisegni del browser.

In questo caso, l'acceleratore grafico verrà utilizzato nel modo più efficiente possibile e verrà eliminata l'elaborazione ripetuta delle stesse sezioni della pagina. Ciò significa che il carico della CPU sarà inferiore e l'animazione stessa diventerà più fluida.

A questo scopo viene utilizzata la funzione requestAnimationFrame.

Sintassi della funzione:

Var requestId = requestAnimationFrame(callback)

Tale chiamata pianifica l'esecuzione della funzione di callback nel prossimo futuro, quando il browser riterrà possibile eseguire l'animazione.
Se pianifichi qualche tipo di disegno nel callback, verrà raggruppato con altri requestAnimationFrames e con i ridisegni interni del browser.
Il valore restituito in requestId è necessario per annullare l'avvio:

// annulla l'esecuzione pianificata sopra callback cancelAnimationFrame(requestId);

La funzione di callback riceve un argomento: il tempo trascorso dall'inizio del caricamento della pagina, il risultato della chiamata performance.now().

Di norma, la richiamata viene avviata molto presto. Se il processore grande carico oppure la batteria del portatile è quasi scarica, quindi meno spesso.

Se esegui questo codice, vedrai degli intervalli tra le prime 20 esecuzioni di requestAnimationFrame. Di norma, è di 10-20 ms, ma può essere più o meno. Questa è la frequenza di animazione ottimale dal punto di vista del browser.

var prev = performance.now(); var volte = 0; requestAnimationFrame(funzione misura(tempo) ( document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " "); prev = tempo; if (times++< 10) requestAnimationFrame(measure); })

Funzione di animazione basata su requestAnimationFrame:

// La funzione draw disegna // Durata della funzione di durata dell'animazione animate(draw, durata) ( var start = performance.now(); requestAnimationFrame(function animate(time) ( // determina quanto tempo è trascorso dall'inizio di l'animazione var timePassed = time - start; // potrebbe esserci un leggero eccesso di tempo, in questo caso, fissa la fine if (timePassed > durata) timePassed = durata // disegna lo stato dell'animazione nel momento timePassed draw(timePassed ); // se il tempo dell'animazione non è terminato, pianifica un altro fotogramma se ( timePassed< duration) { requestAnimationFrame(animate); } }); }

Struttura dell'animazione

Basandosi su requestAnimationFrame, puoi crearne uno molto più potente, ma allo stesso tempo funzione semplice animazioni.

L'animazione ha tre parametri principali:

Durata Il tempo totale di durata dell'animazione, in ms. Ad esempio, 1000. timing(timeFraction) Una funzione di timing che, simile a , calcolerà lo stato dell'animazione in base all'ora corrente.

Riceve come input un numero continuamente crescente di timeFraction - da 0 a 1, dove 0 indica l'inizio dell'animazione e 1 indica la sua fine.

Il risultato dovrebbe essere il valore di completamento dell'animazione, che corrisponde alla coordinata y nelle transizioni CSS sulle curve di Bezier.

Inoltre, per analogia con la funzione di temporizzazione della transizione, devono essere soddisfatte le seguenti condizioni:

• temporizzazione(0) = 0
• timing(1) = 1... Cioè, l'animazione inizia al punto (0,0) - tempo zero e avanzamento zero e termina a (1, 1) - il tempo pieno è trascorso e il processo è completato Ad esempio,. una funzione lineare indica un processo di sviluppo uniforme: funzione lineare(timeFraction) ( return timeFraction; )

• Il suo programma:

• Come puoi vedere, il suo grafico coincide completamente con la funzione di temporizzazione della transizione: lineare, e l'effetto è assolutamente lo stesso. Ci sono altre opzioni più interessanti, le considereremo ulteriormente.

draw(progress) Una funzione che riceve lo stato di completamento dell'animazione e la disegna. Il valore progress=0 corrisponde al punto iniziale dell'animazione, progress=1 – il punto finale.

È questa funzione che esegue effettivamente l'animazione.

Ad esempio, può spostare un elemento:

Funzione draw(progress) ( train.style.left = progress + "px"; ) In linea di principio, tutte le opzioni sono possibili, puoi animare qualsiasi cosa e come preferisci.

Funzioni temporanee

Sopra abbiamo visto la funzione temporale più semplice e lineare.

Diamo un'occhiata ad esempi di animazione in movimento utilizzando tempi diversi.

Alla potenza n

Ecco un altro caso semplice: progredire alla potenza di n. Casi speciali: funzioni quadratiche, cubiche, ecc.

Per una funzione quadratica:

Funzione quad(avanzamento) ( return Math.pow(avanzamento, 2) )

Grafico di una funzione quadratica:

L'aumento del grado influisce sull'accelerazione. Ad esempio, il grafico per il 5° grado:

Funzione:

Funzione circ(timeFraction) ( return 1 - Math.sin(Math.acos(timeFraction)) )

Programma:

Indietro: tira con l'arco

Questa funzione funziona secondo il principio di un arco: prima “tiriamo la corda” e poi “tiriamo”.

A differenza delle funzioni precedenti, questa dipende da parametro aggiuntivo x, che è il "coefficiente di elasticità". Determina la distanza alla quale la corda viene "tirata indietro".

Funzione back(x, timeFraction) ( return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x) )

Grafico per x = 1,5:

rimbalzo

Immagina di rilasciare una palla, questa cade a terra, rimbalza più volte e si ferma.

La funzione rimbalzo fa la stessa cosa, solo al contrario: il “rimbalzo” inizia immediatamente.

Questa funzione è un po' più complessa delle precedenti e utilizza coefficienti:

Funzione rimbalzo(timeFraction) ( for (var a = 0, b = 1, risultato; 1; a += b, b /= 2) ( if (timeFraction >= (7 - 4 * a) / 11) ( return - Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2) ) )

Animazione elastica

Questa funzione dipende da un parametro aggiuntivo x, che specifica l'intervallo iniziale.

Funzione elastic(x, timeFraction) ( return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction) )

Grafico per x=1,5:

Funzioni di comfort reversibili*

Quindi abbiamo una raccolta di funzioni di temporizzazione.

Il loro utilizzo è chiamato "easeIn".

A volte è necessario mostrare l'animazione in modalità inversa. Una trasformazione di funzione che produce questo effetto è chiamata "easeOut".

easyOut

Nella modalità “easeOut”, il valore del timing viene calcolato utilizzando la formula: timingEaseOut(timeFraction) = 1 — timing(1 — timeFraction)

Ad esempio, la funzione di rimbalzo in modalità “easeOut”:

// versione normale funzione rimbalzo(timeFraction) ( for (var a = 0, b = 1, result; 1; a += b, b /= 2) ( if (timeFraction >= (7 - 4 * a) / 11 ) ( return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2); ) ) ) // convertitore alla funzione easyOut makeEaseOut(timing) ( funzione return (timeFraction) ( return 1 - timing(1 - timeFraction); ) ) var rimbalzoEaseOut = makeEaseOut(bounce);

Un esempio completo: il rimbalzo in BounceEaseOut ora non è all'inizio, ma alla fine (e questo è molto più bello):
Questo grafico mostra che la trasformazione easyOut modifica il comportamento della funzione:

Se è presente un effetto di animazione, ad esempio un rimbalzo, verrà mostrato alla fine, non all'inizio (o viceversa, all'inizio, non alla fine).

Il rosso indica l'opzione normale e il blu indica easyOut.

• Di solito l'oggetto animato salta prima lentamente in basso, per poi, alla fine, raggiungere improvvisamente la cima...
• E dopo essersi rilassato, prima salta su e poi salta lentamente giù.

easyInOut

Puoi anche farlo per mostrare l'effetto sia all'inizio che alla fine dell'animazione. La trasformazione corrispondente si chiama "easeInOut".

Il suo codice è simile al seguente:

Se (timeFraction 1) timeFraction = 1; // stato corrente dell'animazione var progress = options.timing(timeFraction) options.draw(progress); se (tempoFrazione< 1) { requestAnimationFrame(animate); } }); }

Parametri principali:

• durata – durata dell'animazione in ms.
• il timing è una funzione che determina lo stato dell'animazione ad ogni fotogramma. Ottiene la frazione temporale da 0 a 1, restituisce la completezza dell'animazione da 0 a 1.
• draw è una funzione che disegna lo stato dell'animazione da 0 a 1.

Questa funzione può essere migliorata, ad esempio aggiungendo una callback completa da richiamare alla fine dell'animazione.

Abbiamo esaminato una serie di esempi di tempistiche e trasformazioni easyOut, easyInOut, che consentono di diversificarle. A differenza di noi, non ci limitiamo alle curve di Bezier: tutto può essere implementato.

Lo stesso vale per la funzione di disegno.

Questa implementazione dell'animazione ha tre principali aree di applicazione:

• Attività e requisiti non standard che non rientrano nel framework CSS.
• Supporto IE9.
• Grafica, disegno su tela.

Missioni

Con il termine "animazione" intendiamo spesso i film d'animazione, i "cartoni animati" che amiamo fin dall'infanzia. Ma se guardi dentro dizionario esplicativo, poi apprendiamo che tradotto dal francese significa “revival”, “animazione”. E qui si scopre che questo significato si adatta in modo sorprendentemente accurato non solo all'industria cinematografica, ma anche alle tecnologie web.

L'uso di vari effetti di animazione (transizioni, movimenti, trasformazioni, ecc.) “ravviva” in modo significativo il sito Web, consente di controllare l'attenzione dell'utente, spostandolo sull'elemento richiesto e fornendo determinati segnali visivi.

Parlando di animazione, non si possono non menzionare i famosi 12 principi formulati dagli animatori dello studio Disney, il cui utilizzo è estremamente importante per un utilizzo ragionevole e di alta qualità degli effetti di animazione.

Parlando di tecnologie che consentono l'uso dell'animazione nelle pagine web, possiamo evidenziarne diverse, ma forse nessuna di queste è potente quanto . Solo pochi anni fa, la tecnologia di animazione Flash era un formidabile concorrente ed era molto popolare. Ma ora sembra che lei anni migliori dietro e viene gradualmente sostituito dalle pagine del sito Web da script Java più potenti e flessibili. E se decidi di utilizzare seriamente l'animazione sul tuo sito web, dovresti fare affidamento su JavaScript. E per fare una scelta intelligente della biblioteca, ho fatto la recensione di oggi.

Dynamics.jsInizierò con Dynamics.js. Questa è una libreria seria e potente che ti consente di creare animazioni fisicamente realistiche (come oscillazioni armoniche smorzate di un punto su pagina iniziale sito). La libreria è in grado di gestire le proprietà di qualsiasi elemento DOM. Dynamics.js viene utilizzato per creare menu, pulsanti, indicatori di processo, marcatori. In questo caso sono disponibili un'ampia varietà di parametri, come frequenza, decremento di smorzamento, parametri che caratterizzano l'elasticità o la durata del processo, ecc.

Cta.jsLa piccola libreria cta.js è progettata per creare effetti di animazione del tipo "azione-effetto" sulla pagina, ad es. passando il puntatore del mouse o facendo clic su un oggetto si produce un effetto specifico. È molto comodo da usare quando si sviluppano interfacce affiancate, quando facendo clic su un elemento si apre la sua apertura come finestra modale, sull'intera pagina o come pannello scorrevole laterale.

Beep.jsUn'interessante libreria che utilizza l'API WebAudio per creare un sintetizzatore musicale su una pagina. Può essere utilizzato per sviluppare un libro di testo musicale online o come giocattolo divertente.

Rainyday.jsEffetto pioggia incredibilmente bello con gocce di diverse dimensioni che scorrono verso il basso. Tuttavia, secondo me, i cali di grandi dimensioni mancano di realismo (forse la stessa fisica presente in Dynamics.js?). Tuttavia, l'API esistente ti consente di creare i tuoi oggetti e controllarne il comportamento, creando effetti ancora più incredibili.

Dom-Animator.jsDom-Animator.js è un cosiddetto “uovo di Pasqua”. L’effetto che produce non è visibile ad occhio “nudo”, cioè per coloro che visualizzano la pagina in una normale finestra del browser. Ma chi analizza il tuo codice lo vedrà nella console (se ancora non hai capito di cosa stiamo parlando, qui c’è un video che ti chiarirà tutto).

FamousFamous è una libreria JS basata sugli eventi per la creazione di animazioni moderne. Ha un potente nucleo geometrico che ti consente di manipolare vari oggetti 3D - puntiformi e volumetrici - applicare loro forze e accelerazioni, imporre restrizioni e controllare le collisioni.

Bounce.js Una buona libreria JavaScript per creare animazioni impressionanti utilizzando i CSS. Consente di applicare vari tipi di movimento, rotazione, ridimensionamento e trasformazione agli oggetti.

Snabbt.js Una libreria leggera e veloce che, secondo gli sviluppatori, produce 60 fps anche su dispositivi mobili. Utilizzando le matrici di trasformazione, i CSS ti consentono di spostare, ruotare, ridimensionare ed eseguire altre manipolazioni con gli oggetti. Permette inoltre di applicare effetti speciali agli oggetti che attirano l'attenzione, che possono essere utilizzati durante la compilazione dei moduli.

RekapiRekapi ti consente di utilizzare sia l'animazione keyframe CSS (@keyframes rule) sia l'animazione DOM utilizzando JavaScript. Questa libreria ti consente di creare oggetti dinamici piuttosto complessi, come grafici a torta e a linee, linee temporali e altri elementi dell'interfaccia utente.

ShiftyShifty è una libreria che contiene tutto il necessario per l'animazione dei fotogrammi chiave a tutti gli effetti (il cosiddetto "twining") e il numero di oggetti può essere semplicemente enorme. È una libreria di basso livello che può essere utilizzata come nucleo per piattaforme o librerie di livello superiore. In realtà, Shifty è utilizzato come nucleo del già citato Rekapi.

In passato, la maggior parte degli sviluppatori utilizzava jQuery per animare gli elementi nel browser. Scolora questo, allunga quello: cose semplici. Ma quando i progetti interattivi sono diventati più aggressivi e i dispositivi mobili hanno fatto irruzione sulla scena, le prestazioni sono diventate il fattore più importante.

Flash gradualmente cadde in disgrazia e gli animatori di talento fecero sì che HTML5 facesse cose che non aveva mai fatto prima. Avevano bisogno di strumenti più efficienti per effetti complessi e prestazioni di prim'ordine.

jQuery semplicemente non è stato progettato per questo. I browser sono maturati e hanno iniziato a offrire soluzioni.

La soluzione più conosciuta sono le animazioni CSS. L’animazione CSS, in quanto beniamina del settore IT, è stata discussa all’infinito nelle conferenze per diversi anni, dove frasi come “accelerazione hardware” e “mobile-friendly” hanno solleticato le orecchie del pubblico.

Le animazioni basate su JavaScript erano considerate obsolete e "oscene". Ma è davvero così?

Essendo una persona affascinata (al limite dell'ossessività, in realtà) dall'animazione e dalla performance, mi sono buttato con entusiasmo tra le braccia di CSS. E prima che fossi arrivato molto lontano, emersero molti problemi seri di cui nessuno aveva parlato. Sono rimasto scioccato.

Questo articolo ha lo scopo di sensibilizzare su alcune delle carenze più significative delle animazioni su Basato su CSS, così puoi evitare i grattacapi che ho riscontrato e prendere una decisione più informata su quando utilizzare JS per le animazioni e quando utilizzare CSS.

Nessun controllo indipendente di scala/rotazione/posizione

L'animazione della scala, della rotazione e della posizione di un elemento è estremamente comune. Nei CSS tutti questi parametri sono inseriti nella proprietà trasforma, il che rende impossibile creare un'animazione separata per ciascun parametro di un elemento.

Ad esempio, cosa succede se si desidera eseguire la rotazione e ridimensionare le animazioni in modo indipendente l'una dall'altra, con calcoli di runtime e funzioni di facilitazione diversi?

Forse l'elemento pulsa costantemente (scala oscillante) e vorresti ruotarlo al passaggio del mouse. Questo è possibile solo con JavaScript.

HTML:

Tieni presente che scala, rotazione e posizione possono essere animate indipendentemente l'una dall'altra, utilizzando diverse funzioni di facilitazione e sovrapponendo orari di inizio/fine (cosa non possibile con le animazioni CSS).

Trasformazioni indipendenti Rotazione rotazione Rotazione rotazioneX Rotazione rotazioneY vagare (posizione)

CSS:

body ( colore di sfondo: nero; margine: 0; imbottitura: 0; famiglia di caratteri: Signika Negative, sans-serif; peso di carattere: 300; ) html, corpo ( altezza: 100%; ) #demo ( display: tabella ; larghezza:100%; altezza:100%; ) #campo ( posizione:relativa; visualizzazione:cella-tabella; altezza: 100%; overflow:nascosto; allineamento testo: centro; allineamento verticale: centro; ) #box ( colore: nero; dimensione carattere: 24px; bordo: 2px nero pieno; sfondo: gradiente lineare (in basso, #71B200 100%; raggio bordo: 10px; #999; superiore: 0px; riempimento: 0px 20px; allineamento testo: sinistra; indice z: -1000; allineamento testo: centro;

JS:

var $box = $("#box"), $field = $("#field"), rotazione = 0, rotazioneX = 0, rotazioneY = 0, WanderTween, ignoreRollovers; //applica la prospettiva al contenitore in modo che possiamo vedere il 3D. TweenLite.set($campo, (prospettiva: 500)); //sposta la sorgente lungo l'asse z per rendere la rotazione più interessante. TweenLite.set($box, (transformOrigin:"centro centro -150px")); //fai pulsare il rettangolo usando scaleX e scaleY TweenMax.to($box, 1.2, (scaleX:0.8, scaleY:0.8, force3D:true, yoyo:true, ripeti:-1, facilità:Power1.easeInOut)); //al passaggio del mouse, capovolgeremo il rettangolo, ma per evitare //rotazione eccessiva, ridurremo la sensibilità al passaggio del mouse per il primo secondo //dell'animazione. $box.hover(funzione() ( if (!ignoreRollovers) ( rotazione += 360; ignoreRollovers = true; TweenLite.to($box, 2, (rotazione:rotazione, facilità:Elastic.easeOut)); TweenLite.delayedCall( 1, funzione() ( ignoreRollovers = false; ) ) ), funzione() ()); $("#rotazione").click(funzione() ( rotazione += 360; TweenLite.to($box, 2, (rotazione:rotazione, facilità:Elastic.easeOut)); )); $("#rotationX").click(function() (rotationX += 360; TweenLite.to($box, 2, (rotationX:rotationX, facilità:Power2.easeOut)); )); $("#rotazioneY").click(funzione() ( rotazioneY += 360; TweenLite.to($box, 2, (rotazioneY:rotazioneY, facilità:Power1.easeInOut)); )); $("#move").click(funzione() ( if (wanderTween) ( WanderTween.kill(); WanderTween = null; TweenLite.to($box, 0.5, (x:0, y:0)); ) altro ( vagare(); ) )); //seleziona casualmente un punto sullo schermo e avvia l'animazione da lì, quindi ripeti //ancora e ancora. function Wander() ( var x = (($field.width() - $box.width()) / 2) * (Math.random() * 1.8 - 0.9), y = (($field.height() - $box.height()) / 2) * (Math.random() * 1.4 - 0.7); WanderTween = TweenLite.to($box, 2.5, (x:x, y:y, facilità:Power1.easeInOut, onComplete:wander));

Secondo me questo è chiaramente un punto debole dei CSS, ma se lo crei di più animazioni semplici, che comportano intere trasformazioni in qualsiasi momento, allora questo punto non sarà un problema per te.

Prestazione

La maggior parte dei confronti su Internet confrontano l'animazione CSS con la libreria jQuery, poiché è molto comune (come se "JavaScript" e "jQuery" fossero sinonimi), ma jQuery è ampiamente noto per essere piuttosto lento in termini di prestazioni dell'animazione.

Anche la nuova libreria GSAP è basata su JavaScript, ma è letteralmente 20 volte più veloce di jQuery, quindi uno dei motivi per cui JavaScript ha una cattiva reputazione è quello che io chiamo "fattore jQuery".

L’argomento più comunemente citato a favore dell’utilizzo dei CSS per l’animazione è “l’accelerazione hardware”. Sembra delizioso, vero?

Dividiamolo in due parti:

Coinvolgimento della GPU

L'unità di elaborazione grafica (GPU) è altamente ottimizzata per attività come lo spostamento di pixel, l'applicazione di trasparenze e la trasformazione di matrici, quindi i browser moderni cercano di scaricare tali attività su processore centrale(CPU) a GPU.

Il segreto è separare gli elementi animati nei rispettivi livelli GPU, perché una volta creato il livello (purché i suoi pixel originali non cambino), è facile per la GPU spostare quei pixel e combinarli insieme.

Invece di calcolare ogni singolo pixel 60 volte al secondo, la GPU può memorizzare gruppi di pixel (come livelli) e dire semplicemente: "Sposta questo gruppo di 10 pixel e 5 pixel verso il basso" (o qualcosa del genere).

Nota: non è saggio assegnare a ciascun elemento il proprio livello perché la GPU ha una memoria video limitata. Se vai oltre, tutto rallenterà drasticamente.

La dichiarazione di animazioni in CSS consente al browser di determinare quali elementi dovrebbero ricevere livelli GPU e distribuirli di conseguenza. Grande!

Ma sapevi che con JavaScript puoi fare anche questo? L'impostazione di una trasformazione con una caratteristica 3D (come Translate3d() o Matrix3d() ) fa sì che il browser crei un livello GPU per quell'elemento. Quindi l'aumento di velocità della GPU non funziona solo per le animazioni CSS: anche le animazioni JavaScript possono trarne vantaggio!

Tieni inoltre presente che non tutte le proprietà CSS sono accelerate dalla GPU nelle animazioni CSS. In effetti, la maggior parte di essi non riceve questa accelerazione. Le trasformazioni (scala, rotazione, taglio e inclinazione) e la trasparenza sono le principali operazioni che beneficiano dell'accelerazione GPU.

Quindi non pensare che se crei animazioni con CSS, tutto diventerà magicamente accelerato dalla GPU. Questo semplicemente non è vero.

Ridistribuzione dei calcoli a un altro thread

Un'altra parte dell '"accelerazione hardware" riguarda la possibilità di utilizzare diversi thread della CPU per i calcoli relativi all'animazione. Ancora una volta, in teoria sembra fantastico, ma non è privo di costi e gli sviluppatori spesso sopravvalutano i vantaggi ottenuti.

Innanzitutto solo quelle proprietà che non influenzano il flusso del documento possono essere effettivamente passate ad un altro thread.

Quindi, ancora una volta, la trasformazione e la trasparenza sono i principali beneficiari. Quando i thread vengono biforcati, c'è un sovraccarico associato alla gestione di questo processo.

Poiché il rendering grafico e il layout del documento consumano gran parte della potenza di elaborazione (molto di più) nella maggior parte delle animazioni (senza contare i valori intermedi delle proprietà dell'animazione), il vantaggio di utilizzare un thread separato per l'interpolazione è minimo.

Ad esempio, se il 98% del lavoro durante una determinata animazione è il rendering della grafica e del layout del documento, e il 2% è capire nuovi valori di posizione/rotazione/trasparenza/qualsiasi cosa, anche calcolandoli 10 volte più velocemente, nel complesso vedrai solo circa Aumento della velocità dell'1%.

Confronto delle prestazioni

Lo stress test riportato di seguito crea un certo numero di elementi dell'immagine (punti) e li mette in movimento dal centro verso una posizione casuale vicino ai bordi utilizzando ritardi casuali, creando così l'effetto di volare attraverso le stelle.

Imposta un gran numero di punti e guarda un confronto tra jQuery, GSAP e Zepto.

Dato che Zepto utilizza le trasformazioni CSS per tutte le animazioni, le sue prestazioni dovrebbero essere le migliori, giusto?

HTML:

Motore: jQuery (JS) GSAP (JS) Zepto (CSS)

Proprietà: alto, sinistra, larghezza, altezza trasforma:translate(...) scala(...)

Punti: 25 50 100 200 300 400 500 750 1000 1250 1500 2000 2500 3000

INIZIO

Test di velocità dell'animazione HTML5

Confronta le prestazioni delle animazioni basate su jQuery, GSAP (GreenSock Animation Platform) e trasformazioni CSS (utilizzate in Zepto). Seleziona le opzioni sopra e premi "INIZIA". Aumenta il numero di punti finché non vedi movimenti discontinui o grumi/cerchi. Nota anche quali proprietà si animano più velocemente: "top", "left", "width" e "height" o "transform: Translate(...) scale(...)". Potresti essere sorpreso.

CSS:

body ( colore di sfondo: nero; margine: 0; imbottitura: 0; colore:#eee; famiglia di caratteri: Signika Negative, sans-serif; peso carattere: 300; dimensione carattere: 1,15 em; selezione utente: nessuno ; -webkit-user-select:none; ) html, corpo ( altezza: 100%; overflow: nascosto; ) h1 ( peso carattere: 400; dimensione carattere: 2em; altezza linea: 1em; margine inferiore: 0,1 em; color: white; ) a, a:hover, a:visited ( color:#71B200; ) #controls ( display:table-row; background-color:#555; background: linear-gradient(to bottom, #777 0%,#444 100%); riempimento: 10px 10px 10px 5px; z-index:1000; #controlli forma li ( display: tabella-cella; riempimento: 12px 6px 10px 6px; allineamento verticale: medio; testo-ombra : 1px 1px 1px #000; ) #istruzioni ( larghezza:82%; margine sinistro:8%; riempimento-top:1em; altezza riga: 1,5em; colore:#ccc; ) #demo ( display:tabella; larghezza :100%; altezza:100%; ) #field ( posizione:relativa; display:cella-tabella; larghezza:100%; altezza: 100%; overflow:nascosto; z-index:-100; bordo superiore: 1px solido #777; ) #inizio (colore: nero; raggio bordo: 6px;

JS:

imbottitura: 5px 18px; bordo: 2px nero pieno; sfondo: #9af600; sfondo: gradiente lineare (verso il basso, #9af600 0%,#71B200 100%); cursore: puntatore; viene creato, deve essere passato al metodo wrapDot() e ciò che viene restituito dalla funzione viene memorizzato in un array di punti per l'animazione. Questo è utile per migliorare le prestazioni di cose come jQuery, perché invece di passare il DOM dell'elemento al metodo tween() (che richiederebbe a jQuery di interrogare il DOM e avvolgere l'elemento in un oggetto specifico del motore prima di chiamare animate()) , è possibile utilizzare un oggetto naturale. In poche parole, ciò consentirà di memorizzare nella cache il ritorno a capo dei punti per migliorare le prestazioni. * * - l'interpolazione è il fulcro dell'intero test. tween() viene chiamato per ogni punto, il punto viene passato come parametro. La funzione tween() dovrebbe impostare il cssText del punto sul valore CSS iniziale (che posiziona semplicemente il punto al centro dello schermo e imposta la sua larghezza e altezza su 1 pixel) e poi, dopo un ritardo casuale pari a 0, sul tempo di esecuzione dell'animazione, la funzione dovrebbe animare il punto sotto un angolo casuale modificando i valori sinistro/superiore o le trasformazioni Translate() e impostare la dimensione su 32 pixel in larghezza e altezza utilizzando larghezza/altezza o scale(). Successivamente, al termine dell'animazione, è necessario richiamare nuovamente il metodo tween() sullo stesso punto. Quindi lo stesso punto si allontanerà costantemente dal centro con un angolo casuale e con un tempo di ritardo casuale. * * - stop – questa funzione viene richiamata quando l'utente interrompe il test. Il punto viene passato come parametro. La funzione dovrebbe immediatamente interrompere/distruggere l'animazione (o le animazioni) in esecuzione per questo punto (o per tutti i punti - anche questo è normale). PI*2; Anche se questo è giusto, perché per TweenLite, infatti, realizziamo anche un'animazione di durata zero. ombra del testo: nessuna; viene riprodotto in avanti (trasformando il pulsante "start" in "stop"), altrimenti gli utenti potrebbero confondersi durante la lunga pausa mentre Zepto viene selezionato e trasformato, poiché potrebbe essere necessario del tempo affinché il browser posizioni tutti i punti nei propri strati.

setTimeout(function() ( createDots(); i = dots.length; while (--i > -1) ( currentTest.tween(dots[i]); ) ), 1);

) else ( $start.html(" START "); $start.css(( backgroundColor:"#9af600", background: "linear-gradient(to bottom, #9af600 0%,#71B200 100%")); TweenLite .to($istruzioni, 0.7, (autoAlpha:1, ritardo:0.2)); $inputs.prop("disabled", false); $field.css((pointerEvents:"auto")); rimuove i punti. i = dots.length; while (--i > -1) ( currentTest.stop(dots[i]); $field.removeChild(rawDots[i]); // rimuove il punto (o i punti) ) punti = null; rawDots = null; ) ) funzione createDots() ( var i = parseInt($dotQtyInput.val()), punto; punti = ; rawDots = ; while (--i > -1) ( punto = documento .createElement("img"); punto.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/dot.png"; id = "punto" + i; dot.style.cssText = StartingCSS; rawDots.push(punto) ) funzione calibrateInputs(e) ( if ($engineInput.val() === "jquery") ( // jQuery non può animare le trasformazioni senza un plugin di terze parti, quindi disabilita questa opzione $propertiesInput.selectedIndex = 0; $propertiesInput.prop("disabilitato", vero); rispetto alle animazioni CSS (con un ampio margine in alcuni casi, come su Microsoft Surface RT dove la libreria GSAP era almeno 5 volte più veloce delle trasformazioni CSS create con Zepto, e su iPad 3 con iOS7 le trasformazioni erano molto più veloci una volta eseguite utilizzando GSAP invece delle trasformazioni CSS):

Proprietà animate	Meglio con JavaScript	Meglio con i CSS
in alto, a sinistra, larghezza, altezza	Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS 6), iPad 3 (iOS7), Samsung Galaxy Scheda 2, Chrome, Firefox, Safari, Opera, Kindle Fire HD, IE11
trasformazioni (spostamento/scala)	Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS7), Samsung Galaxy Tab 2, Firefox, Opera, IE11	iPad 3 (iOS6), Safari, Cromo

Quanto più veloce? La versione originale del test prevedeva un contatore di fotogrammi al secondo per fornire risultati quantitativi, ma presto ho scoperto che non esisteva un modo veramente accurato per misurarlo in tutti i browser, in particolare con le animazioni CSS, e alcuni browser producevano dati fuorvianti, quindi ho rimosso questa funzione.

Sebbene sia possibile valutare facilmente le prestazioni relative aumentando il numero di punti, passando da un motore all'altro e osservando come viene eseguita l'animazione (fluidità del movimento, uniformità degli intervalli di tempo, distribuzione dei punti, ecc.). Dopotutto, l'obiettivo principale è ottenere animazioni presentabili.

Interessante notare:

• Durante l'animazione delle proprietà top/left/width/height (che influiscono sul flusso del documento), JavaScript era più veloce su tutta la linea (GSAP, non jQuery);
• Alcuni dispositivi erano ben ottimizzati per le trasformazioni, mentre altri erano più bravi a gestire le animazioni con le proprietà superiore/sinistra/larghezza/altezza. In particolare, il vecchio iOS6 eseguiva le trasformazioni basate su CSS molto meglio, ma il nuovo iOS7 ha ridefinito loro la priorità ed è ora significativamente più lento;
• C'è un ritardo significativo nel lancio iniziale delle animazioni basate su CSS poiché il browser calcola i livelli e carica i dati nella GPU. Questo vale anche per le trasformazioni 3D in JavaScript, quindi l'"accelerazione GPU" non è priva di perdite;
• Sotto carichi CSS pesanti, è più probabile che le trasformazioni vengano distribuite in strisce o anelli (ciò è dovuto a problemi di sincronizzazione e pianificazione, probabilmente a causa del controllo su un altro thread);
• In alcuni browser (ad esempio, Google Cromo), quando nell'animazione erano coinvolti un numero molto elevato di punti, non si verificava assolutamente alcuna dissolvenza graduale del testo, ma ciò accadeva solo quando utilizzando i CSS animazioni!

Sebbene JavaScript ben ottimizzato sia spesso altrettanto veloce, se non più veloce, delle animazioni CSS, le trasformazioni 3D vengono generalmente renderizzate utilizzando CSS, ma questo è direttamente correlato al modo in cui i browser gestiscono le matrici a 16 elementi (forzando la conversione da numeri a linee concatenate, e quindi torniamo ai numeri).

Speriamo però che le cose cambino. Comunque sia, nella maggior parte dei progetti della vita reale non noterai mai la differenza nelle prestazioni.

Ti incoraggio a fare i tuoi test per vedere quale tecnologia fornirà un'animazione fluida nei tuoi progetti specifici.

Non credere al mito secondo cui le animazioni CSS sono sempre più veloci e non dare per scontato che il test di velocità riportato sopra rifletta ciò che vedrai nella tua applicazione. Provare, provare e provare ancora.

Controlli ed eventi di esecuzione

Alcuni browser ti consentono di interrompere o riavviare le animazioni con fotogrammi chiave CSS, ma questo è tutto.

Non puoi accedere a una posizione specifica in un'animazione, proprio come non puoi cambiare agevolmente la direzione di una sezione di animazione, o modificare la sequenza temporale, o aggiungere callback in posizioni specifiche, o associarli a un ricco set di eventi di riproduzione .

JavaScript, d'altra parte, ti dà molto controllo, come puoi vedere nell'esempio seguente.

HTML:

Non possibile con le animazioni CSS.

CSS:

riproduci al contrario riavvia Velocità: lenta normale veloce

JS:

var $testo = $("#testo"), $pausa = $("#pausa"), $reverse = $("#reverse"), $riavvio = $("#restart"), $velocità = $( "input"), $slider = $("#slider"), //"tl" è la scala a cui aggiungeremo la nostra animazione. //Quindi possiamo facilmente controllare l'intera sequenza di animazione come un unico oggetto.

tl = new TimelineLite((onUpdate:updateSlider, onComplete:onComplete, onReverseComplete:onComplete, paused:true)); function updateSlider() ( $slider.slider("value", tl.progress() * 100); ) function onComplete() ( tl.pause(); $pause.html("play"); ) //fai qualcosa semplice divisione del testo in modo da poter applicare l'animazione a ciascun //carattere (non sono necessarie le funzioni avanzate SplitText, quindi basta usare split() e //join()) $text.html("" + $text.html( ).split( "").join("").split("").join("") + ""); //imposta la prospettiva sul contenitore TweenLite.set($text, (perspective:500)); //tutta l'animazione viene creata in una riga: tl.staggerTo($("#text span"), 4, (transformOrigin:"50% 50% -30px", rotazioneY:-360, rotazioneX:360, rotazione:360, facilità: Elastic.easeInOut), 0.02); //controlla lo slider e il pulsante $slider.slider(( range: false, min: 0, max: 100, step:.1, slide: function (event, ui) ( tl.progress(ui.value / 100). pausa (); $pausa.html("riproduci"); $pause.click(funzione() ( if (tl.paused()) ( if (tl.progress() === 1 || (tl.progress() === 0 && tl.reversed())) ( tl.restart(); ) altro ( tl.resume(); ) $pause.html("pausa"); altro ( tl.pause(); $pause.html("riprendi"); ) )); $reverse.click(funzione() ( if (tl.progress() === 0) ( if (tl.reversed()) ( tl.play(); ) else ( tl.reverse(0); ) $pause .html("pausa"); ) altro ( tl.reversed(!tl.reversed()).resume(); $pause.html("pausa"); ) )); $restart.click(funzione())( tl.restart(); $pause.html("pausa"); )); $speed.change(function(v, val) ( tl.timeScale(parseFloat($(this).val())); if (tl.progress() === 1) ( tl.restart(); $pause .html("pausa"); ) altrimenti se (tl.paused()) ( tl.resume(); $pause.html("pausa"); ) )); L'animazione moderna è incentrata sull'interattività, quindi è incredibilmente utile poter animare da un elemento modificabile valori iniziali

a finali modificabili (ad esempio, a seconda di dove l'utente fa clic con il mouse) o cambia qualcosa al volo, ma le animazioni dichiarative basate su CSS non ti consentono di farlo.

Per semplici transizioni tra due stati (ad esempio, sfogliare o espandere un menu, ecc.) le trasformazioni CSS sono ottime.

Tuttavia, per una sequenza di eventi, in genere dovrai utilizzare animazioni CSS con fotogrammi chiave, che richiederanno selettori percentuali, ad esempio:

CSS:

@keyframes myAnimation ( 0% ( opacità: 0; trasformazione: traduzione(0, 0); ) 30% ( opacità: 1; trasformazione: traduzione(0, 0); ) 60% ( trasformazione: traduzione(100px, 0); ) 100% ( trasformazione: Translate(100px, 100px); ) ) #box ( animazione: myAnimation 2.75s; )

Ma quando crei un'animazione, non ti concentri sugli intervalli di tempo anziché sulle percentuali? Ad esempio, "aumenta la trasparenza per 1 secondo, quindi scorri verso destra per 0,75 secondi, quindi salta giù per il secondo rimanente".

Cosa succede se passi ore a calcolare una sequenza complessa in percentuale e il cliente poi dice: "Rendi quella parte centrale 3 secondi più lunga"? Uffa, dovrai ricalcolare TUTTE le percentuali!

In genere, la creazione di animazioni comporta molta sperimentazione, in particolare con le funzioni di timing e facilitazione.

Ciò è rilevante laddove il metodo see() sarebbe molto utile. Immagina di creare un'animazione di 60 secondi pezzo per pezzo e poi di perfezionare gli ultimi 5 secondi: dovresti aspettare i primi 55 secondi ogni volta che vuoi vedere il risultato delle tue modifiche nelle parti finali.

Uffa! Con il metodo search(), puoi semplicemente fare riferimento a una posizione specifica nell'animazione mentre lavori per arrivare alla parte su cui stai lavorando, quindi eliminarla quando hai finito. Si tratta di un notevole risparmio di tempo.

La creazione di animazioni per oggetti basati su tela e altri oggetti di librerie di terze parti si sta diffondendo, ma sfortunatamente le animazioni CSS sono destinate solo agli elementi DOM.

Ciò significa che se hai investito molto tempo ed energie nelle animazioni CSS, queste non saranno trasferibili ad altri tipi di progetti.

Dovrai cambiare il set di strumenti di animazione.

Esistono alcuni altri utili strumenti relativi al flusso di lavoro che le animazioni CSS non includono:

• Valori relativi. Ad esempio, “rendi la rotazione di 30 gradi in più” oppure “sposta l’elemento verso il basso di 100 pixel rispetto a dove si trovava all’avvio dell’animazione”;
• Nidificazione. Immagina di poter creare animazioni che possono essere annidate all'interno di un'altra animazione, che a sua volta può essere annidata, ecc. Immagina di controllare l'animazione principale mentre tutto il resto rimane completamente sincronizzato. Una struttura del genere incoraggerebbe un codice modulare che è molto più semplice da creare e mantenere;
• Rapporto sullo stato di avanzamento. Una particolare animazione è completa? In caso negativo, a quale stadio di esecuzione si trova esattamente?
• Eliminazioni mirate. A volte è incredibilmente utile disabilitare tutte le animazioni che influenzano la scala di un elemento (o qualsiasi altra proprietà che desideri) consentendo invece tutte le altre;
• Codice breve. Le animazioni CSS basate su fotogrammi chiave sono dettagliate, anche senza tutte le versioni ridondanti richieste con prefisso del fornitore. Chiunque abbia provato a creare qualcosa di complessità anche moderata attesterà il fatto che le animazioni CSS diventano rapidamente ingombranti e goffe. In effetti, la quantità effettiva di codice CSS richiesto per eseguire attività di animazione potrebbe superare il peso della libreria JavaScript (che è più facile da memorizzare nella cache e riutilizzare in molte animazioni).

Effetti limitati

Non sarai in grado di eseguire nessuna delle seguenti operazioni con l'animazione CSS:

• Animazione lungo una curva (ad esempio, una curva di Bezier);
• Utilizzare interessanti funzioni di ammorbidimento come l'ammorbidimento elastico, elastico o ruvido. Esiste un'opzione cubic-bezier(), ma ne consente solo due punti chiave, che limita notevolmente le possibilità;
• Movimenti secondo leggi fisiche. Ad esempio, il movimento fluido basato sull'inerzia e il facile ritorno all'indietro, implementato in questa demo di Draggable;
• Animazione della posizione di scorrimento;
• Virata direzionale (ad esempio, "girare esattamente di 270 gradi nella direzione più breve, in senso orario o antiorario");
• Animazione degli attributi.

Compatibilità

Le animazioni basate su CSS non funzionano in IE9 o versioni successive versioni precedenti navigatore. Molti di noi odiano fornire supporto per i browser legacy (soprattutto IE), ma la realtà è che alcuni di noi hanno client che lo richiedono.

L'applicazione dei prefissi è necessaria per molti browser, ma è possibile utilizzare strumenti di preelaborazione per evitare di doverli scrivere manualmente.

Conclusione

Le animazioni CSS sono dannose? Sicuramente no. In effetti, sono ottimi per semplici transizioni di stato (come il capovolgimento) dove non è richiesta la compatibilità con i browser legacy.

Le trasformazioni 3D generalmente hanno buone prestazioni (iOS7 è un'eccezione notevole) e le animazioni CSS possono essere molto attraenti per gli sviluppatori che preferiscono inserire tutta la logica di animazione e presentazione in un livello CSS.

Tuttavia, le animazioni basate su JavaScript forniscono una flessibilità molto maggiore, un processo di sviluppo più comodo per animazioni complesse e una ricca interattività, e spesso le animazioni basate su JavaScript sono veloci (o addirittura più veloci) delle animazioni basate su CSS, anche se potresti avere sentito.

Posso capire perché le animazioni CSS erano così attraenti rispetto a jQuery.animate() . Chi sano di mente non coglierebbe al volo l'opportunità di ottenere un aumento di 10 volte della produttività?

Non è più necessario scegliere tra animazioni jQuery e CSS; strumenti basati su JavaScript come GSAP aprono possibilità completamente nuove e colmano il divario di prestazioni.

Questo articolo non riguarda GSAP o alcuna libreria specifica; La morale dell'articolo è che le animazioni basate su JavaScript non meritano la cattiva reputazione. In effetti, JavaScript è l'unica opzione per un sistema di animazione veramente robusto e flessibile.

Inoltre, volevo far luce su alcuni degli aspetti frustranti delle animazioni CSS (di cui nessuno parla) in modo che ora tu possa prendere decisioni più informate su come creare animazioni.

Le specifiche sulle animazioni web risolveranno i problemi esistenti?

Il W3C sta lavorando su una nuova specifica chiamata "Animazioni Web" che mira a risolvere molte delle carenze nelle animazioni e trasformazioni CSS, fornendo un migliore controllo dell'esecuzione e funzionalità aggiuntive.

Naturalmente, questo sembra un passo avanti sotto molti aspetti, ma ci sono ancora una serie di carenze (alcune delle quali sono probabilmente impossibili da superare a causa della necessità di supportare versioni precedenti delle specifiche CSS esistenti, quindi ad es. gestione indipendente componenti di trasformazione sono improbabili).

Anche se questa è una storia completamente diversa. Dobbiamo aspettare e vedere come andranno le cose. Ci sono sicuramente ragazzi intelligenti che lavorano su questa specifica.

Questa pubblicazione è una traduzione dell'articolo “Myth Busting: CSS Animations vs. JavaScript" preparato dal simpatico team di progetto

Crea animazioni basate su JavaScript utilizzando la libreria Anime.js. Parte 1

Nodi DOM (nodo DOM) o raccolta di nodi (NodeList): puoi anche utilizzare un nodo DOM o NodeList come valore per parola chiave obiettivi. Guarda un esempio di utilizzo di un nodo DOM per gli obiettivi.

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(( target: document.querySelectorAll(".square:nth-child(even)"), TranslateY: 200 )); var notRed = anime(( target: document.querySelectorAll(".square:not(.red)"), TranslateY: 200 ));

Nel primo caso, la funzione getElementById() veniva utilizzata per accedere ad un elemento specifico. La funzione querySelector() è stata utilizzata per accedere a un elemento con classe blue . E la funzione querySelectorAll() è stata utilizzata per accedere a tutti gli elementi all'interno del documento che corrispondono a un gruppo di selettori specifici o, al contrario, non sono inclusi in esso.

Ci sono molte funzioni che puoi utilizzare anche per selezionare l'elemento di destinazione. Ad esempio, puoi accedere agli elementi con una classe specifica utilizzando la funzione getElementsByClassName(). Oppure agli elementi con un tag specifico utilizzando la funzione getElementsByTagName().

Qualsiasi funzione che restituisce un nodo DOM o NodeList può essere utilizzata per impostare il valore dei target in Anime.js.

Oggetto: puoi utilizzare oggetti JavaScript come valore per target . La chiave di questo oggetto viene utilizzata come identificatore e il valore viene utilizzato come numero da animare.

Puoi quindi mostrare l'animazione all'interno di un altro elemento HTML utilizzando codice JavaScript aggiuntivo. Di seguito è riportato un esempio di animazione dei valori di due chiavi diverse dello stesso oggetto.

Var filesScanned = (conteggio: 0, infetto: 0); var scanning = anime(( target: filesScanned, conteggio: 1000, infetti: 8, round: 1, aggiornamento: function() ( var scanCount = document.querySelector(".scan-count"); scanCount.innerHTML = filesScanned.count ; var infettoCount = document.querySelector(".infected-count"); infettoCount.innerHTML = filesScanned.infected;

Il codice sopra porterà il contatore dei file scansionati da 0 a 1.000 e il contatore dei file infetti da 0 a 8. Ricorda che puoi animare solo valori numerici in questo modo. Se provi ad animare una chiave da AAA a BOY, verrà visualizzato un messaggio di errore.

Inoltre, il codice utilizzava una funzione di callback del tasto di aggiornamento richiamata su ogni fotogramma durante l'animazione. Qui veniva utilizzato per aggiornare il numero di file scansionati e infetti. Tuttavia, puoi andare oltre e mostrare agli utenti un messaggio di errore quando il numero di file infetti supera una determinata soglia.

Array: possibilità di specificare matrice JavaScript target sarà utile se devi animare molti elementi che appartengono a categorie diverse. Ad esempio, se desideri animare un nodo DOM, un oggetto e una varietà di altri elementi basati su selettori CSS, puoi farlo inserendoli in un array e quindi definendo l'array come valore per target . L'esempio seguente dovrebbe rendere le cose più chiare.

Var multipleAnimations = anime(( target: , TranslateY: 250 ));

Quali proprietà possono essere animate utilizzando Anime.js

Ora sai come identificare i diversi elementi che devono essere animati. È tempo di scoprire quali proprietà e attributi possono essere animati utilizzando la libreria.

Proprietà CSS

Questi includono, ad esempio, larghezza, altezza e colore per diversi elementi di destinazione. I valori finali di varie proprietà animate come background-color vengono determinati utilizzando lowerCamelCase. Pertanto background-color diventa backgroundColor . Il codice seguente illustra l'animazione della posizione dell'oggetto sinistro e del colore di sfondo ( backgroundColor ) dell'oggetto di destinazione.

Var animateLeft = anime(( obiettivi: ".square", sinistra: "50%" )); var animateBackground = anime(( target: ".square", backgroundColor: "#f96" ));

Le proprietà possono assumere diversi tipi di valori che assumerebbero utilizzando i normali CSS. Ad esempio, la proprietà left potrebbe avere i seguenti valori: 50vh , 500px o 25em . Puoi anche omettere l'unità di misura dopo il numero, ma in questo caso diventerà px per impostazione predefinita. Azioni simili possono essere eseguite con background-color , specificando il colore come valore esadecimale o utilizzando il codice RGB o HSL.

Trasformazione CSS

La trasformazione lungo gli assi X e Y si ottiene utilizzando le proprietà TranslateX e TranslateY. Allo stesso modo, puoi ridimensionare, inclinare o ruotare un elemento lungo un asse specifico utilizzando le proprietà di scala, inclinazione o rotazione appropriate per quell'asse specifico.

È possibile definire diversi angoli sia in gradi che utilizzando la proprietà turn. Un valore di rotazione pari a 1 corrisponde a 360 gradi. Ciò semplifica i calcoli perché sai di quanto ruotare gli elementi rispetto al loro asse. L'esempio seguente mostra come animare il ridimensionamento, la transizione o la rotazione di una singola proprietà o di tutte contemporaneamente.

Var animateScaling = anime(( target: ".square", scala: 0.8 )); var animateTranslation = anime(( target: ".square", TranslateX: window.innerWidth*0.8 )); var animateRotation = anime(( target: ".square", ruota: "1turn" )); var animateAll = anime(( target: ".square", scala: 0.8, TranslateX: window.innerWidth*0.8, rotazione: "1turn" ));

Attributi SVG

L'unica condizione è che il valore degli attributi sia numerico. La capacità di animare attributi diversi apre la possibilità di creare effetti fantastici. Poiché questo articolo è solo a scopo informativo, conterrà semplici esempi.

Man mano che approfondisci la libreria, imparerai come vengono create animazioni più complesse. Di seguito è riportato il codice per animare gli attributi del cerchio cy , cx e ictus-width . Come con altre proprietà CSS, Stroke-Width deve utilizzare CamelCase affinché il codice funzioni correttamente.

Var animateX = anime(( target: ".circle", cx: window.innerWidth*0.6 )); var animateStrokeWidth = anime(( obiettivi: ".circle", ictusWidth: "25" ));

Attributi DOM

Puoi animare attributi DOM numerici, in modo simile a come hai animato gli attributi SVG. Questo può essere utile per lavorare con l'elemento progress in HTML5. Ha due attributi: value e max . L'esempio seguente animerà l'attributo value per mostrare l'avanzamento dello spostamento di un file sul disco rigido.

Var animateProgress = anime(( obiettivi: "progress", valore: 100, easing: "linear" ));

Conclusione

Ti sono state presentate tutte le opzioni di selezione degli elementi in Anime.js, nonché come animare diverse proprietà CSS e gli attributi ad esse associati.

Nel prossimo articolo imparerai come controllare la fluidità, il ritardo e la durata delle animazioni sia per le singole proprietà che per i gruppi. Quindi imparerai a controllare tutti questi parametri per ogni singolo elemento.

Abstract: Un semplice esempio: il metodo della dissolvenza del giallo. Animazione utilizzando le librerie JavaScript. Un esempio più complesso: spostamento e ridimensionamento. Transizioni CSS.

Il principio alla base della dissolvenza è che il colore di sfondo dell'elemento in dissolvenza viene impostato su giallo e quindi, attraverso una serie di passaggi, il suo colore ritorna al colore originale. Quindi, se il colore di sfondo originale era rosso, il colore viene impostato su giallo, poi giallo-arancione, poi arancione, poi rosso-arancione e infine rosso. Il numero di passaggi utilizzati determina la fluidità con cui avviene il cambiamento di colore, mentre il tempo tra i passaggi determina la durata del cambiamento di colore. Quando si cambiano i colori, è possibile sfruttare un fatto utile dei CSS: un colore può essere definito come una tripla di numeri regolari o come una stringa esadecimale. Pertanto #FF0000 (colore rosso) può anche essere definito come rgb(255,0,0) . Passare da giallo a rosso in cinque passaggi significa quindi passare da rgb(255,255,0) (giallo) a rgb(255,0,0) nei seguenti cinque passaggi:

rgb(255,255,0) rgb(255,192,0) rgb(255,128,0) rgb(255,64,0) rgb(255,0,0)

Esempio più complesso: spostamento e ridimensionamento

Anche se il metodo della dissolvenza gialla dimostra l'animazione, è alquanto noioso. Quando la maggior parte delle persone pensa all'animazione, di solito pensa al movimento. Una tecnica interessante per avvisare l'utente che è successo qualcosa senza interrompere il flusso di lavoro consiste nell'utilizzare un messaggio non modale. Invece di visualizzare una finestra di dialogo alert() che richiede all'utente di fare clic su OK prima di poter continuare, posiziona il messaggio semplicemente in un div mobile sulla pagina che rimane lì discretamente finché non riceve conferma. Una seconda cosa piuttosto interessante potrebbe poi essere quella di permettere all'utente di ritornare su un messaggio per il quale ha confermato di volerlo rileggere. Implementiamo quindi un messaggio mobile che, quando cliccato, si comprime nell'angolo dello schermo e può quindi essere ripristinato nuovamente quando viene cliccato.

Se stai facendo un lavoro serio di animazione o un lavoro serio con JavaScript, vale quasi sempre la pena utilizzare una libreria JavaScript. Ciò ti consentirà di creare la presentazione desiderata per gli utenti senza doversi preoccupare delle complessità matematiche necessarie per eseguire l'animazione. (Con il primo esempio sopra, ora sai come fare i conti e come utilizzare setInterval , ma risparmierai tempo e fatica utilizzando soluzioni già pronte.)

La demo sopra utilizza la libreria jQuery (http://jquery.com/) per farlo funzionare, ma, come accennato, la maggior parte delle librerie fornisce un concetto di animazione sufficientemente simile che dovresti essere in grado di implementare la parte principale utilizzando la tua libreria preferita. In sostanza, devi fare quanto segue:

Mostra un messaggio mobile al centro dello schermo

Quando viene cliccato:

Spostare la sua posizione orizzontale nella posizione all'estrema destra

Sposta la sua posizione verticale verso l'alto

Imposta la sua larghezza su 20px

Imposta la sua altezza su 20px

Rendi la sua densità pari al 20%, in modo che diventi quasi trasparente e nascondi il testo al suo interno

Quando si fa clic su questa versione "mini" del messaggio, ripristinatela al centro dello schermo (ovvero, l'opposto di ciò che abbiamo fatto per comprimerlo) e in modo che l'utente abbia un'immagine chiara di cosa è successo al suo messaggio, saltando dalla dimensione intera I messaggi al mini-messaggio dovrebbero essere animati (in modo che possano vedere il messaggio "rimpicciolirsi" nell'angolo della finestra).

Animare con jQuery è molto semplice: basta usare il file . animate() e fornisci il risultato finale desiderato dell'animazione (e quanto tempo dovrebbe durare):

$(ourObject).animate(( larghezza: "20px", altezza: "20px", superiore: "20px", destra: "20px", marginRight: "0px", opacità: "0.2" ), 300);

La funzione prende ourObject e, in 300 millisecondi, sostituisce la sua larghezza e altezza con 20px, le sue posizioni superiore e destra con 20px, la sua proprietà di stile margine destro con 0px e la sua densità (nei browser che supportano la densità dell'immagine) con 20%. Allora è solo questione di programmare con stile