"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 !
Articles similaires
- Afficher des contenus en accordéon avec JavaScript et CSS
- Charger des styles CSS dynamiquement avec JavaScript
- Détecter le changement d'orientation de l'écran avec JavaScript
- Récupérer la position d'un élément avec JavaScript
- Récupérer les dimensions de la zone d'affichage (viewport) avec JavaScript