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

Analyse zur Lösung des Problems, dass Navicat Premium eine Verbindung zu MySQL 8.0 herstellt und den Fehler „1251“ meldet.

Wenn Menschen zu lange untätig waren, denken sie,...

Detaillierte Erklärung der MySQL InnoDB-Indexerweiterung

Indexerweiterung: InnoDB erweitert automatisch je...

Antdesign-vue kombiniert mit sortablejs, um die Funktion zum Ziehen und Sortieren von zwei Tabellen zu erreichen

Inhaltsverzeichnis Ergebnisse erzielen Einführung...

Führen Sie die Schritte zur Verwendung des Elements in vue3.0 aus

Vorwort: Verwenden Sie das Element-Framework in v...

So beheben Sie den abnormalen Start von mysql5.7.21

Ein Kollege meldete, dass eine MySQL-Instanz aufg...

Vue basierend auf einer Element-Button-Berechtigungsimplementierungslösung

Hintergrundanforderungen: Das ERP-System muss ein...

Schritte zum Konfigurieren von IIS10 unter Win10 und zum Unterstützen des Debuggens von ASP-Programmen

Microsoft IIS IIS (Internet Information Server) i...

Einige Funktionen der Verwendung von tcpdump zum Erfassen von Paketen in der Linux-Befehlszeile

tcpdump ist ein flexibles und leistungsstarkes To...

Einführung und Tipps zur Verwendung der interaktiven Visualisierungs-JS-Bibliothek gojs

Inhaltsverzeichnis 1. Einführung in Gojs 2. Gojs ...

Webdesign-Tutorial (7): Verbesserung der Webdesign-Effizienz

<br />Vorheriger Artikel: Webdesign-Tutorial...

Einfaches Beispiel zum Hinzufügen und Entfernen von HTML-Knoten

Einfaches Beispiel für das Hinzufügen und Entfern...

Beheben Sie das Problem, dass beim Herunterfahren von Tomcat mit shutdown.bat auch andere Tomcats heruntergefahren werden.

Die Datei shutdown.bat enthält einen Satz wenn ni...

Umfassende Inventarisierung wichtiger Logdateien in MySQL

Inhaltsverzeichnis Einführung Protokollklassifizi...

Detaillierte Erklärung zur Begrenzung des Update-/Löschbereichs mit dem MySQL-Parameter sql_safe_updates

Vorwort Wie Sie alle wissen, sind wir bei MySQL-B...

Gespeicherte MySQL-Prozeduren, d. h. eine Zusammenfassung allgemeiner logischer Wissenspunkte

Gespeicherte MySQL-Prozedur 1. Erstellen Sie die ...