L'API Web Animations fornisce primitive efficaci per descrivere animazioni imperative da JavaScript, ma cosa significa? Scopri le risorse a tua disposizione, tra cui le demo e i codelab di Google.
Sfondo
L'API fornisce principalmente 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 fallback polyfill (di cui parleremo più avanti). Il supporto nativo di questo metodo e del relativo oggetto player è diventato di dominio pubblico in Chrome 39. È disponibile anche in modo nativo in Opera ed è in sviluppo attivo per Firefox. Si tratta di un'entità di base potente che merita un posto nella tua cassetta degli attrezzi.
Codelab
Sono disponibili un numero crescente di codelab per l'API Web Animations. Si tratta di guide autoguidate che illustrano diversi concetti dell'API. Nella maggior parte di questi codelab, tratterai contenuti statici e li migliorerai con effetti di animazione.
Questi codelab e i link o le risorse correlati sono il punto di partenza migliore per comprendere le nuove primitive disponibili in Web Animations. Per farti un'idea di cosa puoi creare, dai un'occhiata a questo effetto di rivelazione ispirato ad Android:
Se sei appena all'inizio, non cercare oltre.
Demo
Se cerchi ispirazione, dai un'occhiata alle demo di animazioni web ispirate a Material, il cui codice sorgente è ospitato su GitHub. Queste demo mostrano una serie di effetti sorprendenti e puoi visualizzare il codice sorgente di ogni demo in linea.
Le demo includono una galassia colorata in rotazione, la Terra in rotazione o anche solo una serie di effetti su un normale elemento.
Polyfill
Per garantire un'ottima assistenza su tutti i browser moderni, puoi utilizzare una libreria polyfill. Per l'API Web Animations è disponibile un polyfill che la rende disponibile su tutti i browser moderni, inclusi Internet Explorer, Firefox e Safari.
Se ti senti coraggioso, puoi utilizzare il polyfill web-animations-next, che include anche funzionalità che devono ancora essere finalizzate, come i costruttori composable GroupEffect e SequenceEffect.
Per un confronto tra i due polyfill, visita la home page.
Per utilizzare uno dei polyfill nel codice, hai a disposizione alcune opzioni.
Utilizza una CDN, come cdnjs, jsDelivr o scegli come target una release specifica tramite rawgit.com
Installazione tramite NPM 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
Se vuoi leggere un'introduzione più tecnica, consulta le specifiche W3C.
Dan Wilson ha anche scritto una serie di ottimi post sulle animazioni web, tra cui come utilizzarle insieme alla nuova proprietà CSS motion-path.
Per alcuni esempi che utilizzano motion-path, consulta la documentazione di Eric Willigers.