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

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.21 winx64

Artikel empfehlen

Grafisches Tutorial zur Installations- und Konfigurationsmethode für die Dekomprimierungsversion von MySQL 5.7.21 (Win10)

Die Installations- und Konfigurationsmethode der ...

JavaScript, um einen einheitlichen Animationseffekt zu erzielen

Umsetzungsideen:

Codebeispiel:

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.21 winx64

Native js realisiert das Ziehen und Ablegen des Neun-Quadrat-Rasters

Implementierungscode für unendliches Scrollen mit n Containerelementen

Führen Sie die Schritte zur Installation von FFmpeg auf dem CentOS-Server aus

So legen Sie eine feste IP-Adresse in einer virtuellen CentOS7-Maschine fest

Anwendung von Ankerpunkten in HTML

Detaillierte Analyse des Problems beim Hinzufügen von Where-Bedingungen mit Left Join in MySQL

TinyEditor ist ein einfacher und benutzerfreundlicher HTML-WYSIWYG-Editor

So richten Sie die Verwendung der chinesischen Eingabemethode in Ubuntu 18.04 ein

Lösung für MySQL-Verbindungsausnahme und Fehler 10061

Artikel empfehlen

Grafisches Tutorial zur Installations- und Konfigurationsmethode für die Dekomprimierungsversion von MySQL 5.7.21 (Win10)

So legen Sie MySQL-Fremdschlüssel für Anfänger fest

So verwenden Sie den Geometrietyp von MySQL, um Längen- und Breitengrad-Distanzprobleme zu bewältigen

JS implementiert einfachen Kalendereffekt

Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen

Analyse einfacher Anwendungsbeispiele für abgeleitete MySQL-Tabellen (abgeleitete Tabellen)

Vue+video.js implementiert Video-Wiedergabelisten

Installation und Verwendung der MySQL MyCat-Middleware

Mysql-Datenbankdesign - Analyse von drei Paradigmenbeispielen

Tutorial zur Verwendung von Prepare-, Execute- und Deallocate-Anweisungen in MySQL

Detaillierte Erklärung der Concat-bezogenen Funktionen in MySQL

Umfassende Analyse von Prototypen, Prototypobjekten und Prototypketten in js

Ein praktischer Bericht über die Wiederherstellung einer MySQL Slave-Bibliothek

JS implementiert das Schlangenspiel

Eine detaillierte Anleitung zu benutzerdefinierten Anweisungen in Vue