Accelerare le animazioni javascript con Velocity.js
Velocity.js è un plugin jQuery che reimplementa la funzione $.animate() di jQuery per produrre prestazioni significativamente maggiori e nuove funzionalità che consentono di migliorare il flusso dell’animazione.
Le prestazioni sono talmente elevate che Velocity.js è addirittura molto più veloce delle librerie di animazione CSS!
Velocity,js funziona su qualsiasi browser (da IE8 ad Android 2.3.) ed il suo motore utilizza la funzione $.queue di jQuery e quindi interagisce perfettamente con le funzioni $.animate(), $.fade(), e $.delay().
Dal momento che la sintassi di Velocity.js è identica alla funzione $.animate(), non è richiesto alcun cambiamento del codice già scritto.
E sufficiente quindi scaricare Velocity.js, includerlo nelle vostre pagine e sostituire tutte le istanze di $.animate() con $.velocity() per avere immediatamente un netto incremento delle prestazioni in tutti i browser ed in particolare in quelli dei dispositivi mobile.
In appena 8 Kb avrete a disposizione animazioni di colore, trasformazioni, loop, easings, sequenze e scrolling. Velocity.js è migliore della combinazione tra jQuery, jQuery UI e delle transazioni CSS!!!
Guardate come in soli 10 minuti sia possibile a dare vita ad una animazione 3D con Velocity.js.
Accetta i cookies di YouTube per visualizzare questo video.
Accettando potrai accedere ai contenuti su YouTube.
Puoi visualizzare la Privacy Policy di YouTube cliccando sul link sottostante.
Se accetti, la tua scelta sarà salvata e la pagina verrà ricaricata.
Il segreto di Velocity.js è la sua progettazione: nonostante sia un plugin jQuery, utilizza un proprio stack di animazione che offre prestazioni elevate grazie a due principi di fondo:
- la sincronizzazione del DOM con il tween stack per ridurre al minimo il “layout trashing”
- eseguire una cache dei valori per ridurre al minimo necessario le interrogazioni del DOM
Per capire meglio tutto ciò che riguarda Velocity.js vi congliamo di leggere:
- l’ottimo articolo di David Walsh che spiega tecnicamente l’incremento di prestazioni di Velocity.js rispetto alle librerie di animazione CSS e jQuery
- l’articolo di CSS-Tricks.com che da una panoramica sui vantaggi dell’utilizzo di Velocity.js per la UI Animation e spiega una delle più significative funzionalità aggiuntive della libreria: le sequenze
Le quattro caratteristiche principali relative alle prestazioni dell’interfaccia utente sono:
- Nessun ritardo tra il triggering di una animazione e la sua partenza.
- Nessuna perdita di frame all’inizio di un’animazione o all’intersezione di animazioni in coda.
- Un frame rate costantemente elevato.
- Stress gestito senza jank o bande.
L’unico suggerimento da tenere bene a mente quando si utilizza Velocity.js è quello di non utilizzare mai le funzioni $.animate() e/o $.fade() ed utilizzare sempre le soluzioni ottimizzate di Velocity.js senza utilizzare codice proprio o relativo a jQuery (lloping, reversing, delay, show/hide od altro).
Potete scaricare Velocity.js su GitHub, mentre la documentazione è consultabile direttamente sul sito dell’autore.
