Die Animationsfunktion von jQuery lernt record_jquery

Ich interessiere mich schon seit langem sehr für die Implementierung von jQuery animate, aber vor einiger Zeit war ich sehr beschäftigt und hatte bis zum Drachenbootfest vor ein paar Tagen keine Zeit, es zu studieren.

Jeder Animationsübergangseffekt von jQuery.animate wird durch die Beschleunigungsfunktion erreicht. In jQuery1.4.2 sind zwei solcher Funktionen voreingestellt:

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;
}
}

Aus dem Parameternamen kann vage abgeleitet werden, dass firstNum der Anfangswert ist. Wenn Sie gut in Mathematik sind, können Sie feststellen, dass die lineare Funktion eine Geradengleichung ist; wenn Sie gut in Physik sind, können Sie feststellen, dass es sich um die Verschiebungsgleichung einer gleichförmigen Bewegung handelt (ich bin nicht gut in Mathematik und Physik, aber jemand anderes erinnerte mich an……). Dann sind diff und p Geschwindigkeit und Zeit.

Schauen Sie sich noch einmal den Prototyp von jQuery.animate an:

animieren: Funktion (Requisite, Geschwindigkeit, Beschleunigung, Rückruf)

Die Beschreibung jedes Parameters lautet wie folgt:

prop: Ein Satz, der Stileigenschaften und ihre Werte als Animationseigenschaften und Endwerte enthält.
Geschwindigkeit: Animationsdauer.
Lockerung: Der Name des zu verwendenden Löscheffekts.
Rückruf: Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.

Der aktuelle Stilwert (firstNum) des

-Elements kann abgerufen werden, die Animationsdauer (p) ist die Dauer und der endgültige Stilwert ist prop. Theoretisch kann die Animationsgeschwindigkeit (Diff) berechnet werden. Dies erfordert jedoch zwangsläufig eine andere Funktion zur Durchführung der Berechnung. Das ist offensichtlich unklug. Schauen wir uns den relevanten Code zum Aufrufen der Beschleunigungsfunktion an (befindet sich in jQuery.fx.prototype.step):

var t = now();
...
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);

Es kann festgestellt werden, dass der Wert des p-Parameters auch der Wert von this.state ist. Aus dem Kontext wissen wir, dass es sich tatsächlich um den zeitlichen Fortschritt der Animation handelt. Die Parameterwerte von firstNum und diff sind fest codiert und betragen 0 bzw. 1. Jetzt ist das Geheimnis der Beschleunigungsfunktion vollständig gelüftet. p, firstNum und diff sind allesamt Prozentsätze und keine tatsächlichen Werte. Der Rückgabewert der Beschleunigungsfunktion ist der Fortschritt der Verschiebung. Der Wert von diff ist 1, was bedeutet, dass die Animation mit einfacher Geschwindigkeit läuft. Nach der Berechnung des Verschiebungsfortschritts kann der aktuelle Verschiebungswert durch „Anfangswert (Endwert – Anfangswert) × Fortschritt“ berechnet werden:

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

Verwenden Sie setInterval, um jedes Mal (13 ms in jQuery) eine Verschiebungsoperation durchzuführen, bis die Differenz zwischen der aktuellen Zeit und der Anfangszeit größer als die Animationsdauer ist. Dies ist der Ausführungsprozess von jQuery.animate.

Nach der herkömmlichen Idee wird die Animation wie folgt implementiert: Mit setInterval wird ein bestimmter Wert zu einem bestimmten Zeitpunkt um einen bestimmten Wert erhöht, bis der Wert den Grenzwert erreicht. Das Hauptproblem dabei ist, dass verschiedene Browser mit unterschiedlichen Geschwindigkeiten laufen, was zu unterschiedlichen Animationsgeschwindigkeiten führt. Im Allgemeinen ist IE langsamer und Firefox schneller. jQuery.animate bestimmt den Verschiebungswert basierend auf der aktuellen Zeit. Der Verschiebungswert zu einem bestimmten Zeitpunkt ist immer festgelegt, sodass es keinen Unterschied in der Animationsgeschwindigkeit gibt.