Risorse animazioni web

Sam Thorogood

Twitter GitHub Glitch Homepage

L'API Web Animations fornisce primitive efficaci per descrivere le animazioni imperative di JavaScript, ma che cosa significa? Scopri le risorse a tua disposizione, tra cui le demo e i codelab di Google.

Contesto

Essenzialmente, l'API fornisce il metodo Element.animate(). Osserviamo 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 (ne parleremo più avanti). Il supporto nativo di questo metodo e del suo oggetto player è diventato ampiamente disponibile in Chrome 39. È disponibile anche in modo nativo in Opera ed è in sviluppo attivo per Firefox. Questa è una primitiva potente che merita un posto nella tua casella degli attrezzi.

Nota: per un'introduzione ai diversi approcci all'animazione sul web, comprese le animazioni web, consulta le pagine Modern Animation Fundamentals su YouTube e Animations on web.dev.

codelab

È disponibile un numero sempre maggiore di codelab per l'API Web Animations. Si tratta di guide di autoapprendimento che mostrano concetti diversi dell'API. Nella maggior parte di questi codelab, devi acquisire contenuti statici e migliorarli con effetti di animazione.

Questi codelab e i link o le risorse correlati sono il punto di partenza in assoluto migliore se stai cercando di comprendere le nuove primitive disponibili nelle animazioni web. Per avere un'idea di cosa potresti creare, dai un'occhiata a questo effetto rivelazione ispirato ad Android.

Se sei solo all'inizio, non cercare oltre!

Demo

Se sei in cerca di ispirazione, dai un'occhiata alle demo di animazioni ispirate al materiale, la cui fonte è ospitata su GitHub. Questi dimostrano una varietà di effetti sorprendenti e puoi visualizzare il codice sorgente di ogni demo in linea.

Le demo includono una galassia colorata rotante, una Terra rotante o persino una varietà di effetti su un vecchio elemento semplice.

Riempimento

Per garantire un supporto eccellente su tutti i browser moderni, puoi utilizzare una libreria di polyfill. L'API Web Animations ha un polyfill disponibile al momento che la rende disponibile 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 definire, come i costruttori componibili GroupEffect e SequenceEffect. Per un confronto tra i due polyfill, visita la home page.

Per utilizzare il polyfill nel codice, hai a disposizione alcune opzioni.

1. Usa una CDN, come cdnjs, jsDelivr o scegli come target una release specifica tramite rawgit.com

2. 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

Se desideri leggere un'introduzione più tecnica, consulta le specifiche di W3C.

Inoltre, Dan Wilson ha scritto un'ottima serie di post sulle animazioni web, spiegando come utilizzarlo insieme alla nuova proprietà motion-path CSS. Per alcuni esempi che utilizzano motion-path, consulta il documento di Eric Willigers.