Apprentissage de la fonction d'animation de jQuery record_jquery

Je suis très intéressé par la mise en œuvre de jQuery animate depuis longtemps, mais j'étais très occupé il y a quelque temps et je n'ai pas eu le temps de l'étudier avant les vacances du Dragon Boat Festival il y a quelques jours.

Chaque effet de transition d'animation de jQuery.animate est obtenu grâce à la fonction d'assouplissement. Il existe deux de ces fonctions prédéfinies dans jQuery1.4.2 :

easing: {
linear: function( p, n, firstNum, diff ) {
return firstNum + diff * p;
},
swing: function( p, n, firstNum, diff ) {
return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
}
}

On peut vaguement déduire du nom du paramètre que firstNum est la valeur initiale. Si vous êtes bon en mathématiques, vous pouvez constater que la fonction linéaire est une équation de ligne droite ; si vous êtes bon en physique, vous pouvez constater que c'est l'équation de déplacement d'un mouvement uniforme (je ne suis pas bon en mathématiques et en physique, mais quelqu'un d'autre m'a rappelé……). Alors diff et p sont la vitesse et le temps.

Regardez à nouveau le prototype de jQuery.animate :

animer : fonction (accessoire, vitesse, assouplissement, rappel)

La description de chaque paramètre est la suivante :

prop : Un ensemble contenant les propriétés de style et leurs valeurs en tant que propriétés d'animation et valeurs finales.
vitesse : durée de l’animation.
easing : Le nom de l’effet d’effacement à utiliser.
callback : fonction exécutée lorsque l'animation est terminée.

La valeur de style actuelle (firstNum) de l'élément

peut être obtenue, la durée de l'animation (p) est la durée et la valeur de style finale est prop. Théoriquement, la vitesse d'animation (diff) peut être calculée. Mais cela nécessite forcément une autre fonction pour effectuer le calcul. Ce n’est évidemment pas judicieux. Regardons le code pertinent pour appeler la fonction d'assouplissement (situé dans jQuery.fx.prototype.step) :

var t = maintenant();
...
var n = t - this.startTime;
this.state = n / this.options.duration;
...
this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

On peut constater que la valeur du paramètre p est également la valeur de this.state. D'après le contexte, nous savons qu'il s'agit en fait de la progression temporelle de l'animation. Les valeurs des paramètres firstNum et diff sont codées en dur, qui sont respectivement 0 et 1. Le secret de la fonction d'assouplissement est maintenant complètement révélé. p, firstNum et diff sont tous des pourcentages plutôt que des valeurs réelles. La valeur de retour de la fonction d'assouplissement est la progression du déplacement. La valeur de diff est 1, ce qui signifie que l'animation s'exécute à une vitesse 1x. Après avoir calculé la progression du déplacement, la valeur de déplacement actuelle peut être calculée via "valeur initiale (valeur finale - valeur initiale) × progression":

this.now = this.start ((this.end - this.start) * this.pos);

Utilisez setInterval pour effectuer une opération de déplacement à intervalles réguliers (13 ms dans jQuery) jusqu'à ce que la différence entre l'heure actuelle et l'heure initiale soit supérieure à la durée de l'animation. C'est le processus d'exécution de jQuery.animate.

Selon l'idée conventionnelle, l'animation est implémentée comme suit : utiliser setInterval pour augmenter une certaine valeur d'une valeur spécifique à un certain moment jusqu'à ce que la valeur atteigne la valeur limite. Le principal problème est que les différents navigateurs fonctionnent à des vitesses différentes, ce qui entraîne des différences dans les vitesses d'animation. Généralement, IE est plus lent et Firefox est plus rapide. jQuery.animate détermine la valeur de déplacement en fonction de l'heure actuelle. La valeur de déplacement à un certain moment est toujours fixe, il n'y aura donc aucune différence dans la vitesse d'animation.