Il web è pieno di animazioni sorprendenti e ipnotiche. Oggi, gli sviluppatori utilizzano un'ampia varietà di tecniche per creare coinvolgimento, intrattenere e informare gli utenti Web e l'animazione ci aiuta a raggiungere questo obiettivo.
10 anni fa, gli sviluppatori utilizzavano Adobe Flash per aggiungere interattività ai loro siti, ma con l'avvento di HTML5, CSS3 e una miriade di librerie JavaScript, Flash è (per fortuna) scomparso dal panorama.
C'è una grande quantità di libreria di animazioni e ve ne presenterò 9, secondo 3 criteri: semplicità di implementazione, funzionalità offerte e popolarità.

Animate.css

Animate.css è una delle librerie CSS più efficienti e facili da usare disponibili. È facile da implementare poiché è sufficiente aggiungere le classi CSS agli elementi HTML.

Creatore: Daniel Eden
Data di pubblicazione: 2013
Versione corrente: 3.4.0
Popolarità: oltre 25,000 stelle su GitHub
Descrizione: “Una libreria di animazioni CSS cross-browser. Facile come una torta. "
Dimensione della libreria: 55.2 kB
GitHub: https://github.com/daneden/animate.css
Licenza: MIT

Animate.css è uno dei più popolari, ampiamente utilizzati e abbastanza leggero da poter essere utilizzato nei siti mobili. Personalmente, penso che sia una delle migliori librerie di animazione e la consiglio per il tuo prossimo progetto.

Bounce.js

Bounce.js è uno strumento e una libreria Javascript che si concentra sulle animazioni "rimbalzanti" per il tuo sito web. Bounce.js è un progetto open source con il suo codice sorgente su GitHub.

Creatore: Tictail
Data di pubblicazione: 2014
Versione corrente: 0.8.2
Popolarità: oltre 3,500 stelle su GitHub
Descrizione: “Crea bellissime animazioni basate su CSS3 in un lampo. "
Dimensione della libreria: 16 kB
GitHub: https://github.com/tictail/bounce.js
Licenza: MIT

Bounce.js è una buona libreria di animazioni che include una decina di animazioni predefinite, il che spiega la sua leggerezza. Come animate.css, le animazioni sono fluide e impeccabili. Consigliato se non hai bisogno di un'ampia varietà di animazioni e la leggerezza della libreria è una risorsa per il tuo progetto.

Animazioni magiche

Magic Animations è una delle librerie più impressionanti. Ci sono molte animazioni, alcune delle quali completamente uniche. Come con Animate.css, puoi implementare Magic semplicemente importando il file CSS. Questo progetto offre una Demo particolarmente riuscita.

Animazioni magiche
Creatore: Cristiano
Data di pubblicazione: 2014
Versione corrente: 1.1.0
Popolarità: oltre 3,400 stelle su GitHub
Descrizione: “Animazioni CSS3 con effetti speciali"
Dimensione della libreria: 36.5 kB
GitHub: https://github.com/miniMAC/magic

La dimensione delle animazioni magiche rimane ragionevole rispetto a Animate.css ed è diventata famosa per alcuni effetti speciali come effetti magici, effetti folli ed effetti bomba.
Se stai cercando qualcosa fuori dall'ordinario, ti consiglio vivamente di provarlo per il tuo prossimo progetto. Non rimarrete delusi.

DynCSS

DynCSS è il tipo di libreria di animazioni che potresti voler utilizzare nei tuoi siti applicando l'effetto di parallasse. Per avere un'idea di cosa ti permetterà di fare, dai un'occhiata a questa demo.

Creatore: Vittorio Zaccaria, autore di “Note per la progettazione di interfacce per applicazioni mobili migliori” e “Sviluppo di giochi 3D con Unity 5”
Data di pubblicazione: 2014
Versione corrente: 0.8.1
Popolarità: oltre 190 stelle su GitHub
Descrizione: “Dai vita al tuo sito con il CSS dinamico. "
GitHub: https://github.com/vzaccaria/DynCSS

DynCSS è una semplice libreria che potrebbe diventare popolare nel prossimo futuro, ma è ancora un progetto recente, come dimostra la valutazione a stelle su Github. Una delle caratteristiche interessanti è che la libreria offre l'animazione di elementi basati sullo scorrimento, cosa che Vittorio mostra elegantemente sulla homepage di DynCSS (che fa un ottimo uso della parallasse).

CSShake

CSShake fa esattamente quello che dice sulla scatola, una libreria CSS per scuotere gli elementi della tua pagina web. Come ci si potrebbe aspettare, ci sono molte varianti per scuotere tutti i componenti web

Creatore: Lionel
Data di pubblicazione: 2014
Popolarità: oltre 2,000 stelle su GitHub
Descrizione: “Classi CSS per spostare il tuo DOM!"
Dimensione della libreria: 78.8 kB
GitHub: https://github.com/elrumordelaluz/csshake
Licenza: MIT

Apple ha reso popolare la tendenza dell'interfaccia utente di scuotere vigorosamente gli elementi dell'interfaccia utente (finestra di dialogo, finestra modale, casella di testo) quando l'utente inserisce una risposta errata, riferendosi a una persona che scuote la testa per dire "no". CSShake offre una gamma di interessanti animazioni "shake" e la libreria non ha carenza di varianti.
Sebbene questa libreria sia più popolare di DynCSS, ritengo che le dimensioni non siano giustificate dalle funzionalità aggiuntive che offre. Sebbene le animazioni siano buone, non riesco a immaginare casi in cui non sarebbe necessario includere altre librerie per tutti gli effetti di non agitazione.
Ma forse mi manca solo l'immaginazione?

Hover.css

Hover.css è una libreria di animazioni CSS progettata per l'uso con pulsanti e altri componenti dell'interfaccia utente sul tuo sito web. Offre bellissime transizioni 2D, con una miriade di animazioni ponderate.

Creatore: Ian Lunn
Data di pubblicazione: 2014
Versione corrente: 2.0.2
Popolarità: oltre 10,700 stelle su GitHub
Descrizione: “Applica facilmente ai tuoi progetti, modifica o... solo per ispirazione. "
Dimensione della libreria: 104.2 kB
GitHub: https://github.com/IanLunn/Hover
Licenza: MIT

Hover.css è particolarmente adatto per animare elementi di pagina come pulsanti, loghi, componenti SVG o immagini come menzionato nella home page della libreria. Ha un elenco esaustivo di animazioni, che spiega le sue grandi dimensioni (penso anche che le sue dimensioni potrebbero essere ulteriormente ottimizzate). Forse l'effetto più notevole sono i fumetti e i loop.

Velocity.js

Velocity.js è una sofisticata libreria JavaScript per animazioni come Fade & Slide, Scroll, Stop, Finish, Reverse e molte altre.
Ha un ampio elenco di utenti con aziende come Tumblr, WhatsApp, MailChimp, Scribd, Gap e HTC nel suo elenco.

Creatore: Julian Shapiro
Data di pubblicazione: 2014
Versione corrente: 1.2.2
Popolarità: oltre 8,700 stelle su GitHub
Descrizione: “Animazioni JavaScript veloci. "
Dimensione della libreria: 34.8 kB
GitHub: https://github.com/julianshapiro/velocity
Licenza: MIT

Velocity non è necessariamente adatto a tutti poiché è un motore di animazione JavaScript e questo motore di animazione JavaScript utilizza la stessa API di jQuery $.animate(). Funziona con e senza la presenza di jQuery. Il motivo per cui ho ritenuto necessario includerlo in questo elenco è che è incredibilmente veloce e presenta animazioni a colori, trasformazioni, loop, andamento: è il meglio delle transizioni jQuery e CSS combinate.

favico.js

Flavico è progettato per un caso d'uso molto specifico: questa libreria ti consente di aggiungere facilmente animazioni di badge alle tue favicon, essendo i badge qualcosa di potenzialmente molto vario. Le webapp che necessitano di notificare ai propri utenti la presenza di contenuti aggiornati (ad esempio: nuovi tweet, email, post, articoli, ecc.) potranno fare un ottimo uso di questa elegante libreria. Dai un'occhiata al loro sito per capire meglio cosa ti permette di fare questo framework.

Creatore: Miroslav Magda
Data di pubblicazione: 2013
Versione corrente: 0.3.9
Popolarità: oltre 4,900 stelle su GitHub
Descrizione: “Usa le tue favicon con badge, immagini o video. "
Dimensione della libreria: 8.9 kB
GitHub: https://github.com/ejci/favico.js
Licenza: MIT

Favicon.js è più un'utilità di animazione adatta per badge, immagini e video. La dimensione della libreria è ben ottimizzata per l'uso in produzione.

AniJS

La prossima libreria è interessante per il suo approccio unico. AniJS è una libreria di animazioni che ti consente di aggiungere animazioni agli elementi utilizzando un DSL (Linguaggio specifico del dominio) come segue :

Se fai clic su On Square, Do wobble animato To .container-box

Creatore: anijs
Data di pubblicazione: 2014
Versione corrente: 0.9.3
Popolarità: oltre 2,500 stelle su GitHub
Descrizione: “Una libreria per aumentare il tuo webdesign senza codificare. "
Dimensione della libreria: 10.5 kB
GitHub: https://github.com/anijs/anijs
Licenza: MIT

AniJS è una libreria di dimensioni ragionevoli considerando le sue caratteristiche. Il formato di implementazione è piuttosto diverso rispetto ad altre librerie di animazioni (che a volte sembrano oscure). Vale la pena provare questa libreria, almeno una volta per i tuoi progetti. È vero che sembra molto piccolo rispetto alla concorrenza ma ha il potenziale per crescere in futuro.

Conclusione

Ci sono molte librerie in attesa di essere implementate nei tuoi progetti. Quelle presentate sopra sono una selezione delle migliori combinazioni di raffinatezza e stabilità. Sebbene l'utilizzo di una libreria di animazioni nei tuoi progetti possa sicuramente migliorare l'interattività, se abusata, l'animazione produce l'effetto opposto a quello previsto e confonde l'utente. Stai attento e usalo con saggezza.
E tu, quali sono le tue librerie di animazione preferite?
Articolo originale de Pantalone Tanay
www.sitepoint.com/top-9-animation-libraries-use-2016/
Tradotto dall'inglese da JS Staff
Antoine @JS-Repubblica

[tipo separatore=”” size=”” icon=”stella”] [actionbox color=”default” title=”” description=”JS-REPUBLIC è una società di servizi specializzata nello sviluppo di JavaScript. Siamo un centro di formazione riconosciuto. Trova tutta la nostra formazione tecnica sul nostro sito partner dedicato alla Formazione” btn_label=”La nostra formazione” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]