API Web Animations
Utiliser efficacement l'API Web Animations
L'API Web Animations offre un moyen puissant et flexible de créer des animations directement dans le navigateur, sans avoir besoin de bibliothèques supplémentaires. Elle permet aux développeurs d'animer des éléments HTML et de contrôler ces animations de manière programmatique. Cette API intègre les fonctionnalités des animations et transitions CSS avec les capacités de JavaScript, offrant ainsi un meilleur contrôle et plus de fonctionnalités, comme la synchronisation des animations, le contrôle de leur lecture, et la possibilité de manipuler et de composer des animations dynamiquement.
Maintenant que nous avons exploré ce qu'est l'API Web Animations, ses avantages, pourquoi la choisir, quand l'utiliser et les problèmes qu'elle résout, plongeons dans la manière d'utiliser efficacement cette API pour donner vie à vos conceptions web.
Animation de base avec l'API Web Animations
La création d'une animation de base avec l'API Web Animations implique de définir les images clés de l'animation, de spécifier l'élément cible et de configurer les options d'animation. Voici un exemple simplifié d'animation de l'opacité d'un élément :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Simple Opacity Animation</title>
</head>
<body>
<h1>Simple Opacity Animation</h1>
<div
class="animated-element"
style="width: 100px; height: 100px; background-color: blue"
></div>
<button style="margin-top: 15px" onclick="startAnimation()">
Start Animation
</button>
<p id="message"></p>
<script>
let animation;
function startAnimation() {
const element = document.querySelector(".animated-element");
const keyframes = [
{ opacity: 0, offset: 0 },
{ opacity: 1, offset: 1 },
];
const options = {
duration: 1000,
easing: "ease-in-out",
iterations: 1,
fill: "forwards",
};
// Create and play the animation
animation = element.animate(keyframes, options);
// Handle animation events
animation.onfinish = () => {
document.getElementById("message").textContent =
"Animation finished!";
};
animation.oncancel = () => {
document.getElementById("message").textContent = "Animation reset.";
};
}
// Resets the animation
function resetAnimation() {
if (animation) {
animation.cancel();
}
startAnimation(); // Restart the animation
}
</script>
</body>
</html>Cet exemple montre comment animer l'opacité d'un élément à l'aide de l'API Web Animations. Un bouton déclenche l'animation, qui fait varier progressivement l'opacité de l'élément de l'invisible (0) au complètement visible (1). Une fois l'animation terminée, un message s'affiche à l'utilisateur. Cela illustre le contrôle de base des animations et la gestion des événements.
Animations complexes et séquences
Pour des animations et des séquences plus complexes, vous pouvez enchaîner plusieurs animations à l'aide de promesses et de async/await. Voici un exemple d'enchaînement d'animations :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animation Sequence</title>
</head>
<body>
<h1>Animation Sequence</h1>
<div
class="animated-element"
style="width: 100px; height: 100px; background-color: red"
></div>
<button style="margin-top: 15px" onclick="animateSequence()">
Start Animation
</button>
<p id="message"></p>
<script>
async function animateSequence() {
document.getElementById("message").textContent = ""; // Clear message
const element = document.querySelector(".animated-element");
const animation1 = element.animate(
{ opacity: [0, 1], transform: ["scale(0)", "scale(1)"] },
{ duration: 1000, easing: "ease-in-out" }
);
await animation1.finished;
const animation2 = element.animate(
{ opacity: [1, 0], transform: ["scale(1)", "scale(0)"] },
{ duration: 1000, easing: "ease-in-out" }
);
await animation2.finished;
document.getElementById("message").textContent = "Sequence complete!";
}
</script>
</body>
</html>Dans cet exemple, la première animation augmente l'opacité de l'élément et le met à l'échelle, puis, une fois terminée, la deuxième animation fait disparaître l'élément et le réduit. Un message de fin s'affiche à la fin, démontrant comment enchaîner des animations de manière séquentielle.
Contrôle et gestion des animations
L'API Web Animations fournit également des méthodes pour contrôler et gérer les animations. Par exemple, vous pouvez mettre une animation en pause, la reprendre ou l'annuler. Voici un exemple de mise en pause et de reprise d'une animation :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Animation Play/Pause</title>
</head>
<body>
<h1>Toggle Play/Pause Animation</h1>
<div
class="animated-element"
style="width: 100px; height: 100px; background-color: green"
></div>
<button style="margin-top: 15px" onclick="togglePlayPause()">Toggle Play/Pause</button>
<p id="message"></p>
<script>
let animation;
document.addEventListener("DOMContentLoaded", function () {
const element = document.querySelector(".animated-element");
animation = element.animate(
{ opacity: [0, 1] },
{
duration: 1000,
easing: "ease-in-out",
iterations: Infinity,
direction: "alternate"
}
);
animation.pause(); // Start paused
animation.onfinish = () => {
document.getElementById("message").textContent =
"Animation finished!";
};
});
function togglePlayPause() {
if (animation.playState === "running") {
animation.pause();
document.getElementById("message").textContent = "Animation paused";
} else {
animation.play();
document.getElementById("message").textContent = "Animation playing";
}
}
</script>
</body>
</html>Cet exemple montre comment basculer entre les états de lecture et de pause d'une animation par un simple clic. L'animation initiale fait apparaître et disparaître un élément en continu. Cliquer sur un bouton permet à l'utilisateur de mettre en pause l'animation si elle est en cours, ou de la lancer si elle est en pause. Des messages indiquent l'état actuel de l'animation, améliorant ainsi l'interaction utilisateur et le contrôle des états d'animation.
Conclusion
L'API Web Animations permet aux développeurs web de créer des animations captivantes et interactives qui améliorent l'expérience utilisateur sur les sites web et les applications web. En maîtrisant cette API, vous pouvez concevoir des animations allant de simples transitions à des séquences complexes, ajoutant ainsi une dimension dynamique et engageante à vos conceptions web. Que vous animiez des interfaces utilisateur, ajoutiez des effets visuels ou créiez des éléments de narration interactive, l'API Web Animations fournit les outils nécessaires pour donner vie à vos idées créatives sur le web.
Pratique
Quelles fonctionnalités l'API JavaScript Animation offre-t-elle ?