Share
Im vorherigen Tutorial haben wir mojs verwendet, um verschiedene HTML-Elemente auf einer Webseite zu animieren. Wir nutzten die Bibliothek hauptsächlich zum Animieren div Elemente, die wie Quadrate oder Kreise aussahen. Sie können jedoch die Html Modul zum Animieren aller Arten von Elementen wie Bildern oder Überschriften. Wenn Sie grundlegende Formen tatsächlich mit mojs animieren möchten, sollten Sie wahrscheinlich das Shape-Modul aus der Bibliothek verwenden.
Das Gestalten Mit diesem Modul können Sie grundlegende Formen im DOM mit SVG erstellen. Sie müssen nur die Art der Form angeben, die Sie erstellen möchten, und den Rest erledigt mojs. Mit diesem Modul können Sie auch verschiedene von Ihnen erstellte Formen animieren.
In diesem Tutorial behandeln wir die Grundlagen des Gestalten Modul und wie Sie es verwenden können, um verschiedene Formen zu erstellen und sie zu animieren.
Sie müssen ein mojs instanziieren Gestalten Objekt, um verschiedene Formen zu erstellen. Dieses Objekt akzeptiert verschiedene Parameter, mit denen Sie Farbe, Größe, Winkel usw. der von Ihnen erstellten Formen steuern können.
Standardmäßig verwendet jede Form, die Sie erstellen, den Dokumentkörper als übergeordneten Element. Sie können jedes andere Element als übergeordnetes Element angeben Elternteil Eigentum. Sie können jeder Form, die Sie mit Hilfe von erstellen, eine Klasse zuweisen Klassenname Eigentum. Die Bibliothek weist keine Standardklasse zu, wenn Sie diese Eigenschaft überspringen.
In Mojs sind acht verschiedene Formen integriert, sodass Sie sie direkt erstellen können, indem Sie einen Wert für die gestalten Eigentum. Sie können den Wert auf einstellen Kreis Kreise erstellen, Rect Rechtecke erstellen und Polygon Polygone erstellen. Sie können auch gerade Linien zeichnen, indem Sie den Wert von einstellen gestalten sein Zeilen. Die Bibliothek zeichnet zwei senkrechte Linien, wenn die gestalten Wert ist Kreuz und eine Anzahl paralleler Linien, wenn die gestalten ist gleich. In ähnlicher Weise können Zickzacklinien erstellt werden, indem der Eigenschaftswert auf festgelegt wird Zickzack-.
Das Formobjekt hat auch eine Punkte Eigenschaft, die für verschiedene Formen unterschiedliche Bedeutungen hat. Sie bestimmt die Gesamtzahl der Seiten in a Polygon und die Gesamtzahl der parallelen Linien in einem gleich gestalten. Das Punkte Diese Eigenschaft kann auch verwendet werden, um die Anzahl der Biegungen in a festzulegen Zickzack- Linie.
Wie bereits erwähnt, erstellt mojs all diese Formen mit SVG. Dies bedeutet, dass die Gestalten object verfügt auch über einige SVG-spezifische Eigenschaften, um das Erscheinungsbild dieser Formen zu steuern. Sie können die Füllfarbe einer Mojs-Form mithilfe von einstellen füllen Eigentum. Wenn keine Farbe angegeben ist, verwendet die Bibliothek die Dunkelrosa Farbe, um die Form zu füllen. Auf ähnliche Weise können Sie die Strichfarbe für eine Form mithilfe von angeben Schlaganfall Eigentum. Wenn keine Strichfarbe angegeben ist, bleibt der Strich in mojs transparent. Sie können die Deckkraft für Füll- und Konturlinien für eine Form mithilfe von steuern fillOpacity und StrokeOpacity Eigenschaften. Sie können einen beliebigen Wert zwischen 0 und 1 haben.
Mit Mojs können Sie auch andere konturbezogene Eigenschaften einer Form steuern. Sie können zum Beispiel das Muster von Strichen und Lücken in einem Strichpfad mithilfe von angeben strokeDasharray Eigentum. Diese Eigenschaft akzeptiert sowohl Strings als auch Zahlen als gültige Werte. Der Standardwert ist Null, was bedeutet, dass der Strich eine durchgehende Linie ist. Die Breite eines Strichs kann mit festgelegt werden Strichbreite Eigentum. Standardmäßig sind alle Striche 2px breit. Die Form der verschiedenen Linien an ihren Endpunkten kann mit festgelegt werden strokeLinecap Eigentum. Gültige Werte für strokeLinecap sind Hintern, runden, und Quadrat.
Jede von Ihnen erstellte Form wird standardmäßig in der Mitte des übergeordneten Elements platziert. Das liegt daran, dass die links und Recht Die Eigenschaften einer Form sind jeweils auf 50% festgelegt. Sie können die Werte dieser Eigenschaften ändern, um die Elemente an verschiedenen Positionen zu platzieren. Eine andere Möglichkeit, die Position einer Form zu steuern, ist die Verwendung der x und y Eigenschaften. Sie bestimmen, um wie viel eine Form in horizontaler und vertikaler Richtung verschoben werden soll.
Sie können den Radius einer Form mithilfe von angeben Radius Eigentum. Dieser Wert wird verwendet, um die Größe einer bestimmten Form zu bestimmen. Sie können auch verwenden radiusX und radiusY um die Größe einer Form in einer bestimmten Richtung festzulegen. Eine andere Möglichkeit, die Größe einer Form zu steuern, ist die Verwendung von Rahmen Eigentum. Der Standardwert von Rahmen ist 1, aber Sie können eine beliebige andere Zahl einstellen. Sie können eine Form auch in eine bestimmte Richtung skalieren scaleX und scaleY Eigenschaften.
Der Ursprung all dieser Transformationen einer Form ist standardmäßig ihr Mittelpunkt. Zum Beispiel, wenn Sie eine beliebige Form drehen, indem Sie einen Wert für den Wert angeben Winkel Diese Eigenschaft dreht sich die Form um ihre Mitte. Wenn Sie eine Form um einen anderen Punkt drehen möchten, können Sie sie mithilfe von angeben Ursprung Eigentum. Diese Eigenschaft akzeptiert eine Zeichenfolge als Wert. Einstellen auf '0% 0%' wird die Form um die obere linke Ecke drehen, skalieren oder verschieben. Ebenso Einstellung auf '50% 0% ' wird die Form um die Mitte der Oberkante drehen, skalieren oder verschieben.
Sie können all diese Eigenschaften, die wir gerade besprochen haben, verwenden, um eine Vielzahl von Formen zu erstellen. Hier einige Beispiele:
var circleA = new mojs.Shape (parent: ".container", Form: "circle", left: 0, füllen: "orange"), hub: "black", strokeWidth: 5, isShowStart: true); var circleB = new mojs.Shape (parent: ".container"), Form: "circle", links: 175, füllen: "orange", Strich: "rot", radiusX: 80, hubWidth: 25, hubDasharray: 2, isShowStart: true); var rectA = new mojs.Shape (Elternteil: ".container", Form: "rect", links: 350, füllen: "rot"), Strich: "schwarz", strokeWidth: 5, isShowStart: true); var rectB = new mojs.Shape (parent: ".container"), Form: "rect", links: 500, füllen: "blau", Strich: "blau", radiusX: 40, radiusY: 100, hubBreite: 25, strokeDasharray: 20, isShowStart: true); var polyA = new mojs.Shape (Elternteil: ".container", Form: "Polygon", Oberseite: 300, links: 0, Füllung: "Gelb", Strich: "Schwarz", StrichBreite: 10, Punkte: 8, isShowStart: true); var polyB = new mojs.Shape (Elternteil: ".container", Form: "Polygon", Oberseite: 350, links: 175, Radius X: 100, RadiusY: 100, Füllung: "Violett", Strich: "Schwarz", strokeWidth: 6, strokeDasharray: "15, 10, 5, 10", strokeLinecap: "round", Punkte: 3, isShowStart: true); var lineA = new mojs.Shape (parent: ".container", Form: "cross", oben: 350, links: 375, Strich: "rot", strokeWidth: 40, isShowStart: true); var zigzagA = new mojs.Shape (Elternteil: ".container", Form: "Zickzack", Oberseite: 500, links: 50, Füllung: "transparent", Strich: "schwarz", Strichbreite: 4, RadiusX: 100, Punkte: 10, isShowStart: true); var zigzagB = new mojs.Shape (Elternteil: ".container", Form: "Zickzack", Oberseite: 500, links: 350, Füllung: "Blau"), Strich: "transparent", RadiusX: 100, Punkte: 50, isShowStart: true);
Die durch den obigen Code erstellten Formen werden in der folgenden CodePen-Demo gezeigt:
Sie können fast alle Eigenschaften einer Form animieren, die wir im vorherigen Abschnitt besprochen haben. Sie können zum Beispiel die Anzahl der Punkte in einem Polygon animieren, indem Sie unterschiedliche Anfangs- und Endwerte angeben. Sie können auch den Ursprung einer Form aus animieren '50% 50% ' zu jedem anderen Wert wie '75% 75% '. Andere Eigenschaften mögen Winkel und Rahmen benehmen Sie sich genau wie sie es in der Html Modul.
Die Dauer, Verzögerung und Geschwindigkeit verschiedener Animationen können mit dem gesteuert werden Dauer, verzögern und Geschwindigkeit Eigenschaften jeweils. Die Wiederholungseigenschaft funktioniert auch wie im Html Modul. Sie können es auf 0 setzen, wenn Sie die Animation nur einmal abspielen möchten. Ebenso können Sie es auf 3 setzen, um die Animation viermal abzuspielen. Alle Lockerungswerte, die für den Html Modul gelten auch für die Gestalten Modul.
Der einzige Unterschied zwischen den Animationsfunktionen dieser beiden Module besteht darin, dass Sie die Animationsparameter nicht einzeln für die Eigenschaften in festlegen können Gestalten Modul. Alle Eigenschaften, die Sie animieren, haben die gleiche Dauer, Verzögerung, Wiederholung usw.
Hier ein Beispiel, in dem wir die x-Position, den Maßstab und den Winkel eines Kreises animieren:
var circleA = new mojs.Shape (parent: ".container"), Form: "circle", links: 175, füllen: "red", hub: "black", strokeWidth: 100, strokeDasharray: 18, isShowStart: true, x: 0: 300, Winkel: 0: 360, Maßstab: 0,5: 1,5, Dauer: 1000, Wiederholung: 10, isYoyo: wahr, Beschleunigung: "quad.in");
Eine Möglichkeit, die Wiedergabe verschiedener Animationen zu steuern, ist die Verwendung von .dann() Methode, um einen neuen Satz von Eigenschaften anzugeben, der nach Abschluss der ersten Animationssequenz animiert werden soll. Sie können allen Animationseigenschaften neue Anfangs- und Endwerte hinzufügen .dann(). Hier ist ein Beispiel:
var polyA = new mojs.Shape (parent: ".container", Shape: "Polygon", Füllung: "rot"), Strich: "schwarz", isShowStart: true, Punkte: 4, links: 100, x: 0 : 500, strokeWidth: 5: 2, Dauer: 2000, Erleichterung: 'elastisch.in'). Dann (strokeWidth: 5, Punkte: 4: 3, Winkel: 0: 720, Maßstab : 1: 2, füllen: 'rot': 'gelb', Dauer: 1000, Verzögerung: 200, Erleichterung: 'elastisch.out');
In diesem Tutorial haben wir gelernt, wie man mit mojs verschiedene Formen erstellt und die Eigenschaften dieser Formen animiert.
Das Gestalten Das Modul verfügt über alle Animationsfunktionen des Html Modul. Der einzige Unterschied besteht darin, dass die Eigenschaften nicht einzeln animiert werden können. Sie können nur als Gruppe animiert werden. Sie können die Animationswiedergabe auch steuern, indem Sie die Animationen an verschiedenen Stellen mit verschiedenen Methoden abspielen, anhalten, stoppen und fortsetzen. Ich habe diese Methoden im ersten Tutorial der Serie ausführlich behandelt.
Wenn Sie Fragen zu diesem Tutorial haben, können Sie einen Kommentar posten. Im nächsten Tutorial erfahren Sie mehr über die ShapeSwirl und staffeln Module in mojs.
Accentsconagua