La compatibilité native avec les animations Web a d'abord été disponible dans Chrome 36. La commande de lecture a été mise à jour dans Chrome 39. La méthode Element.animate() permet de 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 la version actuelle de la version préliminaire des spécifications W3C de Web Animations.
Il existe un polyfill expédié en cours de développement qui suit toutes les fonctionnalités d'animations Web implémentées de manière native et est compatible avec tous les navigateurs récents. Ces principales méthodes sont prêtes à l'emploi et méritent de vous aider à créer des expériences enrichies exploitant des animations (comme pour l'application Web Google I/O 2015).
Modifications apportées aux constructeurs et aux groupes
La spécification Web Animations décrit également les groupes et les séquences, ainsi que les constructeurs d'animations et de lecteurs. Celles-ci étaient disponibles dans le polyfill web-animations-next, qui a été conçu pour présenter des éléments géographiques encore en cours de discussion, mais qui n'ont pas encore été implémentés de manière native. En réponse aux commentaires des développeurs, l'équipe qui développe Web Animations renomme ces fonctionnalités pour qu'elles soient plus explicites.
L'équipe FXTF s'est récemment rencontrée à Sydney, en Australie, pour discuter de la naming. En effet, un certain nombre de développeurs ont soulevé des arguments valables concernant certains noms qui prêtent à confusion. En conséquence, les changements de dénomination suivants ont été convenus:
- Animation devient KeyframeEffect
- AnimationSequence devient SequenceEffect
- AnimationGroup devient GroupEffect.
- AnimationPlayer devient Animation.
N'oubliez pas que même si les animations et leurs lecteurs sont disponibles nativement dans Chrome et dans le polyfill, elles sont actuellement créées directement via la méthode Element.animate(). Le code existant qui utilise la méthode Element.animate() ne nécessitera aucune modification.
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 qui peuvent cibler des éléments HTML. En revanche, le nouvel objet Animation représente une animation dans l'un des nombreux états (lecture, mise en pause, etc.).
SourceCodeEffect
Si vous utilisez des parties de la spécification brouillon 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 concernant les modifications des polyfills, nous visons à assurer la compatibilité avec une ancienne version pendant trois mois et à fournir des avertissements à la console si votre site utilise des fonctionnalités ou des noms obsolètes.
Si vous souhaitez essayer ces fonctionnalités, tenez-vous informé de la version v2 du polyfill pour bénéficier de ces nouveaux noms. Enfin, abonnez-vous au groupe web-animations-changes pour être informé des autres modifications.