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

Eine kurze Analyse kontrollierter und unkontrollierter Komponenten in React

Inhaltsverzeichnis Unkontrollierte Komponenten Ko...

MySQL-Triggersyntax und Anwendungsbeispiele

Dieser Artikel veranschaulicht anhand von Beispie...

Zwei Möglichkeiten zum Einführen von SVG-Symbolen in Vue

So führen Sie SVG-Symbole in Vue ein Methode 1 zu...

CSS-Code zum Erstellen von 10 modernen Layouts

Vorwort Ich habe mir am Sonntag zu Hause das drei...

MySQL 5.7.18 Installations-Tutorial unter Windows

In diesem Artikel wird erklärt, wie Sie MySQL aus...

Einführung in die Installation und Konfiguration von JDK unter CentOS-Systemen

Inhaltsverzeichnis Vorwort Überprüfen und deinsta...

Lösen Sie das Problem, dass das Element DateTimePicker+vue Popup-Box nur Stunden anzeigt

Drei Wissenspunkte: 1. CSS-Nachkommenselektor htt...

Wie besteht man die W3C-Validierung?

Neben der Festlegung von Vorschriften für verschi...

Beispielcode für ein großes Dropdown-Menü, implementiert in reinem CSS

Dies ist ein großes Dropdown-Menü, das rein in CS...

Beschreiben Sie kurz den Unterschied zwischen MySQL und Oracle

1. Oracle ist eine große Datenbank, während MySQL...

So sichern und wiederherstellen Sie die MySQL-Datenbank, wenn sie zu groß ist

Befehl: mysqlhotcopy Dieser Befehl sperrt die Tab...

MySQL-Einstellungscode für die grüne Version und Details zum Fehler 1067

MySQL-Einstellungscode für grüne Version und Fehl...

Ubuntu MySQL 5.6 Version entfernen/installieren/Kodierungskonfigurationsdatei konfigurieren

1. MySQL entfernen a. sudo apt-get autoremove --p...

So verwenden Sie position:sticky, um das Problem kleiner Programme, die an der Decke haften, perfekt zu lösen

Kürzlich bestand der Kunde eines Projekts darauf,...

So stellen Sie vom lokalen Windows-Remotedesktop eine Verbindung zum Alibaba Cloud Ubuntu 16.04-Server her

Der lokale Windows-Remotedesktop stellt eine Verb...