Maison >interface Web >js tutoriel >Une brève analyse des principes de mise en œuvre des compétences Javascript animation_javascript
Supposons qu'il existe une telle exigence de fonction d'animation : changez la largeur d'un div de 100 px à 200 px. Le code écrit peut ressembler à ceci :
animate1(document.getElementById('test1'), 200, 1000);
Y a-t-il une meilleure façon ? Jetons un coup d'œil à un problème de mathématiques à l'école primaire :
L'inspiration apportée par cette question est que la distance à un certain moment peut être calculée grâce à une formule spécifique. De la même manière, la valeur à un certain moment du processus d'animation peut également être calculée via une formule au lieu de s'accumuler :
var timerId = setInterval(function() {
var pourcentage = (nouvelle date - heure de début) / durée ;
var stepValue = startValue (endValue - startValue) * pourcentage ;
element.style.width = stepValue 'px';
si (pourcentage >= 1) {
clearInterval(timerId);
element.innerHTML = new Date - startTime;
>
}, 13);
>
animate2(document.getElementById('test2'), 200, 1000);
Après cette amélioration, vous constatez que le temps d'exécution de l'animation n'aura qu'une erreur de 10 ms au maximum. Mais le problème n'a pas été complètement résolu. La vérification de l'élément test2 dans l'outil de développement du navigateur montre que la largeur finale de test2 peut être supérieure à 200 pixels. Une inspection minutieuse du code de la fonction animate2 révèle :
La valeur de 1.percentage peut être supérieure à 1, ce qui peut être résolu en limitant la valeur maximale via Math.min.
2. Même s'il est garanti que la valeur du pourcentage n'est pas supérieure à 1, tant que endValue ou startValue est une valeur décimale, la valeur de (endValue - startValue) * pourcentage peut toujours produire des erreurs car la précision des opérations décimales Javascript est pas assez. En fait, ce que nous voulons garantir, c'est l'exactitude de la valeur finale, donc lorsque le pourcentage est de 1, utilisez simplement endValue directement.
Donc, le code de la fonction animate2 est modifié comme suit :
var timerId = setInterval(function() {
// Assurez-vous que le pourcentage n'est pas supérieur à 1
var pourcentage = Math.min(1, (new Date - startTime) / durée);
var stepValue;
Si (pourcentage >= 1) {
// Assurer l'exactitude de la valeur finale
stepValue = endValue;
} autre {
stepValue = startValue (endValue - startValue) * pourcentage ;
>
element.style.width = stepValue 'px';
si (pourcentage >= 1) {
clearInterval(timerId);
element.innerHTML = new Date - startTime;
>
}, 13);
>
Il y a une dernière question : pourquoi l'intervalle de setInterval est-il défini sur 13 ms ? La raison en est que le taux de rafraîchissement des moniteurs actuels ne dépasse généralement pas 75 Hz (c'est-à-dire rafraîchi 75 fois par seconde, c'est-à-dire rafraîchi toutes les 13 ms environ). Il est préférable de synchroniser l'intervalle avec le taux de rafraîchissement.