L'API web Animations, distribuita per la prima volta in Chrome 36, offre un comodo controllo JavaScript delle animazioni nel browser, oltre a essere implementata in Gecko e WebKit.
Chrome 50 introduce modifiche per migliorare l'interoperabilità con altri browser ed essere più conformi alle specifiche. Queste modifiche sono:
- Annullare eventi
Animation.id- Modifica dello stato per il metodo
pause() - Ritiro dei nomi tratteggiati come chiavi nei fotogrammi chiave
In Chrome 51, alcune di queste modifiche sono state finalizzate:
- Rimozione dei nomi tratteggiati come chiavi nei fotogrammi chiave
Annullare eventi
L'interfaccia Animazione include un metodo per annullare un'animazione, un modo buffo chiamato cancel().
Chrome 50 implementa l'attivazione dell'evento di annullamento quando il metodo viene chiamato in base alle specifiche, il che attiva la gestione degli eventi tramite l'attributo oncancel se viene inizializzato.
Supporto per Animation.id
Quando crei un'animazione utilizzando element.animate(), puoi trasferire una serie di proprietà. Ad esempio, ecco un esempio di opacità animata su un oggetto:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Se specifichi la proprietà id, verrà impostata sull'oggetto Animazione restituito che può essere utile per il debug dei contenuti quando hai molti oggetti Animazione da gestire. Ecco un esempio di come specificare un id per un'animazione di cui crei un'istanza:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Modifica dello stato per il metodo pause()
Il metodo pause()
viene utilizzato per mettere in pausa un'animazione in corso. Se controlli lo stato dell'animazione utilizzando l'attributo playState, questo deve essere impostato su paused dopo la chiamata del metodo paused(). Nelle versioni di Chrome precedenti alla 50, l'attributo playState indicava idle se l'animazione non era ancora iniziata, ma ora rispecchia lo stato corretto paused.
Rimozione dei nomi tratteggiati come chiavi nei fotogrammi chiave
Per rispettare ulteriormente le specifiche e altre implementazioni, Chrome 50 invia un avviso alla console se vengono utilizzati nomi tratteggiati per le chiavi nelle animazioni dei fotogrammi chiave. Le stringhe corrette da utilizzare sono i nomi CammelCase secondo la proprietà CSS per l'algoritmo di conversione IDL.
Ad esempio, la proprietà CSS margin-left richiederebbe di passare
marginLeft come chiave.
Chrome 51 rimuove completamente il supporto per i nomi tratteggiati, quindi ora è il momento giusto per correggere tutti i contenuti esistenti con la denominazione corretta in base alle specifiche.
Riepilogo
Queste modifiche avvicinano l'implementazione delle animazioni web di Chrome alle implementazioni di altri browser e sono più conformi alla specifica, il che contribuisce a semplificare la creazione dei contenuti delle pagine web per una migliore interoperabilità.