Detaillierte Erläuterung der Kapselung von JavaScript-Animationsfunktionen

1. Prinzip der Animationsfunktion

Kernprinzip: Kontinuierliches Verschieben der Boxposition durch den Timer setInterval().

Implementierungsschritte:

1. Aktuelle Position der Box abrufen
2. Lassen Sie die Box 1 Bewegungsstrecke zu ihrer aktuellen Position hinzufügen
3. Verwenden Sie einen Timer, um diesen Vorgang zu wiederholen
4. Fügen Sie eine Bedingung zum Beenden des Timers hinzu
5. Beachten Sie, dass dieses Element positioniert werden muss, bevor element.style.left verwendet werden kann

Wie unten dargestellt:

Lassen Sie eine Box langsam auf die Position von 300 Pixeln verschieben.

Der Code lautet wie folgt:

<Stil>
   div{
        Position: absolut;
        links: 0;
        oben: 0;
        Breite: 100px;
        Höhe: 100px;
        Hintergrundfarbe: Cyan;
    }
</Stil>
</Kopf>
<Text>
    <div></div>
    <Skript>
        var div = document.querySelector('div');
        var Timer = Intervall festlegen(Funktion(){
            wenn(div.offsetLeft >= 300){
                Intervall löschen(Timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        },30); 
    </Skript>
</body>

Die laufenden Ergebnisse sind:

Erfolgreich ausgeführt.

Was aber, wenn mehrere Elemente gleichzeitig animiert werden müssen? Wir können erwägen, es in eine einfache Animationsfunktion einzukapseln.

2. Einfache Kapselung von Animationsfunktionen

Die Funktion muss zwei Parameter übergeben: das Animationsobjekt und die zu bewegende Distanz. Wie unten dargestellt:

 Funktion animieren(Objekt,Ziel){
            var Timer = Intervall festlegen(Funktion(){
            wenn(Objekt.OffsetLeft >= Ziel){
                Intervall löschen(Timer);
            }
            obj.style.left = obj.offsetLeft + 1 + 'px';
        },30);
        }

Wir können den Animationseffekt erzielen, indem wir die oben gekapselte Funktion aufrufen. Rufen Sie beispielsweise bei zwei unterschiedlichen Boxen die Animationsfunktion separat auf:

 <Stil>
       .box1{
            Position: absolut;
            links: 0;
            oben: 50px;
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Cyan;
        }
        .box2{
            Position: absolut;
            links: 0;
            oben: 155px;
            Breite: 150px;
            Höhe: 150px;
            Hintergrundfarbe: tiefes Himmelblau;
        }
    </Stil>

<Text>
   <div Klasse="Box1"></div>
   <div Klasse="box2"></div>
    <Skript>
        Funktion animieren(Objekt,Ziel){
            var Timer = Intervall festlegen(Funktion(){
            wenn(Objekt.OffsetLeft >= Ziel){
                Intervall löschen(Timer);
            }
            obj.style.left = obj.offsetLeft + 1 + 'px';
        },30);
        }
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        animieren (Box 1,300);
        animieren (Box 2,400);
    </Skript>
</body>

Der Effekt ist:

Der Animationseffekt wurde erfolgreich erzielt.

Die oben gekapselte Animationsfunktion weist jedoch immer noch Probleme auf. Jedes Mal, wenn wir eine Animationsfunktion aufrufen, wird ein Stück Speicherplatz für uns freigegeben, was zu einer Verschwendung von Speicherressourcen führt. Darüber hinaus hat die Animationsfunktion, die wir jedes Mal aufrufen, denselben Namen, was leicht zu Mehrdeutigkeiten führen kann. Daher können wir für verschiedene Elemente unterschiedliche Timer verwenden (unseren eigenen Timer verwenden).

3. Animationsfunktionen zeichnen unterschiedliche Timer für unterschiedliche Elemente auf

Kernprinzip: JS ist eine dynamische Sprache, die dem aktuellen Objekt problemlos Attribute hinzufügen kann.

Indem wir Objekten Attribute hinzufügen, um verschiedenen Elementen Timer hinzuzufügen, können wir es wie folgt kapseln:

Funktion animieren(Objekt,Ziel){
  obj.timer = setzeIntervall(Funktion(){
     wenn(Objekt.OffsetLeft >= Ziel){
         Intervall löschen(Objekt.Timer);
     }
     obj.style.left = obj.offsetLeft + 1 + 'px';
 },30);
}

Wenn wir möchten, dass ein Element erst nach der Ausführung einer Reihe von Vorgängen animiert wird, können wir ihm natürlich ein bestimmtes Ereignis hinzufügen und den Funktionsaufruf in das Ereignis schreiben.

Nehmen Sie das erste Beispiel als Vorbild, fügen Sie ein Klickereignis hinzu, und die Box bewegt sich nur, wenn auf die Schaltfläche geklickt wird:

 var box1 = document.querySelector('.box1');
        var btn = document.querySelector('Schaltfläche')
       btn.addEventListener('klicken',Funktion(){
            animieren (Box 1,300);
        })

Der Effekt ist:

Der Effekt ist erzielt, aber was passiert, wenn wir weiter auf die Schaltfläche klicken?

Wir werden feststellen, dass die Box immer schneller läuft, je weiter wir auf die Schaltfläche klicken. Das liegt daran, dass wir zu viele Timer gleichzeitig gestartet haben. Wie kann man das Problem lösen? Die Lösung besteht darin, unser Element zuerst den vorherigen Timer löschen zu lassen und nur einen Timer zur Ausführung beizubehalten, sodass wir oben in der Funktion eine Operation zum Löschen des Timers hinzufügen können. Der Code lautet:

  Funktion animieren(Objekt,Ziel){
            Intervall löschen(Objekt.Timer);
            obj.timer = setzeIntervall(Funktion(){
            wenn(Objekt.OffsetLeft >= Ziel){
                Intervall löschen(Objekt.Timer);
            }
            obj.style.left = obj.offsetLeft + 1 + 'px';
        },30);
        }
        var box1 = document.querySelector('.box1');
        var btn = document.querySelector('Schaltfläche');
       btn.addEventListener('klicken',Funktion(){
            animieren (Box 1,300);
        })

Der operative Effekt zu diesem Zeitpunkt ist

Erfolgreich geschafft.

Durch die obige Reihe von Operationen können wir feststellen, dass die von uns implementierten Animationen alle eine einheitliche Geschwindigkeit haben. Um den Effekt schöner zu machen, können wir unsere Animation mit langsamer Geschwindigkeit ablaufen lassen.

4. Prinzip der Lockerungswirkung

Beim Easing einer Animation wird die Geschwindigkeit der Elementbewegung geändert. Am gebräuchlichsten ist es, die Geschwindigkeit langsam zu stoppen.

• Idee: Die Distanz, die die Kiste jedes Mal zurücklegt, wird allmählich kleiner, und die Geschwindigkeit wird langsam abnehmen.
• Kernalgorithmus: (Zielwert - aktuelle Position) / 10 als Distanzschritt für jeden Zug
• Stoppbedingung: Stoppen Sie den Timer, wenn die aktuelle Boxposition der Zielposition entspricht.

Beachten Sie, dass der Schrittwert gerundet werden muss

Wenn wir im obigen Beispiel auf die Schaltfläche klicken, möchten wir, dass sich das Element langsam bewegt. Wir können die gekapselte Animationsfunktion folgendermaßen ändern:

Funktion animieren(Objekt,Ziel){
            Intervall löschen(obj.timer)
            obj.timer = setzeIntervall(Funktion(){
                var Schritt = (Ziel - Objekt.OffsetLeft)/10;
            wenn(Objekt.OffsetLeft == Ziel){
                Intervall löschen(Objekt.Timer);
            }
            obj.style.left = obj.offsetLeft + Schritt + 'px';
        },30);
        }

Der Effekt ist:

Sieht dieser Effekt nicht besser aus? Aber schauen wir doch mal, wie weit sich unser Element bewegt hat. Liegt es genau am Zielwert von 300px?

Bei der Überprüfung haben wir festgestellt, dass unsere Elemente die angegebene Position nicht erreicht haben. Dies liegt daran, dass unsere Schrittformel problematisch ist. Bei der Durchführung von Divisionsoperationen können Dezimalstellen auftreten, die zu Positionsabweichungen führen. Daher müssen wir die Schrittformel runden. Da sich die Elemente vorwärts bewegen (positive Richtung), besteht unsere Strategie darin, aufzurunden:

 var Schritt = Math.ceil((Ziel - Objekt.OffsetLeft)/10);

Schauen wir uns nun das endgültige Ziel an:

Zu diesem Zeitpunkt haben wir gerade den Zielort erreicht.

5. Animationsfunktion bewegt sich zwischen mehreren Zielwerten

Aber was ist, wenn unsere Schrittgröße negativ ist?

Beispielsweise gibt es jetzt eine Box. Fügen Sie ihr zwei Schaltflächen hinzu. Eine verschiebt das Element auf 400 Pixel und die andere auf 700 Pixel:

Funktion animieren(Objekt,Ziel){
    Intervall löschen(obj.timer)
     obj.timer = setzeIntervall(Funktion(){
         var Schritt = Math.ceil((Ziel - Objekt.OffsetLeft)/10);
     wenn(Objekt.OffsetLeft >= Ziel){
         Intervall löschen(Objekt.Timer);
     }
     obj.style.left = obj.offsetLeft + Schritt + 'px';
 },30);
}
 var box1 = document.querySelector('.box1');
 var btn = document.querySelectorAll('Schaltfläche')
 btn[0].addEventListener('klicken',function(){
     animieren (Box 1,400);
 })
  btn[1].addEventListener('klicken',function(){
     animieren (Box 1,700);
 })

Der Effekt ist:

Zu diesem Zeitpunkt stellen wir fest, dass das Element beim Vorwärtsbewegen die Zielposition genau erreichen kann und das Element auch den Effekt einer Bewegung zwischen zwei Pixeln erzielen kann, die beim Rückwärtsbewegen erreichte Position jedoch nicht die Zielposition ist. Dies liegt daran, dass sich unser Element beim Rückwärtsbewegen in die entgegengesetzte Richtung bewegt. Zu diesem Zeitpunkt sollten wir auch die Schrittlänge auf die entgegengesetzte Position runden, d. h. abrunden.

Zu diesem Zeitpunkt sollten wir die Schrittlängenbedingung beurteilen. Wenn die Schrittlänge größer als Null ist, runden Sie sie auf. Wenn die Schrittlänge kleiner als Null ist, runden Sie sie ab. Die angepasste Formel für die Schrittlänge lautet:

 var Schritt = (Ziel - Objekt.OffsetLeft)/10;
 Schritt > 0? Math.ceil(Schritt) : Math.floor(Schritt);

Schauen wir uns nun die Wirkung an:

Das Problem ist gelöst.

Aber an diesem Punkt haben wir einfach die Bewegung eines Elements zwischen zwei Positionen implementiert. Was ist, wenn wir die Farbe nach der Bewegung ändern möchten? Dies können wir erreichen, indem wir der Animationsfunktion eine Rückruffunktion hinzufügen.

6. Fügen Sie der Animationsfunktion eine Rückruffunktion hinzu

Prinzip der Callback-Funktion: Die Funktion kann als Parameter verwendet werden. Übergeben Sie diese Funktion als Parameter an eine andere Funktion. Wenn diese Funktion ausgeführt wird, wird die übergebene Funktion erneut ausgeführt. Dieser Vorgang wird als Callback bezeichnet.

Die Rückruffunktion wird an die Stelle geschrieben, an der der Timer endet.

Der spezifische Implementierungscode lautet:

 Funktion animieren(Objekt,Ziel,Rückruf){
            Intervall löschen(obj.timer)
            obj.timer = setzeIntervall(Funktion(){
                var Schritt = (Ziel - Objekt.OffsetLeft)/10;
                Schritt = Schritt > 0? Math.ceil(Schritt) : Math.floor(Schritt);
            wenn(obj.offsetLeft == Ziel){
                Intervall löschen(Objekt.Timer);
                wenn(Rückruf){
                    Rückruf();
                } 
            }
            obj.style.left = obj.offsetLeft + Schritt + 'px';
            },30);
        }
        var box1 = document.querySelector('.box1');
        var btn = document.querySelectorAll('Schaltfläche');
       btn[0].addEventListener('klicken',function(){
            animieren(Box1,400,Funktion(){
                box1.style.backgroundColor = "rosa";
            });
        })
        btn[1].addEventListener('klicken',function(){
            animieren(Box1,700,Funktion(){
                box1.style.backgroundColor = "rot";
            });
        })

Der Effekt ist:

Das Obige ist die Kapselung der Animationsfunktion. Wenn sie gezielt verwendet wird, können wir sie in eine JS-Datei kapseln und bei Bedarf direkt darauf verweisen.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der Kapselung von JavaScript-Animationsfunktionen. Weitere relevante Inhalte zur Kapselung von JavaScript-Animationsfunktionen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!