Il supporto nativo per le animazioni web veniva inizialmente distribuito in Chrome 36 ed è stato aggiornato con il controllo di riproduzione in Chrome 39. Il metodo Element.animate() può essere usato per attivare animazioni imperative direttamente da JavaScript e l'oggetto restituito può essere utilizzato per controllare la riproduzione di queste animazioni. Questi metodi sono descritti dettagliatamente nella bozza corrente delle specifiche W3C per le animazioni web.
È presente un polyfill spedito in fase di sviluppo attivo che tiene traccia di tutte le funzionalità delle animazioni web implementate in modo nativo e che è supportato in tutti i browser moderni. Questi metodi principali sono già pronti per essere usati e meritano di essere inseriti nella tua serie di strumenti per creare esperienze stimolanti che traggono vantaggio dalle animazioni (come nel caso dell'app web Google I/O 2015).
Modifiche a costruttori e gruppi
Nelle specifiche delle animazioni web vengono descritti anche gruppi e sequenze e costruttori per animazioni e player. Queste funzionalità sono disponibili nel polyfill web-animations-next, che è stato progettato per mostrare le funzionalità ancora in fase di discussione e ancora da implementare in modo nativo. In risposta al feedback degli sviluppatori, il team che sviluppa le animazioni web ha cambiato il nome di queste funzionalità per renderle più intuitive.
Il FXTF si è recentemente incontrato a Sydney, in Australia, e ha discusso della naming, poiché diversi sviluppatori hanno sollevato punti validi su alcuni dei nomi che potrebbero essere confusi. Di conseguenza, sono state concordate le seguenti modifiche di denominazione:
- Animazione diventa Effetto fotogramma chiave
- AnimationSequence diventa SequenceEffect
- AnimationGroup diventa GroupEffect
- AnimationPlayer diventa Animation
Ricorda che, sebbene le animazioni e i relativi player siano 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 richiederà modifiche.
I nuovi nomi rappresentano in modo più accurato il comportamento fornito da ciascun oggetto. KeyframeEffect, ad esempio, descrive gli effetti basati su fotogrammi chiave che possono avere come target elementi HTML. Al contrario, il nuovo oggetto Animation rappresenta un'animazione in uno dei tanti stati disponibili (ad esempio in riproduzione, in pausa e così via).
SourceCodeEffect
Se utilizzi parti della bozza delle specifiche tramite il polyfill web-animations-next, dovrai aggiornare il codice entro il periodo di deprecazione per riflettere questi nuovi nomi. In base alle norme relative alle modifiche del polyfill, intendiamo supportare una versione precedente per tre mesi e fornire istruzioni di avviso della console se il tuo sito utilizza funzionalità o nomi ritirati.
Se vuoi provare queste funzionalità, fai attenzione alla release v2 del polyfill per sfruttare questi nuovi nomi. Infine, assicurati di iscriverti al gruppo web-animations-changes per conoscere eventuali altre modifiche.