Animer des contenus web avec JavaScript

Publié le .

Temps de lecture: minute(s).

"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 !

^