Heute habe ich kurz JS Sports Animation gelernt, meine Erfahrungen aufgezeichnet und sie mit allen geteilt.
Im Folgenden finden Sie die Ergebnisse, die ich aussortiert habe.
Wissenspunkt 1: Geschwindigkeitsanimation.
1. Erstens besteht der erste Schritt darin, Geschwindigkeitsbewegungsanimation zu implementieren und eine Funktion zu verkapulieren. Das verwendete Wissen ist setInterval (function () {
Die Codekopie lautet wie folgt:
odiv.style.left = odiv.offsetleft+10+"px";
}, 30).
In Bezug auf den Grund, warum OffsetLeft hier verwendet wird, bin ich speziell Baidu, und die nützlichen Informationen, die ich erhielt, sind:
A.offsetLeft und links sind die gleichen wie die Darstellung der linken Position des untergeordneten Knotens relativ zum Elternknoten.
B. Aber links ist sowohl lesbar als auch schriftlich, während OffsetLeft schreibgeschützt ist.
C. Und OffsetLeft hat keine Einheit, und es enthält keine PX, wenn sie die untergeordnete Knotenposition erhalten.
Ich erweitere hier andere Kenntnisse. Vielen Dank an diesen Blogger, http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/.
2. Lassen Sie den sich bewegenden Knoten stoppen. Hier verwenden wir die IF -Anweisung, um dies zu überprüfen. Wenn OffsetLeft == 0, ClearInterval (Timer), sollte der Timer hier im Voraus initialisieren und dann die vorherige Bewegungsanimation ihm zuweisen.
3. Hier gibt es ein Problem. Wenn die Bewegung vor dem Ende der Bewegung erneut ausgelöst wird, sammelt sich die Geschwindigkeit der Bewegung an. Solange die gesamte Bewegung beginnt, reicht Clearinterval (Timer) aus.
4. Setzen Sie den Bewegungs- und Entfernungseffekt und setzen Sie die Parameter für die Bewegung fest, eine ist die Geschwindigkeitsgeschwindigkeit und die andere ist die Zielposition itarget. Wir fanden heraus, dass die Geschwindigkeit auch anhand der Position des Itargets beurteilt werden kann, sodass nur ein Parameter erforderlich ist.
Wissenspunkt 2: Transparenzgradient
1. Tatsächlich ist es gerade jetzt ähnlich, außer dass der Wert von iTarget transparent ist und der Prozess darin besteht, den Timer zu löschen und einen anderen Timer zu schalten, um Urteile zu fällen, usw.
2. Definieren Sie einen Parameter alpha = Transparenz, beachten Sie, dass der Timer so geschrieben werden sollte:
Die Codekopie lautet wie folgt:
Alpha+= Geschwindigkeit;
Odiv.Style.filter = 'Alpha (Opazität:'+alpha+')'; // Dies ist eine sehr wichtige Methode. Bitte beachten Sie, dass sie so geschrieben ist
odiv.style.opacity = alpha/100; // Achten Sie darauf, nicht zu vergessen, sich durch 100 zu teilen
3. Die oben genannten sind alle im Inline-Stil.
Know -how: Pufferbewegung
1. Pufferbewegung bedeutet, dass je größer der Abstand, je größer die Geschwindigkeit und je kleiner der Abstand ist, desto kleiner die Geschwindigkeit, dh die Geschwindigkeit, mit dem Abstand zusammenhängt.
2. Nach der obigen Aussage wird die Geschwindigkeit neu definiert. Die Geschwindigkeit ist am Anfang 0 und jetzt:
Die Codekopie lautet wie folgt:
var speed = itarget-odiv.offsetleft;
Definieren Sie den Timer neu:
Die Codekopie lautet wie folgt:
odiv.style.left = odiv.offsetleft+speed+'px';
Zu diesem Zeitpunkt stellten wir fest, dass die Geschwindigkeit zu hoch war, damit wir es so machen konnten:
Die Codekopie lautet wie folgt:
var speed = (itarget-odiv.offsetleft)/10;
3. Es wird zu diesem Zeitpunkt ein ernstes Problem geben. Da die minimale Einheit des Bildschirms PX ist, erscheint der endgültige linke Wert als Dezimalwert, und das Itarget ist nicht das Ziel. Es kann durch ein Urteil gelöst werden. Math.floor () sollte hier vorgestellt werden, was abrundet, und Math. Ceil () wird ebenfalls erscheinen, was zusammenfasst. Nachdem wir die Geschwindigkeit definiert haben, schreiben wir Folgendes:
Die Codekopie lautet wie folgt:
Speed = Geschwindigkeit> 0? Math.Ceil (Geschwindigkeit): Math.Floor (Geschwindigkeit);
Dies stellt sicher, dass die Geschwindigkeit eine Ganzzahl ist und dass sie 0 im kritischen Wert beträgt.
Wissenspunkt 4: Multi-Objektbewegung
1. Holen Sie sich zunächst alle Objekte, bilden Sie ein Array und verwenden Sie dann eine für Schleife, um dies zu tun (wie klassisch diese Methode!), Fügen Sie Knotenereignisse in die for -Schleife hinzu und verwenden Sie diesen, um den aktuellen Knoten in der Funktion zu ersetzen, z. B. StartMove (dieses, itarget), startmove (OBJ, ITarget), wenn Sie die Funktion definieren.
2. Wenn Sie die aktuelle Breite übernehmen, müssen Sie den Wert von OBJ verwenden.
3. Wenn sich die Maus sehr schnell bewegt, kann die Breite des Knotens nicht in ihren ursprünglichen Zustand wiederhergestellt werden. Dies liegt daran, dass der Timer ein Timer ist, den jeder verwendet. Der nächste Knoten hat den Timer gelöscht, bevor der vorherige Knoten in seinen ursprünglichen Zustand zurückgekehrt ist. Die Lösung besteht darin, jedem Knoten einen Index hinzuzufügen, der adiv [i] .Timer = null zum obigen für die Schleife hinzufügen; und definieren Sie dann die Funktion, um den Timer durch obj.timer zu ersetzen. Daher sollten wir darauf achten, dass beim Teilen des Timers etwas passiert.
4. In der Transparenzbewegung ersetzt Alpha die Geschwindigkeit, aber selbst wenn der Timer nicht geteilt wird, hat die Bewegung mehrerer Objekte Probleme. Dies liegt daran, dass Alpha häufig ist und jedes Objekt sich gegenseitig zerreißt. Die Lösung besteht darin, jedem Knoten in der für Schleife wie ein Timer Alpha zuzuweisen.
Zusammenfassung: Lösung von Konfliktproblemen, entweder initialisieren oder personalisieren.
Wissenspunkt 5. Stil erhalten
1. In einem Timer, der die Breite des Knotens ändert (in großer, klein entfernen), wenn Sie dem Knoten einen Rand hinzufügen, ist er kleiner als der Zielknoten, wenn er eingeführt wird und größer als der Zielknoten, wenn er ausgestrahlt wird. Achten Sie auf die Breite+Padding+Scrollbar (Scrollbar)+Rand. Der Grund dafür ist, dass jeder Offset die Rande erhöht*2- (der Wert jeder Abnahme des Timers).
2. Die Lösung für das obige Problem besteht darin, Breite in der Zeile zu schreiben und Parseint (odiv.style.width) anstelle von offsetleft zu verwenden, aber sie kann nicht immer in der Zeile geschrieben werden, daher definieren wir eine Funktion, um den Kettenstil zu erhalten:
Die Codekopie lautet wie folgt:
Funktion getStyle (obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle [attr]; // dh Browser
}
anders{
return getComputerSyle (obj, falsch) [attr]; // andere Browser
}
}
3. Für eine Schriftgröße gibt es in JS nur die Schreibmethode der Schriftgröße.
Wissenspunkt 6: Jeder Attributwert
1. Alle Offset- haben kleine Fehler. Verwenden Sie die GetStyle -Funktion. Diese Funktion wird häufig mit ParseinT () verwendet und normalerweise mit Variablen gespeichert.
2. Wenn Sie style.width schreiben, können Sie es auch als Stil ['Breite'] schreiben.
3. Für die Einstellung des Attributwerts mehrerer Objekte können Sie den Stil als Parameter zusammenfassen, so dass die Funktionen der Attribute mehrerer Objekte die drei Attributwerte (OBJ, Attr, Itarget) enthalten.
4. Das obige Bewegungsrahmen ist nicht für Transparenzänderungen geeignet, da Transparenz alle dezimal ist. Aus zwei Gründen ist der erste Parseint und der zweite ist attr = ...+px. Hier können wir eine IF -Interpretation verwenden, um Transparenz separat zu verarbeiten, Parseint durch Parsefloat zu ersetzen und PX zu entfernen.
5. Der Computer selbst hat einen Fehler, 0,07*100 entspricht nicht 7, daher führen wir eine Funktion vor, die mathematisch ist.
Wissenspunkt 7: Kettenbewegung
1. Einlegen Sie den Move.js -Framework.
2. Geben Sie eine Rückruffunktion fn () über und verwenden Sie es, wenn Sie beurteilen. Wenn es fn () gibt, führen Sie FN () aus.
Wissenspunkt 8: Gleichzeitige Übung
1. Wenn zwei Bewegungsfunktionen geschrieben werden, um die gleichzeitige Bewegung zu kontrollieren, tritt eine Funktion überschreiben.
2. Verwenden Sie JSON als Wissenspunkt. Die JSON -Schleife verwendet für (i in JSON), und die Parameter der Bewegungsfunktion sind OBJ, JSON und FN.
3. Es gibt keinen Wert von iTarget, und es wird durch JSON [Attr] ersetzt.
Nach dem Schreiben ist es vollständig vorbei. Ich hoffe, es kann es mögen. Ich hoffe auch, dass es für alle hilfreich sein wird, JS -Sportanimationen zu lernen.