L'API Web Animations fornisce primitive potenti per descrivere le animazioni imperative da JavaScript. Ma cosa significa? Scopri le risorse a tua disposizione, tra cui le demo e i codelab di Google.
Sfondo
Al suo interno, l'API fornisce il metodo Element.animate().
Vediamo un esempio che anima il colore di sfondo da rosso a verde:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Questo metodo è supportato in tutti i browser moderni, con un ottimo fallback polyfill (ne parleremo più avanti). Il supporto nativo per questo metodo e il relativo oggetto player è diventato disponibile su larga scala nell'ambito di Chrome 39. È disponibile anche in modo nativo in Opera ed è in fase di sviluppo attivo per Firefox. Si tratta di una primitiva potente che merita un posto nel tuo kit di strumenti.
Codelab
Un numero crescente di codelab sono disponibili per l'API Web Animations. Si tratta di guide autonome che illustrano diversi concetti dell'API. Nella maggior parte di questi codelab, prenderai contenuti statici e li migliorerai con effetti di animazione.
Questi codelab e i relativi link o risorse sono il punto di partenza ideale se vuoi comprendere le nuove primitive a tua disposizione in Web Animations. Per un'idea di cosa potresti creare, dai un'occhiata a questo effetto di rivelazione ispirato ad Android:
Se hai appena iniziato, non cercare oltre.
Demo
Se cerchi ispirazione, dai un'occhiata alle demo di Web Animations ispirate a Material, con il codice sorgente ospitato su GitHub. Questi effetti dimostrano una serie di effetti sorprendenti e puoi visualizzare il codice sorgente di ogni demo in linea.
Le demo includono una galassia colorata che ruota, la Terra che ruota o anche solo una varietà di effetti su un elemento semplice.
Polyfill
Per garantire un ottimo supporto su tutti i browser moderni, puoi utilizzare una libreria polyfill. L'API Web Animations ha un polyfill disponibile ora che la porta su tutti i browser moderni, inclusi Internet Explorer, Firefox e Safari.
Se ti senti avventuroso, puoi utilizzare 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 uno dei due polyfill nel tuo codice, hai a disposizione alcune opzioni.
Utilizza una CDN, ad esempio cdnjs, jsDelivr o scegli una release specifica tramite rawgit.com.
Installare utilizzando 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 di 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 post fantastici sulle animazioni web, anche su come utilizzarle insieme alla nuova proprietà CSS motion-path.
Per alcuni esempi di utilizzo di motion-path, consulta il documento di Eric Willigers.