Détecter la fin d'une animation en Javascript

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


Sujets que vous pourriez aussi aimer :


Connaître la fin d'une animation en Javascript

Sur des interfaces de sites Web interagissant avec les utilisateurs, des petits effets d'animation de temporisation peuvent être proposés pour améliorer l'aspect ludique. Dans ces conditions, il est intéressant que le code Javascript soit en mesure de maîtriser ces effets. En détectant la fin du jeu d'une animation, il est ainsi capable d'enchaîner au millimètre de nouvelles étapes pour une expérience de navigation plus plaisante et plus professionnelle.



Sur l'exemple illustré par la capture, lorsque l'utilisateur pointe sur la photo avec la souris, celle-ci s'agrandit sur un délai de quelques secondes. Cette animation est commanditée par les styles Css. Et lorsque l'image acquiert ses dimensions finales, donc lorsque l'animation est terminée, un message se déclenche dans un cadre situé au-dessus de la photo. Ce message indique que l'événement de la fin de l'animation a bien été intercepté. En conséquence, le code Javascript est en mesure d'enchaîner dans la foulée avec de nouvelles actions.

Sources de travail
Pour la découverte de cette technique Javascript, nous proposons de récupérer une page Html offrant déjà l'image avec le pouvoir de s'animer au survol, grâce à des styles Css prédéfinis.

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

Nous découvrons le fichier de la page Web. Il est nommé index.htm. Ses ressources l'accompagnent dans les sous dossiers. On note par exemple la présence de la photo à élargir au survol de la souris, dans le sous dossier img.

• Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur Web par défaut,
• Puis, pointer avec la souris sur l'image qui se propose au centre de l'interface,

La photo s'étire en effet jusqu'à atteindre la même largeur que celle du cadre situé juste au-dessus d'elle. Mais précisément dans ce cadre, le message ne change pas lorsque l'animation se termine. Fort logiquement, cet événement n'est pas encore géré à ce stade. C'est par le biais de cette astuce Javascript que nous allons découvrir la technique.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,
• Puis, faire défiler la page jusqu'à la fin du code,

...
<div id="auCentre">
<div style="width:600px; "id="info">
Survolez l'image pour démarrer l'animation.
</div><br />
<img id="photo" src="img/parc.jpg" onmouseover="detecter()">
</div>
...

La construction qui nous intéresse est embarquée dans un calque d'identifiant auCentre. Il héberge lui-même un autre calque : info et une image (balise img) : photo. Le calque héberge le texte. La balise img accueille la photo. Ce sont ces identifiants qui vont nous permettre de piloter ces éléments Html par le code Javascript pour créer l'écouteur d'événement et ainsi changer l'information textuelle à l'issue de l'animation. Mais ces identifiants sont aussi exploités par le Css pour conférer des réglages à ces objets. Enfin, vous notez qu'un gestionnaire d'événement est en place sur l'image (onmouseover="detecter()"). Il appelle la fonction detecter lorsque la souris survole la photo. Et cette fonction est d'ores et déjà présente dans la section de script à la toute fin du code Html. Mais naturellement, elle est encore vide à ce stade.

• Remonter tout en haut du code de la page Html,

...
<style>
#photo
{
cursor: pointer;
width: 300px;
height: 169px;
background-color: #666;
padding: 2px;
transition: all 3s;
}

#photo:hover
{
width: 600px;
height: 338px;
}
</style>
...

Dans le style photo d'origine, des attributs classiques sont réglés, notamment pour les dimensions. Néanmoins, un attribut est particulièrement important. Il s'agit de l'attribut transition. Il indique que si une transformation est entreprise, celle-ci doit concerner toutes les propriétés (all) et se jouer sur 3 secondes. C'est alors ce même nom de style mais cette fois associé au gestionnaire hover qui intervient. Il grossit les dimensions (width et height) au survol de la souris (hover) sur l'élément de la photo associé à ce style photo. Certes, nous n'engageons pas des transformations sur toutes les propriétés, mais c'est par fainéantise que nous avons passé l'attribut all plutôt que de lister chaque propriété à régler dans l'attribut transition, comme nous l'avions appris avec les astuces Css.

L'écouteur d'événement
Il est temps maintenant de découvrir une méthode Javascript très particulière et qui peut être associée à tout élément Html. Elle se nomme addEventListener. En fonction de la valeur qui lui est passée en premier paramètre, elle va être capable de détecter un événement particulier se déclenchant sur l'objet associé. Dès lors, sous forme de fonction, elle permet d'engager des actions en second paramètre. Dans notre cas, il s'agit simplement d'indiquer que la fin de l'animation a été détectée pour ouvrir la voie à de nouvelles transactions.

• Dans les bornes de la fonction detecter, ajouter l'instruction Javascript suivante :

function detecter()
{
document.getElementById("info").innerText = "L'animation est en cours...";
}

Avant de paramétrer l'écouteur, nous songeons à initialiser le traitement. Nous adaptons simplement l'indication dans le calque info. En effet, si la fonction est appelée, cela signifie que l'animation a démarré. Comme vous le savez, c'est la méthode getElementById de l'objet Javascript document qui permet de pointer sur un élément Html en fonction de son identifiant passé en paramètre. Dès lors, nous pouvons exploiter sa propriété innerText pour écrire à l'intérieur du calque.

Si vous enregistrez les modifications, que vous actualisez le navigateur et que vous survolez la photo, vous constatez que l'information contextuelle se met bien à jour au-dessus de l'animation.



Maintenant, il est temps d'initialiser l'observateur d'événements.

• A la suite de la fonction, créer le gestionnaire suivant :

function detecter()
{
document.getElementById("info").innerText = "L'animation est en cours...";
photo.addEventListener('transitionend', function()
{

});
}

Nous l'avions annoncé, c'est la méthode addEventListener appliquée sur un élément Html, en l'occurrence ici sur la balise de l'image, qui permet d'observer ce qui se trame sur cette dernière. Et son attention s'adapte en fonction du renseignement fourni en premier paramètre. Avec la valeur transitionend, c'est la fin de l'animation régulée par l'attribut Css transition qui est observée. Et lorsque l'événement est intercepté, c'est le code de la fonction passée en second paramètre qui est exécuté.

Remarque par rapport à ce Listener : Nous pouvons l'exploiter avec de nombreux paramètres pour intercepter de nombreux événements. Par exemple, pour les gros sites Web professionnels, il est souvent utilisé avec la valeur DOMContentLoaded en premier argument. Lorsque l'événement écouté est géré, il stipule que tous les objets de la page sont complétement chargés. Il s'agit d'un bon moyen de différer le chargement d'éléments tierces, plus lourds ou moins réactifs. Ainsi, le contenu est directement disponible pour l'internaute et les chargements annexes ne nuisent pas à la qualité de la navigation.

Maintenant, lorsque la fin de l'animation est observée, nous devons simplement en avertir l'internaute, toujours par le biais d'une indication dans le calque d'identifiant info.

• Dans les bornes de la fonction, ajouter l'instruction Javascript suivante :

function detecter()
{
document.getElementById("info").innerText = "L'animation est en cours...";
photo.addEventListener('transitionend', function()
{
document.getElementById("info").innerHTML = "L'animation est terminée... <span style='color:#2b579a; font-weight:bold;'>D'autres actions peuvent être enclenchées.</span>";
});
}

Cette fois, c'est la propriété innerHTML du calque que nous exploitons en lieu et place de sa propriété innerText. De cette manière, nous glissons des informations mises en forme grâce à des balises et attributs Html.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web (ALT + Tab),
• Rafraîchir la page Html avec la touche F5 du clavier,
• Puis, passer la souris sur la photo et attendre la fin de l'animation,

Comme vous pouvez le voir, dès que la transition est terminée, l'événement est intercepté stipulant que l'animation a fini de se jouer. Dès lors, à la suite du code de la fonction, nous pourrions entreprendre d'autres traitements qui permettraient d'enchaîner les actions après avoir respecté la temporisation souhaitée.

Remarque : Pour que les indications réagissent de la même façon pour l'animation inverse, soit lorsque la souris quitte la zone d'influence de l'image, il suffit d'ajouter le gestionnaire suivant dans la balise de la photo : onmouseleave = "detecter()".