L'API Web Animations, inizialmente distribuita in Chrome 36, offre un comodo controllo JavaScript delle animazioni nel browser e viene implementata anche in Gecko e WebKit.
Chrome 50 introduce modifiche per migliorare l'interoperabilità con altri browser e per essere più conforme alle specifiche. Queste modifiche sono:
- Annullare eventi
Animation.id- Modifica dello stato per il metodo
pause() - Ritiro dei nomi tra linee tratteggiate come chiavi nei fotogrammi chiave
In Chrome 51, alcune di queste modifiche sono definitive:
- Rimozione dei nomi tra linee tratteggiate come chiavi nei fotogrammi chiave
Annullare eventi
L'interfaccia Animation include un metodo per annullare un'animazione, chiamato cancel().
Chrome 50 implementa l'attivazione dell'evento di annullamento quando il metodo viene chiamato come previsto dalla specifica, il che attiva la gestione degli eventi tramite l'attributo oncancel se è stato inizializzato.
Supporto per Animation.id
Quando crei un'animazione utilizzando
element.animate()
puoi passare una serie di proprietà. Ad esempio, ecco un esempio di animazioni dell'opacità su un oggetto:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Se specifichi la proprietà id, questa verrà impostata sull'oggetto Animation restituito, il che può essere utile per il debug dei contenuti quando devi gestire molti oggetti Animation. Ecco un esempio di come specificare un id per un'animazione che hai creato:
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, deve essere impostato su paused
dopo aver chiamato il metodo paused(). Nelle versioni di Chrome precedenti alla 50, l'attributo playState indicava idle se l'animazione non era ancora iniziata, ma ora riflette lo stato corretto, ovvero paused.
Rimozione dei nomi tra linee tratteggiate come chiavi nei fotogrammi chiave
Per rispettare ulteriormente le specifiche e altre implementazioni, Chrome 50 invia un avviso alla console se vengono utilizzati nomi con trattini per le chiavi nelle animazioni con keyframe. Le stringhe corrette da utilizzare sono i nomi in maiuscolo come da algoritmo di conversione della proprietà CSS all'attributo IDL.
Ad esempio, la proprietà CSS margin-left richiede di passare
marginLeft come chiave.
Chrome 51 rimuove del tutto il supporto per i nomi con trattini, quindi è un buon momento per correggere eventuali contenuti esistenti con i nomi corretti in base alle specifiche.
Riepilogo
Queste modifiche avvicinano l'implementazione di Animazione web di Chrome a quella di altri browser e la rendono più conforme alla specifica, il che contribuisce a semplificare la creazione dei contenuti delle pagine web per una migliore interoperabilità.