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 disponibles, y compris les démonstrations et les codelabs de Google.
Contexte
Fondamentalement, l'API fournit la méthode Element.animate().
Prenons un exemple, qui anime la couleur d'arrière-plan du rouge au vert :
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Cette méthode est compatible avec tous les navigateurs modernes, avec un excellent remplacement polyfill (nous y reviendrons plus tard). La prise en charge native de cette méthode et de son objet lecteur est devenue largement disponible dans Chrome 39. Il est également disponible en mode natif dans Opera et est en développement actif pour Firefox. Il s'agit d'une primitive puissante qui mérite de figurer dans votre boîte à outils.
Ateliers de programmation
Un nombre croissant d'ateliers de programmation sont disponibles pour l'API Web Animations. Il s'agit de guides en libre-service qui présentent différents concepts de l'API. Dans la plupart de ces ateliers de programmation, vous allez prendre un contenu statique et l'améliorer avec des effets d'animation.
Ces ateliers de programmation, ainsi que les liens ou ressources associés, constituent le point de départ idéal si vous souhaitez comprendre les nouvelles primitives disponibles dans Web Animations. Pour vous donner une idée de ce que vous pouvez créer, découvrez cet effet de révélation inspiré d'Android :
Si vous débutez, ne cherchez pas plus loin !
Démonstrations
Si vous cherchez l'inspiration, consultez les démonstrations d'animations Web inspirées de Material, dont le code source est hébergé sur GitHub. Ils présentent différents effets étonnants, et vous pouvez afficher le code source de chaque démonstration en ligne.
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 modernes, vous pouvez utiliser une bibliothèque polyfill. Un polyfill est disponible dès maintenant pour l'API Web Animations. Il permet de l'utiliser dans tous les navigateurs modernes, y compris Internet Explorer, Firefox et Safari.
Si vous avez envie d'explorer de nouvelles fonctionnalités, vous pouvez utiliser le polyfill web-animations-next, qui inclut également des fonctionnalités qui ne sont pas encore finalisées, comme les constructeurs composables GroupEffect et SequenceEffect.
Pour comparer les deux polyfills, consultez 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, vous pouvez simplement inclure le polyfill dans une balise 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 la spécification W3C.
Dan Wilson a également écrit un ensemble d'articles sur les animations Web, y compris sur la façon de les utiliser avec la nouvelle propriété CSS motion-path.
Pour obtenir des exemples utilisant motion-path, consultez la documentation d'Eric Willigers.