Share
Viele Websites verwenden mittlerweile eine Art Animation, um die Zielseiten attraktiver zu gestalten. Zum Glück gibt es viele Bibliotheken, mit denen Sie Elemente auf einer Webseite animieren können, ohne von Grund auf alles zu tun. In diesem Lernprogramm erfahren Sie mehr über eine solche Bibliothek namens mojs.
Die Bibliothek ist aufgrund ihrer einfachen deklarativen API sehr einfach zu verwenden. Die Animationen, die Sie mit mojs erstellen können, werden glatt und retina vorbereitet, sodass alles professionell aussieht.
Es gibt viele Möglichkeiten, Mojs in Ihre Projekte aufzunehmen. Sie können die Bibliothek aus ihrem GitHub-Repository beziehen. Alternativ können Sie direkt einen Link zur neuesten Version der Bibliothek von verschiedenen CDNs in Ihrem Projekt einfügen.
Entwickler können mojs auch mit Paketmanagern wie npm und bower installieren, indem Sie den folgenden Befehl ausführen:
npm install mo-js bower install mojs
Sobald Sie die Bibliothek in Ihr Projekt aufgenommen haben, können Sie verschiedene Module verwenden, um interessante Animationen zu erstellen.
Dieses Tutorial konzentriert sich auf das HTML-Modul in der mojs-Bibliothek. Mit diesem Modul können verschiedene HTML-Elemente auf der Webseite animiert werden.
Das erste, was Sie tun müssen, um ein DOM-Element zu animieren, ist das Erstellen eines Mojs Html Objekt. Sie können den Selektor eines Elements und seine Eigenschaften angeben, die Sie in diesem Objekt animieren möchten.
Einen Wert für einstellen el können Sie das Element identifizieren, das Sie mit mojs animieren möchten. Sie können den Wert entweder als Selektor oder als DOM-Knoten festlegen.
Das HTML-Modul verfügt über einige vordefinierte Attribute, mit denen verschiedene transformierungsbezogene Eigenschaften eines DOM-Elements animiert werden können. Sie können beispielsweise die Translationsanimation eines Elements entlang der X-, Y- und Z-Achse steuern, indem Sie Start- und Endwerte für die angeben x, y und z Eigenschaften. Sie können jedes Element auch mit den Tasten auf verschiedenen Achsen drehen angleX, angleY und Winkel Z Eigenschaften. Dies ist ähnlich zu dem entsprechenden RotateX (), RotierenY () und RotateZ () transformiert in CSS. Mit Hilfe von können Sie ein Element auch entlang der X- oder Y-Achse neigen skewX und schief Eigenschaften.
Das Anwenden von Skalierungsanimationen auf verschiedene Elemente ist genauso einfach. Wenn Sie ein Element in beide Richtungen skalieren möchten, legen Sie einfach einen Wert für das Element fest Rahmen Eigentum. In ähnlicher Weise können Sie die Skalierung von Elementen entlang verschiedener Achsen animieren, indem Sie entsprechende Werte für die festlegen scaleX und scaleY Eigenschaften.
Neben all diesen Eigenschaften, mit denen Sie die Anfangs- und Endwerte der Animation festlegen können, gibt es noch andere Eigenschaften, die die Wiedergabe der Animation steuern. Sie können die Dauer der Animation mithilfe von festlegen Dauer Eigentum. Für den angegebenen Wert ist eine Zahl erforderlich, und die Dauer der Animation wird in Millisekunden festgelegt. Wenn Sie eine Animation nach einer gewissen Verzögerung starten möchten, können Sie den Verzögerungswert mit einstellen verzögern Eigentum. So wie Dauer, verzögern erwartet auch, dass der Wert eine Zahl ist.
Animationen können mit Hilfe von mehr als einmal wiederholt werden wiederholen Eigentum. Der Standardwert ist Null, was bedeutet, dass die Animation nur einmal abgespielt wird. Bei Einstellung auf 1 wird die Animation zweimal abgespielt, bei Einstellung auf 2 wird die Animation dreimal wiedergegeben. Wenn die Animation die erste Iteration abgeschlossen hat, kehrt das Element in den ursprünglichen Zustand zurück und beginnt erneut mit der Animation (wenn Sie einen Wert für das Element festgelegt haben) wiederholen Eigentum). Dieser plötzliche Sprung vom Endzustand in den Anfangszustand ist möglicherweise nicht in allen Fällen wünschenswert.
Wenn die Animation rückwärts abgespielt werden soll, sobald sie den Endzustand erreicht hat, können Sie den Wert von festlegen isYoyo Eigentum an wahr. Es ist eingestellt auf falsch standardmäßig. Schließlich können Sie die Geschwindigkeit einstellen, mit der die Animation abgespielt werden soll Geschwindigkeit Eigentum. Der Standardwert ist 1. Bei der Einstellung 2 wird die Animation doppelt so schnell abgespielt. Bei einer Einstellung von 0,5 wird die Animation mit der halben Geschwindigkeit abgespielt.
Die mojs Html Objekte, die Sie erstellt haben, werden die jeweiligen Elemente nicht selbst animieren. Sie müssen die anrufen abspielen() Methode auf jedem Mojs Html Animation, die Sie spielen möchten. Hier ein Beispiel, das drei verschiedene Boxen mit allen Eigenschaften, die wir gerade besprochen haben, animiert:
Accentsconagua
var htmlA = new mojs.Html (el: ".a", x: 0: 400, angleZ: 0: 720, Dauer: 1000, Wiederholung: 4, isYoyo: true); var htmlB = new mojs.Html (el: ".b", x: 400: 0, angleY: 0: 360, angleZ: 0: 720, Dauer: 1000, Wiederholung: 4); var htmlC = new mojs.Html (el: ".c", x: 0: 400, angleY: 0: 360, scaleZ: 1: 2, skewX: 0: 30, duration: 1000, Wiederholung: 4, isYoyo: wahr); document.querySelector (". play"). addEventListener ("click", function () htmlA.play (); htmlB.play (); htmlC.play ();); Sie müssen nicht nur die Transformationseigenschaften eines Elements animieren. Mit der mojs-Animationsbibliothek können Sie auch alle anderen animierbaren CSS-Eigenschaften animieren. Sie müssen lediglich sicherstellen, dass Sie gültige Anfangs- und Endwerte für sie angeben. Sie können beispielsweise die Hintergrundfarbe eines Elements animieren, indem Sie gültige Werte für angeben Hintergrund.
Wenn die zu animierende CSS-Eigenschaft einen Bindestrich enthält, können Sie den Bindestrich entfernen und den Namen der Eigenschaft in konvertieren camelCase wenn Sie Anfangs- und Endwerte in den Mojs einstellen Html Objekt. Dies bedeutet, dass Sie das animieren können Grenzradius indem Sie einen gültigen Wert für die borderRadius Eigentum. Das folgende Beispiel soll alles klar machen:
var htmlA = new mojs.Html (el: ".a", x: 0: 400, angleZ: 0: 360, Hintergrund: rot: 'schwarz', borderWidth: 10: 20, borderColor: 'black': 'red', borderRadius: 0: '50% ', Dauer: 2000, Wiederholung: 4, isYoyo: true); document.querySelector (". play"). addEventListener ("click", function () htmlA.play ();); Im obigen Beispiel ändert sich die Randfarbe von Schwarz zu Rot, während der Randradius von 0 bis 50% animiert wird. Beachten Sie, dass eine Zahl ohne Einheit als Pixelwert betrachtet wird, während eine Zahl mit Einheiten als Zeichenfolge wie "50%" angegeben werden sollte..
Bisher haben wir einen einzelnen Satz von Tween-Eigenschaften verwendet, um die Wiedergabe verschiedener Animationen zu steuern. Dies bedeutet, dass ein Element die gleiche Zeit benötigen würde, um von zu wechseln x: 0 zu x: 200 wie es aus dem Maßstab dauert Skala: 1 zu Skala: 2.
Dies ist möglicherweise kein wünschenswertes Verhalten, wie Sie möchten verzögern die Animation einiger Eigenschaften und deren Kontrolle Dauer auch. In solchen Fällen können Sie die Animationswiedergabeparameter jeder Eigenschaft innerhalb des Eigenschaftsobjekts selbst angeben.
var htmlA = new mojs.Html (el: ".a", x: 0: 400, Dauer: 1000, Wiederholung: 8, isYoyo: true, angleY: 0: 360, Verzögerung: 500, Dauer: 1000) , repeat: 4, isYoyo: true, WinkelZ: 0: 720, Verzögerung: 1000, Dauer: 1000, repeat: 4, isYoyo: true); document.querySelector (". play"). addEventListener ("click", function () htmlA.play ();); Jede Animation, die Sie erstellen, wird die sin.out Standardmäßig angewendet. Wenn Sie möchten, dass die Animationswiedergabe mit einer anderen Beschleunigungsfunktion fortschreitet, können Sie deren Wert mit der Option angeben Lockerung Eigentum. Standardmäßig ist der Wert für angegeben Lockerung wird auch verwendet, wenn die Animation rückwärts abgespielt wird. Wenn Sie eine andere Beschleunigung für Rückwärtsanimationen anwenden möchten, können Sie einen Wert für die festlegen rückwärts Eigentum.
Die mojs-Bibliothek verfügt über 11 verschiedene integrierte Beschleunigungsfunktionen. Diese sind linear, Leichtigkeit, Sünde, Quad, kubisch, Quart, Quint, Messe, Zirk, zurück, und elastisch. Die lineare Lockerung hat nur eine Variation linear.kein. Dies ist sinnvoll, da die Animation in verschiedenen Phasen mit der gleichen Geschwindigkeit abläuft. Alle anderen Beschleunigungsfunktionen haben drei verschiedene Varianten im, aus und inout am Ende angehängt.
Es gibt zwei Methoden, um die Beschleunigungsfunktion für eine Animation anzugeben. Sie können entweder eine Zeichenfolge verwenden elastisch oder Sie können direkt auf die Beschleunigungsfunktionen zugreifen mojs.easing Objekt wie mojs.easing.elastic.inout. In der eingebetteten CodePen-Demo habe ich verschiedene Beschleunigungsfunktionen für jeden Balken angewendet, sodass sich seine Breite in einem anderen Tempo ändert. Dadurch erhalten Sie eine Vorstellung davon, wie sich die Animationsgeschwindigkeit bei jeder Beschleunigung unterscheidet.
var allBoxes = document.querySelectorAll (". box"); var Animationen = neues Array (); var easings = ['ease.in', 'sin.in', 'quad.in', 'cubic.in', 'quart.in', 'quint.in', 'expo.in', 'circ.in ',' zurück.in ',' elastisch.in ']; allBoxes.forEach (Funktion (Box, Index) var animation = new mojs.Html (el: box, Breite: 0: 550, Dauer: 4000, Wiederholung: 8, isYoyo: true, easing: easings [index] ); animations.push (Animation);); document.querySelector (". play"). addEventListener ("click", function () animations.forEach (function (anim) anim.play (););); Da wir nur die auf die einzelnen Boxen angewendeten Beschleunigungsfunktionen ändern möchten, habe ich eine Schleife erstellt, um sie zu durchlaufen und anschließend eine Beschleunigungsfunktion anzuwenden, die aus dem übernommen wurde Erleichterungen Array. Dies verhindert unnötige Code-Duplizierung. Sie können dieselbe Technik verwenden, um mehrere Elemente zu animieren, bei denen die Eigenschaftswerte je nach Muster variieren.
Mojs bietet eine Vielzahl von Methoden, mit denen wir die Animationswiedergabe für verschiedene Elemente steuern können, wenn sie bereits gestartet sind. Sie können die Animation jederzeit unterbrechen, indem Sie die Pause() Methode. Ebenso können Sie eine angehaltene Animation fortsetzen, indem Sie die fortsetzen() Methode.
Animationen, die mit pausiert wurden Pause() wird immer an dem Punkt fortgesetzt, an dem Sie angerufen haben Pause(). Wenn Sie möchten, dass die Animation nach dem Anhalten von vorne beginnt, verwenden Sie die halt() stattdessen Methode.
Sie können die Animation auch mit der Taste rückwärts abspielen playBackward () Methode. Früher haben wir die verwendet Geschwindigkeit Diese Eigenschaft steuert die Geschwindigkeit, mit der mojs eine Animation abgespielt hat. Mojs hat auch eine Geschwindigkeit einstellen() Methode, mit der die Animationsgeschwindigkeit eingestellt werden kann, während sie noch läuft. Im folgenden Beispiel habe ich alle diese Methoden verwendet, um die Animationswiedergabe auf der Basis von Schaltflächenklicks zu steuern.
Var Geschwindigkeit = 1; var htmlA = new mojs.Html (el: ".a", angleZ: 0: 720, borderRadius: 0: '50% ', borderWidth: 10: 100, Dauer: 2000, Wiederholung: 9999 , isYoyo: true); document.querySelector (". play"). addEventListener ("click", function () htmlA.play ();); document.querySelector (". pause"). addEventListener ("click", function () htmlA.pause ();); document.querySelector (". stop"). addEventListener ("click", function () htmlA.stop ();); document.querySelector (". schneller"). addEventListener ("click", function () Geschwindigkeit = Geschwindigkeit + 1; htmlA.setSpeed (Geschwindigkeit); document.querySelector (". data"). innerHTML = "Geschwindigkeit:" + Geschwindigkeit; ); document.querySelector (". langsamer"). addEventListener ("click", function () speed = speed / 2; htmlA.setSpeed (speed); document.querySelector (". data"). innerHTML = "speed:" + Geschwindigkeit; ); In der folgenden Demo wird die aktuelle Wiedergabegeschwindigkeit der Animation in der schwarzen Box in der linken unteren Ecke angezeigt. Klicken Sie auf Schneller erhöht die aktuelle Geschwindigkeit um 1 und klickt auf Langsamer halbiert die aktuelle Geschwindigkeit.
In diesem Lernprogramm haben wir gelernt, wie Sie verschiedene DOM-Elemente auf einer Webseite mithilfe des HTML-Moduls in mojs animieren. Wir können das Element, das wir animieren möchten, entweder mit einem Selektor oder einem DOM-Knoten angeben. Mit der Bibliothek können Sie verschiedene Transformationseigenschaften und die Deckkraft aller Elemente mit den integrierten Eigenschaften der mojs animieren Html Objekt. Sie können jedoch auch andere CSS-Eigenschaften animieren, indem Sie den Namen mit angeben camelCase Notation.
JavaScript ist nicht ohne Lernkurven und es gibt viele Frameworks und Bibliotheken, die Sie beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, prüfen Sie, was wir auf dem Envato-Markt zur Verfügung haben.
Lassen Sie mich wissen, ob es etwas gibt, das Sie in diesem Tutorial klären möchten. Das Shape-Modul aus der mojs-Bibliothek wird im nächsten Tutorial behandelt.
