Les animations

Les animations

Tutoriel publié en mai 2011 par Galdon dans la catégorie jQuery

Voici venir le chapitre le plus fun de ce cours : les animations.

jQuery propose par défaut une série de fonctions d'animation et de transition qui permettent d'animer des éléments du DOM.

Les effets

Les effets (effects) sont des animations prédéfinies, on en a déjà utilisé un dans les chapitres précédents : fadeOut, qui permet de faire disparaitre un élément avec un fondu.

Il existe différents effets que je vous invite à tester :

jQuery(document).ready(function($){
	// SHOW/HIDE
	$('#exemple-show span').hide();
	$('#exemple-show a').click(function(e){
		$('#exemple-show span').show();
	});
	
	$('#exemple-hide a').click(function(e){
		$('#exemple-hide span').hide();
	});
	
	// FADE
	$('#exemple-fadetoggle a').click(function(e){
		$('#exemple-fadetoggle span').fadeToggle();
	});
});
<div id="exemple-show">
	<a href="#">show</a>
	<span>Du texte qui apparaît brutalement</span>
</div>

<div id="exemple-hide">
	<a href="#">hide</a>
	<span>Du texte qui disparaît brutalement</span>
</div>

<div id="exemple-fadetoggle">
	<a href="#">fadeToggle</a>
	<span>Du texte qui apparaît/disparaît en fondu à chaque clic</span>
</div>
Tester /ressources/exemple/cours-jquery/ch4_exemple1.html
Exemple 1
Quelques effets jQuery

Animations personnalisées

Les effets que vous avez vus ci-dessus sont simples et pratiques, mais on peut encore faire mieux avec jQuery et la fonction animate().

Cette fonction prend en paramètre un ensemble de propriétés CSS, et elle va se charger de faire une animation linéaire pour chacune de ces propriétés, entre leur état actuel, et l'état défini dans ses paramètres.

Petit exemple : j'ai une div carré situé en haut à gauche de la page :

<input type="button" id="handle" value="Lancer l'animation !" />
<div id="carre"></div>

Ici j'y ajoute une animation avec les propriétés CSS left et top. JQuery va se charger d'animer chacun de ces paramètres au cours du temps, de sorte que le carré se déplace vers le bas et vers la droite.

jQuery(document).ready(function($){
	$('#handle').click(function(e){
		$('#carre').animate({
			left: '50px',
			top: '80px'
		});
	});
});
Tester /ressources/exemple/cours-jquery/ch4_exemple2.html
Exemple 2
Un carré mobile

Avec plusieurs étapes

Une fois que vous avez compris le procédé, c'est toujours la même chose. Ci-dessous, j'ai ajouté quelques animations :

  • Un boulet bleu est tiré par le carré à la fin de l'animation (première partie).
  • Ensuite, ce boulet se déplace vers le haut au survol de la souris, puis revient à sa position initiale quand vous sortez le pointeur de la souris.
<div id="carre">
	<div id="ball"></div>
</div>
jQuery(document).ready(function($){
	$('#handle').click(function(e){
		$('#carre').animate({
			left: '50px',
			top: '80px'
		}, 600, function(){
			$('#ball').animate({
				opacity:'1',
				left: '400px'
			}, 300, 'swing');  // #1 : Easing
		});
	});
	
	$('#ball').mouseover(function(e){
		$(this).animate({
			top: '-=50px'   // #2 : Valeur relative
		});
	});
	
	$('#ball').mouseout(function(e){
		$(this).animate({
			top: '+=50px'
		});
	});
});
C'est quoi $(this) ?

Note : Vous voyez que j'ai utilisé le sélecteur avec le paramètre this ("ça" en Anglais).

En jQuery, $(this) désigne l'objet courant, on l'utilise souvent dans les fonctions anonymes qu'on bind à un événement.

Dans mon exemple ci-dessus, $(this) désigne l'élément portant l'id "ball", et $(this) est équivalent à $('#ball').

C'est mieux que de réécrire le sélecteur de l'élément à chaque fois, car ça facilite les mises à jour, et c'est plus propre.


Attention : $(this) c'est pas tout à fait la même chose que this !
$(this) retourne un objet jQuery, alors que this est un objet Javascript de base (c'est du natif), ça signifie qu'avec this vous ne pourrez pas utiliser des fonctions jQuery comme fadeIn, fadeOut...

Tester /ressources/exemple/cours-jquery/ch4_exemple3.html
Exemple 3
Un carré mobile qui tire un boulet sauteur
(passez la souris sur la boule bleue pour la faire monter, sortez pour la faire redescendre)

Bien sûr, javascript n'a pas été conçu pour créer ce genre d'animation, c'est beaucoup moins pratique de coder les différentes étapes que d'utiliser un système d'images clé comme on en trouver dans After Effects ou Flash.

Mais ça donne un aperçu de ce qu'on peut faire aujourd'hui avec un framework Javascript comme jQuery et un peu de CSS3...

Easing

Il existe un paramètre important dans ce système d'animations : Easing.

Il s'agit de la méthode qui contrôle l'animation. Par défaut, c'est le Easing linear qui est utilisé. Dans ce mode, l'animation est linéaire. Si par exemple vous animez le paramètre left de 0px à 100px pendant une durée de 2 secondes, à 1 seconde, left vaudra exactement 50px, et ainsi de suite.

Mais il y a d'autres easings qui ne sont pas du tout linéaires, certains accélèrent au fil du temps, d'autres simulent un rebond...

jQuery(document).ready(function($){
	$('#handle').click(function(e){
		$('#carre').slideToggle({ duration: 1000, easing: 'easeOutBounce'});
	});
});
Tester /ressources/exemple/cours-jquery/ch4_exemple4.html
Exemple 4
Easing easeOutBounce

Vous trouverez plus d'informations à ce sujet sur le site du plug-in jQuery Easing.

Allez donc jeter un oeil sur cette page : magic light.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.

5 commentaires :
commentaire n°1936 par cedric
cedric lundi 5 septembre 2011, 13:52
c est quoi le (e) après fonction
commentaire n°1938 par Galdon
Galdon lundi 5 septembre 2011, 21:44
Le e est une variable qui reçoit l'événement.

Dans mon exemple je ne m'en sert pas, mais dans certains cas il arrive que ça soit utile.

L'évènement contient des informations tel que les coordonnées du curseur (souris) au moment ou est déclenché cet événement.

Plus d'infos sur la doc jQuery > Event Object.
commentaire n°2341 par jt75
jt75 vendredi 7 septembre 2012, 17:40
+10 C'est chouette et clair !
commentaire n°2342 par STunisino
STunisino vendredi 7 septembre 2012, 20:15
+++10 merci pour ce tuto, tres simple et avec des exemple.
bravo =)
commentaire n°2484 par devosystem
devosystem mercredi 6 février 2013, 00:09
Merci BCP c'est très pratique
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré