L'API Web Animations fornisce potenti primitive per descrivere le animazioni imperative di JavaScript, ma cosa significa? Scopri le risorse a tua disposizione, tra cui le demo e i codelab di Google.
Contesto
Fondamentalmente, l'API fornisce il metodo Element.animate().
Vediamo un esempio che anima il colore di sfondo dal rosso al verde
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Questo metodo è supportato in tutti i browser moderni, con un ottimo polyfill di riserva (ulteriori informazioni in seguito). Il supporto nativo per questo metodo, e il relativo oggetto player, è diventato ampiamente disponibile nell'ambito di Chrome 39. È disponibile in modo nativo in Opera ed è in fase di sviluppo attivo per Firefox. Questa è una potente primitiva che merita un posto nella tua strumenti.
Codelab
Un numero crescente di codelab è disponibile per l'API Web Animations. Si tratta di guide autogestite che mostrano concetti diversi dell'API. Nella maggior parte di questi codelab, puoi acquisire contenuti statici e migliorarli con effetti di animazione.
Questi codelab e i relativi link o risorse sono il punto di partenza ideale per comprendere le nuove primitive disponibili nelle animazioni web. Per avere un'idea di cosa potresti realizzare, dai un'occhiata a questa rivelazione ispirata ad Android:
Se sei solo all'inizio, non cercare oltre!
Demo
Se sei in cerca di ispirazione, dai un'occhiata alle demo delle animazioni web ispirate ai materiali, con la fonte ospitata su GitHub. Questi esempi dimostrano una varietà di incredibili effetti e puoi visualizzare il codice sorgente di ogni demo in linea.
Le demo includono una galassia rotante colorata, una Terra rotante o anche una serie di effetti su un vecchio elemento.
Polyfill
Per garantire un supporto ottimale su tutti i browser moderni, puoi utilizzare una libreria di polyfill. L'API Web Animations dispone di un polyfill disponibile al momento che lo supporta in tutti i browser moderni, inclusi Internet Explorer, Firefox e Safari.
Se ti senti in vena di avventure, puoi usare il polyfill web-animations-next, che include anche funzionalità ancora da finalizzare, come i costruttori componibili GroupEffect e SequenceEffect.
Per un confronto tra i due polyfill, consulta la home page.
Per utilizzare il polyfill nel codice, hai a disposizione alcune opzioni.
Usa una CDN, ad esempio cdnjs, jsDelivr, o scegli come target una release specifica tramite rawgit.com
Installa tramite Gestione dei partner di rete o Bower
$ npm install web-animations-js $ bower install web-animations-js ```
In tutti i casi, puoi semplicemente includere il polyfill in un tag script prima di qualsiasi altro codice
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Altre risorse
Per un'introduzione più tecnica, consulta le specifiche del W3C.
Dan Wilson ha anche scritto un ottimo insieme di post sulle animazioni web, in cui spiega come utilizzarla insieme alla nuova proprietà motion-path CSS.
Per alcuni esempi che utilizzano motion-path, consulta il documento di Eric Willigers.