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

Verschiedene Möglichkeiten zum Ändern der Hintergrundbildfarbe mit CSS3

CSS3 kann die Farbe von Bildern ändern. Ab sofort...

Kleine Details der Web-Frontend-Entwicklung

1 Das Select-Tag muss geschlossen sein <select&...

Detaillierte Erklärung des Docker Compose-Orchestrierungstools

Docker Compose Docker Compose ist ein Tool zum De...

Eine kurze Analyse des Reaktionsprinzips und der Unterschiede von Vue2.0/3.0

Vorwort Seit der offiziellen Einführung von vue3....

Einführung in MySQL-Rollenfunktionen

Inhaltsverzeichnis Vorwort: 1. Einführung in die ...

9 Tipps für das Webseiten-Layout

<br />Verwandte Artikel: 9 praktische Vorsch...

Mit CSS3 implementierter Gradienten-Folieneffekt

Ergebnisse erzielen Code html <div Klasse=&quo...

Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt

1. Grundlegende Verwendung <!DOCTYPE html> ...

Lösung für die Upload-Einschränkung von Element-ui-Uploaddateien

Frage Die Angabe des Typs der hochgeladenen Datei...

Java-Programmierung zum Schreiben eines äußerst praktischen JavaScript-Tabellen-Plugins

Inhaltsverzeichnis Auswirkungen Dokumentation ers...

Eine vollständige Anleitung zum Löschen von Floats in CSS (Zusammenfassung)

1. Übergeordnetes Div definiert Pseudoklassen: af...

Win10 verwendet die Tsinghua-Quelle, um die PyTorch-GPU-Version schnell zu installieren (empfohlen)

Überprüfen Sie, ob Ihr CUDA installiert ist Geben...

JavaScript implementiert drei gängige Webeffekte (Offset, Client, Scroll-Serie).

Inhaltsverzeichnis 1. Elementversatzserie 2. Elem...

Beispiel für die Verwendung von JS, um zu bestimmen, ob ein Element ein Array ist

Hier sind die Arten von Daten, die überprüft werd...

3 Möglichkeiten zum Hinzufügen von Links zu HTML-Auswahl-Tags

Der Erste : Code kopieren Der Code lautet wie folg...