Eine kurze Analyse der Implementierungsprinzipien der Javascript-Animation_Javascript-Fähigkeiten

Angenommen, es gibt eine solche Animationsfunktionsanforderung: Ändern Sie die Breite eines Divs von 100 Pixel auf 200 Pixel. Der geschriebene Code könnte so aussehen:

Code kopieren Der Code lautet wie folgt:

Funktion animate1(element, endValue, duration) {
var startTime = new Date(),
         startValue = parseInt(element.style.width),
         Schritt = 1;
 
var timerId = setInterval(function() {
        var nextValue = parseInt(element.style.width) step;
          element.style.width = nextValue 'px';
If (nextValue >= endValue) {
               clearInterval(timerId);
// Es dauert einige Zeit, die Animation anzuzeigen
                element.innerHTML = neues Datum - startTime;
}
}, Dauer / (endValue - startValue) * Schritt);
}

animate1(document.getElementById('test1'), 200, 1000);

Das Prinzip besteht darin, in regelmäßigen Abständen 1 Pixel zu erhöhen, bis 200 Pixel erreicht sind. Allerdings beträgt die Anzeigezeit nach Ende der Animation mehr als 1 Sekunde (normalerweise etwa 1,5 Sekunden). Der Grund dafür ist, dass setInterval das Ausführungsintervall nicht strikt garantiert.

Gibt es einen besseren Weg? Werfen wir einen Blick auf eine Mathematikaufgabe aus der Grundschule:

Code kopieren Der Code lautet wie folgt:

Gebäude A und Gebäude B sind 100 Meter voneinander entfernt. Eine Person geht mit konstanter Geschwindigkeit von Gebäude A zu Gebäude B und läuft 5 Minuten, um das Ziel zu erreichen.

Die Berechnungsformel zur Berechnung der Distanz zu einem bestimmten Zeitpunkt bei gleichförmiger Bewegung lautet: Distanz * aktuelle Zeit / Uhrzeit. Die Antwort sollte also 100 * 3 / 5 = 60 lauten.

Die Inspiration dieser Frage ist, dass die Entfernung zu einem bestimmten Zeitpunkt durch eine bestimmte Formel berechnet werden kann. Auf die gleiche Weise kann der Wert zu einem bestimmten Zeitpunkt während des Animationsprozesses auch über eine Formel berechnet werden, anstatt ihn zu akkumulieren:

Code kopieren Der Code lautet wie folgt:

Funktion animate2(element, endValue, duration) {
var startTime = new Date(),
         startValue = parseInt(element.style.width);

var timerId = setInterval(function() {
      var Prozentsatz = (neues Datum – Startzeit) / Dauer;

var stepValue = startValue (endValue - startValue) * Prozentsatz;
          element.style.width = stepValue 'px';

wenn (Prozentsatz >= 1) {
               clearInterval(timerId);
                element.innerHTML = neues Datum - startTime;
}
}, 13);
}

animate2(document.getElementById('test2'), 200, 1000);

Nach dieser Verbesserung können Sie sehen, dass die Ausführungszeit der Animation nur noch einen Fehler von höchstens 10 ms aufweist. Das Problem wurde jedoch nicht vollständig gelöst. Die Überprüfung des test2-Elements im Browser-Entwicklungstool zeigt, dass die endgültige Breite von test2 möglicherweise mehr als 200 Pixel beträgt. Eine sorgfältige Prüfung des Codes der animate2-Funktion zeigt:

Der Wert von 1.percentage kann größer als 1 sein, was gelöst werden kann, indem der Maximalwert durch Math.min begrenzt wird.
2. Selbst wenn garantiert ist, dass der Wert von „Prozent“ nicht größer als 1 ist, kann der Wert von „(endValue – startValue) * Prozentsatz“ dennoch zu Fehlern führen, solange „endValue“ oder „startValue“ eine Dezimalzahl ist, da die Genauigkeit von Javascript-Dezimaloperationen gering ist nicht genug. Tatsächlich möchten wir die Genauigkeit des Endwerts sicherstellen. Wenn der Prozentsatz also 1 ist, verwenden Sie endValue einfach direkt.

Der Code der Funktion animate2 wird also wie folgt geändert:

Code kopieren Der Code lautet wie folgt:

Funktion animate2(element, endValue, duration) {
var startTime = new Date(),
         startValue = parseInt(element.style.width);

var timerId = setInterval(function() {
​​​​ // Stellen Sie sicher, dass der Prozentsatz nicht größer als 1 ist
      var Prozentsatz = Math.min(1, (neues Datum – Startzeit) / Dauer);

var stepValue;
Wenn (Prozentsatz >= 1) {
​​​​​​ // Stellen Sie die Genauigkeit des Endwerts sicher
             stepValue = endValue;
         } sonst {
             stepValue = startValue (endValue - startValue) * Prozentsatz;
}
          element.style.width = stepValue 'px';

wenn (Prozentsatz >= 1) {
               clearInterval(timerId);
                element.innerHTML = neues Datum - startTime;
}
}, 13);
}

Es gibt noch eine letzte Frage: Warum ist das Intervall von setInterval auf 13 ms eingestellt? Der Grund dafür ist, dass die Bildwiederholfrequenz aktueller Monitore im Allgemeinen 75 Hz nicht überschreitet (d. h. 75 Mal pro Sekunde aktualisiert wird, d. h. alle etwa 13 ms aktualisiert wird). Es ist besser, das Intervall mit der Bildwiederholfrequenz zu synchronisieren.