So erstellen Sie schöne kodierte Webanimationen mit Mo.JS

Wenn Sie nach einer eigenen Website suchen, können Sie mit schön aussehenden Animationen glänzen. Um dies zu erreichen, gibt es mehrere Möglichkeiten, von der Erstellung eines animierten GIFs aus einem vorhandenen Film bis hin zum Erlernen, wie man sich mit Software wie Blender oder Maya von Grund auf selbst macht.

Es gibt auch Bibliotheken, mit denen Animationen programmgesteuert erstellt werden können. In der Vergangenheit verwendeten Web-Codierer jQuery, um einfache Animationen zu erstellen. Als sich das Web entwickelte und HTML5 zum neuen Standard wurde, erschienen neue Optionen. CSS-Bibliotheken für Animationen wurden unter dem neuen Framework unglaublich leistungsfähig, zusammen mit JavaScript-Bibliotheken, die speziell für die Vektoranimation im Browser entwickelt wurden.

Heute schauen wir uns mo.js an, eines der neueren Kinder, die schöne Bilder aus Code erstellen. Wir werden einige grundlegende Funktionen behandeln, bevor wir eine anwenderreaktive Animationsserie erstellen, die wunderschöne Muster erzeugt.

Geben Sie Mo.js ein

Mo.js ist eine Bibliothek zum einfachen Erstellen von Bewegungsgrafiken für das Web. Es ist so konzipiert, dass das Erstellen von schönen Dingen für diejenigen, die sich nicht mit Code auskennen, einfach ist, während erfahrene Programmierer eine künstlerische Seite entdecken können, von der sie nie wussten, dass sie sie kennen. Wie der Name vermuten lässt, basiert sie auf der bekannten JavaScript-Programmiersprache, obwohl sie so implementiert ist, dass jeder die Grundlagen leicht erlernen kann.

Bevor wir weiter gehen, werfen wir einen Blick darauf, was wir heute schaffen werden:

Wir werden CodePen für das heutige Projekt verwenden, da wir damit alles in einem Browserfenster bearbeiten können. Wenn Sie möchten, können Sie stattdessen in einem Editor Ihrer Wahl arbeiten. Wenn Sie die schrittweise Anleitung überspringen möchten, finden Sie hier den vollständigen Code.

Richten Sie einen neuen Stift ein und Sie werden mit diesem Bildschirm begrüßt:

Bevor wir loslegen, müssen Sie einige Änderungen vornehmen. Klicke auf das die Einstellungen Symbol oben rechts und navigieren Sie zum Symbol JavaScript Tab.

Wir werden es benutzen Babel Wählen Sie dies als Code-Vorprozessor aus dem Dropdown-Menü aus. Babel macht JavaScript ein wenig verständlicher, zusammen mit ECMAScript 6 Was ist ES6 und was Javascript-Programmierer wissen müssen Was ES6 ist und was Javascript-Programmierer wissen müssen ES6 bezieht sich auf Version 6 der Programmiersprache ECMA Script (Javascript). Lassen Sie uns nun einige wichtige Änderungen betrachten, die ES6 in JavaScript einfügt. Weitere Unterstützung für ältere Browser. Wenn Sie nicht wissen, was das bedeutet, mach dir keine sorgen, Es wird unser Leben hier nur ein bisschen einfacher machen.

Wir müssen auch die mo.js-Bibliothek in das Projekt importieren. Tun Sie dies, indem Sie nach suchen mo.js in dem Externe Skripte / Stifte hinzufügen Eingabeaufforderung und Auswahl.

Klicken Sie mit diesen beiden Elementen an Ort und Stelle Speichern und schließen. Wir können loslegen!

Grundformen mit Mo.js

Bevor wir mit der Grafik beginnen, sollten wir etwas gegen den blendenden weißen Hintergrund im Ansichtsfenster tun. Ändern Sie die Hintergrundfarbeneigenschaft, indem Sie diesen Code in das schreiben CSS Feld.

Körper Hintergrund: rgba (11,11,11,1); 

Das Erstellen einer Form ist ein einfacher Prozess, und das Konzept dahinter bestimmt die gesamte Bibliothek. Lassen Sie uns eine Standardkreisform einrichten. Geben Sie diesen Code in das Feld ein JS Feld:

const redCirc = new mojs.Shape (isShowStart: true);

Hier haben wir eine erstellt const Wert mit dem Namen redCirc und es einem a zugeordnet neue mojs.Shape. Wenn Sie mit der Codierung völlig neu sind, achten Sie hier auf die Reihenfolge der Klammern und vergessen Sie nicht das Semikolon am Ende!

Bisher haben wir außer keine Parameter übergeben isShowStart: true, Das bedeutet, es erscheint auf dem Bildschirm, noch bevor wir ihm Bewegung zugewiesen haben. Sie werden sehen, dass ein rosa Kreis in der Mitte des Bildschirms platziert wurde:

Dieser Kreis ist die Standardeinstellung Gestalten für mo.js. Wir können diese Form leicht ändern, indem wir unserem Code eine Zeile hinzufügen:

const redCirc = new mojs.Shape (isShowStart: true, shape: 'rect');

Um einem Objekt weitere Eigenschaften hinzuzufügen, verwenden wir ein Komma, um es zu trennen. Hier haben wir ein hinzugefügt gestalten Eigenschaft, und definiert als ein 'rect'. Speichern Sie Ihren Stift, und die Standardform ändert sich stattdessen in ein Quadrat.

Dieser Prozess der Übergabe von Werten an die Gestalten Objekt ist, wie wir sie anpassen. Im Moment haben wir ein Feld, das nicht viel macht. Versuchen wir etwas zu animieren.

Grundlagen der Bewegung

Um etwas zu bekommen, das ein wenig eindrucksvoller aussieht, erstellen wir einen Kreis mit einem roten Strich und ohne Füllung.

const redCirc = new mojs.Shape (isShowStart: true, hub: 'red', strokeWidth: 5, füllen: 'none', radius: 15);

Wie Sie sehen, haben wir auch eine vergeben Breite Wert für den Strich und a Radius für den Kreis Die Dinge beginnen bereits etwas anders zu sein. Wenn Ihre Form nicht aktualisiert wird, stellen Sie sicher, dass Sie keine Kommas oder einfachen Anführungszeichen in der Umgebung verpasst haben 'rot' oder 'keiner', und stellen Sie sicher, dass Sie geklickt haben sparen oben auf der Seite.

Fügen wir dazu eine Animation hinzu. Im obigen Beispiel wird dieser rote Kreis angezeigt, in den der Benutzer klickt, bevor er nach außen ausgeblendet wird. Eine Möglichkeit, dies zu erreichen, besteht darin, den Radius und die Deckkraft im Laufe der Zeit zu ändern. Lassen Sie uns den Code ändern:

 Radius: 15:30, Deckkraft: 1: 0, Dauer: 1000

Durch Ändern der Radius Eigenschaft und Hinzufügen Opazität und Dauer Eigenschaften haben wir die Formanweisungen gegeben, die im Laufe der Zeit ausgeführt werden sollen. Diese sind Delta Objekte, die Start- und Endinformationen für diese Eigenschaften enthalten.

Sie werden feststellen, dass noch nichts passiert. Das liegt daran, dass wir das nicht hinzugefügt haben .abspielen() Funktion, um es zu sagen, unsere Anweisungen auszuführen. Fügen Sie es zwischen den Endklammern und dem Semikolon hinzu, und Sie sollten sehen, wie Ihr Kreis lebendig wird.

Jetzt kommen wir irgendwo hin, aber um es wirklich besonders zu machen, wollen wir uns ein paar tiefergehende Möglichkeiten ansehen.

Bestellen und Erleichtern mit Mo.js

Sobald der Kreis erscheint, wird er sofort ausgeblendet. Das wird perfekt funktionieren, aber es wäre schön, wenn Sie mehr Kontrolle hätten.

Das können wir mit der .dann() Funktion. Anstatt den Radius oder die Deckkraft zu ändern, lassen wir die Form an ihrem Anfang stehen, bevor sie sich nach einer bestimmten Zeit ändert.

const redCirc = new mojs.Shape (isShowStart: true, hub: 'red', strokeWidth: 5, füllen: 'none', radius: 15, duration: 1000). dann (// erledige hier mehr) .abspielen();

Nun erscheint unsere Form mit den Werten, die wir ihr zugewiesen haben. Warten Sie 1000 ms, bevor Sie etwas tun, das wir in das Feld einfügen .dann() Funktion. Fügen wir einige Anweisungen zwischen den Klammern hinzu:

 // mach mehr hier StrichBreite: 0, Maßstab: 1: 2, Erleichterung: 'sin.in', Dauer: 500

Dieser Code führt einen weiteren wichtigen Teil der Animation ein. Wo haben wir die unterrichtet Rahmen Um von 1 auf 2 zu wechseln, haben wir auch eine Sinuskurve mit Locking zugewiesen sin.in. Mo.js verfügt über eine Reihe von Beschleunigungskurven, mit denen fortgeschrittene Benutzer ihre eigenen hinzufügen können. In diesem Fall erfolgt die zeitliche Skalierung gemäß einer nach oben gekrümmten Sinuswelle.

Sehen Sie sich easings.net an, um verschiedene Kurven visuell ablaufen zu lassen. Kombinieren Sie dies mit dem Strichbreite Wenn Sie die eingestellte Dauer auf 0 ändern, haben Sie einen wesentlich dynamischeren Effekt.

Formen sind die Basis für alles in Mo.js, aber sie sind nur der Anfang der Geschichte. Lass uns sehen Platzt.

Mit Potenzial in Mo.js platzen

EIN Platzen in Mo.js ist eine Sammlung von Formen, die von einem zentralen Punkt ausgehen. Wir werden diese zur Grundlage unserer fertigen Animation machen. Sie können einen Standard-Burst auf dieselbe Weise wie eine Form aufrufen. Lassen Sie uns Funken machen:

const sparks = new mojs.Burst (). play ();

Sie können sehen, indem Sie einfach eine leere hinzufügen Platzen Objekt und sagen Sie es zu spielen, wir erhalten den Standard-Burst-Effekt. Wir können die Größe und Rotation des Bursts beeinflussen, indem wir ihn animieren Radius und Winkel Eigenschaften:

const sparks = new mojs.Burst (radius: 0:30, Erleichterung: 'cubic.out', Winkel: 0: 90, Erleichterung: 'quad.out',). play ();

Wir haben bereits einen eigenen Radius und Spin zu unserem Burst hinzugefügt:

Damit sie mehr wie Funken aussehen, ändern wir die Formen, die der Burst verwendet, und wie viele Formen der Burst erzeugt. Sie tun dies, indem Sie die Eigenschaften der Kinder des Bursts ansprechen.

const funken = neue mojs.Burst (radius: 0:30, Erleichterung: 'cubic.out', Winkel: 0: 90, Erleichterung: 'quad.out', Anzahl: 50, Kinder: Form: 'Kreuz', Strich: 'Weiß', Punkte: 12, Radius: 10, Füllung: 'Keine', Winkel: 0: 360, Dauer: 300). play ();

Sie werden feststellen, dass die untergeordneten Eigenschaften mit den Formeigenschaften identisch sind, mit denen wir bereits gearbeitet haben. Dieses Mal haben wir ein Kreuz als Form gewählt. Alle 50 dieser Formen besitzen jetzt dieselben Eigenschaften. Es fängt an, ziemlich gut auszusehen! Dies ist das erste, was der Benutzer sieht, wenn er mit der Maus klickt.

Aber wir können schon sehen, dass der rote Strich unseres Anfangs redCirc Form bleibt zu lange herum. Ändern Sie die Dauer so, dass beide Animationen zusammenpassen. Es sollte am Ende so aussehen:

Wir sind noch lange nicht fertig mit unserer Animation, aber nehmen wir uns einen Moment Zeit, um sie benutzerreaktiv zu machen.

Das Hauptereignis

Wir werden einen Event-Handler verwenden, um unsere Animationen an der Stelle auszulösen, auf die der Benutzer klickt. Fügen Sie am Ende Ihres Codeblocks Folgendes hinzu:

document.addEventListener ('click', Funktion (e) );

Dieser Codeteil lauscht auf Mausklicks und führt alle Anweisungen aus, die in den Klammern stehen. Wir können unsere hinzufügen redCirc und Funken Objekte an diesen Listener.

document.addEventListener ('click', Funktion (e) redCirc .tune (x: e.pageX, y: e.pageY,) .replay (); sparks .tune (x: e.pageX, y: e.pageY) .replay (););

Die zwei Funktionen, die wir hier nennen, sind .Melodie() und .Wiederholung(). Die Wiedergabefunktion ähnelt der Wiedergabefunktion, legt jedoch fest, dass die Animation bei jedem Klicken erneut von vorne beginnen sollte.

Das Melodie Die Funktion übergibt Werte an unser Objekt, damit Sie die Dinge ändern können, wenn sie ausgelöst werden. In diesem Fall übergeben wir die Seitenkoordinaten, an denen die Maus geklickt wurde, und weisen die x- und y-Position unserer Animation entsprechend zu. Speichern Sie Ihren Code und klicken Sie auf den Bildschirm. Sie werden ein paar Probleme feststellen.

Erstens wird unsere erste Animation immer noch in der Mitte des Bildschirms angezeigt, auch wenn der Benutzer nichts klickt. Zweitens wird die Animation nicht am Mauspunkt ausgelöst, sondern nach unten und rechts versetzt. Wir können beide Dinge leicht beheben.

Unsere Form und Burst haben die .abspielen() am Ende ihrer jeweiligen Codeblöcke. Wir brauchen das nicht mehr als .Wiederholung() wird im Eventhandler aufgerufen. Sie können .play () aus beiden Codeblöcken entfernen. Aus dem gleichen Grund können Sie entfernen isShowStart: true auch, da wir es nicht mehr brauchen, um es am Start zu zeigen.

Um das Positionierungsproblem zu beheben, müssen wir Positionswerte für unsere Objekte festlegen. Wie Sie sich an unsere erste Form erinnern werden, setzt mo.js sie standardmäßig in die Mitte der Seite. Wenn diese Werte mit der Mausposition kombiniert werden, wird der Versatz erstellt. Um diesen Versatz loszuwerden, fügen Sie diese beiden Zeilen einfach zu redCirc und Funken Objekte:

links: 0, oben: 0,

Die einzigen Positionswerte, die unsere Objekte annehmen, sind die vom Ereignis-Listener übergebenen Mauspositionswerte. Jetzt sollten die Dinge viel besser funktionieren.

Durch das Hinzufügen von Objekten zum Ereignishandler werden alle unsere Animationen ausgelöst Denken Sie daran, von nun an jedes neue Objekt hinzuzufügen! Nachdem wir nun die Grundlagen so erstellt haben, wie wir sie wollen, wollen wir einige größere und hellere Bursts hinzufügen.

Psychedelisch werden

Beginnen wir mit einigen sich drehenden Dreiecken. Die Idee hier war, einen hypnotischen Stroboskopeffekt zu erzeugen, und das Aufstellen dieses Effekts ist eigentlich ziemlich einfach. Fügen Sie einen weiteren Burst mit diesen Parametern hinzu:

const triangle = new mojs.Burst (radius: 0: 1000, Erleichterung: 'cubic.out', Winkel: 1080: 0, Erleichterung: 'quad.out', links: 0, oben: 0, count : 20, Kinder: Form: 'Polygon', Punkte: 3, Radius: 10: 100, füllen: ['Rot', 'Gelb', 'Blau', 'Grün'], Dauer: 3000) ;

Alles hier sollte jetzt ziemlich vertraut sein, obwohl es ein paar neue Punkte gibt. Sie werden feststellen, dass wir die Form nicht als Dreieck definieren, sondern a Polygon vor dem Zuweisen der Nummer von Punkte es hat 3.

Wir haben auch gegeben füllen Wenn Sie ein Array mit Farben verwenden, wird jedes fünfte Dreieck wieder rot und das Muster wird fortgesetzt. Der hohe Wert der Winkel Durch die Einstellung wird der Burst schnell genug gedreht, um seinen stroboskopischen Effekt zu erzeugen.

Wenn der Code für Sie nicht funktioniert, stellen Sie sicher, dass Sie das Dreiecksobjekt der Ereignis-Listener-Klasse wie bei den vorherigen Objekten hinzugefügt haben.

Ziemlich psychedelisch! Fügen wir einen weiteren Burst hinzu, um ihm zu folgen.

Tanzende Pentagone

Wir können etwas verwenden, das fast identisch mit unserem ist Dreiecke Objekt, um den darauffolgenden Burst zu machen. Dieser leicht modifizierte Code erzeugt bunt überlappende Sechsecke:

const pentagons = new mojs.Burst (radius: 0: 1000, Erleichterung: 'cubic.out', Winkel: 0: 720, Erleichterung: 'quad.out', links: 0, oben: 0, count : 20, Kinder: Form: 'Polygon', Radius: 1: 300, Punkte: 5, füllen: ['Lila', 'Rosa', 'Gelb', 'Grün'], Verzögerung: 500, Dauer: 3000);

Die Hauptänderung hier ist, dass wir a hinzugefügt haben verzögern von 500ms, damit der Burst erst nach den Dreiecken beginnt. Durch die Änderung einiger Werte sollte der Burst in die entgegengesetzte Richtung zu den Dreiecken gedreht werden. Bei einem zufälligen Zufall, wenn die Fünfecke auftauchen, wirken die stroboskopischen Effekte der Dreiecke so, als würden sie sich zusammen drehen.

Eine kleine Zufälligkeit

Fügen wir einen Effekt hinzu, der Zufallswerte verwendet. Erstellen Sie einen Burst mit diesen Eigenschaften:

const redSparks = new mojs.Burst (left: 0, top: 0, count: 8, radius: 150: 350, Winkel: 0:90, Erleichterung: 'cubic.out'), Kinder: shape: 'Linie', Strich: 'Rot': 'transparent', StrichBreite: 5, MaßstabX: 0,5: 0, Gradverschiebung: 'Rand (-90, 90)', Radius: 'Rand (20, 300)' , Dauer: 500, Verzögerung: 'rand (0, 150)');

Dieser Burst erzeugt Linien, die rot beginnen und zur Transparenz übergehen und im Laufe der Zeit kleiner werden. Was diese Komponente interessant macht, ist die Verwendung von Zufallswerten, um einige ihrer Eigenschaften zu bestimmen.

Das gradverschiebung gibt dem untergeordneten Objekt einen Startwinkel. Durch das Zufallsprinzip ergibt sich bei jedem Klick ein völlig anderer Burst. Zufällige Werte werden auch für die verwendet Radius und verzögern Funktionen, um den chaotischen Effekt hinzuzufügen.

Hier ist der Effekt von selbst:

Da wir hier Zufallswerte verwenden, müssen wir unserem Event-Handler eine zusätzliche Methode für das Objekt hinzufügen:

redSparks .tune (x: e.pageX, y: e.pageY) .replay () .generate ();

Das generieren() Die Funktion berechnet bei jedem Aufruf des Ereignisses neue Zufallswerte. Andernfalls würde die Form beim ersten Aufruf zufällige Werte auswählen und diese Werte für jeden nachfolgenden Aufruf verwenden. Dies würde den Effekt völlig ruinieren, also stellen Sie sicher, dass Sie dies hinzufügen!

Sie können für fast jedes Element von mo.js-Objekten Zufallswerte verwenden. Mit diesen können Sie auf einfache Weise einzigartige Animationen erstellen.

Zufälligkeit ist jedoch nicht die einzige Möglichkeit, Animationen dynamische Bewegungen hinzuzufügen. Schauen wir uns das an staffeln Funktion.

Staffelung der Linien

Um zu zeigen, wie die staffeln Funktion funktioniert, wir werden etwas wie ein Catherine-Rad machen. Erstellen Sie einen neuen Burst mit diesen Parametern:

const lines = new mojs.Burst (radius: 0: 1000, Erleichterung: 'cubic.out', Winkel: 0: 1440, Erleichterung: 'cubic.out'), links: 0, oben: 0, count : 50, Kinder: Form: 'Linie', Radius: 1: 100, Erleichterung: 'Elastik.' (10) ', Dauer: 1000);

Hier ist alles bekannt, ein Stoß erzeugt 50 Kinder, die rote oder orangefarbene Linien sind. Der Unterschied hier ist, dass wir das übergeben verzögern Eigenschaft a versetzt (10) Funktion. Dies führt zu einer Verzögerung von 10 ms zwischen der Emission jedes Kindes, wodurch es den gewünschten Spineffekt erhält.

Die Stagger-Funktion verwendet keine Zufallswerte, daher benötigen Sie keine generieren Funktion im Event-Handler diesmal. Mal sehen, was wir bis jetzt in Aktion haben:

Wir könnten hier leicht aufhören, aber wir wollen noch einen Burst hinzufügen, um dieses Projekt abzurunden.

Smart Squares

Lassen Sie uns für diesen letzten Burst etwas mit Rechtecken erstellen. Fügen Sie dieses Objekt Ihrem Code- und Ereignis-Listener hinzu:

const redSquares = new mojs.Burst (radius: 0: 1000, Beschleunigung: 'cubic.out', Winkel: 360: 0, Beschleunigung: 'quad.out'), links: 0, oben: 0, count : 20, Kinder: Form: 'rect', radiusX: 1: 1000, radiusY: 50, Punkte: 5, füllen: 'none', Strich: 'rot': 'orange', strokeWidth: 5 : 15, Verzögerung: 1000, Dauer: 3000);

Dieses Objekt fügt dem, woran wir heute schon gearbeitet haben, nichts Neues hinzu, es soll lediglich gezeigt werden, wie komplexe geometrische Muster einfach durch Code erstellt werden können.

Dies war nicht das beabsichtigte Ergebnis dieses Objekts, als es in den Testphasen dieses Tutorials erstellt wurde. Sobald der Code lief, wurde mir klar, dass ich auf etwas viel Schöneres gestoßen war, als ich es absichtlich machen konnte!

Nachdem dieses letzte Objekt hinzugefügt wurde, sind wir fertig. Lassen Sie uns das Ganze in Aktion sehen.

Mo.js: Ein leistungsfähiges Werkzeug für Webanimationen

Diese einfache Einführung in mo.js behandelt die grundlegenden Werkzeuge, die zum Erstellen schöner Animationen erforderlich sind. Die Verwendung dieser Tools kann fast alles schaffen, und für viele Aufgaben sind Webbibliotheken eine einfache Alternative zur Verwendung von Photoshop, After Effects oder anderer kostspieliger Software.

Diese Bibliothek ist nützlich für diejenigen, die sowohl in der Programmierung als auch in der Webentwicklung arbeiten. Programmierung vs. Webentwicklung: Was ist der Unterschied? Programmierung vs. Webentwicklung: Was ist der Unterschied? Sie denken vielleicht, dass Anwendungsprogrammierer und Webentwickler die gleiche Arbeit verrichten, aber das ist alles andere als die Wahrheit. Hier sind die wichtigsten Unterschiede zwischen Programmierern und Webentwicklern. Lesen Sie mehr. Die Ereignisbehandlung, die im Projekt verwendet wird, kann problemlos zum Erstellen von reaktiven Schaltflächen und Text auf Websites oder in Apps verwendet werden. Viel Spaß damit: Es gibt keine Fehler, nur glückliche Unfälle!

Erfahren Sie mehr über: JavaScript.