JavaScript zum Erzielen eines Zeitlupenanimationseffekts

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

Artikel empfehlen

Remotedesktopverbindung zwischen Windows und Linux

Wenn es um eine Remotedesktopverbindung zu Linux ...

Zusammenfassung der Namenskonventionen für HTML und CSS

CSS-Benennungsregeln Header: Header Inhalt: Inhalt...

Beispiel für die Implementierung einer lokalen Fuzzy-Suchfunktion in Front-End-JavaScript

Inhaltsverzeichnis 1. Projektaussichten 2. Wissen...

Schritte zum Importieren von Millionen von Daten in MySQL mit .Net Core

Inhaltsverzeichnis Vorbereitende Vorbereitung Imp...

Frameset über Iframe in Body einfügen

Da Frameset und Body auf derselben Ebene liegen, k...

Fallstudie: Ajax responseText analysiert JSON-Daten

Lösen Sie das Problem, dass der vom Server nach d...

Centos7-Installation des in Nginx integrierten Lua-Beispielcodes

Vorwort Der von mir verwendete Computer ist ein M...

Geben Sie die Stildatei für die automatische Suchvorschlagsfunktion ein: suggestions.css

Code kopieren Der Code lautet wie folgt: .sugLaye...

Verwendung des Linux-Befehls usermod

1. Befehlseinführung Der Befehl usermod (user mod...

HTML Tutorial: Sammlung häufig verwendeter HTML-Tags (4)

Diese eingeführten HTML-Tags entsprechen nicht un...

Auf Wiedersehen Docker: So wechseln Sie in 5 Minuten zu Containerd

Docker ist eine sehr beliebte Containertechnologi...

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

Inhaltsverzeichnis So stellen Sie den MySQL-Diens...

ThingJS-Partikeleffekte, um Regen- und Schneeeffekte mit einem Klick zu erzielen

Inhaltsverzeichnis 1. Partikeleffekte 2. Laden Si...

JavaScript MouseEvent-Fallstudie

Mausereignis Wenn die Maus eine bestimmte Operati...

Ubuntu 20.04-Desktopinstallation und Aktivierung der Root-Berechtigung sowie Details zur SSH-Installation

Der Artikel zeichnet hauptsächlich den einfachen ...