JavaScript, um einen einheitlichen Animationseffekt zu erzielen

JavaScript, um einen einheitlichen Animationseffekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Code zur Implementierung einer Animation mit gleichmäßiger Geschwindigkeit in JavaScript zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Umsetzungsideen:

1. Verwenden Sie hauptsächlich die Timing-Funktion setInterval (), um Animationseffekte zu erzielen
2. Sie können die Animation in eine Funktion kapseln, sodass sie von mehreren Elementen aufgerufen werden kann, ohne sie wiederholt schreiben zu müssen
3. Die Animationsfunktion empfängt Parameter - Elementobjekt, Zielversatz, Rückruffunktion. ① Fügen Sie der Funktion eine Zeitfunktion hinzu, geben Sie der Zeitfunktion einen Namen und verwenden Sie den Zeitfunktionsnamen, um die Zeitfunktion später zu löschen. ② Verarbeitungsprogramm in der Zeitfunktion:
a. Geben Sie einen festen Schrittbewegungswert an und legen Sie den Versatz des Elementobjekts so fest, dass er sich mit gleichmäßiger Geschwindigkeit ändert – z. B.: obj.style.left = obj.offsetLeft + 5 + 'px';
b. Bestimmen Sie, ob der Offset den Zielwert erreicht, und stoppen Sie in diesem Fall die Animation - - -
Intervall löschen(Objekt.Timer);
Wenn die Animation stoppt, bestimmen Sie, ob eine Rückruffunktion vorhanden ist, und führen Sie die Rückruffunktion aus, wenn eine vorhanden ist
4. Fügen Sie vor der Animationsfunktion eine Löschtimerfunktion hinzu, um den vorherigen Animationseffekt zu löschen - - -clearInterval(obj.timer);
Manchmal muss man auf eine Schaltfläche klicken, um eine Animation auszulösen. Wenn Sie keine Löschschaltfläche hinzufügen, wird der Animationseffekt überlagert und wird immer schneller, wenn Sie wiederholt auf die Schaltfläche klicken.
5. Sie können die Animationsfunktion auch als Referenz in eine JS-Datei kapseln

Tipp: Das Obige ist nur eine Methode. Je nach Bedarf können verschiedene Animationseffekte angepasst werden.

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>Einheitliche Animation</title>
    <Stil>
        .Kasten {
            Position: relativ;
            Breite: 1000px;
            Rand oben: 20px;
        }
        
        .xiaohuli {
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 150px;
            Höhe: 150px;
        }
        
        .pikaqiu {
            Position: absolut;
            oben: 150px;
            links: 0;
            Breite: 200px;
            Höhe: 150px;
        }
    </Stil>
</Kopf>

<Text>
    <button class="btn1">Klicken Sie, um den kleinen Fuchs zu bewegen</button>
    <button class="btn2">Klicken, um Pikachu zu bewegen</button>
    <div Klasse="Box">
        <img src="images/kleiner Fuchs.jpg" alt="" class="xiaohuli">
        <img src="images/Pikachu.jpg" alt="" class="pikaqiu">
    </div>
    <Skript>
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var xiaohuli = document.querySelector('.xiaohuli');
        var pikaqiu = document.querySelector('.pikaqiu');

        btn1.addEventListener('klicken', function() {
            beleben (Xiaohuli, 300);
        })

        btn2.addEventListener('klicken', function() {
            beleben (Pikaqiu, 450);
        })

        // Animationsfunktion obj Animationsobjekt, Ziel Ziel linker Offset, Rückruf Rückruffunktion Funktion animieren(obj, Ziel, Rückruf) {
            Intervall löschen(Objekt.Timer);
            obj.timer = setzeIntervall(Funktion() {

                obj.style.left = obj.offsetLeft + 5 + '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>

Seiteneffekt:

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:
  • Codebeispiele für JS-Div-Bewegungsanimationen mit gleichmäßiger Geschwindigkeit und Bewegungsanimationen mit variabler Geschwindigkeit
  • JS implementiert ein Beispiel für die Kapselung von einheitlichen und Zeitlupen-Animationseffekten
  • Detaillierte Erklärung der Offset- und Uniform-Animation in JS
  • Detaillierte Erläuterung der einheitlichen Javascript-Animation und der Pufferanimation
  • Natives JS für eine einheitliche Bildkarussell-Animation
  • Natives Javascript realisiert einen einheitlichen Bewegungsanimationseffekt

<<:  Verwendung von MySQL DDL-Anweisungen

>>:  Erstellen und Verwenden von Docker-Datenvolumencontainern

Artikel empfehlen

Detaillierte Erklärung der grundlegenden HTML-Tags und -Strukturen

1. HTML-Übersicht 1.HTML: Hypertext Markup Langua...

HTML-Formular-Tag-Tutorial (5): Textfeld-Tag

<br />Mit diesem Tag können Sie ein mehrzeil...

mysql 8.0.19 winx64.zip Installations-Tutorial

Dieser Artikel zeichnet das Installationstutorial...

Beispielcode mit SCSS in Uni-App

Aufgetroffene Fallstricke Ich habe den ganzen Nac...

So lösen Sie das Problem, dass MySQL nicht geschlossen werden kann

Lösung, wenn MySQL nicht geschlossen wird: Klicke...

js implementiert einige Funktionen der Eingabekomponente in Element und kapselt sie in eine Komponente (Beispielcode)

Derzeit sind die Felder „Grundlegende Verwendung“...

Eine kurze Diskussion über Flex-Layout und Skalierungsberechnung

1. Einführung in Flex Layout Flex ist die Abkürzu...

5 grundlegende Fähigkeiten zum Design von Themenseiten (Alibaba UED Shanmu)

Bei diesem Thema handelt es sich um einen interne...

Zusammenfassung der genauen Berechnungen verschiedener Abstände/Scrolldistanzen in einem Fenster

Normalerweise müssen wir uns bei der Projektentwic...

So installieren Sie Jupyter in Docker auf CentOS und öffnen Ports

Inhaltsverzeichnis Installieren Sie Jupyter Docke...

MySql-Anmeldekennwort vergessen und Lösung für vergessenes Kennwort

Methode 1: MySQL bietet einen Befehlszeilenparame...

Die Größe der transparenten HTML-Popup-Ebeneninstanz kann eingestellt und proportional sein.

Code kopieren Der Code lautet wie folgt: <!DOC...

Detaillierte Erläuterung gängiger Methoden von JavaScript-Arrays

Inhaltsverzeichnis Gängige Array-Methoden Pop() u...

Ein Artikel zum Verständnis der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Inhaltsverzeichnis Einführung 1. MySQL Master-Sla...

MySQL verwendet mysqldump + binlog, um die Prinzipanalyse der gelöschten Datenbank vollständig wiederherzustellen

1. Übersicht Beim täglichen Betrieb und bei der W...