Animer des contenus web avec JavaScript

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()").

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.

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);

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();
    }
  });
}