Jouer plusieurs animations non linéaires 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 :


Jouer plusieurs animations non linéaires

A l'occasion des précédentes astuces Javascript, nous avons compris comment réaliser des effets d'animation par le code. Ici, nous poursuivons dans cette voie. Mais cette fois, le code Javascript va influer sur des propriétés et fonctions Css pour jouer les animations.



Sur l'exemple illustré par la capture, au clic de l'utilisateur sur l'un des quatre carrés de couleur, chaque forme entame un déplacement diagonal vers le bas. Mais chaque forme ne se déplace pas à la même vitesse. De plus, les trajectoires ne sont pas linéaires.

Source Html
Pour la mise en place de cette nouvelle astuce Javascript, nous proposons d'appuyer les travaux sur une page Html offrant déjà ces formes géométriques, réglées par des styles Css.

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

La page Web, nommée index.htm, est à la racine du dossier de décompression.

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

Nous retrouvons la page Web de la démonstration. Mais cette fois, au clic sur l'une des formes, aucun déplacement n'est à observer fort naturellement. Nous devons créer ces effets d'animation.

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

Nous affichons ainsi le code Html de la page Web. Les formes géométriques sont placées vers le bas du code dans un calque d'identifiant auCentre.

...
<div id="conteneur">
<div id="contenu">
<!--
Implémentation
-->
<div id="auCentre">
<div class="boite calque1" onclick="Animer()"></div>
<div class="boite calque2" onclick="Animer()"></div>
<div class="boite calque3" onclick="Animer()"></div>
<div class="boite calque4" onclick="Animer()"></div>
</div>
</div>
</div>
...

Au clic, chacun de ces calques appelle une fonction nommée Animer. Elle est bien présente en bas de la page dans une section de script mais elle est vide pour l'instant. C'est elle que nous devons implémenter.

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

}
</script>
...

De même et vous l'avez sans doute constaté, chacun des calques de ces formes est associé à deux styles. Le premier est commun à tous. Il est nommé boite et se charge de réglages classiques comme ceux des dimensions par exemple. Le second diffère en fonction de la forme pour lui attribuer une couleur différente. Mais c'est aussi cette différence remarquable que nous saurons exploiter pour piloter les quatre animations en même temps, à l'aide d'une boucle.

Variables de l'animation
Pour débuter simplement, nous allons nous charger de régler l'animation uniquement pour le premier carré de couleur. Et pour cela, nous avons besoin tout d'abord de deux variables. La première doit permettre de récupérer le calque de la forme. La seconde doit servir à piloter ce calque par le code Javascript pour jouer son animation.

• Dans les bornes de la fonction, ajouter les deux déclarations ainsi que l'affectation suivantes :

function Animer()
{
var cible; var jouer;
cible = document.querySelector('.calque1');
}

Une fois n'est pas coutume, nous ne pouvons pas utiliser la méthode getElementById de l'objet Javascript document pour récupérer le calque concerné par son identifiant. La raison est simple. Il n'en possède pas. C'est alors que surgit la méthode querySelector. En lui passant en paramètre le nom de l'un de ses styles (préfixé d'un point), nous pointons bien sur le calque souhaité désormais stocké dans la variable objet cible.

Jouer l'animation de la forme
Maintenant, il est question de jouer l'animation de déplacement de la forme géométrique. Et pour cela, nous allons exploiter la méthode animate associée à la variable objet cible représentant le calque. Cette méthode requiert deux arguments. En premier paramètre nous devons lui transmettre les étapes de l'animation qui sont gérées par un keyframes que nous avons découvert à l'occasion des astuces Css. Grâce à lui, nous allons pouvoir concevoir une animation non linéaire. En deuxième paramètre, nous devons lui transmettre la durée en millisecondes pendant laquelle doit se jouer l'animation.

• A la suite du code de la fonction, ajouter l'instruction Javascript suivante :

function Animer()
{
var cible; var jouer;
cible = document.querySelector('.calque1');
jouer = cible.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 75px)'},
{transform: 'translate(200px, 200px)'}
], 500);
}

Nous définissons donc une animation en trois étapes grâce à l'attribut Css transform appelant la fonction Css translate. Nous partons de la position d'origine. Nous observons un premier palier 100 pixels plus à droite et 75 pixels plus bas pour finir à 200 pixels plus bas et 200 pixels plus à droite. Le tout doit se jouer sur une demi-seconde (500 millisecondes).

• Enregistrer les modifications et basculer sur le navigateur (ALT + Tab),
• Rafraîchir la page Web (F5) et cliquer sur le premier carré,

Comme vous le constatez, l'animation se joue effectivement, mais à peine la position finale est atteinte que la forme recouvre son état d'origine.

Figer la fin de l'animation
Pour corriger ce défaut, nous avons besoin d'ajouter un gestionnaire d'événements. Il s'agit en quelque sorte d'un observateur (Listener). Son rôle est de détecter la fin de l'animation pour la figer dans son état final.

• A la suite du code, ajouter l'instruction Javascript suivante :

function Animer()
{
var cible; var jouer;
cible = document.querySelector('.calque1');
jouer = cible.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 75px)'},
{transform: 'translate(200px, 200px)'}
], 500);
jouer.addEventListener('finish', function(){
cible.style.transform = 'translate(200px, 200px)';
});
}

C'est la méthode addEventListener qui officie pour observer l'animation sur laquelle elle est appliquée (jouer). Avec la valeur finish en premier paramètre, nous détectons la fin de cette dernière. Et avec le réglage Css opéré en second paramètre, nous indiquons comment intervenir. En exploitant de nouveau la fonction Css sur les valeurs de fin de l'animation, nous la figeons sur son état d'arrivée.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur (ALT + Tab),
• Actualiser la page Web (F5) et cliquer sur le premier carré,

Comme vous pouvez le constater, l'animation se joue et conserve sa position finale, contrairement à ce que nous avons pu constater précédemment.

Combiner les animations
Maintenant, il est question de jouer les quatre animations des quatre formes en même temps. Une boucle for permet de parcourir chacun des calques grâce aux identifiants incrémentés. Il est donc possible d'enclencher les animations tour à tour. Mais un problème se pose. L'événement consistant à détecter la fin de l'animation pour la figer dans son état final n'aura pas le temps de se déclencher pour agir. A chaque passage dans la boucle, il sera détruit et remplacé par un nouveau gestionnaire destiné à contrôler l'animation suivante. L'astuce consiste à le détacher dans une fonction indépendante à appeler à chaque traitement récursif. Ainsi gérés en mémoire, nous aurons bien quatre gestionnaires pour contrôler les quatre animations.

• Sous la fonction Animer, créer la fonction Ecouter comme suit :

function Ecouter(jouer,cible)
{

}

Nous la signons avec deux paramètres car il est essentiel qu'elle récupère l'objet désignant le calque et celui gérant son animation. C'est ainsi que nous pourrons figer cette dernière.

• Dans la procédure Animer, sélectionner les trois lignes de l'instruction de l'observateur,
• Les couper (CTRL + X) puis les coller dans la fonction Ecouter,

function Ecouter(jouer,cible)
{
jouer.addEventListener('finish', function(){
cible.style.transform = 'translate(200px, 200px)';
});
}

Ainsi nous détachons complètement le gestionnaire de fin de ses animations qui devront se jouer dans une boucle désormais.

Dans la fonction Animer, nous devons maintenant passer en revue tous les calques des formes géométriques pour les animer tour à tour.

• Après les déclarations de la fonction Animer, englober le reste du code dans une boucle :

function Animer()
{
var cible; var jouer;
for(var i=1;i<5;i++)
{
cible = document.querySelector('.calque1');
jouer = cible.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 75px)'},
{transform: 'translate(200px, 200px)'}
], 500);
}
}

Nous faisons varier son indice de la valeur 1 à la valeur 4 pour considérer les quatre calques possédant cette extension numérique dans l'intitulé de leurs identifiants.

Bien sûr, ce n'est pas fini. Nous devons adapter l'affectation de lavariable cible pour qu'elle pointe sur le calque suivant à chaque passage dans la boucle.

• Adapter l'affectation de la variable cible comme suit :

cible = document.querySelector('.calque'   + i);

De cette manière, nous allons considérer dans l'enchaînement les calques : calque1, calque2, calque3 et calque4 des quatre carrés.

De plus et désormais, pour plus de subtilité, nous souhaitons faire varier les vitesses de ces animations. Pour cela, il suffit de multiplier le délai déjà défini par la variable de boucle.

• Dans l'affectation de la variable jouer, transformer le délai comme suit : 500*i,

De cette manière, la deuxième animation sera deux fois plus lente et les suivantes respectivement trois fois et quatre fois plus lentes.

Enfin, à chaque fois qu'une animation est lancée, nous devons déclencher son gestionnaire pour l'observer et l'intercepter à l'issue.

• Avant la fermeture de la boucle, ajouter l'appel de la fonction Ecouter :

Ecouter(jouer,cible);

Le code Javascript complet que nous avons construit pour diriger ces animations est le suivant :

<script type="text/javascript" language="javascript">
function Animer()
{
var cible; var jouer;
for(var i=1;i<5;i++)
{
cible = document.querySelector('.calque'+ i);
jouer = cible.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 75px)'},
{transform: 'translate(200px, 200px)'}
], 500*i);
Ecouter(jouer,cible);
}
}

function Ecouter(jouer,cible)
{
jouer.addEventListener('finish', function(){
cible.style.transform = 'translate(200px, 200px)';
});
}
</script>

Il est temps de tester le résultat.

• Enregistrer les modifications (CTRL + S),
• Revenir sur le navigateur Internet (Alt + Tab),
• Puis, cliquer sur l'un des quatre carrés,

Comme vous pouvez l'apprécier, les quatre animations se jouent en même temps et selon une trajectoire non linéaire grâce au Keyframes en trois étapes que nous avons construit. De plus, elles ne vont pas à la même vitesse. Plus le carré est éloigné, plus il met du temps à rejoindre sa position finale.



C'est un joli ballet que nous avons construit là.