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.
Arrière-plan
L'API fournit principalement 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 polyfill de secours (nous y reviendrons plus tard). La compatibilité native avec cette méthode et son objet lecteur est devenue largement disponible dans Chrome 39. Elle est également disponible en mode natif dans Opera et est en cours de développement pour Firefox. Il s'agit d'une primitive puissante qui mérite sa place 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 à votre rythme qui présentent différents concepts de l'API. Dans la plupart de ces ateliers de programmation, vous allez prendre du contenu statique et l'améliorer avec des effets d'animation.
Ces ateliers de programmation, ainsi que les liens ou ressources associés, sont le point de départ idéal si vous souhaitez comprendre les nouvelles primitives disponibles dans Web Animations. Pour avoir une idée de ce que vous pouvez créer, consultez cet effet de révélation inspiré d'Android :
Si vous débutez, vous êtes au bon endroit !
Démonstrations
Si vous cherchez l'inspiration, n'oubliez pas de consulter les démonstrations d'animations Web inspirées de Material, dont la source est hébergée sur GitHub. Ils présentent une variété d'effets étonnants et vous pouvez afficher le code source de chaque démo en ligne.
Les démos incluent une galaxie colorée en rotation, une Terre en rotation ou même simplement divers effets sur un élément simple.
Polyfill
Pour garantir une excellente compatibilité avec tous les navigateurs modernes, vous pouvez utiliser une bibliothèque de polyfills. L'API Web Animations dispose d'un polyfill disponible dès maintenant qui la rend compatible avec tous les navigateurs modernes, y compris Internet Explorer, Firefox et Safari.
Si vous vous sentez d'humeur aventureuse, vous pouvez utiliser le polyfill web-animations-next, qui inclut également des fonctionnalités qui ne sont pas encore finalisées, telles que les constructeurs composables GroupEffect et SequenceEffect.
Pour comparer les deux polyfills, consultez la page d'accueil.
Pour utiliser l'un ou l'autre des polyfills dans votre code, vous avez plusieurs options.
Utilisez un CDN tel que cdnjs, jsDelivr ou ciblez une version spécifique via rawgit.com.
Installer à l'aide de 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 introduction plus technique, consultez la spécification W3C.
Dan Wilson a également écrit une excellente série d'articles sur Web Animations, y compris sur la façon de l'utiliser avec la nouvelle propriété CSS motion-path.
Pour obtenir des exemples d'utilisation de motion-path, consultez le document d'Eric Willigers.