La compatibilité native avec les animations Web a été lancée pour la première fois dans Chrome 36 et a été mise à jour avec le contrôle de la lecture dans Chrome 39. La méthode Element.animate() peut être utilisée pour déclencher des animations impératives directement à partir de JavaScript. L'objet renvoyé peut être utilisé pour contrôler la lecture de ces animations. Ces méthodes sont détaillées dans le projet actuel de la spécification W3C sur les animations Web.
Un polyfill fourni est en cours de développement. Il suit toutes les fonctionnalités d'animation Web implémentées en mode natif et est compatible avec tous les navigateurs modernes. Ces méthodes de base sont prêtes à l'emploi dès maintenant et méritent de faire partie de votre boîte à outils pour créer des expériences riches qui bénéficient des animations (comme pour l'application Web Google I/O 2015).
Modifications apportées au constructeur et aux groupes
La spécification Web Animations décrit également les groupes et séquences, ainsi que les constructeurs pour les animations et les lecteurs. Elles sont disponibles dans le polyfill web-animations-next, qui a été conçu pour présenter des fonctionnalités en cours de discussion et qui ne sont pas encore implémentées en mode natif. Suite aux commentaires des développeurs, l'équipe qui développe les animations Web renomme ces fonctionnalités pour qu'elles soient plus explicites.
Le FXTF s'est récemment réuni à Sydney, en Australie, et a discuté de la nomenclature, car un certain nombre de développeurs ont soulevé des points valables concernant la confusion que certains noms peuvent créer. Les modifications de dénomination suivantes ont donc été convenues:
- Animation devient KeyframeEffect
- AnimationSequence devient SequenceEffect
- AnimationGroup devient GroupEffect
- AnimationPlayer devient Animation
N'oubliez pas que, bien que les animations et leurs lecteurs soient disponibles en mode natif dans Chrome et dans le polyfill, ils sont actuellement créés directement via la méthode Element.animate(). Aucune modification n'est requise pour le code existant qui utilise la méthode Element.animate().
Les nouveaux noms représentent plus précisément le comportement fourni par chaque objet. KeyframeEffect, par exemple, décrit les effets basés sur des images clés pouvant cibler des éléments HTML. En revanche, le nouvel objet Animation représente une animation dans l'un des nombreux états (par exemple, en cours de lecture, en pause, etc.).
SourceCodeEffect
Si vous utilisez des parties de la spécification provisoire via le polyfill web-animations-next, vous devrez mettre à jour votre code pendant la période d'abandon pour refléter ces nouveaux noms. Conformément au Règlement sur les modifications des polyfills, nous nous efforçons de prendre en charge une ancienne version pendant trois mois et d'afficher des avertissements dans la console si votre site utilise des fonctionnalités ou des noms obsolètes.
Si vous souhaitez essayer ces fonctionnalités, attendez la version 2 du polyfill pour profiter de ces nouveaux noms. Enfin, veillez à vous abonner au groupe web-animations-changes pour être informé de toute autre modification.