Share
Wir haben diese Serie mit dem Lernen begonnen, HTML-Elemente mit mojs zu animieren. Im zweiten Tutorial haben wir uns mit der Animation eingebauter SVG-Formen befasst Gestalten Modul. Das dritte Tutorial befasste sich mit weiteren Möglichkeiten zum Animieren von SVG-Formen mit der ShapeSwirl und staffeln Module.
Jetzt lernen wir, wie man verschiedene SVG-Formen in einer Burst-Formation mit dem animiert Platzen Modul. Dieses Tutorial hängt von den Konzepten ab, die wir in den letzten drei Tutorials behandelt haben. Wenn Sie sie noch nicht gelesen haben, würde ich vorschlagen, dass Sie sie zuerst durchgehen.
Das erste, was wir tun müssen, bevor wir Burst-Animationen erstellen können, ist das Instanziieren von a Platzen Objekt. Danach können wir einfach die Werte verschiedener Eigenschaften angeben, um zu steuern, wie die Animation abgespielt wird. Die Namen vieler Eigenschaften in der Platzen Modul sind die gleichen wie die Eigenschaften in der Gestalten Modul. Diese Eigenschaften führen jedoch in diesem Fall sehr unterschiedliche Aufgaben aus.
Das links und Recht Eigenschaften bestimmen die Anfangsposition des Stoßes anstelle von Partikeln darin. Ebenso die x und y Eigenschaften bestimmen die Verschiebung des gesamten Bursts anstelle einzelner Partikel.
Der Radius des Kreises, der von allen Burst-Partikeln gebildet wird, wird durch das Feld gesteuert Radius Eigentum. Das unterscheidet sich sehr vom Radius Eigenschaft der einzelnen Formen, die die Größe dieser Formen bestimmt. Im Falle eines Bursts bestimmt der Radius, wie weit die einzelnen Formen voneinander entfernt sind.
Die Anzahl der Formen oder Partikel in einem einzelnen Burst kann mithilfe von festgelegt werden Anzahl Eigentum. Standardmäßig enthält jeder von Ihnen erstellte Burst fünf Partikel. Alle diese Teilchen sind gleichmäßig über den Umfang des Stoßes verteilt. Wenn beispielsweise vier Partikel vorhanden sind, werden sie um 90 Grad zueinander positioniert. Wenn drei Partikel vorhanden sind, werden sie bei 120 Grad platziert.
Wenn Sie nicht möchten, dass die Burst-Partikel den gesamten 360-Grad-Bereich abdecken, können Sie den Bereich angeben, der über die Option abgedeckt werden soll Grad Eigentum. Jeder Wert über 0 ist für diese Eigenschaft gültig. Die angegebene Gradzahl wird gleichmäßig zwischen allen Partikeln verteilt. Wenn der Gradwert über 360 liegt, können sich die Formen überlappen.
Der Winkel, der mit angegeben wird Winkel Diese Eigenschaft bestimmt den Winkel des gesamten Bursts. In diesem Fall werden einzelne Partikel nicht um ihren eigenen Mittelpunkt gedreht, sondern um den Mittelpunkt des Stoßes. Dies ist ähnlich wie sich die Erde um die Sonne dreht, was sich von der Rotation der Erde um ihre eigene Achse unterscheidet.
Das Rahmen Eigenschaft skaliert den Wert aller physikalischen Eigenschaften des Bursts und damit der einzelnen Formen. Genau wie bei anderen Burst-Eigenschaften würden alle Shapes auf einmal skaliert. Burst einstellen Rahmen Mit 3 wird der Radius des gesamten Bursts sowie die Größe der einzelnen Formen um 3 erhöht.
Im folgenden Codeausschnitt erstellen wir fünf verschiedene Bursts mit den gerade besprochenen Eigenschaften.
var burstA = new mojs.Burst (count: 20); var burstB = neue mojs.Burst (Winkel: 0: 360, Maßstab: 1: 2, Radius: 10); var burstC = new mojs.Burst (Winkel: 0: 360, Maßstab: 1: 2, Radius: 10: 100); var burstD = neue mojs.Burst (Grad: 180, Radius X: 10, Winkel: -90, Maßstab: 1: 2, Radius: 10: 100); var burstE = new mojs.Burst (count: 20, degree: 3600);
Sie können sehen, dass BurstA und BurstE unterscheiden sich nur in der Anzahl der Grade, die sie abdecken müssen. Da die Partikel in BurstA 360 Grad (Standardwert) abdecken müssen, werden sie platziert 360/20 = 18 Grad auseinander. Auf der anderen Seite sind die Partikel in BurstE sind platziert 3600/20 = 180 Grad auseinander. Ausgehend von Null wird das erste Teilchen bei 0 Grad und das nächste Teilchen bei 180 Grad angeordnet.
Das dritte Teilchen wird dann bei 360 Grad angeordnet, was im Wesentlichen gleich 0 Grad ist. Das vierte Teilchen wird dann bei 540 Grad angeordnet, aber das entspricht im Wesentlichen 180 Grad. Mit anderen Worten, alle ungeradzahlig nummerierten Teilchen sind bei 0 Grad angeordnet, und alle geradzahligen Teilchen sind bei 180 Grad angeordnet. Am Ende sehen Sie nur zwei Partikel, da sich alle anderen mit den ersten beiden überlappen.
Beachten Sie, dass Sie die Dauer, Verzögerung oder Beschleunigungsfunktion der Burst-Animationen nicht direkt steuern können. Das Modul ermittelt alle diese Werte automatisch anhand der Werte verschiedener animierter Kinder.
In diesem Tutorial hatten alle Partikel in einem Burst die gleiche Animation. Ihr Winkel, Maßstab, Radius und ihre Position wurden alle um denselben Wert geändert. Darüber hinaus konnten wir weder Dauer noch Verzögerung der einzelnen Teilchen oder des Bursts insgesamt kontrollieren. Die mojs Platzen Das Modul hat keine Eigenschaften, die alle diese Werte direkt ändern können. Wir können jedoch den Animationswert für einzelne Partikel angeben, was sich wiederum auf die Burst-Animation auswirkt.
Alle Partikel in einer Burst-Animation werden als Kinder des Originals betrachtet Platzen Objekt. Mojs erlaubt uns daher, die Animation einzelner Burst-Partikel mit a zu steuern Kinder Eigenschaft, die ein Objekt als Wert akzeptiert. Sie können alle nutzen ShapeSwirl Eigenschaften außer x und y im Objekt der Kinder. Dies ist sinnvoll, da die einzelnen Partikel in einer Burst-Animation an bestimmten Positionen erscheinen müssen. Wenn Sie die Position der einzelnen Partikel zufällig ändern, ändert sich die Konfiguration.
Alle untergeordneten Eigenschaftswerte, die Sie nicht angeben, werden auf den Standardwert von gesetzt ShapeSwirl Modul. Im folgenden Beispiel animieren wir 20 verschiedene Zeilen unserer Burst-Animation. Diesmal die Winkel Die Eigenschaft wurde auf einzelne Partikel anstatt auf die gesetzt Platzen Objekt so, dass sich nur die Linien um das Zentrum herum drehen, anstatt das gesamte Objekt. Wie wir im vorherigen Tutorial gelernt haben, sind alle ShapeSwirl Objekte werden standardmäßig von 1 bis 0 verkleinert. Deshalb ändern sich die Längen der Linien in der Animation von 40 auf 0.
var burstA = new mojs.Burst (count: 20, children: shape: 'line', hub: 'black', radius: 20, angle: 0: 180);
Wie ich bereits erwähnt habe, können wir alle animieren ShapeSwirl Eigenschaften innerhalb der Burst-Animationen. Jedes untergeordnete Element in der Animation kann über eigene Eigenschaften verfügen. Wenn nur ein Wert angegeben wird, wird er auf alle untergeordneten Partikel angewendet. Wenn die Werte als Array bereitgestellt werden, werden sie nacheinander Partikel für Partikel angewendet.
Hier ist der JavaScript-Code zum Erstellen von fünf verschiedenen Burst-Animationen unter Verwendung aller bisher gelernten Konzepte.
var burstA = new mojs.Burst (count: 20, Winkel: 0: 180, Radius: 0: 100, Kinder: Form: "Polygon", Strich: "schwarz", Radius: 20, Winkel: 0: 360, Dauer: 4000); var burstB = new mojs.Burst (count: 20, Winkel: 0: 180, Radius: 0: 100, children: Form: "Polygon"), füllen: ["gelb", "cyan", " orange "], Strich:" schwarz ", Radius: 20, Maßstab: 1: 2, Dauer: 2000, isShowEnd: false); var burstC = new mojs.Burst (count: 20, Winkel: 0: -180), Radius: 0: 100, Kinder: Form: "Kreis", Füllung: ["Rot", "Schwarz", "blau"], Radius: 10: "versetzt (5, 1)"; var burstD = new mojs.Burst (count: 6, Radius: 0: 100), Kinder: Form: "Kreis", Füllung: ["Rot", "Gelb", "Blau"], Maßstab: 1 : "rand (1, 10)", isShowEnd: false); var burstE = new mojs.Burst (count: 6, Radius: 0: 100), Kinder: Form: "Kreis", Füllung: ["Rot", "Gelb", "Blau"], Strich: "Schwarz ", Maßstab: 1:" rand (1, 10) ". dann (Winkel: 0: 360, Radius: 100: 0, Maßstab: 1: 0);
In der ersten Burst-Animation wird die Winkel direkt auf die aufgetragen Platzen object dreht die gesamte Gruppe um die Mitte des Burst-Objekts. Jedoch die Winkel Im Inneren der Kinderanlage werden alle Dreiecke um ihre eigenen Zentren gedreht. Wir haben auch die Burst-Animation verlangsamt, indem wir die Animationsdauer für alle Kinder auf 4000 ms geändert haben.
In der zweiten Burst-Animation wird die Farbe aller Dreiecke aus dem Array übernommen, das an das übergeben wird füllen Eigentum. Wir haben nur drei Füllfarben angegeben, aber die Gesamtzahl der Dreiecke beträgt 20. In solchen Fällen durchläuft mojs die Array-Elemente und füllt die Dreiecke immer wieder mit den gleichen drei Farben.
In der vierten Animation verwenden wir rand Strings, von denen wir im vorherigen Tutorial erfahren haben, dass sie zufällig einen Skalenwert für alle untergeordneten Partikel auswählen. Wir legen auch den Wert von fest isShowEnd Eigentum an falsch um die Partikel am Ende der Animation auszublenden.
In der fünften Animation verwenden wir die dann() Methode aus dem Shape-Modul-Tutorial, um eine andere Animationssequenz abzuspielen, nachdem die erste beendet wurde.
Ziel dieser Serie war es, Sie mit den Grundlagen der mojs-Animationsbibliothek vertraut zu machen. Jedes Lernprogramm konzentrierte sich auf ein einzelnes Modul und wie Sie die Eigenschaften in diesem Modul verwenden können, um grundlegende Animationen zu erstellen.
In diesem letzten Tutorial wurden die Konzepte der vorherigen Tutorials verwendet, um etwas kompliziertere Animationen zu erstellen. Mojs ist eine sehr leistungsfähige Animationsbibliothek. Die endgültigen Ergebnisse hängen davon ab, wie kreativ Sie mit allen Eigenschaften werden können. Experimentieren Sie also weiter.
Wenn Sie etwas in diesem Tutorial klären möchten, teilen Sie mir dies bitte in den Kommentaren mit.
Accentsconagua