Animer des contenus web avec JavaScript

"animate" est une fonction JavaScript qui permet d'appliquer un effet d'animation avec la méthode "requestAnimationFrame" (plus optimale que la méthode "setInterval").

Elle prend en argument un objet contenant les paramètres suivants :

  • "duration" : durée de l’animation
  • "complete" : une fonction à exécuter à la fin de l’animation
  • "progress" : une fonction à exécuter à chaque frame de l’animation avec le pourcentage de la durée écoulée en argument
  • "timing" : type de timing à utiliser permettant un effet linéaire par défaut (cf : une liste de "timings")
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();
    }
  });
}

Voici un exemple d’utilisation qui permet d’animer la taille d’un élément :

var element = document.body;

animate({
  duration: 5000,
  complete: function() {
    console.log('Animation complète');
  },
  progress: function(percent) {
    console.log('Animation complétée à ' + percent + ' %');
    element.style.width = percent + '%';
  }
});

Cet article vous a-t-il été utile ?

Super :)
Merci d'avoir donné votre avis !

Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !

^