Angenommen, es gibt eine solche Animationsfunktionsanforderung: Ändern Sie die Breite eines DIV von 100px auf 200px. Der geschriebene Code könnte so aussehen:
Die Codekopie lautet wie folgt:
<div id = "test1"> </div>
Funktion Animate1 (Element, Endwert, Dauer) {
var starttime = new Date (),
startValue = parseInt (element.style.width),
Schritt = 1;
var TimerID = setInterval (function () {
var NextValue = parseInt (Element.Style.Width) + Schritt;
Element.Style.Width = NextValue + 'PX';
if (NextValue> = EndValue) {
ClearInterval (Timerid);
// zeitaufwändig, um Animation anzuzeigen
element.innerhtml = neues Datum - StartTime;
}
}, Dauer / (EndValue - startValue) * Schritt);
}
Animate1 (Dokument.GetElementById ('Test1'), 200, 1000);
Das Prinzip besteht darin, 1PX jedes Mal bis 200px zu erhöhen. Die Anzeigezeit nach der Animation beträgt jedoch mehr als 1s (normalerweise um 1,5 Sekunden). Der Grund dafür ist, dass SetInterval das Ausführungsintervall nicht strikt garantieren kann.
Gibt es einen besseren Weg, dies zu tun? Schauen wir uns zunächst ein Mathematikproblem der Grundschule an:
Die Codekopie lautet wie folgt:
Das Gebäude A und das Gebäude B waren 100 Meter voneinander entfernt. Ein Mann ging mit konstanter Geschwindigkeit von Gebäude A bis Gebäude B. Nachdem er 5 Minuten lang gelaufen war, kam er an seinem Ziel an. Wie weit war er in der dritten Minute vom Bau von A?
Die Berechnungsformel zur Berechnung eines Abstands einer bestimmten Zeit während der konstanten Geschwindigkeit ist: Entfernung * Stromzeit/Zeit. Die Antwort sollte also 100 * 3/5 = 60 sein.
Die Inspiration aus dieser Frage ist, dass die Reise eines bestimmten Moments durch eine bestimmte Formel berechnet werden kann. In ähnlicher Weise kann der Wert eines bestimmten Moments während des Animationsprozesses auch durch Formeln berechnet werden, anstatt zu sammeln:
Die Codekopie lautet wie folgt:
<div id = "test2"> </div>
Funktion Animate2 (Element, Endwert, Dauer) {
var starttime = new Date (),
startValue = parseInt (element.style.width);
var TimerID = setInterval (function () {
var prozentual = (neues Datum - Startzeit) / Dauer;
var stepvalue = startValue + (EndValue - StartValue) * Prozentsatz;
element.style.width = stepvalue + 'px';
if (Prozentsatz> = 1) {
ClearInterval (Timerid);
element.innerhtml = neues Datum - StartTime;
}
}, 13);
}
Animate2 (Dokument.GetElementById ('test2'), 200, 1000);
Nach dieser Verbesserung können Sie feststellen, dass die Animationsausführungszeit nur bis zu 10 ms dauert. Das Problem wurde jedoch nicht vollständig gelöst. Wenn Sie das Test2 -Element im Browser -Entwicklungstool überprüfen, werden Sie feststellen, dass die endgültige Breite von Test2 möglicherweise mehr als 200px beträgt. Wenn Sie den Code der Animate2 -Funktion sorgfältig überprüfen, finden Sie:
1. Der Wert des Prozentsatzes kann größer als 1 sein, was durch Begrenzung des Maximalwerts durch Mathematik gelöst werden kann.
2. Auch wenn der Wert des Prozentsatzes garantiert nicht mehr als 1 beträgt, solange das Endwert oder das Startwert ein Dezimalwert ist, kann der Wert von (Endwert - Startwert) * Prozentsatz zu Fehlern führen, da der JavaScript -Dezimalbetrieb nicht genau genug ist. Tatsächlich müssen wir sicherstellen, dass die Genauigkeit des Endwerts. Wenn der Prozentsatz also 1 ist, verwenden Sie einfach das Endwert direkt.
Der Code der Animate2 -Funktion wird also geändert an:
Die Codekopie lautet wie folgt:
Funktion Animate2 (Element, Endwert, Dauer) {
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 prozentual = math.min (1, (neues Datum - Starttime) / Dauer);
var stepvalue;
if (Prozentsatz> = 1) {
// Stellen Sie die Genauigkeit des Endwerts sicher
stepvalue = endValue;
} anders {
stepvalue = startValue + (EndValue - StartValue) * Prozentsatz;
}
element.style.width = stepvalue + 'px';
if (Prozentsatz> = 1) {
ClearInterval (Timerid);
element.innerhtml = neues Datum - StartTime;
}
}, 13);
}
Es gibt noch eine letzte Frage: Warum ist das Intervall des SetInterval auf 13 ms festgelegt? Der Grund dafür ist, dass die Aktualisierungsrate des Monitors derzeit im Allgemeinen nicht 75 Hz überschreitet (dh er wird 75 -mal pro Sekunde aktualisiert, was bedeutet, dass er alle 13 ms aktualisiert wird), und die Synchronisierung des Intervalls mit der Auffrischungsrate ist besser.