Supposons qu'il existe une telle fonction d'animation: modifiez la largeur d'une div de 100px à 200px. Le code écrit pourrait ressembler à ceci:
La copie de code est la suivante:
<div id = "test1"> </div>
Fonction Animate1 (élément, endvalue, durée) {
var startTime = new Date (),
startValue = paSeInt (élément.style.width),
étape = 1;
var timerid = setInterval (function () {
var nextValue = paSeInt (élément.style.width) + étape;
element.style.width = nextValue + 'px';
if (nextValue> = endValue) {
ClearInterval (TIMERID);
// prend du temps pour afficher l'animation
element.innerhtml = new Date - starttime;
}
}, durée / (endvalue - startValue) * étape);
}
Animate1 (document.getElementById ('test1'), 200, 1000);
Le principe est d'augmenter 1px à chaque fois jusqu'à 200px. Cependant, le temps d'affichage après la fin de l'animation est supérieur à 1 (généralement environ 1,5 s). La raison en est que SetInterval ne peut pas garantir strictement l'intervalle d'exécution.
Y a-t-il une meilleure façon de le faire? Regardons d'abord un problème de mathématiques de l'école primaire:
La copie de code est la suivante:
Le bâtiment A et le bâtiment B étaient à 100 mètres l'un de l'autre. Un homme est passé du bâtiment A au bâtiment B à une vitesse constante. Après avoir marché pendant 5 minutes, il est arrivé à destination. Jusqu'où était-il de construire A à la troisième minute?
La formule de calcul pour calculer une distance d'un certain temps à vitesse constante est: Distance * Temps / heure actuel. La réponse doit donc être de 100 * 3/5 = 60.
L'inspiration de cette question est que le voyage d'un certain moment peut être calculé à travers une formule spécifique. De même, la valeur d'un certain moment pendant le processus d'animation peut également être calculée à travers des formules au lieu d'être accumulées:
La copie de code est la suivante:
<div id = "test2"> </div>
Fonction Animate2 (élément, endvalue, durée) {
var startTime = new Date (),
startValue = paSeInt (élément.style.width);
var timerid = setInterval (function () {
var pourcentage = (nouvelle date - starttime) / durée;
var StepValue = startValue + (endValue - startValue) * pourcentage;
element.style.width = StepValue + 'px';
if (pourcentage> = 1) {
ClearInterval (TIMERID);
element.innerhtml = new Date - starttime;
}
}, 13);
}
Animate2 (document.getElementById ('test2'), 200, 1000);
Après cette amélioration, vous pouvez voir que le temps d'exécution de l'animation ne prendra que jusqu'à 10 ms. Cependant, le problème n'a pas été complètement résolu. Si vous vérifiez l'élément Test2 dans l'outil de développement du navigateur, vous constaterez que la largeur finale de Test2 peut être supérieure à 200px. Si vous vérifiez soigneusement le code de la fonction Animate2, vous trouverez:
1. La valeur du pourcentage peut être supérieure à 1, ce qui peut être résolu en limitant la valeur maximale par mathématiques.
2. Même si la valeur du pourcentage est garantie de ne pas dépasser 1, tant que la valeur finale ou le startValue est une décimale, la valeur de (endvalue - startValue) * Le pourcentage peut entraîner des erreurs, car le fonctionnement décimal JavaScript n'est pas suffisamment précis. En fait, ce dont nous avons besoin pour assurer la précision de la valeur finale, donc lorsque le pourcentage est de 1, utilisez simplement la valeur finale directement.
Ainsi, le code de la fonction Animate2 est modifié à:
La copie de code est la suivante:
Fonction Animate2 (élément, endvalue, durée) {
var startTime = new Date (),
startValue = paSeInt (élément.style.width);
var timerid = setInterval (function () {
// s'assure que le pourcentage n'est pas supérieur à 1
var pourcentage = math.min (1, (nouvelle date - démarrage) / durée);
var Stepvalue;
if (pourcentage> = 1) {
// assure la précision de la valeur finale
StepValue = endValue;
} autre {
StepValue = startValue + (endvalue - startValue) * pourcentage;
}
element.style.width = StepValue + 'px';
if (pourcentage> = 1) {
ClearInterval (TIMERID);
element.innerhtml = new Date - starttime;
}
}, 13);
}
Il y a une autre dernière question: pourquoi l'intervalle de SetInterval est-il réglé à 13 ms? La raison en est que le taux de rafraîchissement du moniteur à l'heure actuelle ne dépasse généralement pas 75 Hz (c'est-à-dire qu'il est actualisé 75 fois par seconde, ce qui signifie qu'il est actualisé toutes les 13 ms) et la synchronisation de l'intervalle avec le taux de rafraîchissement est meilleure.