JavaScript erklärt die Kapselung und Verwendung von Zeitlupenanimationen

JavaScript erklärt die Kapselung und Verwendung von Zeitlupenanimationen

Durchführung von Prozessanalysen

(1) Wie rufe ich wiederholt an?

Antwort: Kapseln Sie eine Funktion und rufen Sie sie einmal auf

Code-Analyse:

Funktion animieren (Objekt, Ziel, Rückruf) { // Detaillierte Implementierungsschritte};

animieren: (Animationsfunktion)

obj (Animationsobjekt): dem der Animationseffekt hinzugefügt wird

Ziel (Zielwert): Wie weit soll man sich bewegen?

callback (Rückruffunktion): welche Funktion soll gleichzeitig ausgeführt werden

(2) Wie erreicht man den Lockerungseffekt? (Kernalgorithmus für Easy-Motion-Animation)

Antwort: Bewegungsdistanz = (Zielwert – aktuelle Boxposition) / 10. Die Bewegungsdistanz wird schrittweise verringert, bis sie stoppt, wodurch das Easing-Prinzip realisiert wird.

Code-Analyse:

var Schritt = (Ziel – Objekt.OffsetLeft) / 10;

Schritt (Bewegungsdistanz): die Distanz, um die sich das Element bewegen soll

Ziel (Zielwert): Wie weit soll man sich bewegen?

obj.offsetLeft (die aktuelle Position der Box): der aktuelle Abstand der Box von der linken Seite

(3) Warum kann es nicht an die angegebene Position bewegt werden? (Die angegebene Zielentfernung beträgt 500 Pixel und endet bei 496,4)

Antwort: Weil gerundet werden muss, werden positive Zahlen aufgerundet und negative Zahlen abgerundet

Code-Analyse:

Schritt = Schritt > 0? Math.ceil(Schritt) : Math.floor(Schritt);

Wenn die zurückzulegende Distanz setp eine positive Zahl ist, wird sie aufgerundet, wenn es eine negative Zahl ist, wird sie abgerundet und ein ternärer Ausdruck wird verwendet, um den Code zu optimieren und die Gesamtqualität zu verbessern.

(4) Wie kann man das Zielelement tatsächlich bewegen?

A: Fügen Sie einen Timer hinzu und weisen Sie dem Element die Echtzeit-Bewegungsdistanz (Schrittlänge) zu

Code-Analyse:

 var timer = setInterval(function () { //Detaillierter Implementierungscode}, 15); //Timer hinzufügen obj.style.left = obj.offsetLeft + step + 'px'; //Schrittlänge

1. Geben Sie dem Timer einen Namen, damit er leichter gelöscht werden kann. Stellen Sie die Zeit auf 15 ein (15 wird in der tatsächlichen Entwicklung häufig verwendet).

2. Der Wert auf der linken Seite des Elements = der Abstand vom Element nach links + die Bewegungsdistanz + „px“ (denken Sie daran, die Einheit px hinzuzufügen). Das Implementierungsprinzip besteht darin, dem Element kontinuierlich den neuesten Wert zuzuweisen, um den Effekt einer Animation zu erzielen.

(5) Warum wird es so nervig bzw. immer schneller?

Antwort: Da der Timer wiederholt hinzugefügt wird, muss der Timer bei jedem Aufruf gelöscht werden.

Code-Analyse:

Intervall löschen(Timer);

Es gibt zwei Stellen, die gelöscht werden müssen. Die erste ist, wenn die Easing-Animationsfunktion aufgerufen wird, um Geisterbilder und Geschwindigkeitsunterbrechungen zu vermeiden. Die zweite besteht darin, festzustellen, ob das Element die angegebene Position erreicht hat. Wenn es die angegebene Position erreicht hat, stoppen Sie den Timer.

Falltest:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        .Schieberegler {
            /* Breite: 240px; */
            /* Höhe: 40px; */
            /* Die Positionierung der übergeordneten Box richtet sich nach den tatsächlichen Anforderungen*/
            Position: absolut;
            rechts: 0;
            oben: 100px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 40px;
            /* Anzeige: Block; */
            Breite: 40px;
            Höhe: 40px;
            Cursor: Zeiger;
        }
        .sp {
            Position: relativ;
            Farbe: #fff;
        }
        
        .con {
            /* Absolute Positionierung festlegen, sodass es im übergeordneten Feld schwebt*/
            Position: absolut;
            links: 0;
            oben: 0;
            Breite: 200px;
            Höhe: 40px;
            Hintergrundfarbe: rosa;
            z-Index: -1;
            Farbe: #fff;
        }
    </Stil>
    <script src="./animate.js"></script>
</Kopf>
 
<Text>
    <div Klasse="Schieberegler">
        <span class="sp">←</span>
        <div class="con">Problem-Feedback</div>
    </div>
 
    <Skript>
        var Schieberegler = document.querySelector('. Schieberegler');
        // var sp = document.querySelector('.sp');
        var con = document.querySelector('.con');
        sliderbar.addEventListener('Mauseingabe', Funktion() {
            //animieren(Objekt, Ziel, Rückruf);
            animieren(con, -160, Funktion() {
                Schieberegler.Kinder[0].innerHTML = '→';
            });
        })
        sliderbar.addEventListener('mouseleave', Funktion() {
            //animieren(Objekt, Ziel, Rückruf);
            animieren(con, 0, Funktion() {
                Schieberegler.Kinder[0].innerHTML = '←';
 
            });
        })
    </Skript>
</body>
</html>

Die Grundidee besteht darin, die Animationsfunktion durch Hinzufügen von Mausereignissen zum Feld aufzurufen, um den endgültigen Effekt zu erzielen.

Wirkung der Operation:

Der endgültige Kapselungscode der Easing-Animationsfunktion (animate.js):

Funktion animieren(Objekt, Ziel, Rückruf) {

//Rufen Sie die Funktion zum Löschen des Timers einmal auf, um Probleme zu vermeiden

Intervall löschen(obj.timer)

//Timer hinzufügen

obj.timer = setzeIntervall(Funktion () {

//Der Schrittwert wird in den Timer geschrieben und in eine Ganzzahl umgewandelt (aufgerundet)

var Schritt = (Ziel – Objekt.OffsetLeft) / 10;

//Ganzzahlen werden vom größeren Ende genommen, negative Zahlen vom kleineren Ende

Schritt = Schritt > 0? Math.ceil(Schritt) : Math.floor(Schritt);

wenn (Objekt.OffsetLeft == Ziel) {

//Wenn die angegebene Position erreicht ist, stoppe den Timer

Intervall löschen(Objekt.Timer);

//Die Callback-Funktion wird nach Ablauf des Timers geschrieben

Rückruf && Rückruf();

}

//Ändern Sie den Wert jedes Schritts auf einen schrittweise kleineren Wert

obj.style.left = obj.offsetLeft + Schritt + 'px';

}, 15);

}

Das Leben hört nie auf, das Lernen hört nie auf, die Tastaturen sind abgenutzt und das Monatsgehalt übersteigt Zehntausend! Komm schon, Programmierer

Dies ist das Ende dieses Artikels über die Kapselung und Verwendung von JavaScript-Zeitlupenanimationen. Weitere relevante Inhalte zu JavaScript-Zeitlupenanimationen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • JavaScript zum Erzielen eines Zeitlupenanimationseffekts
  • JavaScript implementiert eine langsame Animationsfunktion für links und rechts
  • Kapselungsmethode der JavaScript-Zeitlupenanimationsfunktion
  • js, um Zeitlupenanimation zu erreichen
  • JavaScript zum Erreichen einer Zeitlupenanimation
  • Beispiel eines Tween.js-Algorithmus zur Easing-Tween-Animation
  • js realisiert den Navigationsleisteneffekt mit langsamer Animation

<<:  Analyse des Prinzips von Nginx unter Verwendung des Lua-Moduls zur Implementierung von WAF

>>:  Legen Sie den Standardtext des Suchfelds fest. Der Standardtext verschwindet, wenn mit der Maus geklickt wird.

Artikel empfehlen

Beispiel für reines CSS zum Ändern des Bildlaufleistenstils des Browsers

Verwenden Sie CSS, um den Stil der Bildlaufleiste...

JavaScript-Verlaufsobjekt erklärt

Inhaltsverzeichnis 1. Routennavigation 2. API zur...

Vuex implementiert einen einfachen Einkaufswagen

In diesem Artikelbeispiel wird der spezifische Co...

So stellen Sie MySQL- und Redis-Dienste mit Docker bereit

Inhaltsverzeichnis So stellen Sie den MySQL-Diens...

Detaillierte Erklärung des Nginx Reverse-Proxy-Beispiels

1. Reverse-Proxy-Beispiel 1 1. Erzielen Sie den E...

So ändern Sie die Größe von Partitionen in CentOS7

Gestern habe ich jemandem bei der Installation ei...

So implementieren Sie eine verschachtelte if-Methode in Nginx

Nginx unterstützt weder verschachtelte if-Anweisu...

Ändern Sie die maximale Anzahl von MySQL-Verbindungen und Konfigurationsdateien in Docker

1. Suchen Sie das MySQL-Image Docker PS 2. Geben ...

3 Codes zur automatischen Aktualisierung von Webseiten

Tatsächlich ist es sehr einfach, diesen Effekt zu ...

So verleihen Sie einer Website ein höheres und ansprechenderes Aussehen

„Wie lässt man eine Website hochwertig aussehen? ...

So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea

Wenn Sie den Text im Textarea-Eingabebereich umbre...

JavaScript-Wissen: Konstruktoren sind auch Funktionen

Inhaltsverzeichnis 1. Definition und Aufruf des K...

So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

Inhaltsverzeichnis beschreiben erreichen Die Proj...

Detaillierte Erklärung, wie MySQL (InnoDB) mit Deadlocks umgeht

1. Was ist ein Deadlock? Die offizielle Definitio...

Die neuesten 36 hochwertigen kostenlosen englischen Schriftarten freigegeben

01. Unendlichkeit Schriftart herunterladen 02. Ban...