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 :

Copier le code Le code est le suivant :

function animate1 (élément, endValue, durée) {
var startTime = new Date(),
         startValue = parseInt(element.style.width),
         étape = 1 ;
 
var timerId = setInterval(function() {
        var nextValue = parseInt(element.style.width) step ;
          element.style.width = nextValue 'px';
Si (nextValue >= endValue) {
               clearInterval(timerId);
// Il faut 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 de 1px à intervalles réguliers jusqu’à atteindre 200px. Cependant, le temps d'affichage après la fin de l'animation est supérieur à 1 seconde (généralement environ 1,5 seconde). La raison est que setInterval ne garantit pas strictement l'intervalle d'exécution.

Y a-t-il une meilleure façon ? Jetons un coup d'œil à un problème de mathématiques à l'école primaire :

Copier le code Le code est le suivant :

Le bâtiment A et le bâtiment B sont distants de 100 mètres. Une personne marche du bâtiment A au bâtiment B à une vitesse constante et marche pendant 5 minutes pour atteindre sa destination. À quelle distance se trouve-t-elle du bâtiment A à la troisième minute ?

La formule de calcul pour calculer la distance à un certain moment en mouvement uniforme est : distance * heure/heure actuelle. La réponse devrait donc être 100 * 3 / 5 = 60 .

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 :

Copier le code Le code est le suivant :

function animate2(element, endValue, durée) {
var startTime = new Date(),
         startValue = parseInt(element.style.width);

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 :

Copier le code Le code est le suivant :

function animate2(element, endValue, durée) {
var startTime = new Date(),
         startValue = parseInt(element.style.width);

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.