Animer des contenus web avec JavaScript

Concept et utilisation

La fonction animate() permet d'ajouter des effets d'animation sur des contenus web.
Elle utilise la méthode "requestAnimationFrame()", plus optimale que la méthode "setInterval()").

Fonction

animate()

Exécute une animation paramétrable.

Syntaxe
animate(animation);
Paramètre
animation(Object)

Le paramètre animation de la fonction animate() définit une animation à exécuter avec ses propriétés.

Propriétés
duration(Number)

La propriété duration du paramètre animation définit la durée de l'animation.

progress(Function)

La propriété progress du paramètre animation définit une fonction à exécuter itérativement à chaque frame de l'animation.

complete(Function)

La propriété complete du paramètre animation définit une fonction à exécuter quand l'animation est terminée.

Exemple d'ajout d'animation sur un élément

var animation = {
  duration: 5000,
  progress: function(percent) {

    console.log('Animation complétée à ' + percent + ' %');
    document.body.style.opacity = percent/100;

  },
  complete: function() {

    console.log('Animation complétée.');

  }
};
  
animate(animation);

Code source de la fonction

function animate(o) {
  var D = o.duration || 400,
      T = o.timing   || function(t) { return t; },
      P = o.progress || function(){},
      C = o.complete || function(){},
      N = performance.now();
  requestAnimationFrame(function f(t) {
    var p = (t - N) / D;
    if (p > 0) {
      if (p > 1) {
        p = 1;
      }
      P(T(p * 100));
    }
    if (p < 1) {
      requestAnimationFrame(f);
    } else {
      C();
    }
  });
}
^