Bonjour mes amis!Les API Web évoluent constamment. Certains d'entre eux, tels que Console ou Canvas, sont bien pris en charge par tous les navigateurs, d'autres sont encore en cours de développement.L'une des API en cours de développement est l'API Web Animations ou WAAPI. Malgré le fait que la première version de la spécification a été publiée en 2012 et que l'API elle-même ait été implémentée pour la première fois dans les navigateurs Firefox et Chrome en 2014, je l'ai découvert récemment (je n'en ai pas entendu parler auparavant non plus - environ Per.).Il permet aux développeurs de travailler avec des animations CSS en utilisant JavaScript. Sa syntaxe est similaire à la syntaxe des animations CSS traditionnelles, mais elle possède certaines fonctionnalités qui facilitent la création et la modification des animations par les développeurs.Regardons cette API avec un exemple simple.Ci-dessous, nous voyons un carré tournant, dont la couleur change à chaque tour.
CSS pourrait ressembler à ceci:#cube {
width: 40px;
height: 40px;
margin: 50%;
background-color: pink;
animation: rotateCube 1s infinite;
}
@keyframes rotateCube {
0% {
transform: rotate(0deg);
}
30% {
background-color: purple;
}
100% {
transform: rotate(180deg);
}
}
Faites de même avec WAAPI.Créer une animation
Tout commence par la création d'un objet Keyframes contenant des informations similaires à celles contenues dans la directive @keyframes de notre CSS:let cubeRotating = [
{transform: 'rotate(0deg)', backgroundColor: 'pink'},
{backgroundColor: 'purple', offset: 0.3},
{transform: 'rotate(180deg)', backgroundColor: 'pink'}
]
Nous voyons deux différences principales:- Nous devons ajouter backgroundColor à d'autres étapes.
- Nous n'avons pas besoin de déterminer le temps pour terminer chaque étape en pourcentage.
WAAPI divise automatiquement l'animation en parties égales par le nombre de clés, donc dans notre cas, la couleur d'arrière-plan changera d'environ la moitié de l'animation.Cependant, nous voulons que cela se produise de 30%, nous ajoutons donc la propriété offset avec une valeur de 0,3 dans la deuxième étape.Il y a une chose importante à retenir: un objet Keyframes doit avoir au moins deux clés. Sinon, une erreur NotSupportedError sera levée.Ensuite, un objet est créé contenant des propriétés d'animation responsables de la durée et du nombre de répétitions:let cubeTiming = {
duration: 1000,
iterations: Infinity
}
La durée de l'animation est définie en millisecondes.Au lieu de «infini», nous utilisons le mot-clé «Infini».Enfin, pour exécuter l'animation, nous utilisons la méthode Element.animate:document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
Il existe plusieurs autres options de syntaxe. Des exemples peuvent être trouvés ici .Mais ce n'est pas tout. Le fait est qu'avec WAAPI nous pouvons contrôler la lecture des animations!Contrôle de lecture d'animation
L'appel de la méthode animate démarre immédiatement l'animation, mais ce n'est pas toujours ce que nous voulons. Par conséquent, nous pouvons appeler les méthodes pause et play pour arrêter et démarrer l'animation, respectivement:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
cubeAnimation.pause()
document.body.onclick = () => cubeAnimation.play()
Dans notre exemple, nous travaillons avec une seule animation, mais vous pouvez ajouter plusieurs «animations» à la page et les gérer à votre guise.Parmi les méthodes WAAPI disponibles, il existe également des méthodes de finition, d'annulation et d'inversion.Nous pouvons également contrôler la vitesse de lecture de l'animation:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
document.body.onclick = () => cubeAnimation.playbackRate *= 1.5
Ce code accélère la rotation du carré lorsque vous cliquez dessus.
Jusqu'à présent, nous avons appris à créer une animation et à contrôler sa lecture. Une autre fonctionnalité WAAPI est l'accès à toutes les animations à la fois.Gérez plusieurs animations
WAAPI dispose d'une méthode getAnimations qui vous permet d'accéder à toutes les animations créées.Supposons que nous voulons ralentir toutes les animations qui sont sur la page si l'utilisateur a activé prefers-reduction-motion (la fonction multimédia CSS prefers-réduite-motion peut être utilisée pour déterminer si l'utilisateur a demandé au système d'exploitation de minimiser la quantité d'animation ou de mouvement qu'il utilise - environ par.):const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
if(mediaQuery.matches){
document.getAnimations().forEach(animation => {
animation.playbackRate *= 0.5
})
}
Dans l'exemple ci-dessus, nous recherchons la fonction multimédia qui préfère le mouvement réduit et, si sa valeur est réduite, nous obtenons toutes les animations sur la page et réduisons de moitié leur vitesse de lecture.C'est l'une de ces choses qui rendent WAAPI très utile. Nous pouvons apporter des modifications à plusieurs animations en modifiant une propriété.Dépendances
Une autre caractéristique intéressante de WAAPI est la possibilité de déterminer la dépendance des propriétés d'une animation par rapport aux propriétés d'une autre.Par exemple, si nous avons deux carrés et que nous voulons que le second tourne deux fois plus vite que le premier, nous pouvons le faire de deux manières.Première voie:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: 500,
iterations: Infinity
}
)
Le temps d'animation du premier carré est de 1 seconde, le second - 500 millisecondes.Cependant, avec cette approche, lorsque nous modifions le temps d'animation du premier carré, nous devons faire de même pour le deuxième carré.Imaginez à quel point cela devient difficile quand il y a beaucoup d'animations ou un grand nombre d'objets animés?La meilleure façon de résoudre notre problème est d'établir la dépendance de la rotation du deuxième carré sur le premier:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: cube1Animation.effect.timing.duration / 2,
iterations: Infinity
}
)
Ainsi, nous utilisons le temps d'animation du premier carré pour déterminer le temps d'animation du deuxième carré. Maintenant, lorsque vous modifiez la durée d'animation du premier carré, le second tourne toujours deux fois plus vite!
Performance
En parlant de performances, je n'ai pas remarqué de grande différence entre l'utilisation de CSS et WAAPI. Mais cela peut être dû à la simplicité de mon exemple.Un avantage important de WAAPI par rapport aux autres méthodes de création d'animation dans JS est qu'il s'exécute dans un thread séparé, ce qui permet au thread principal "d'oublier" l'animation et de faire le reste du code.Prise en charge du navigateur
WAAPI est actuellement à l'état de brouillon et est partiellement pris en charge dans les versions récentes de Firefox et Chrome, ainsi que dans les principaux navigateurs mobiles.La prise en charge partielle signifie que les navigateurs prennent en charge les méthodes telles que lecture, pause, inversion, finition et playbackRate, mais ne prennent pas en charge getAnimations.
Il existe un polyphile pour WAAPI dans tous les navigateurs.C'est tout pour moi!Pour en savoir plus:Utilisation de l'APIWeb Animations Exemples d' API Web AnimationsGrande série «Parlons de l'API Web Animations» de Dan WilsonMerci de votre attention.