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

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

Wenn Sie suchen starte deine eigene Website , schön aussehende Animationen können es zum Leuchten bringen. Es gibt mehrere Möglichkeiten, dies zu erreichen, von einfach ein animiertes GIF erstellen von einem vorhandenen Film bis hin zum Lernen, mit Software wie von Grund auf einen eigenen Film zu machen Mixer oder Maya .





Es stehen auch Bibliotheken zur Verfügung, um Animationen programmgesteuert zu erstellen. In der Vergangenheit verwendeten Webcoder jQuery, um einfache Animationen zu erstellen, aber als sich das Web entwickelte und HTML5 wurde der neue Standard, neue Optionen erschienen. CSS-Bibliotheken für Animationen wurden unter dem neuen Framework unglaublich leistungsfähig, zusammen mit JavaScript-Bibliotheken, die speziell für Vektoranimationen im Browser entwickelt wurden.



Heute werden wir uns mo.js ansehen, eines der neueren Kinder auf dem Block, um schöne Bilder aus Code zu erstellen. Wir werden einige grundlegende Funktionen behandeln, bevor wir eine benutzerreaktive Animationsserie erstellen, die schöne Muster erstellt.





Geben Sie Mo.js ein

Mo.js ist eine Bibliothek zum einfachen Erstellen von animierten Grafiken für das Web. Es wurde entwickelt, um das Erstellen schöner Dinge für diejenigen zu vereinfachen, die nicht allzu viel mit Code zu tun haben, während erfahrene Programmierer eine künstlerische Seite entdecken können, von der sie nie wussten, dass sie sie hatte. Wie der Name schon sagt, basiert es auf der beliebten Programmiersprache JavaScript, ist jedoch so implementiert, dass jeder die Grundlagen leicht erlernen kann.

Bevor wir fortfahren, werfen wir einen Blick auf das, was wir heute erstellen werden:



Wir werden verwenden CodePen für das heutige Projekt, da wir damit alles im selben Browserfenster bearbeiten können. Wenn Sie möchten, können Sie in einem Editor deiner Wahl stattdessen. Wenn Sie das Schritt-für-Schritt-Tutorial überspringen möchten, ist der vollständige Code hier verfügbar.

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



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

Wir werden verwenden Babel als unseren Code-Präprozessor, also wählen Sie diesen aus dem Dropdown-Menü aus. Babel macht JavaScript etwas verständlicher und bietet ECMAScript 6 Unterstützung für ältere Browser. Wenn Sie nicht wissen, was das bedeutet, mach dir keine Sorge , es wird unser Leben hier nur ein wenig 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 Texteingabeaufforderung, und wählen Sie sie aus.

Wenn diese beiden Dinge vorhanden sind, klicken Sie auf Speichern und schließen . Wir sind startklar!

Grundformen mit Mo.js

Bevor wir mit den Grafiken beginnen, lassen Sie uns etwas gegen den blendend weißen Hintergrund im Ansichtsbereich unternehmen. Ändern Sie die Eigenschaft der Hintergrundfarbe, indem Sie diesen Code in das schreiben CSS Brot.

body{
background: rgba(11,11,11,1);
}

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

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

Hier haben wir ein erstellt const Wert mit dem Namen rotCirc und ordnete es a . zu neue mojs.Form . Wenn Sie noch völlig neu in der Codierung sind, achten Sie hier auf die Klammerreihenfolge und vergessen Sie das Semikolon am Ende nicht!

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

Dieser Kreis ist die Standardeinstellung Form 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 a . hinzugefügt Form Eigenschaft und definierte sie als a 'recht' . Speichern Sie Ihren Stift, und Sie sehen, dass sich die Standardform stattdessen in ein Quadrat ändert.

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

Grundlagen der Bewegung

Um etwas beeindruckenderes zu erhalten, erstellen wir einen Kreis mit einem roten Strich um ihn herum und ohne Füllung darin.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});

Wie Sie sehen, haben wir auch a Breite Wert zum Hub und a Radius für den Kreis. Die Dinge sehen bereits ein wenig anders aus. Wenn Ihre Form nicht aktualisiert wird, stellen Sie sicher, dass Sie keine Kommas oder einfache Anführungszeichen vergessen haben 'Netz' oder 'keiner' , und vergewissern Sie sich, dass Sie geklickt haben speichern oben auf der Seite.

Fügen wir dazu eine Animation hinzu. Im obigen Beispiel erscheint dieser rote Kreis dort, wo 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},
opacity: {1:0},
duration:1000

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

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

Jetzt kommen wir an etwas, aber um es wirklich besonders zu machen, schauen wir uns ein paar tiefergehende Möglichkeiten an.

Bestellen und erleichtern mit Mo.js

Gerade jetzt, sobald der Kreis erscheint, beginnt er auszublenden. Dies funktioniert einwandfrei, aber es wäre schön, ein wenig mehr Kontrolle zu haben.

Wir können dies mit der .dann() Funktion. Anstatt unseren Radius oder die Deckkraft zu ändern, lassen Sie unsere Form dort bleiben, wo sie beginnt, bevor wir uns nach einer bestimmten Zeit ändern.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

Jetzt erscheint unsere Form mit den Werten, die wir ihr zugewiesen haben, warten Sie 1000 ms, bevor Sie alles ausführen, was wir in die .dann() Funktion. Fügen wir einige Anweisungen zwischen den Klammern hinzu:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

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

Für einen visuellen Überblick über verschiedene Kurven, schauen Sie sich an easings.net . Kombinieren Sie dies mit dem Strichbreite während der eingestellten Dauer auf 0 zu ändern, und Sie haben einen viel dynamischeren verschwindenden Effekt.

Formen sind die Grundlage für alles in Mo.js, aber sie sind nur der Anfang der Geschichte. Schauen wir uns an Bursts .

Voller Potenzial in Mo.js

ZU Platzen in Mo.js ist eine Sammlung von Formen, die von einem zentralen Punkt ausgehen. Diese werden wir zur Grundlage unserer fertigen Animation machen. Sie können einen Standardburst genauso aufrufen wie eine Form. Lass uns ein paar Funken machen:

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

Sie können sehen, indem Sie einfach ein leeres hinzufügen Platzen Objekt und sagen ihm, dass es abgespielt werden soll, erhalten wir den Standard-Burst-Effekt. Wir können die Größe und Rotation des Bursts beeinflussen, indem wir seine Radius und Winkel Eigenschaften:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

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

Damit sie eher 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 untergeordneten Elemente des Bursts ansprechen.

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();

Sie werden feststellen, dass die untergeordneten Eigenschaften den Formeigenschaften entsprechen, mit denen wir bereits gearbeitet haben. Als Form haben wir diesmal ein Kreuz gewählt. Alle 50 dieser Formen haben jetzt die gleichen Eigenschaften. Es fängt an, ganz gut auszusehen! Dies ist das erste, was der Benutzer sieht, wenn er mit der Maus klickt.

Obwohl wir schon sehen können, dass der rote Strich unserer Initiale rotCirc Form bleibt zu lange. Versuchen Sie, die Dauer so zu ändern, dass beide Animationen zusammenpassen. Es sollte am Ende ungefähr so ​​aussehen:

Wir sind mit unserer Animation noch lange nicht fertig, 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 Position auszulösen, auf die der Benutzer klickt. Fügen Sie am Ende Ihres Codeblocks Folgendes hinzu:

document.addEventListener( 'click', function(e) {
});

Dieser Code lauscht auf Mausklicks und führt alle Anweisungen in den Klammern für uns aus. Wir können unsere hinzufügen rotCirc und Funken Objekte für diesen Listener.

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

Die beiden Funktionen, die wir hier nennen, sind .Melodie() und .Wiederholung() . Die Replay-Funktion ähnelt der Play-Funktion, legt jedoch fest, dass die Animation bei jedem Klick von vorne beginnen soll.

Die Melodie Funktion übergibt Werte an unser Objekt, damit Sie Dinge ändern können, wenn sie ausgelöst wird. In diesem Fall übergeben wir die Seitenkoordinaten, auf die mit der 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 bemerken.

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

Unsere Form und unser Platz haben die .abspielen() am Ende ihrer jeweiligen Codeblöcke. Wir brauchen das nicht mehr, da .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 von unserem allerersten Shape erinnern werden, platziert mo.js sie standardmäßig in der Mitte der Seite. Wenn diese Werte mit der Mausposition kombiniert werden, wird der Offset erstellt. Um diesen Offset loszuwerden, fügen Sie einfach diese Zeilen zu beiden hinzu rotCirc und Funken Objekte:

left: 0,
top: 0,

Die einzigen Positionswerte, die unsere Objekte jetzt annehmen, sind die Mauspositionswerte, die vom Ereignis-Listener übergeben werden. Jetzt sollte es viel besser funktionieren.

Durch diesen Vorgang des Hinzufügens von Objekten zum Ereignishandler werden alle unsere Animationen ausgelöst Denken Sie daran, von nun an jedes neue Objekt hinzuzufügen! Jetzt, da wir die Grundlagen haben, die so funktionieren, wie wir es wollen, fügen wir einige größere und hellere Bursts hinzu.

Psychedelisch werden

Beginnen wir mit einigen sich drehenden Dreiecken. Die Idee hier war, einen hypnotischen Stroboskop-Effekt zu erzeugen, und die Einrichtung ist eigentlich ganz einfach. Fügen Sie einen weiteren Burst mit diesen Parametern hinzu:

const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});

Alles hier sollte jetzt ziemlich bekannt sein, obwohl es ein paar neue Punkte gibt. Sie werden feststellen, dass wir die Form nicht als Dreieck definieren, sondern als a . bezeichnet haben Polygon bevor Sie die Anzahl der Punkte es hat als 3.

Wir haben auch gegeben füllen Funktion eine Reihe von Farben, mit denen gearbeitet werden kann, wird jedes fünfte Dreieck wieder rot und das Muster wird fortgesetzt. Der hohe Wert der Winkel Einstellung macht den Burst schnell genug, um seinen stroboskopischen Effekt zu erzeugen.

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

Ziemlich psychedelisch! Lassen Sie uns einen weiteren Burst hinzufügen, um ihm zu folgen.

Tanzende Fünfecke

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

const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});

Die wichtigste Änderung hier ist, dass wir a . hinzugefügt haben verzögern von 500ms, damit der Burst erst nach den Dreiecken beginnt. Durch Ändern einiger Werte war die Idee hier, den Burst in die entgegengesetzte Richtung zu den Dreiecken drehen zu lassen. Durch einen glücklichen Zufall lässt der stroboskopische Effekt der Dreiecke, wenn die Fünfecke erscheinen, den Eindruck erwecken, als würden sie sich ineinander drehen.

Ein bisschen Zufall

Fügen wir einen Effekt hinzu, der zufällige Werte verwendet. Erstellen Sie einen Burst mit diesen Eigenschaften:

const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});

Dieser Burst erzeugt Linien, die rot beginnen und zu Transparenz verblassen und im Laufe der Zeit schrumpfen. Das Interessante an dieser Komponente ist, dass Zufallswerte verwendet werden, um einige ihrer Eigenschaften zu bestimmen.

Die GradShift gibt dem Kindobjekt einen Startwinkel. Durch die Zufallsauswahl ergibt sich bei jedem Klick ein ganz anderer Burst. Zufallswerte werden auch für die verwendet Radius und verzögern Funktionen, um den chaotischen Effekt zu verstärken.

Hier ist der Effekt an sich:

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

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

Die generieren() berechnet jedes Mal, wenn das Ereignis aufgerufen wird, neue Zufallswerte. Andernfalls würde die Form beim ersten Aufruf zufällige Werte auswählen und diese Werte für jeden nachfolgenden Aufruf weiter verwenden. Dies würde den Effekt total ruinieren, also stellen Sie sicher, dass Sie dies hinzufügen!

Sie können für fast jedes Element von mo.js-Objekten Zufallswerte verwenden, und sie sind eine einfache Möglichkeit, einzigartige Animationen zu erstellen.

warum verbraucht google so viel speicher

Der Zufall ist jedoch nicht die einzige Möglichkeit, Animationen dynamische Bewegungen hinzuzufügen. Schauen wir uns die an staffeln Funktion.

Erstaunliche Linien

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

const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});

Hier ist mittlerweile alles bekannt, ein Burst erzeugt 50 Kinder, die rote oder orangefarbene Linien sind. Der Unterschied hier ist, dass wir die verzögern Eigentum taumeln(10) Funktion. Dies fügt 10 ms Verzögerung zwischen der Emission jedes Kindes hinzu und gibt ihm den Dreheffekt, den wir suchen.

Die Staffelungsfunktion verwendet keine Zufallswerte, Sie benötigen also kein generieren Funktion im Event-Handler diesmal. Sehen wir uns alles an, was wir bisher in Aktion haben:

Wir könnten hier leicht aufhören, aber fügen wir einfach einen weiteren Stoß hinzu, um dieses Projekt abzurunden.

Intelligente Quadrate

Für diesen letzten Burst machen wir etwas mit Rechtecken. Fügen Sie dieses Objekt zu Ihrem Code- und Ereignis-Listener hinzu:

const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});

Dieses Objekt fügt dem, an dem wir bereits gearbeitet haben, nichts Neues hinzu, es ist lediglich enthalten, um zu zeigen, wie komplexe geometrische Muster einfach durch Code erstellt werden können.

Dies war nicht das beabsichtigte Ergebnis dieses Objekts, als es in den Testphasen zum Schreiben dieses Tutorials erstellt wurde. Als der Code lief, wurde mir klar, dass ich auf etwas viel Schöneres gestoßen war, als ich absichtlich hätte machen können!

Mit diesem letzten hinzugefügten Objekt sind wir fertig. Sehen wir uns das Ganze in Aktion an.

Mo.js: Ein leistungsstarkes Tool für Web-Animationen

Diese einfache Einführung in mo.js behandelt die grundlegenden Tools, die zum Erstellen schöner Animationen erforderlich sind. Die Art und Weise, wie diese Tools verwendet werden, kann fast alles erstellen, und für viele Aufgaben sind Webbibliotheken eine einfache Alternative zur Verwendung Photoshop , After Effects oder andere teure Software.

Diese Bibliothek ist nützlich für diejenigen, die sowohl in der Programmierung als auch in der Webentwicklung arbeiten. Die im Projekt verwendete Ereignisbehandlung kann problemlos zum Erstellen von reaktiven Schaltflächen und Texten auf Websites oder in Apps verwendet werden. Viel Spaß damit: Es gibt keine Fehler, nur glückliche Unfälle!

Teilen Teilen Tweet Email Lohnt sich ein Upgrade auf Windows 11?

Windows wurde neu gestaltet. Aber reicht das aus, um Sie davon zu überzeugen, von Windows 10 auf Windows 11 umzusteigen?

Weiter lesen Verwandte Themen
  • Programmierung
  • JavaScript
Über den Autor Ian Buckley(216 veröffentlichte Artikel)

Ian Buckley lebt als freiberuflicher Journalist, Musiker, Performer und Videoproduzent in Berlin. Wenn er nicht gerade schreibt oder auf der Bühne steht, bastelt er an DIY-Elektronik oder Code, in der Hoffnung, ein verrückter Wissenschaftler zu werden.

Mehr von Ian Buckley

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren