Come creare animazioni fluide? Come analizzare le prestazioni? Come ottimizzare le prestazioni? Ecco alcuni consigli ispirati dalla presentazione di Freddy Harris al meglio del web 2016.

Oggi il web vuole competere con le applicazioni. Per fare questo sviluppiamo applicazioni di una pagina. La difficoltà è ottimizzare queste interfacce animate per rendere l'esperienza dell'utente la migliore possibile.
Come creare animazioni fluide? Come analizzare le prestazioni?

Lo schema

Il browser calcola il layout e determina la posizione e la dimensione delle "scatole" in base all'interazione che hanno tra di loro (genitori e fratelli).
Le principali proprietà CSS utilizzate per il layout (visualizzazione) sono:

• disposizione dei blocchi
• Disposizione in linea
• Layout della tabella
• Layout posizionato
• Layout flessibile della scatola
• Griglia layout

La vernice

Dopo aver calcolato le posizioni, il browser applica gli stili visivi.
Le principali proprietà CSS utilizzate per la pittura sono:

• sfondo
• colore
• scatola-ombra
• colore del bordo
• ...

Il composto

Tutti gli elementi bitmap (immagini, video, canvas) vengono inviati alla GPU (processore grafico).
La GPU applica operazioni di texture come trasformazioni o trasparenze. Alcuni elementi e operazioni come trasformazione 3D, video e canvas, animazione css, trasparenza, filtri css, ecc. portano alla creazione di livelli che verranno appiattiti dalla GPU per ottenere il rendering della pagina.
Per ottimizzare gli sviluppatori compositi a volte usano un hack translateZ(0) css. Questo hack è fortemente sconsigliato e si consiglia di utilizzare la proprietà css will-change. Questa proprietà dice al browser quale elemento cambierà e quali proprietà cambieranno.

Animazioni CSS

L'ottimizzazione delle animazioni consente di ottenere un'animazione fluida a 60 fps, ovvero circa 16.6 ms tra ogni immagine.
[youtube https://www.youtube.com/watch?v=pfiHFqnPLZ4&w=560&h=315] Facciamo un semplice esempio di animazione di un quadrato.

Un primo metodo consiste nell'animare i margini

#test { larghezza: 160px; altezza: 160px; margine: 15px; transizione: margine 1s; } #test.change { margine superiore:100px; margine sinistro: 100px; }

Per realizzare questa animazione otteniamo sul desktop:

• 16.74 ms tra ogni fotogramma
• 59 FPS
• 3.23 ms di elaborazione della CPU

e sul cellulare:

• 31.29 ms tra ogni fotogramma
• 31 FPS
• 28.90 ms di elaborazione della CPU

Un secondo metodo è quello di animare il quadrato stesso.

#test{ larghezza: 160px; altezza: 160px; margine: 15px; transizione: trasforma 1s; } #test.change{ trasformazione: translate(100px, 100px); }

Otteniamo sul desktop:

• 16.74 ms tra ogni fotogramma
• 59 FPS
• 3.23 ms di elaborazione della CPU

e sul cellulare:

• 50.66 ms tra ogni fotogramma
• 19 FPS
• 29.84 ms di elaborazione della CPU

Infine, un terzo metodo consiste nell'animare il quadrato aggiungendo la proprietà will-change

#test{ larghezza: 160px; altezza: 160px; margine: 15px; transizione: trasforma 1s; volontà-cambiare: trasformare; } #test.change{ trasformazione: translate(100px, 100px); }

Otteniamo :

• 16.58 ms tra ogni fotogramma
• 60 FPS
• 0 ms di elaborazione della CPU

La proprietà will-change dice al browser quali proprietà cambieranno. Il browser può così anticiparlo e pianificare le risorse necessarie per ottimizzarlo.

animazioni javascript

Le animazioni Web possono anche essere progettate in javascript. Sono possibili diversi metodi per ottimizzare queste animazioni.

requestAnimationFrame

Durante un'animazione dobbiamo utilizzare un timer per eseguire le trasformazioni ogni n ms. requestAnimationFrame consente di ottimizzare le animazioni raggruppandole nello stesso frame.
Viene chiamato prima del rendering dell'animazione.

funzione disegna() { requestAnimationFrame(disegna); // il tuo codice di animazione } requestAnimationFrame(draw);

L'animazione è ottimizzata perché perfettamente sincronizzata. Pertanto richiederà meno risorse dal processore grafico.
L'eliminazione del rimbalzo consente di raggruppare più chiamate in una. Questa funzione è utile per le animazioni di tipo evento scroll, mouse e touch perché gli eventi vengono chiamati molto frequentemente e il gestore di eventi non è fatto per supportarne così tanti.

API di animazione Web

Questa tecnica nativa javascript rende possibile creare animazioni più complesse, controllarle e metterle in sequenza con la stessa efficienza delle animazioni CSS.

element. animate([ {transform: 'translate(200px, -100%)'}, { transform: 'translate(200px, ' + window.innerHeight + 'px)'} ], { duration: 1500, iterations: 10, ritardo: 300 });

Questo tipo di animazione non richiede il caricamento di script esterni, cosa che ottimizza l'animazione.
Questo articolo è ispirato alla presentazione di Freddy Harris durante il best of web 2016.

Antoine Duplouy, scienziato UX @UXRepublic