L'API Web Animations fournit de puissantes primitives permettant de décrire des 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
L'API fournit la méthode Element.animate() à la base.
Voyons 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 récents, avec une solution de remplacement de polyfill efficace (nous y reviendrons plus tard). La compatibilité native de cette méthode et de son objet de lecteur est désormais disponible pour un grand nombre d'utilisateurs 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 puissante primitive qui mérite une place dans votre boîte à outils.
Ateliers de programmation
Un nombre croissant d'ateliers de programmation sont disponibles pour l'API Web Animations. Ces guides d'auto-formation présentent les 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, ainsi que les liens ou ressources associés, constituent le meilleur point de départ pour comprendre les nouvelles primitives disponibles dans Web Animations. Pour vous faire une idée de ce que vous pourriez 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émonstration Web Animations inspirée de Material Design, dont le code source est hébergé sur GitHub. Ils illustrent divers effets étonnants. Vous pouvez afficher le code source de chaque démonstration de façon intégrée.
Les démonstrations incluent une galaxie colorée en rotation, la Terre en rotation ou simplement plusieurs effets sur un vieil élément brut.
Polyfill
Pour garantir une compatibilité optimale avec tous les navigateurs récents, vous pouvez utiliser une bibliothèque polyfill. L'API Web Animations dispose d'un polyfill disponible actuellement qui le rend compatible avec 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 de ces polyfills dans votre code, plusieurs options s'offrent à vous.
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
Si vous souhaitez lire une présentation plus technique, veuillez consulter 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 des exemples avec motion-path, consultez le document d'Eric Willigers.