Il supporto nativo per le animazioni web è stato rilasciato per la prima volta in Chrome 36 ed è stato aggiornato con il controllo della riproduzione in Chrome 39. Il metodo Element.animate() può essere utilizzato per attivare animazioni imperative direttamente da JavaScript e il relativo oggetto restituito può essere utilizzato per controllare la riproduzione di queste animazioni. Questi metodi sono descritti in dettaglio nella bozza attuale delle specifiche W3C per le animazioni web.
È in fase di sviluppo attivo un polyfill incluso che monitora tutte le funzionalità di animazione web implementate in modo nativo e che è supportato in tutti i browser moderni. Questi metodi di base sono pronti per essere utilizzati e meritano di far parte della tua cassetta degli attrezzi per creare esperienze ricche che traggono vantaggio dalle animazioni (ad esempio per l'app web Google I/O 2015.
Modifiche al costruttore e ai gruppi
Le specifiche di Web Animations descrivono anche gruppi e sequenze, nonché i costruttori per animazioni e player. Queste sono disponibili nel polyfill web-animations-next, progettato per mostrare le funzionalità ancora in discussione e non ancora implementate in modo nativo. In risposta al feedback degli sviluppatori, il team che sviluppa le animazioni web sta rinominando queste funzionalità in modo che siano più autoesplicative.
Di recente il gruppo FXTF si è riunito a Sydney, in Australia, e ha discusso della nomenclatura, poiché alcuni sviluppatori hanno sollevato questioni valide in merito alla confusione generata da alcuni nomi. Di conseguenza, sono state concordate le seguenti modifiche ai nomi:
- Animation diventa KeyframeEffect
- AnimationSequence diventa SequenceEffect
- AnimationGroup diventa GroupEffect
- AnimationPlayer diventa Animation
Tieni presente che, anche se le animazioni e i relativi player sono disponibili in modo nativo in Chrome e come parte del polyfill, al momento vengono creati direttamente tramite il metodo Element.animate(). Il codice esistente che utilizza il metodo Element.animate() non richiede modifiche.
I nuovi nomi rappresentano in modo più accurato il comportamento fornito da ciascun oggetto. KeyframeEffect, ad esempio, descrive gli effetti basati su keyframe che possono avere come target elementi HTML. Al contrario, il nuovo oggetto Animation rappresenta un'animazione in uno dei molti stati (ad esempio riproduzione, messa in pausa e così via).
SourceCodeEffect
Se utilizzi parti della specifica in versione preliminare tramite il polyfill web-animations-next, dovrai aggiornare il codice entro il periodo di ritiro per riflettere questi nuovi nomi. Ai sensi delle norme relative alle modifiche ai polyfill, il nostro obiettivo è supportare una versione precedente per tre mesi e fornire avvisi della console se il tuo sito utilizza funzionalità o nomi non più supportati.
Se vuoi provare queste funzionalità, tieni d'occhio la release 2 del polyfill per sfruttare questi nuovi nomi. Infine, assicurati di iscriverti al gruppo web-animations-changes per ricevere informazioni su eventuali altre modifiche.