JavaScript - Animation du DOM

Bonjour, futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de l'animation DOM avec JavaScript. En tant que votre enseignant bienveillant de science informatique, je suis ravi de vous guider à travers ce sujet fascinant. Croyez-moi, à la fin de cette leçon, vous saurez animer des pages web avec des mouvements !

Animer des éléments DOM avec JavaScript

Avant de plonger dans les détails de l'animation, récapitulons rapidement ce qu'est le DOM. DOM signifie Document Object Model, et il s'agit essentiellement une interface de programmation pour les documents HTML. Il représente la structure d'un document sous forme d'une hiérarchie en arbre, nous permettant de manipuler le contenu et la structure d'une page web avec JavaScript.

Maintenant, lorsque nous parlons d'animer des éléments DOM, nous faisons référence à la modification de leurs propriétés au fil du temps pour créer l'illusion de mouvement ou de transformation. C'est comme créer une animation de carnet de croquis, mais avec du code !

Commençons par un exemple simple :

<div id="myBox" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
position += 1;
box.style.left = position + 'px';
}

setInterval(moveBox, 10);
</script>

Dans cet exemple, nous faisons bouger une boîte rouge à travers l'écran. Décomposons-le :

1. Nous créons un élément <div> avec quelques styles initiaux.
2. Nous utilisons document.getElementById('myBox') pour obtenir une référence à notre boîte.
3. Nous définissons une fonction moveBox() qui incrémente la position et met à jour la propriété de style left de la boîte.
4. Nous utilisons setInterval() pour appeler moveBox() toutes les 10 millisecondes, créant une animation fluide.

Animer des éléments DOM en utilisant la méthode setInterval()

La méthode setInterval() est un moyen de créer des animations en JavaScript. Elle appelle répétitivement une fonction à des intervalles spécifiés. Voici un exemple plus complexe :

<div id="bouncer" style="width: 50px; height: 50px; background-color: blue; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
x += dx;
y += dy;

if (x > window.innerWidth - 50 || x < 0) dx = -dx;
if (y > window.innerHeight - 50 || y < 0) dy = -dy;

bouncer.style.left = x + 'px';
bouncer.style.top = y + 'px';
}

setInterval(animate, 10);
</script>

Ce script crée un effet de balle rebondissante :

1. Nous configurons des positions initiales (x, y) et des vitesses (dx, dy).
2. Dans la fonction animate(), nous mettons à jour la position en fonction de la vitesse.
3. Nous vérifions si la balle touche les bords de la fenêtre et inversons sa direction si nécessaire.
4. Nous mettons à jour la position de la balle à l'écran.
5. setInterval() appelle animate() toutes les 10 ms, créant un mouvement fluide.

Animer des éléments DOM en utilisant la méthode requestAnimationFrame()

Bien que setInterval() fonctionne, les navigateurs modernes offrent une méthode plus efficace : requestAnimationFrame(). Cette méthode indique au navigateur que vous souhaitez effectuer une animation et demande que le navigateur appelle une fonction spécifiée pour mettre à jour une animation avant le prochain rafraîchissement.

Reprenons notre balle rebondissante en utilisant requestAnimationFrame() :

<div id="bouncer" style="width: 50px; height: 50px; background-color: green; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
x += dx;
y += dy;

if (x > window.innerWidth - 50 || x < 0) dx = -dx;
if (y > window.innerHeight - 50 || y < 0) dy = -dy;

bouncer.style.left = x + 'px';
bouncer.style.top = y + 'px';

requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
</script>

La principale différence ici est que nous appelons requestAnimationFrame(animate) à la fin de notre fonction animate(). Cela crée une boucle où le navigateur appelle animate() juste avant chaque rafraîchissement.

Animer des éléments DOM en changeant les propriétés CSS

Jusqu'à présent, nous avons modifié directement les propriétés CSS en utilisant JavaScript. Cependant, le développement web moderne utilise souvent les transitions et animations CSS pour des performances plus fluides. Voyons comment nous pouvons déclencher des animations CSS avec JavaScript :

<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
transition: all 0.5s ease;
}
</style>

<div id="myBox" class="box"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
position += 50;
box.style.transform = `translateX(${position}px)`;

if (position < 200) {
requestAnimationFrame(moveBox);
}
}

box.addEventListener('click', function() {
position = 0;
requestAnimationFrame(moveBox);
});
</script>

Dans cet exemple :

1. Nous définissons une classe CSS avec une propriété de transition.
2. Notre fonction JavaScript change la propriété transform au lieu de left.
3. Nous utilisons requestAnimationFrame() pour créer une animation fluide.
4. L'animation commence lorsque la boîte est cliquée.

Cette méthode donne souvent des animations plus fluides car le navigateur peut optimiser les transitions CSS.

Voici un tableau résumant les méthodes que nous avons discutées :

Méthode	Avantages	Inconvénients
setInterval()	Simple à comprendre et à implémenter	Peut être moins efficace, peut causer du lag
requestAnimationFrame()	Plus efficace, synchronisé avec le taux de rafraîchissement du navigateur	Un peu plus complexe à implémenter
Transitions CSS	Très fluide, peut être accélérée par le matériel	Contrôle limité sur les étapes d'animation

Souvenez-vous, l'animation peut grandement améliorer l'expérience utilisateur, mais elle devrait être utilisée avec modération. Trop d'animation peut être distrayante ou même causer du mal de transport pour certains utilisateurs.

Voilà pour notre voyage dans l'animation DOM avec JavaScript ! J'espère que vous avez apprécié cette leçon autant que j'ai apprécié l'enseigner. Continuez à pratiquer, continuez à animer, et surtout, continuez à vous amuser avec le code !

Credits: Image by storyset