Sobald Sie diesen Namen hören, werden Sie wissen, dass die Auswirkungen dieses Frameworks im Grunde online erreicht werden können. Tatsächlich hatte der vorherige Bewegungsrahmen immer noch Einschränkungen, dh mehrere Werte können nicht zusammengezogen werden.
Wie kann man dieses Problem lösen? Schauen wir uns den vorherigen Sport -Framework an
Funktion getStyle (obj, name) {if (obj.currentStyle) {return obj.currentStyle [name]; } else {return getComputedStyle (obj, null) [Name]; }} Funktion startMove (obj, attr, itarget) {ClearInterval (obj.time); obj.time = setInterval (function () {var cur = 0; if (attr == 'opacity') {cur = math.round (Parsefloat (GetStyle (obj, attr)) * 100); Math.Floor (Speed); }}}}, 30);}Wie modifiziere ich es? Es ist eigentlich sehr einfach. In den vergangenen Frameworks konnten Sie jeweils nur einen Stil und einen Wert bestehen. Wechseln Sie diese jetzt in ein JSON -Objekt. Ich glaube, jeder wird verstehen.
Wenn wir es nennen, startMove (Odiv, {Breite: 200, Höhe: 200}); Fügen Sie gegebenenfalls die Rückruffunktion hinzu. Schauen wir uns also an, wie der Code geändert wird.
Funktion startMove (obj, json, fnend) {var max = 18; // Jeder Timer wird aufgerufen, es wird nur ein Timer funktioniert (der vorhandene Timer wird ausgeschaltet, wenn die Bewegung beginnt) // und der Timer des aktuellen Objekts wird geschlossen oder eingeschaltet, was Konflikte mit anderen Timern auf der Seite verhindert, sodass jeder Timer nicht miteinander einmischt. obj.timer = setInterval (function () {var bstop = true; // Annahme: Alle Werte haben für (var name in json) {var itarget = json [name]; // Zielpunkt // Transparenz handeln. Transparenz, Sie können nicht ParseInt verwenden, ansonsten werden es 0 if (name 'opacity' {//). rund var cur = math.round (Parsefloat (GetStyle (OBJ))*100); if (math.abs (speed)> max) speed = speed> 0? max: -max; Obj.Style [Name] = Cur+Speed+'PX'; Wenn (fnend) // Nur diese Funktion wird übergeben, rufen Sie {fnend () an; }}}}, 20);}Warum gibt es Annahmen über BStop?
Tatsächlich nenne ich StartMove (Odiv, {Breite: 101, Höhe: 200}); Die Breite wird zu 101, die Bewegung wurde abgeschlossen, die Höhe ist nicht erreicht, aber wir haben möglicherweise den aktuellen Timer ausgeschaltet. Die Übung ist beendet und ein Fehler wird unter besonderen Umständen stattfinden. Erklären wir:
Tatsächlich braucht es die gesamte Bewegung, um den Timer auszuschalten, bevor er das Ende erreicht. Umgekehrt schalten Sie es aus, wenn nichts nicht möglich ist. Programmatisch einen booleschen Wert definieren, der zu Beginn zutreffend ist, vorausgesetzt
Alle Werte sind angekommen. Wenn es einen Wert gibt, der nicht dem Zielpunkt entspricht, ist BStop falsch. Nachdem der gesamte Zyklus beendet ist, ist BStop in Ture, was bedeutet, dass alle Bewegungen abgeschlossen wurden und der Timer zu diesem Zeitpunkt ausgeschaltet ist.
Dann wurde dieses Bewegungsgerüst im Grunde genommen abgeschlossen und CSS2 ist nicht für CSS3 anwendbar.
Zusammenfassen:
Die Entwicklung des Bewegungsrahmens
startMove (iTarget) Bewegungsrahmen
StartMove (OBJ, ITarget) Multi-Object
StartMove (OBJ, Attr, Itarget) jeden Wert
Startmove (OBJ, Attr, Itarget, FN) Kettenbewegung
StartMove (OBJ, JSON, FN) Perfekte Sportarten
O (∩_∩) o Danke ~