Heute habe ich einfach js Motion Animation gelernt, meine Erfahrungen aufgezeichnet und sie mit allen geteilt.
Das Folgende sind die Ergebnisse, die ich zusammengestellt habe.
Wissenspunkt 1: Geschwindigkeitsanimation.
1. Der erste Schritt besteht darin, eine Geschwindigkeitsbewegungsanimation zu implementieren und eine Funktion zu kapseln. Das verwendete Wissen ist setInterval(function(){
oDiv.style.left=oDiv.offsetLeft 10 "px";
},30).
Warum offsetLeft hier verwendet wird, habe ich speziell danach gesucht und die nützlichen Informationen, die ich erhalten habe, sind:
Die Ähnlichkeit zwischen a.offsetLeft und left besteht darin, dass sie die linke Position des untergeordneten Knotens relativ zum übergeordneten Knoten darstellen.
b. Aber left kann gelesen und geschrieben werden, während offsetLeft schreibgeschützt ist;
c. Und offsetLeft hat keine Einheit und es gibt kein px dahinter, wenn die Position des untergeordneten Knotens ermittelt wird.
Hier finden Sie zusätzliches Wissen, dank dieses Bloggers,
http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/.
2. Stoppen Sie den sich bewegenden Knoten. Hier verwenden wir die if-Anweisung, um eine Überprüfung durchzuführen. Wenn offsetLeft==0, clearInterval (Timer), sollte der Timer hier im Voraus = null initialisiert werden und dann die vorherige Bewegungsanimation zuweisen dazu.
3. Hier liegt ein Problem vor, wenn die Bewegung vor dem Ende der Bewegung erneut ausgelöst wird. Hier wird die Geschwindigkeit der Bewegung akkumuliert, solange clearInterval (Timer) verwendet wird, bevor die gesamte Bewegung beginnt. es wird gut sein.
4. Stellen Sie den Einzugs- und Entfernungseffekt ein und legen Sie Parameter für die Bewegung fest. Einer ist die Geschwindigkeit und der andere ist die Zielposition iTarget. Wir haben festgestellt, dass die Geschwindigkeit auch anhand der Position von ITarget beurteilt werden kann. es wird also nur ein Parameter benötigt.
Wissenspunkt 2: Transparenzgradient
1. Tatsächlich ist es fast dasselbe wie zuvor, außer dass der Wert von ITarget in der Transparenz liegt und der Prozess immer noch darin besteht, den Timer zu löschen und dann einen Timer zur Beurteilung usw. zu öffnen.
2. Definieren Sie einen Parameter Alpha = Transparenz. Beachten Sie, dass der Timer wie folgt geschrieben werden sollte:
alpha =speed；
oDiv.style.filter='alpha(opacity:' alpha ')' //Dies ist eine sehr wichtige Methode, bitte beachten Sie, dass sie so geschrieben ist
oDiv.style.opacity=alpha/100; // Vergessen Sie nicht, durch 100 zu dividieren
3. Bei den oben genannten handelt es sich ausschließlich um Inline-Stile.
Wissenspunkt 3: Bewegung puffern
1. Pufferbewegung bedeutet, dass je größer die Entfernung, desto größer die Geschwindigkeit und je kleiner die Entfernung, desto kleiner die Geschwindigkeit, d. h. die Geschwindigkeit hängt von der Entfernung ab.
2. Definieren Sie die Geschwindigkeit gemäß der obigen Aussage neu. Die Geschwindigkeit war am Anfang 0, aber jetzt:
var speed=iTarget-oDiv.offsetLeft;
Timer neu definieren:
oDiv.style.left=oDiv.offsetLeft speed 'px';
An diesem Punkt stellten wir fest, dass die Geschwindigkeit zu hoch war, wir können Folgendes tun:
var speed=(iTarget-oDiv.offsetLeft)/10;
3. Da die Mindesteinheit des Bildschirms px ist, wird es ein iTarget geben, dessen endgültiger linker Wert eine Dezimalzahl und nicht das Ziel ist. Dies kann durch Ermessen gelöst werden Hier wird floor() eingeführt, das abrundet, und Math.ceil(), das aufrundet. Nachdem wir die Geschwindigkeit definiert haben, schreiben wir so:
speed=speed>0?Math.ceil(speed):Math.floor(speed);
Auf diese Weise ist vollständig gewährleistet, dass die Geschwindigkeiten alle ganze Zahlen sind und beim kritischen Wert alle 0 sind.
Wissenspunkt 4: Multi-Objekt-Bewegung
1. Holen Sie sich zuerst alle Objekte und bilden Sie ein Array, und verwenden Sie dann eine for-Schleife, um dies zu tun (wie klassisch diese Methode ist!), fügen Sie Knotenereignisse in der for-Schleife hinzu und ersetzen Sie damit den aktuellen Knoten in die Funktion, zB: startMove(this, iTarget), beim Definieren einer Funktion startMove(obj, iTarget).
2. Wenn Sie die aktuelle Breite offsetWidth verwenden, müssen Sie den Wert von obj verwenden.
3. Wenn sich die Maus sehr schnell bewegt, kann die Breite des Knotens nicht auf den ursprünglichen Zustand zurückgesetzt werden. Dies liegt daran, dass der Timer ein gemeinsamer Timer für alle ist. Der nächste Knoten hat den Timer gelöscht, bevor der vorherige Knoten zurückgekehrt ist Die Lösung besteht darin, jedem Knoten einen Index hinzuzufügen, d. h. in der obigen for-Schleife hinzuzufügen und dann timer durch obj.timer in der definierten Funktion zu ersetzen. Daher sollten wir darauf achten, dass dem gemeinsam genutzten Timer etwas passiert.
4. Bei der Bewegung der Transparenz ersetzt Alpha die Geschwindigkeit, aber selbst wenn der Timer nicht gemeinsam genutzt wird, treten bei der Bewegung mehrerer Objekte Probleme auf. Dies liegt daran, dass Alpha gemeinsam genutzt wird und jedes Objekt sich gegenseitig zerreißt. Die Lösung besteht darin, es wie einen Timer zu verwenden. Weisen Sie jedem Knoten in der for-Schleife Alpha zu.
Zusammenfassung: Um Konflikte zu lösen, entweder initialisieren oder personalisieren.
Wissenspunkt 5. Stile erhalten
1. Wenn Sie im Timer, der die Breite des Knotens ändert (groß zum Hineinbewegen, klein zum Entfernen), wenn Sie dem Knoten einen Rand hinzufügen, ist dieser beim Hineinbewegen kleiner als der Zielknoten und größer als der Zielknoten beim Herausfahren. Achten Sie auf die Breite des Randes der Bildlaufleiste (Bildlaufleiste). Der Grund dafür ist, dass jeder Versatz den Rand erhöht*2- (der Wert verringert sich jedes Mal im Timer).
2. Der Weg, das obige Problem zu lösen, besteht darin, width in die Zeile zu schreiben und parseInt(oDiv.style.width) anstelle von offsetLeft zu verwenden. Es kann jedoch nicht immer in die Zeile geschrieben werden, daher definieren wir eine Funktion, um die zu erhalten Linkstil:
Funktion getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //ie browser
}
else{
return getComputerStyle(obj,false)[attr]; //Andere Browser
}
}
3. Für die Schriftgröße gibt es in js nur eine Möglichkeit, die Schriftgröße zu schreiben.
Wissenspunkt 6: Beliebiger Attributwert
1. Alle Offset-Typen weisen kleine Fehler auf. Sie müssen die Funktion getStyle verwenden. Diese Funktion wird häufig zusammen mit parseInt() verwendet und normalerweise in einer Variablen gespeichert.
2. Wenn Sie style.width schreiben, können Sie auch style['width'] schreiben.
3. Zum Anpassen der Attributwerte mehrerer Objekte können Sie den Stil als Parameter kapseln, sodass die Attributfunktion für mehrere Objekte die drei Attributwerte (obj, attr, iTarget) enthält.
4. Der obige Bewegungsrahmen eignet sich nicht für Transparenzänderungen, da die Transparenz dezimal ist. Aus zwei Gründen ist der erste parseInt und der zweite attr = ... px. Hier können wir zur Verarbeitung eine Use if-Interpretation verwenden Transparenz separat, ersetzen Sie parseInt durch parseFloat und entfernen Sie px.
5. Der Computer selbst hat einen Fehler. 0,07 * 100 ist nicht gleich 7, daher führen wir eine Funktion namens Math.round() ein, die einen gerundeten Wert darstellt.
Wissenspunkt 7: Kettenbewegung
1. Stellen Sie das move.js-Framework vor.
2. Übergeben Sie eine Rückruffunktion fn(), verwenden Sie if, um zu beurteilen, ob fn() vorhanden ist, und führen Sie dann fn() aus.
Wissenspunkt 8: Gleichzeitige Bewegung
1. Wenn Sie zwei Bewegungsfunktionen schreiben, um gleichzeitige Bewegungen zu steuern, erfolgt eine Funktionsabdeckung.
2. Verwenden Sie den Wissenspunkt von JSON. Die Schleife von JSON verwendet for (i in JSON), und die Parameter der Bewegungsfunktion sind obj, json, fn.
3. Es gibt keinen iTarget-Wert mehr, er wird durch json[attr] ersetzt.
Während ich das schreibe, ist es komplett vorbei. Ich hoffe, es gefällt euch allen. Ich hoffe auch, dass es für alle hilfreich sein wird, js Bewegungsanimation zu lernen.
