JavaScript zum Erzielen eines Zeitlupenanimationseffekts

In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung von Zeitlupen-Animationseffekten zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Umsetzungsideen

1. Verwenden Sie hauptsächlich die Timing-Funktion setInterval
2. Fügen Sie dem Element, das animiert werden muss, eine absolute Positionierung und einen Versatz hinzu und beachten Sie, dass das übergeordnete Element relativ positioniert sein sollte
3. Um Animationen für mehrere Elemente durchzuführen, können Sie den Animationscode in eine Funktion kapseln
4. Das Element ruft die Timing-Funktion auf und bewegt sich zu einer festen Zeit. In der Timing-Funktion lautet die Formel zur Berechnung der Distanz jeder Bewegung: var step = (target - obj.offsetLeft) / 20;
obj Animationsobjekt, Zielziel linker Versatz, 20 steuert die Animationsgeschwindigkeit, je größer der Wert, desto langsamer, je kleiner der Wert, desto schneller
5. Die Timing-Funktion kann auch eine Rückruffunktion erhalten. Wenn eine vorhanden ist, wird die Rückruffunktion ausgeführt, wenn die Animation endet.
6. Beachten Sie, dass der Code zum Löschen der Animation am Anfang der Timing-Funktion geschrieben werden sollte - - -clearInterval (obj.timer). Andernfalls wird der Effekt jedes Mal überlagert, wenn die Elementanimation ausgelöst wird. Schreiben Sie den Code zum Löschen des vorherigen Animationseffekts

Codebeispiel

<!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>animierte Animation</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
        
        .Inhalt {
            Breite: 1000px;
            Rand: 0 automatisch;
        }
        
        Taste {
            Polsterung: 5px;
            Rand: 60px 10px;
            Rand: 1px durchgezogen #666;
            Umrissfarbe: blassviolettrot;
        }
        
        .beide {
            Hintergrundfarbe: rosa;
            Farbe: #fff;
            Hintergrundfarbe: blassviolettrot;
        }
        
        .Kasten {
            Position: relativ;
            Höhe: 210px;
            Rand: 0px automatisch;
            Hintergrundfarbe: #191b28;
        }
        
        .yutu {
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 180px;
            Höhe: 210px;
        }
        
        .qiaojingjing
            Position: absolut;
            oben: 0;
            links: 820px;
            Breite: 180px;
            Höhe: 210px;
        }
        
        .wort1 {
            Anzeige: keine;
            Position: absolut;
            oben: -50px;
            links: 45%;
        }
        
        .wort2 {
            Anzeige: keine;
            Position: absolut;
            oben: -30px;
            links: 50%;
        }
    </Stil>
</Kopf>

<Text>
    <div Klasse="Inhalt">
        <button class="btn1">Bewegen Sie sich auf der Straße vorwärts</button>
        <button class="btn2">Qiao Jingjing geht vorwärts</button>
        <button class="both">In beide Richtungen laufen</button>
        <button class="btn3">Zurück auf dem Weg</button>
        <button class="btn4">Qiao Jingjing zurück</button>
        <div Klasse="Box">
            <img src="images/于途.png" alt="" class="yutu">
            <img src="images/乔晶晶.png" alt="" class="qiaojingjing">
            <span class="word1">Bitte gib mir für den Rest meines Lebens Deine Führung! </span>
            <span class="word2">Bitte gib mir für den Rest meines Lebens Deine Führung! </span>
        </div>
    </div>

    <Skript>
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var btn3 = document.querySelector('.btn3');
        var btn4 = document.querySelector('.btn4');
        var beide = document.querySelector('.both');
        var yutu = document.querySelector('.yutu');
        var qiaojingjing = document.querySelector('.qiaojingjing');
        var word1 = document.querySelector('.word1');
        var word2 = document.querySelector('.word2');


        btn1.addEventListener('klicken', function() {
            animieren(yutu, 340, Funktion() {
                Wort1.Stil.Anzeige = "Block";
            });
        });

        btn2.addEventListener('klicken', function() {
            animieren(qiaojingjing, 520, Funktion() {
                word2.style.display = "Block";
            });
        });
        btn3.addEventListener('klicken', function() {
            animieren(yutu, 0, Funktion() {
                word1.style.display = "keine";
            });
        });

        btn4.addEventListener('klicken', function() {
            animieren(qiaojingjing, 820, Funktion() {
                word2.style.display = "keine";
            });
        });

        beide.addEventListener('click', function() {
            beleben (yutu, 340);
            beleben (qiaojingjing, 520);
            Wort1.Stil.Anzeige = "Block";
            word2.style.display = "Block";

        });


        // Animationsfunktion obj Animationsobjekt, Ziel Ziel linker Offset, Rückruf Rückruffunktion Funktion animieren(obj, Ziel, Rückruf) {
            // Vorherige Animation löschen clearInterval(obj.timer);
            obj.timer = setzeIntervall(Funktion() {
                // Berechnen Sie die Distanz jeder Bewegung. var step = (target - obj.offsetLeft) / 20;
                // Anzahl der Schritte runden Schritt = Schritt > 0 ? Math.ceil(Schritt) : Math.floor(Schritt);
                obj.style.left = obj.offsetLeft + Schritt + 'px';

                wenn (Objekt.OffsetLeft == Ziel) {
                    // Animation stoppen clearInterval(obj.timer);
                    // Wenn eine Rückruffunktion vorhanden ist, führen Sie die Rückruffunktion aus, wenn (Rückruf) {
                        Rückruf();
                    }
                }

            }, 30);
        }
    </Skript>
</body>

</html>

Animationseffekte:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

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
JavaScript erklärt die Kapselung und Verwendung von Zeitlupenanimationen

<<: So ändern Sie den Replikationsfilter in MySQL dynamisch

>>: Codebeispiele für allgemeine Docker-Datenvolumenvorgänge

Detaillierte Erklärung des Ausführungskontexts und des Aufrufstapels in JavaScript

JavaScript zum Erzielen eines Zeitlupenanimationseffekts

Umsetzungsideen

Codebeispiel

Detaillierte Erklärung des Ausführungskontexts und des Aufrufstapels in JavaScript

Hinweise zum Systemaufruf des Linux-Kernel-Gerätetreibers

Verschiedene Möglichkeiten zum Ändern der Hintergrundbildfarbe mit CSS3

So löschen Sie den Timer elegant in Vue

Vue implementiert einfache Rechnerfunktion

Vue realisiert kaskadierende Auswahl von Provinzen, Städten und Bezirken

Mac+IDEA+Tomcat-Konfigurationsschritte

Zwei Ideen zur Implementierung der horizontalen Datenbanksegmentierung

Erklären Sie TypeScript-zugeordnete Typen und eine bessere wörtliche Typinferenz.

Lösung zum Importieren weiterer Daten aus MySQL in Hive

Artikel empfehlen

Dieser Artikel fasst die spezifische Verwendung des CSS-Zweispaltenlayouts und des Dreispaltenlayouts zusammen

Grundlegendes zum MySQL-Abfrageoptimierungsprozess

Verwenden von Zabbix zum Überwachen des Betriebsvorgangs des Oracle-Tabellenbereichs

Erläuterung der Faktoren, die die Datenbankleistung in MySQL beeinflussen

SQL-Fuzzy-Abfragebericht: ORA-00909: Lösung: Ungültige Anzahl von Parametern

Der Dienst für die dekomprimierte Version von MySQL 5.6 kann aufgrund des Systemfehlers 1067 nicht gestartet werden

Bild-Scrolling-Effekt mit CSS3 erstellt

Zusammenfassung der Erfahrungen mit der Verwendung des Div-Box-Modells

Detaillierte Erklärung des Missverständnisses zwischen MySQL und Oracle

Tutorial zur Installation der komprimierten MySQL8-Paketversion unter Win10

Util-Modul im node.js-Tutorial-Beispiel – detaillierte Erklärung

Grafisches Tutorial zur Installation von CentOS7 auf VMware 15.5

Zusammenfassung der speicherbezogenen Parameter von MySQL 8.0

Mysql 5.7.17 Winx64-Installationstutorial auf Win7

Detaillierte Erklärung der Docker-Einstiegspunktdatei