L'API Web Animations fournit des primitives puissantes pour décrire les animations impératives à partir de JavaScript. Mais qu'est-ce que cela signifie ? Découvrez les ressources à votre disposition, y compris les démonstrations et les ateliers de programmation de Google.
Contexte
Fondamentalement, l'API fournit la méthode Element.animate().
Voyons un exemple qui anime la couleur d'arrière-plan, passant du rouge au vert-
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Cette méthode est compatible avec tous les navigateurs récents, avec une solution de remplacement de polyfill très efficace (nous y reviendrons plus tard). La compatibilité native avec cette méthode (et son objet lecteur) a été généralisée depuis Chrome 39. Il est également disponible en mode natif dans Opera, et pour Firefox, le développement actif est en cours. Il s'agit d'une puissante primitive, qui mérite une place dans votre boîte à outils.
Codelabs
Un nombre croissant d'ateliers de programmation sont disponibles pour l'API Web Animations. Ces guides d'auto-formation présentent différents concepts de l'API. Dans la plupart de ces ateliers de programmation, vous allez utiliser du contenu statique et l'améliorer avec des effets d'animation.
Ces ateliers de programmation et les liens ou ressources associés constituent le meilleur point de départ si vous souhaitez découvrir les nouvelles primitives disponibles dans Web Animations. Pour une idée de ce que vous pourriez créer, regardez cet effet révélateur inspiré d'Android :
Si vous débutez, ne cherchez plus !
Démonstrations
Si vous cherchez l'inspiration, n'oubliez pas de consulter les démonstrations des animations Web inspirées de Material, dont la source est hébergée sur GitHub. Ceux-ci présentent une variété d'effets incroyables et vous pouvez afficher le code source de chaque démo de manière intégrée.
Les démonstrations incluent une galaxie en rotation colorée, une terre en rotation ou même différents effets sur un élément ancien et tout simple.
Polyfill
Pour assurer une compatibilité optimale avec tous les navigateurs récents, vous pouvez utiliser une bibliothèque polyfill. L'API Web Animations propose un polyfill, actuellement disponible, qui la met à disposition de tous les navigateurs récents, y compris Internet Explorer, Firefox et Safari.
Si vous vous sentez aventureux, vous pouvez utiliser le polyfill web-animations-next, qui inclut également des fonctionnalités qui n'ont pas encore été finalisées, comme les constructeurs composables GroupEffect et SequenceEffect.
Pour comparer les deux polyfills, veuillez consulter la page d'accueil.
Pour utiliser l'un ou l'autre polyfill dans votre code, vous disposez de plusieurs options.
Utilisez un CDN, tel que cdnjs ou jsDelivr, ou ciblez une version spécifique via rawgit.com.
Installer via NPM ou Bower
$ npm install web-animations-js $ bower install web-animations-js ```
Dans tous les cas, il vous suffit d'inclure le polyfill dans un tag de script avant tout autre code-
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Autres ressources
Pour une présentation plus technique, consultez les spécifications W3C.
Dan Wilson a également rédigé un excellent ensemble de posts sur Web Animations, y compris sur la façon de l'utiliser avec la nouvelle propriété CSS motion-path.
Pour voir quelques exemples avec motion-path, consultez le document d'Eric Willigers.