Jouer une séquence d’images (animation)

2/3/2022 ☼ grid ☼ grille ☼ sprite ☼ animation

Niveau : ★★★★☆

Les sites de Jens Simmons et CSS Tricks sont des excellentes ressources pour continuer à travailler avec CCS Grid.

1 - Le résultat dans la page

See the Pen Sprite animation by Nicolas Tilly (@nicolastilly) on CodePen.

Comment jouer une animation à partir d’une série d’images ? Cette solution est très intéressante car très lègére, bien plus qu’un gif ou une vidéo (l’image finale pése 2 Ko !). Le principe est le suivant : il faut placer les images de son animation les unes après les autres comme sur l’exemple ci-dessous. Cela va produire une longue image, au format png pour garder la transparence, que le code javascript va lire et jouer en boucle.

La mise en page de cet exercice est réalisée avec CSS Grid (le positionnement du personnage et le sol), cela est bien sûr optionnel. Lisez bien les commentaires dans le code pour comprendre la démarche technique de l’exercice.

Source de l’image utilisée dans l’exercice

2 - Le code html

<div id="container">

    <div id="sprite-image"></div>
    <div id="sol"></div>
    
</div>

3 - Le code CSS

body {
    margin:0;
    background: #fac78e;/*la couleur de la page*/
}

/*la grille. Elle se divise en 2 lignes et une seule colonne à 100% de la largeur de la page (1fr).*/
#container {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

/*le lien de l'image est ici dans l'url du background. Ici il faut préciser la hauteur et la largeur d'une seule image dans l'animation.*/
#sprite-image {
  height: 50px;
  width: 200px;
  background: url("https://assets.codepen.io/265602/sprites.png")
    0px 0px;
    justify-self: center;/*aligne l'image au centre de la cellule*/
    align-self: end;/*aligne l'image au bord bas de la cellule*/
}

/*la couleur de la 2e ligne de la grille qui représente le sol*/
#sol {
    background:#949392;
}

4 - Le code js

var animationInterval;
var spriteSheet = document.getElementById("sprite-image");
var widthOfSpriteSheet = 1600;//la largeur de l'image totale
var widthOfEachSprite = 200;//la largeur d'une seule image (1600 divisé par 8)

function stopAnimation() {
  clearInterval(animationInterval);
}

function startAnimation() {
  var position = widthOfEachSprite;
  const speed = 100; 
  const diff = widthOfEachSprite;

  animationInterval = setInterval(() => {
    spriteSheet.style.backgroundPosition = `-${position}px 0px`;

    if (position < widthOfSpriteSheet) {
      position = position + diff;
    } else {
      position = widthOfEachSprite;
    }
  }, speed);
}


startAnimation();