Anime.js - Una libreria di animazioni JavaScript leggero
Animazione web ha fatto molta strada. Non solo gli sviluppatori possono realizzare animazioni usando una combinazione di CSS / SVG / JS, ma ce ne sono decine di librerie gratuite per risparmiare tempo nel processo.
Uno dei miei preferiti è Anime.js, un open source completamente gratuito Libreria di animazioni JavaScript.
Questa libreria può Fallo tutto. Suo costruito su JavaScript ma anche fa molto affidamento sulle animazioni CSS. Puoi scegliere come target singoli elementi di pagina tramite il DOM oppure puoi anche scegliere come target SVG personalizzati.
Tutta la documentazione è auto-ospitato su GitHub, quindi potrebbe essere necessario scorrere per trovare esattamente quello che stai cercando. Ma ogni caratteristica di animazione viene fornito con alcuni parametri come il ritardo, la durata e l'andamento.
Nota questa libreria non viene con molti stili di animazione predefiniti. Anime.js è fatto per gli sviluppatori chi vuole personalizzare le loro animazioni senza scrivere un codice verboso.
Per un esempio dal vivo, controlla la penna Codepen qui sotto. Il codice è estremamente semplice ma ottieni un'animazione credibile con schiacciare ed allungare più anticipazione, entrambi i fondamenti dell'animazione.
Un giusto avvertimento: la libreria Anime.js è denso. Non è poi così difficile creare un'animazione personalizzata, ma è necessario capire alcune basi come l'easing e la comune sintassi JavaScript per i callback e le opzioni.
Ma tutte le informazioni di cui hai bisogno è sul pagina repo, Compreso molti esempi di codice e tabelle di documentazione dettagliate. E puoi sfogliare le segnalazioni di bug aperte o controllare il supporto del browser che attualmente include tutti i principali browser e IE 10+.
Questa è facilmente una delle migliori librerie di animazione per gli sviluppatori web e dovrebbe essere la soluzione ideale per qualsiasi animazione web complessa.
Per vedere un mucchio di esempi dal vivo, controlla questa raccolta di demo Anime.js ospitate su CodePen. Sotto, ho incorporato il mio preferito che anima l'intero logo da zero, con vera vivacità.
