Was ist JavaScript -Animation

JavaScript -Animationen werden erstellt, indem inkrementelle Programmieränderungen im Stil des Elements vorgenommen werden. Diese Animationen können die Aufgabe ausführen, die CSS nicht selbst erledigen kann. DOM wird als Dokumentobjektmodell bezeichnet und das gesamte HTML -Dokument wird durch ein Dokumentobjekt dargestellt. Entsprechend der logischen Gleichung oder Funktion können Sie mehrere DOM -Elemente über die Seite mit JavaScript verschieben.

In diesem Beitrag erfahren Sie die Grundlagen im Zusammenhang mit der JavaScript -Animation unter Verwendung des einfachen Beispiels. So lass uns anfangen!

Funktionen zum Erstellen von JavaScript -Animation

In JavaScript werden drei Funktionen häufig zum Erstellen von Animation verwendet.Diese sind:

• setTimeout (Funktion, Dauer): Der global setTimeout () Die Funktion legt einen Timer fest, der nach einer Verzögerung oder Dauer eine Funktion oder ein angegebenes Code -Stück ausführt.
• Clearimeout (setTimeout_variable): Der Clearimeout () Funktion wird verwendet, um den Timer zu löschen, der von der festgelegt wurde setTimeout ().
• setInterval (Funktion, Dauer): Der setInterval () Die Funktion legt einen Timer fest, der wiederholt eine Funktion oder ein Stück Code entsprechend der angegebenen Dauer ausführt.

Nehmen wir ein einfaches Beispiel für das Erstellen von JavaScript -Animation, um zu verstehen, wie es funktioniert.

So erstellen Sie eine JavaScript -Animation

In diesem Beispiel erstellen wir eine JavaScript -Animations -Webseite mit HTML. Zuallererst erstellen wir eine HTML -Datei mit dem Namen “Animation_JS.HTML ”.

In dieser HTML -Datei werden wir eine namige Schaltfläche hinzufügen "Umzug" und fügen Sie zwei Container mit dem Namen "Container" und "hinzu"JavaScriptanimation”. Zum ersten “Container”, Wir werden seine Eigenschaften wie Höhe, Breite, Position, Hintergrund, Grenzradius und Anzeige festlegen. Darüber hinaus werden wir seine festlegen "Position" als "relativ" Dies zeigt an, dass dieser Behälter normal positioniert ist.

In ähnlicher Weise werden wir die Werte für die Eigenschaften der Breite, Höhe und Hintergrundfarbe der “angebenJavaScriptanimationContainer, während er seine festlegt "Position" als "absolut". Auf diese Weise wird dieser Behälter zu seinem nächsten Vorfahren positioniert:

Als nächstes im Inneren der Schild, Wir werden eine definieren "Animation()" Funktion, die aufgerufen wird, wenn der Benutzer auf das klickt "Umzug" Taste. Das "Animation()" Funktion holt zuerst die ab "JavaScriptanimation" HTML -Element. Dann werden wir eine zuweisen "ID" zur Funktion "ClearInterval ()", das ruft die auf "Frame ()" Funktion nach "5" Millisekunden.

Im "Frame ()" -Funktion, Die Anzahl der Frames wird pro Sekunde eingestellt. Wenn die Position des Elements erreicht 305px, dann ist die "ClearInterval ()" Funktion löscht es sonst das abgerufene HTML "JavaScriptanimation" Element bewegt sich oben und bewegt sich nach dem "Positions" -Wert:

Hier ist der Ausschnitt des Skriptcode:

Die Ausführung des oben gegebenen JavaScript-Programms zeigt die folgende Ausgabe an:

Dann klicken Sie auf “UmzugSchaltfläche zum Anzeigen der erstellten JavaScript -Animation:

Das waren alles wesentliche Informationen, die sich auf die JavaScript -Animation beziehen. Sie können nach Bedarf weiter untersuchen.

Abschluss

Die Animation wird als Simulation der Bewegung bekannt, die durch die Reihe von Bildern gemacht wurde. JavaScript -Animationen werden erstellt, indem kleine Programmieränderungen zum Stil eines Elements vorgenommen werden. In JavaScript können Sie Animationen mit den drei genannten Funktionen erstellen setTimeout (), setInterval () und clearimeout (). In diesem Beitrag haben wir die JavaScript -Animation und ihre damit verbundenen Funktionen mit Hilfe eines einfachen Beispiels besprochen.