Comment créer une animation en Javascript<span class="wtr-time-wrap after-title"><span class="wtr-time-number">7</span> min read</span>
les animations en javascript

Comment créer une animation en Javascript7 min read

Dans cet article, nous allons voir comment créer des animations en Javascript. Ce tutoriel se veut général et as pour objectif de vous enseigner toutes les techniques à connaître pour animer des page web.

Dans le développement web, il y a plusieurs façons d’animer une page web. On peux utiliser les animations CSS, les transitions CSS et le Javascript.

Les deux première façon de faire permettent de créer des mouvements basiques. Le javascript quand à lui vous permets de définir des règles complexes et de faire bouger des objets de manière très précise.

La seule façon de créer des animations complexes ou d’implémenter de la logique, c’est d’utiliser le Javascript.

La boucle d’animation

Pour créer une animation en Javascript, il faut définir une boucle, c’est à dire une fonction qui va tourner à chaque fois que c’est possible et qui va faire bouger nos objets.

Généralement, cette fonction va se lancer 60 fois par secondes, c’est le même fonctionnement que les jeux vidéos.

Pour que vous compreniez comment tout ça fonctionne, on va créer un bouton qui va nous permettre de simuler un lancement de la fonction.

Notre code va donc contenir le contenu qui va bouger notre cercle :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Animation d'un cercle</title>
    <style>
        body {
            background-color: #FFF;
            margin: 30px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        #contentContainer {
            width: 550px;
            height: 350px;
            overflow: hidden;
            background-color: #f9f6ff;
            display: flex;
            align-items: center;
        }

        #circle {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }

        #move {
            background-color: gold;
            margin-top: 20px;
            font-size: 16px;
            font-weight: bold;
            outline: none;
        }
        #move:hover {
            background-color: purple;
        }
        #move:active {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
<div id="contentContainer">
    <div id="circle"></div>
</div>

<input id="move" type="button" value="Bouger le cercle"></input>

<script>
    var circle = document.querySelector("#circle");

    var button = document.querySelector("#move");
    button.addEventListener("click", animate, false);

    var xPos = 0;

    function animate() {
        xPos += 10;

        circle.style.transform = `translate3d(${xPos}px, 0, 0)`;

        if (Math.abs(xPos) >= 900) {
            xPos = -500;
        }
    }
</script>
</body>

</html>

Bon, voyons maintenant comment fonctionne tout ce code ligne par ligne. Je ne vais pas vous expliquer comment fonctionne le CSS, c’est vraiment simple et si vous faites du Javascript, je vous recommande d’avoir ce niveau.

Pour animer notre cercle, on lance la fonction animate(). Pour la faire fonctionner, on utilise le DOM et le sélecteur sur l’id

var circle = document.querySelector("#circle");

    var button = document.querySelector("#move");
    button.addEventListener("click", animate, false);

Lorsque l’utilisateur clique sur le bouton, on lance la fonction animate ci-dessous :

 var xPos = 0;

    function animate() {
        xPos += 10;

        circle.style.transform = `translate3d(${xPos}px, 0, 0)`;

        if (Math.abs(xPos) >= 900) {
            xPos = -500;
        }
    }

Lors de la création de notre script, on initialise une variable xPos qui est égal à 0. Cette variable nous permettra de contrôler la position horizontale de notre cercle.

Chaque fois que l’utilisateur clique sur notre bouton, on ajoute 10 à la variable, ce qui va modifier sa position grâce à cette ligne :

 circle.style.transform = `translate3d(${xPos}px, 0, 0)`;

On utilise la propriété translate3d de transform pour modifier dynamiquement la position horizontale de notre cercle. Si vous ne comprenez pas ce code, je vous invite à vous renseigner sur la propriété transform en CSS

Enfin, on utilise cette dernière ligne de code pour repositionner le cercle au bon endroit. Si on ajoute pas cette ligne de code, notre cercle continuera d’aller à droite à l’infini, ce qui est mauvais.

if (Math.abs(xPos) >= 900) {
  xPos = -500;
}

Transformer ce code en une vrai animation

Bon, ici on as ce qui ressemble à une animation. Le soucis, c’est qu’il faut cliquer pour lancer chaque changement de position.

Nous allons maintenant voir comment automatiser le processus pour que la fonction se lance 60 fois par secondes.

Pour se faire, il suffit d’appeler requestAnimationFrame() à la fin de notre fonction. Cette fonction permets de relancer notre boucle à chaque fois que c’est possible, généralement 60 frames par secondes.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Animation d'un cercle</title>
    <style>
        body {
            background-color: #FFF;
            margin: 30px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        #contentContainer {
            width: 550px;
            height: 350px;
            overflow: hidden;
            background-color: #f9f6ff;
            display: flex;
            align-items: center;
        }

        #circle {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }

        #move {
            background-color: gold;
            margin-top: 20px;
            font-size: 16px;
            font-weight: bold;
            outline: none;
        }
        #move:hover {
            background-color: purple;
        }
        #move:active {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
<div id="contentContainer">
    <div id="circle"></div>
</div>



<script>
    var circle = document.querySelector("#circle");

var xPos = 0;

function animate() {
  xPos += 10;

  circle.style.transform = `translate3d(${xPos}px, 0, 0)`;

  if (Math.abs(xPos) >= 900) {
    xPos = -500;
  }

  requestAnimationFrame(animate);
}
animate();
</script>
</body>

</html>

Bingo ! Lorsque l’on ajoute requestAnimationFrame() on crée une boucle récursive qui va relancer notre fonction dès que possible. En fait, le navigateur va vérifier si il est disponible, et si c’est le cas, il va lancer de nouveau la fonction.

J’ai d’ailleurs retiré le bouton pour lancer le script, notre fonction se lance automatiquement lors du chargement de la page.

Rendre notre animation un peu plus cool

Bon, nous venons de créer une animation assez basique. Nous allons essayer de pimenter un peu le tout en modifiant l’animation de manière à faire bouger notre cercle verticalement.

Pour se faire, on va définir une position Y pour verticale et on va définir un angle pour modifier la hauteur. On appliquera la fonction Sinus de Math pour modifier la hauteur par rapport à notre angle.

Si notre angle est trop élevé, on va le réinitialiser pour éviter que notre cercle aille trop haut :

var circle = document.querySelector("#circle");

var xPos = 0;
var yPos = 0;
var angle = 0;

function animate() {
  xPos += 5;
  angle += .1;
  
  yPos = Math.round(20 * Math.sin(angle));

  circle.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;

  if (Math.abs(xPos) >= 900) {
    xPos = -500;
  }

  if (angle > 2 * Math.PI) {
    angle = 0;
  }

  requestAnimationFrame(animate);
}
animate();

Félicitation, vous avez crée une animation vraiment sympa en quelques lignes de code. Comme vous pouvez le voir , la fonction requestAnimationFrame et la propriété transform nous permets de faire des miracles.

Si vous ne comprenez pas comment le cercle bouge verticalement, ce n’est pas grave. C’est une propriété trigonométrique complexe, on applique la fonction sin pour créer une position verticale dynamique.

J’espère que cet article vous as plu, avec un peu de chance vous serez en mesure de créer vos animation beaucoup plus facilement.

Si cet article vous as plu, n’hésitez pas à vous abonner à ma newsletter. Il y a même un cadeau, un livre gratuit pour bien débuter la programmation !

Vous abonner à notre newsletter

* champ requis

Laisser un commentaire

Fermer le menu
×
×

Panier