Animer une image au clic sur un bouton Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Animation d'une icône graphique

Nous poursuivons la découverte des astuces Javascript. Dans le précédent volet, nous avons appris à simuler la saisie d'un texte. Ici, nous allons voir comment jouer très simplement une animation sur une petite image.



Dans l'exemple illustré par la capture, au clic de l'utilisateur sur un bouton, une image se déplace linéairement et horizontalement jusqu'à rejoindre l'autre extrémité de son cadre.

Sources de travail
Pour la mise en place de cette nouvelle astuce Javascript, nous proposons tout d'abord de récupérer des sources livrant la page Html déjà structurée et l'image à animer.

• Télécharger le fichier compressé lancer-une-animation.rar en cliquant sur ce lien,
• Puis, le décompresser dans le dossier de votre choix.

Cette décompression livre le fichier de la page Web. Il est nommé index.htm et il est accompagné de ses ressources dans les sous dossiers. Par exemple, l'image à animer est hébergée par le sous dossier img.

• Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur Web par défaut,

Nous retrouvons bien l'interface de la présentation.



Mais bien sûr à ce stade, si vous cliquez sur le bouton Jouer, rien ne se produit encore. L'image reste figée.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel qui s'invite, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Nous accédons ainsi à la structure Html de la page. La portion qui nous intéresse est située en bas du code, dans le calque d'identifiant auCentre.

...
<div id="conteneur">
<div id="contenu">
<!--
Implémentation
-->
<div id="auCentre">
<div id="icone" style="background-image:url('img/utilisateur.png'); position:relative; height:92px; width:100px;">
</div>
</div>
</div>
</div>
...

Comme vous pouvez le voir, ce calque accueille lui-même un autre calque (balise Div) déclarant une image en arrière-plan. Il s'agit de l'icône à animer. C'est donc sur son calque que nous allons intervenir.

Tout en bas du code, vous notez la présence d'une section de script.

...
<script type="text/javascript" language="javascript">
function Animer()
{

}
</script>
...

Elle déclare une fonction nommée Animer, vierge de code pour l'instant. Cette fonction est appelée au clic sur un bouton placé plus haut dans le code. C'est sur cet ordre que doit se jouer l'animation.

...
<div class="calque">
Jouer une animation : <input type="button" value="Jouer" onclick="Animer()" />
</div>
...

Initialiser les variables
Nous devons commencer par déclarer les variables nécessaires aux traitements. La première doit pointer sur le calque hébergeant l'image en arrière-plan. C'est ainsi que nous pourrons le piloter par le code Javascript. Il porte l'identifiant icone. La seconde doit initialiser l'indicateur de position qui sera amener à varier.

• Dans les bornes de la fonction Animer, ajouter les déclarations de variables suivantes :

...
function Animer()
{
var elem = document.getElementById("icone");
var pos = 0;
}
...

C'est bien sûr la méthode getElementById de l'objet Javascript document qui permet de récupérer le calque grâce à son identifiant qui lui est passé en paramètre. Désormais, la variable elem représente ce calque. Ensuite, nous initialisons une variable pos à zéro. Nous l'utiliserons pour faire varier l'attribut left du calque afin de le déplacer à l'horizontale.

Actions récursives
Maintenant, nous devons engager des actions récursives pour qu'à chaque appel, la position du calque de l'image puisse être incrémentée. L'astuce consiste à exploiter la fonction Javascript setInterval. Cette dernière permet d'engager des actions à intervalles de temps réguliers. Cet intervalle de temps, nous devons le mentionner en second paramètre. Les actions doivent être encapsulées dans une fonction. Et cette fonction à créer, nous devons la mentionner en premier paramètre.

• A la suite du code de la fonction, ajouter les instructions suivantes :

...
function Animer()
{
var elem = document.getElementById("icone");
var pos = 0;
var id = setInterval(mvt, 5);
function mvt()
{

}
}
...

Nous créons donc la fonction mvt que nous appelons à se déclencher toutes les 5 millisecondes, grâce à la fonction setInterval. La variable nommée id est importante. Ainsi affectée, elle devient l'empreinte de ce traitement récursif. C'est grâce à elle que nous pourrons mettre fin à la boucle de temps au moment opportun.

Animer l'image
Maintenant, il est question d'implémenter cette nouvelle fonction pour opérer un déplacement à l'horizontal qui sera naturellement incrémenté toutes les 5 millisecondes.

• Dans les bornes de la fonction mvt, créer l'instruction conditionnelle suivante :

...
function Animer()
{
var elem = document.getElementById("icone");
var pos = 0;
var id = setInterval(mvt, 5);
function mvt()
{
if (pos > 670)
{
clearInterval(id);
}
else
{

}
}
}
...

La largeur du calque parent abritant le calque de l'image est de 800 pixels. La largeur de l'image elle-même est de 100 pixels. De plus, elle n'est pas tout à fait collée au bord gauche du calque conteneur en raison de certains réglages Css. C'est donc une fois qu'elle aura parcouru 670 pixels qu'elle atteindra l'autre extrémité du cadre. Si l'incrémentation de la variable pos dépasse cette borne, nous mettons donc fin à l'animation grâce à la fonction clearInterval en lui passant l'identifiant de cette boucle de temps.

Dans le cas contraire (Branche else), nous devons donc poursuivre l'animation en incrémentant la variable pos.

• Dans la branche Else, ajouter les instructions suivantes :

...
function Animer()
{
var elem = document.getElementById("icone");
var pos = 0;
var id = setInterval(mvt, 5);
function mvt()
{
if (pos > 670)
{
clearInterval(id);
}
else
{
pos=pos+15;
elem.style.left = pos + "px";
}
}
}
...

Nous incrémentons tout d'abord la variable pos de 15 unités, donc toutes les 5 millisecondes. Et nous passons cette nouvelle valeur à l'attribut left du calque contenant l'image. C'est ainsi qu'elle sera linéairement déplacée à l'horizontale.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur (ALT + Tab),
• Rafraîchir la page Web (F5) puis cliquer sur le bouton Jouer,

Comme vous pouvez le voir, l'image se déplace assez rapidement et s'arrête effectivement avant de sortir du cadre. Pour ralentir cette animation, il suffit de jouer sur le facteur de temps qui est transmis à la fonction setInterval.