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.
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.