Exercice guidé : Attrapez la balle

On va animer une balle dans un cadre. L'animation devra s'arrêter quand vous placerez votre pointeur au-dessus et recommencer quand le pointeur lâchera la balle.

Voici une démo :

Voici le document HTML avec lequel on va travailler :

Et le CSS associé :

Pour commencer, notre script doit récupérer la div qui représente la balle (avec l'identifiant ball). Pour déterminer si la balle doit monter dans le cadre ou descendre, on va utiliser un booléen down. Si down = true, la balle descendra, si down = false, elle montera. Enfin, on va récupérer également la hauteur du cadre dans lequel la balle va s'animer. C'est la hauteur de la div d'identifiant container. Pour cela, on va utiliser la méthode getBoundingClientRect() qui permet de récupérer les propriétés top, bottom, left, right, width et height d'un élément. Voici le code :

var ball = document.getElementById("ball"); // La balle
var down = true; //Au début, la balle descend
// La hauteur du cadre contenant la balle
var height = document.getElementById("container").getBoundingClientRect().height; 
							

Ensuite, on va écrire la fonction animate qui va contrôler le déplacement de la balle.

function animate(){
	// la fonction qui va contrôler la position de la balle
} 
							

Elle accède d'abord à la position top actuelle de la balle.

function animate(){
// la fonction qui va contrôler la position de la balle
	// La position top actuelle de la balle
	var top = ball.getBoundingClientRect().top;
} 
							

Ensuite, si le booléen down = true, alors la balle doit descendre, on incrémente donc la position de la balle. Sinon, on diminue la valeur de sa position, en tenant compte de la hauteur de la balle. Puis on applique cette nouvelle position à la balle.

function animate(){
// la fonction qui va contrôler la position de la balle
	// La position top actuelle de la balle
	var top = ball.getBoundingClientRect().top;

	// La position augmente ou diminue
	if (down)
		top += 1;
	else
		top -= 18; // Pour tenir compte de la hauteur de la balle

	//On met à jour la position de la balle
	ball.style.top = top+"px";
} 
							

Quand la balle atteint le haut ou le bas du cadre, il faut mettre à jour le booléen down. Si la balle atteint le haut du cadre (0px), elle doit commencer à descendre et down = true, si elle atteint le bas du cadre, elle doit monter et down = false.

function animate(){
// la fonction qui va contrôler la position de la balle
	// La position top actuelle de la balle
	var top = ball.getBoundingClientRect().top;

	// La position augmente ou diminue
	if (down)
		top += 1;
	else
		top -= 18; // Pour tenir compte de la hauteur de la balle

	//On met à jour la position de la balle
	ball.style.top = top+"px";
	
	// On modifie le booléen aux limites du cadre
	if (top >= height)
		down = false; //Si on arrive en bas du cadre, la balle remonte
	if (top <= 0)
		down = true; //Si on arrive en haut, la balle redescend
} 
							

La fonction animate est terminée, il nous reste à animer la balle. Pour cela, on va utiliser la fonction setInterval pour exécuter notre fonction animate à intervalles réguliers. On va choisir 50 millisecondes. Pour contrôler l'animation par la suite, on va stocker l'identifiant de l'intervalle renvoyé par la fonction dans la variable interval, comme ceci :

// On lance la fonction animate toutes les 50ms
var interval = setInterval(animate, 50);
							

La balle s'anime maintenant ! On doit encore installer des écouteurs d'évènements pour contrôler l'animation avec la souris. Quand le pointeur survole la balle, l'animation doit s'arrêter. Quand le pointeur sort de la balle, l'animation doit recommencer.

ball.addEventListener("mouseover", function(){
	clearInterval(interval); // L'animation s'arrête
})

ball.addEventListener("mouseout", function(){
	interval = setInterval(animate, 50); //L'animation recommence
})
							

Et voilà c'est terminé, notre balle se déplace de haut en bas et s'arrête quand on la survole avec la souris ! Voici le code au complet que vous pouvez tester :