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

gbk utf8 So verstehen und verwenden Sie die GBK- und UTF-8-Webseitencodierung richtig

Detaillierte Erklärung zweier Tabellenkopieranweisungen: SELECT INTO und INSERT INTO SELECT (Unterschiede zwischen SQL-Datenbank und Oracle-Datenbank)

1. INSERT INTO SELECT-Anweisung Das Anweisungsfor...

JavaScript zum Erzielen eines Zeitlupenanimationseffekts

Umsetzungsideen

Codebeispiel

gbk utf8 So verstehen und verwenden Sie die GBK- und UTF-8-Webseitencodierung richtig

Zusammenfassung der speicherbezogenen Parameter von MySQL 8.0

MySQL Installer 8.0.21 Installations-Tutorial mit Bildern und Text

Allgemeine Betriebsbefehle von MySQL im Linux-System

So setzen Sie das Zabbix-Passwort zurück (ein Schritt)

So bedienen Sie das Kontrollkästchen auf einer HTML-Seite

Der Excel-Export schlägt in der Docker-Umgebung immer fehl

So fügen Sie einem Hintergrundbild in CSS3 eine Farbmaske hinzu

So passen Sie die Protokollebene von Nginx in Docker an

Detaillierte Erklärung zur Verwendung von Standard in MySQL

Artikel empfehlen

Flex-Layout realisiert linken Textüberlauf und lässt rechte Textanpassung aus

So beheben Sie den MySQL-FEHLER 1045 (28000) - Zugriff wegen Benutzer verweigert

So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz

Details zum TypeScript-Mapping-Typ

mysql 5.7.11 winx64 anfängliche Passwortänderung

Lösung für den von Mysql systemctl start mysqld gemeldeten Fehler

Informationen zur Bildlaufleiste in HTML/Bildlaufleiste entfernen

Methoden und Probleme zum Festlegen des HTML-Zeilenabstands

Zwei Beispiele für die Verwendung von Symbolen in Vue3

Detaillierte Erklärung zweier Tabellenkopieranweisungen: SELECT INTO und INSERT INTO SELECT (Unterschiede zwischen SQL-Datenbank und Oracle-Datenbank)

Linux-Betrieb und -Wartung – Tutorial zur grundlegenden Datenträgerverwaltung

MySQL aktualisiert ein Feld in einer Tabelle, sodass es dem Wert eines Felds in einer anderen Tabelle entspricht.

So verbergen Sie die Grenze/Trennlinie zwischen Zellen in einer Tabelle

Eine einfache Möglichkeit, alle Funktionen des Einkaufswagens in Vue zu implementieren

Detaillierte Erklärung zum Hinzufügen gepunkteter Linien zu Vue-Elementbaum-Steuerelementen