Cours 8 | Anime.js¶

Anime.js est une bibliothèque d'animation JavaScript. Elle permet d'animer quasiment toutes les propriétés CSS, les attributs SVG, les objets JavaScript et plus encore.

Documentation officielle

Installation¶

npm init -y

npm install animejs

Nouveauté ! Dans le HTML, nous allons utiliser la façon modulaire d'importer une librairie js.

index.html

<head>
  <!-- ... -->
  <script type="importmap">
  {
    "imports": {
      "animejs": "./node_modules/animejs/dist/bundles/anime.esm.min.js"
    }
  }
  </script>
  <script src="./src/js/script.js" type="module"></script>
</head>
<body>

  <div class="dot"></div>

</body>

script.js

import { animate } from 'animejs';

animate('.dot', {
  // ...
});

Live Server requis

Cette méthode se rapproche plus de la méthode contemporaine de développement Web. Toutefois, elle nécessite l'usage d'un serveur. Donc à partir de maintenant, et ce, jusqu'à la fin de session, il sera important d'utiliser Live Server dans vscode pour afficher son site Web.

Animations¶

Une animation se crée en appelant la méthode animate().

On doit lui passer 2 choses :

Cible(s) : L'élément (ou les éléments) à animer. Peut être un sélecteur CSS (p.intro), un élément du DOM ou un objet JavaScript.
Paramètre(s) : Objet Javascript qui contient toutes les configurations de l'animation.

import { animate } from 'animejs';

animate('.dot', {
  x : 100
});

Translate¶

Les propriétés de translation (x, y) permettent de déplacer un élément dans l'espace. Par défaut, les valeurs numériques sont interprétées en pixels, mais vous pouvez spécifier d'autres unités comme %, em, rem, vh, vw.

script.js

import { animate } from 'animejs';

animate('.dot', {
  x: 100  // équivaut à x: '100px'
});

Pourcentages et transformations

Les pourcentages sont calculés par rapport à la taille de l'élément animé.

Pour une valeur plus absolue, utiliser offsetWidth ou offsetHeight.

Rotate¶

La propriété rotate permet de faire tourner un élément autour de son point d'origine. AnimeJS accepte plusieurs types de valeurs :

Nombres : 360 (degrés par défaut)
Chaînes avec unités : "180deg", "0.5turn", "3.14rad"

script.js

import { animate } from 'animejs';

animate('.bar', {
  rotate: 360
});

L'origine en CSS

La notion de transform origin en css est importante lorsqu'on effectue une transformation sur une forme. Ça indique à partir de où sera faite la transformation.

La valeur par défaut est de 50% 50%, soit au centre de l'élément HTML.

See the Pen &lt;a href="https://codepen.io/tim-momo/pen/QwyadwQ/60c6231193f49b9863344ad1809506d5"&gt; AnimeJS - transformOrigin&lt;/a&gt; by TIM Montmorency (&lt;a href="https://codepen.io/tim-momo"&gt;@tim-momo&lt;/a&gt;) on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.

Scale¶

La propriété scale modifie la taille d'un élément proportionnellement. Une valeur de 1 conserve la taille originale, 2 double la taille, 0.5 la réduit de moitié. Vous pouvez également utiliser scaleX et scaleY pour contrôler chaque axe indépendamment.

script.js

import { animate } from 'animejs';

animate('.dot', {
  scale: 4  // Agrandit l'élément 4 fois
});

Skew¶

La propriété skew déforme un élément en inclinant ses axes. Les valeurs sont exprimées en degrés. Vous pouvez également utiliser skewX et skewY pour contrôler l'inclinaison sur chaque axe séparément.

script.js

import { animate } from 'animejs';

animate('.dot', {
  skew: -20  // Inclinaison de -20 degrés
});

Variables CSS 🤌¶

On peut animer des variables css très simplement avec animejs. Un cas de figure assez classique est d'interpoler entre deux couleurs.

script.js

// :root {
//   --bg: rgb(65, 52, 34);
// }

import { animate } from 'animejs';

animate(":root", {
  "--bg": "rgb(50, 100, 66)",
  duration: 3000
});

script.js

// :root {
//   --bg: #413422;
// }

import { animate } from 'animejs';

animate(":root", {
  "--bg": "#293F30",
  duration: 3000
});

Opacité¶

La propriété opacity contrôle la transparence d'un élément. Les valeurs vont de 0 (complètement transparent) à 1 (complètement opaque).

script.js

import { animate } from 'animejs';

animate(".dot", {
  opacity: 1,
  duration: 3000,
  delay: 150
});

CSS vs. Anime.js¶

Les animations AnimeJS (translate, rotate, scale, skew) utilisent la propriété CSS transform.

Si un transform est déjà défini dans votre CSS, il sera remplacé par l’animation.

Par exemple, dans l'exemple ci-dessous, le scale se ferait écrasé par le translate géré par animejs.

styles.css

.dot {
  transform: scale(2);
}

script.js

animate(".dot", {
  x: 100
});

Gestion du temps¶

Durée¶

La propriété duration définit la durée de l'animation en millisecondes. La valeur par défaut est de 1000ms (1 seconde).

script.js

import { animate } from 'animejs';

animate('.dot', {
  x: 100,
  duration: 1000 * 10 // 10 sec
});

Délais¶

La propriété delay permet de retarder le début de l'animation. Elle s'exprime également en millisecondes et s'applique avant le début de l'animation.

script.js

import { animate } from 'animejs';

animate('.dot', {
  x: 100,
  delay: 2000 // 2 sec
});

Boucles¶

La propriété loop permet de répéter l'animation. Elle peut être true pour une répétition infinie, ou un nombre pour un nombre spécifique de répétitions.

script.js

import { animate } from 'animejs';

animate('.dot', {
  x: 100,
  loop: true
});

script.js

import { animate } from 'animejs';

animate('.dot', {
  x: 100,
  loop: true,
  alternate: true  // Effet ping-pong (aller-retour)
});

Lissage des animations¶

Éditeur de lissage

Certains lissages requiert d'importer d'autres librairies. Par exemple, le type de lissage irrégulier nécessite d'importer la méthode irregular :

import { animate, irregular } from 'animejs';

animate('.dot', {
  rotate: 90,
  duration: 2200,
  ease: irregular(23,10)
});

Combinaison¶

script.js

import { animate } from 'animejs';

animate('.dot', {
  x: 100,
  width: 100,
  rotate: 180,
  loop: true,
  loopDelay: 500,
  scale: 0.5,
  delay: 150,
  duration: 2000,
  alternate: true
});

Granularité¶

Il y a trois manières d'animer une propriété.

Valeur fixe (vers) : part de la valeur courante vers une autre spécifiée
Tableau [from, to] : on spécifie le départ et l'arrivée.
Objet { from, to, etc... } : on peut également ajouter d'autres paramètres ! Ça permet beaucoup de flexibilité

script.js

import { animate } from 'animejs';

animate('.dot', {
  width: 200,
  x: [100, 0],
  y: { from: 0, to: 240, duration: 3000 }
});

Multi-éléments¶

Parent enfant¶

On peut animer des enfants d'un élément qui lui-même est en cours d'animation.

<div class="parent">
  <div class="enfant"></div>
</div>

import { animate, stagger } from 'animejs';

animate('.parent', {
  x: 100
});

animate('.parent .enfant', {
  rotate: "2turn"
});

Stagger¶

Rotation¶

import { animate, stagger } from 'animejs';

animate('.carre', {
  rotate: stagger("20deg")
});

import { animate, stagger } from 'animejs';

animate('.carre', {
  rotate: stagger(["45deg", "-45deg"]),
});

Délai¶

import { animate, stagger } from 'animejs';

animate('.carre', {
  rotate: "90deg",
  delay: stagger(500),
});

Random¶

Lorsque le sélecteur s'applique à plusieurs éléments HTML, il est possible d'appliquer une valeur différente pour chaque éléments. Par exemple, avec une valeur aléatoire.

Pour ce faire, il faut utiliser une fonction flechée et la fonction utils pour l'aléatoire.

import { animate, utils } from 'animejs';

animate(".carre", {
  opacity: () => utils.random(0, 1, 2)
});

utils

AnimeJS vient avec des fonctions utilitaires, dont random. Il suffit d'importer utils !

WAAPI¶

WAAPI, c’est l’outil d’animation déjà intégré au navigateur. On peut spécifier à AnimeJS de l'utiliser !

script.js

import { animate } from 'animejs';

animate('.dot', {
  x: 100
});

script.js

import { waapi } from 'animejs';

waapi.animate('.dot', {
  x: 100
});

C’est souvent la solution la plus performante et légère pour des animations simples, mais ça ne fait pas tout. Par exemple, on ne peut pas animer une variable CSS avec WAAPI 🫠

Utilisez WAAPI si le rendu est identique et que l’animation reste simple. Passez à animate() si vous avez besoin de timelines, d’enchaînements complexes ou de fonctionnalités avancées. En savoir plus sur WAAPI et AnimeJS.

Exercices¶

Exercice - AnimeJS
L'avion

Exercice - AnimeJS
Le truck

Exercice - AnimeJS
Domino

Exercice - AnimeJS
La ferme des animaux