Hur man gör vackra kodade webb animeringar med Mo.JS

Om du letar efter att starta din egen hemsida kan vackra, snygga animeringar göra det klart. Det finns flera sätt att uppnå detta, från att helt enkelt skapa en animerad GIF från en bit av befintlig film, för att lära sig att göra din egen från början med programvara som Blender eller Maya.

Det finns också bibliotek tillgängliga för att skapa animeringar programmatiskt. Historiskt sett använde webkodare jQuery för att skapa enkla animationer, men när webben utvecklades och HTML5 blev den nya standarden såg färska alternativ. CSS-bibliotek för animering blev oerhört kraftfull under den nya ramen, tillsammans med JavaScript-biblioteken som är utformade speciellt för vektoranimering i webbläsaren.

Idag ser vi på mo.js, en av de nyare barnen på kvarteret för att skapa vacker bild från koden. Vi täcker några grundläggande funktioner innan du skapar en användarreaktiv animationsserie som skapar vackra mönster.

Ange Mo.js

Mo.js är ett bibliotek för att enkelt skapa rörelsesgrafik för webben. Det är utformat för att göra det enkelt att skapa vackra saker för dem som inte är för kodiga, samtidigt som veteranprogrammerare kan upptäcka en konstnärlig sida som de aldrig visste att de hade. Som namnet antyder bygger den på det populära JavaScript-programmeringsspråket, även om det är implementerat på så sätt att alla kan enkelt hämta grunderna.

Innan vi går längre, låt oss ta en titt på vad vi ska skapa idag:

Vi använder CodePen för dagens projekt, eftersom det tillåter oss att arbeta på allt i samma webbläsarfönster. Om du föredrar kan du istället arbeta i en redaktör efter eget val. Om du vill hoppa över steg-för-steg-handledningen är den fullständiga koden tillgänglig här.

Ställ in en ny penna, och du kommer att hälsas med den här skärmen:

Innan vi börjar, måste du göra några ändringar. Klicka på inställningar ikonen längst upp till höger och navigera till JavaScript flik.

Vi ska använda Babel som vår kodförbehandlare, så välj det här i rullgardinsmenyn. Babel gör JavaScript lite enklare att förstå, tillsammans med att tillhandahålla ECMAScript 6 Vad är ES6 och vad Javascript-programmerare behöver veta Vad är ES6 och vad Javascript-programmerare behöver veta ES6 hänvisar till version 6 i ECMA Script (Javascript) programmeringsspråk. Låt oss nu titta på några större förändringar som ES6 ger till JavaScript. Läs mer stöd för äldre webbläsare. Om du inte vet vad det betyder, oroa dig inte, Det kommer bara att göra våra liv lite enklare här.

Vi måste också importera mo.js-biblioteket till projektet. Gör detta genom att leta efter mo.js i Lägg till externa skript / pennor textprompten och välja den.

Med dessa två saker på plats, klicka Spara och stäng. Vi är redo att komma igång!

Grundläggande former med Mo.js

Innan vi börjar med grafiken, låt oss göra något om den bländande vita bakgrunden i visningspanelen. Ändra bakgrundsfärgegenskapen genom att skriva den här koden i CSS Ruta.

kropp bakgrund: rgba (11,11,11,1); 

Att skapa en form är en enkel process, och konceptet bakom det driver hela biblioteket. Låt oss ställa in en standard cirkelform. Ange denna kod i JS Ruta:

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

Här har vi skapat en const värdet med namnet redCirc och tilldelade den till en ny mojs.Shape. Om du är helt ny att koda, var uppmärksam på fästordningen här och glöm inte semikolon i slutet!

Hittills har vi gått utan några parametrar förutom isShowStart: true, vilket betyder att det kommer att visas på skärmen redan innan vi har tilldelat det någon rörelse. Du ser att den har placerat en rosa cirkel i mitten av skärmen:

Den här cirkeln är standard Form för mo.js. Vi kan enkelt ändra denna form genom att lägga till en rad i vår kod:

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

För att lägga till fler egenskaper i ett objekt använder vi ett kommatecken för att skilja det från varandra. Här har vi lagt till en form egendom och definierade den som en 'Rect'. Spara din penna, och du kommer att se standardformen ändras till en fyrkant istället.

Denna process att överföra värden till Form Objektet är hur vi anpassar dem. Just nu har vi en torg som inte gör så mycket. Låt oss försöka animera något.

Grunderna för rörelse

För att få något som ser lite mer imponerande låt oss sätta upp en cirkel med en röd stroke runt den och ingen fylla inuti.

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

Som du kan se har vi också tilldelat en bredd värdet till stroke och a radie för cirkeln. Saker börjar redan se lite annorlunda ut. Om din form inte uppdateras, se till att du inte har missat några kommatecken eller enkla citattecken runt 'röd' eller 'ingen', och se till att du har klickat spara längst upp på sidan.

Låt oss lägga till en animering till detta. I exemplet ovan visas den här röda cirkeln där användaren klickar, innan den svävar utåt. Ett sätt vi kan få till att detta händer är att ändra radie och opacitet över tiden. Låt oss ändra koden:

 radie: 15:30, opacitet: 1: 0, varaktighet: 1000

Genom att ändra radie egendom och tillägg opacitet och varaktighet egenskaper har vi givit forminstruktionerna att genomföra över tiden. Dessa är Delta objekt som innehåller start- och slutinformation för dessa egenskaper.

Du märker att inget händer ännu. Detta beror på att vi inte har lagt till .spela() funktion för att berätta för det att vi utför våra instruktioner. Lägg till det mellan ändfästena och semikolonen, och du bör se din cirkel komma till liv.

Nu kommer vi någonstans, men för att göra det verkligen speciellt, låt oss titta på några fler djupgående möjligheter.

Beställning och avhämtning med Mo.js

Just nu, så snart cirkeln dyker upp börjar det att blekna ut. Det kommer att fungera bra, men det skulle vara trevligt att ha lite mer kontroll.

Vi kan göra detta med .sedan() fungera. Snarare än att ha vår radie eller opacitet förändras, låt oss göra vår form stanna där den börjar, innan du ändras efter en viss tid.

const redCirc = ny mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', radius: 15, duration: 1000). sedan (// gör fler saker här) .spela();

Nu kommer vår form att visas med de värden vi har tilldelat den, vänta på 1000 ms, innan vi utför någonting som vi lägger in .sedan() fungera. Låt oss lägga till några instruktioner mellan parenteserna:

 // gör fler saker här strokeWidth: 0, scale: 1: 2, easing: 'sin.in', duration: 500

Denna kod introducerar en annan viktig del av animationen. Där vi har instruerat skala att ändra från 1 till 2, har vi också tilldelats sinusvågbaserad lättnad med sin.in. Mo.js har en mängd olika lättnadskurvor inbyggda, med möjlighet för avancerade användare att lägga till egna. I detta fall sker skalan över tiden enligt en sinusvåg som krökar uppåt.

För en visuell nedgång av olika kurvor, kolla in easings.net. Kombinera detta med strokeWidth ändras till 0 över vår uppsatta varaktighet, och du har en mycket mer dynamisk försvinnande effekt.

Formerna är grunden för allt i Mo.js, men de är bara början på berättelsen. Låt oss titta på skurar.

Bursting med potential i Mo.js

en Brista i Mo.js är en samling av former som kommer från en central punkt. Vi ska göra dessa till grund för vår färdiga animering. Du kan ringa en standardbrist på samma sätt som du gör en form. Låt oss göra några gnistor:

const gnistor = nya mojs.Burst (). spela ();

Du kan se, bara genom att lägga till en tom Brista objekt och berättar att det spelas, får vi standardbristningseffekten. Vi kan påverka storleken och rotationen av bursten genom att animera dess radie och vinkel egenskaper:

const sparks = new mojs.Burst (radius: 0:30, easing: 'cubic.out', vinkel: 0: 90, easing: 'quad.out',).

Redan har vi lagt till en anpassad radie och snurrar till vår utbrott:

För att få dem att se ut som gnistor, låt oss ändra de former som bursten använder, och hur många former bursten genererar. Du gör detta genom att ta itu med egenskaperna hos burstens barn.

const sparks = new mojs.Burst (radius: 0:30, easing: 'cubic.out', vinkel: 0: 90, lättnad: 'quad.out', räkna: 50, barn: form: "kors", stroke: "vit", poäng: 12, radie: 10, fyll: 'ingen', vinkel: 0: 360, längd: 300).

Du kommer att märka att barnegenskaperna är desamma som de formegenskaper vi redan har arbetat med. Den här gången har vi valt ett kors som formen. Samtliga 50 av dessa former har nu samma egenskaper. Det börjar se ganska bra ut! Detta är det första som användaren kommer att se när de klickar på musen.

Redan även om vi kan se det röda slaget av vår första redCirc formen håller sig för lång. Försök ändra sin varaktighet så att båda animationerna passar ihop. Det borde sluta leta något så här:

Vi är långt ifrån färdiga med vår animering, men låt oss ta en stund att göra det användarreaktivt.

Main Event

Vi kommer att använda en händelsehanterare för att utlösa våra animeringar på den position som användaren klickar på. Lägg till följande i slutet av ditt kodblock:

document.addEventListener ("klicka", funktion (e) );

Den här koden lyssnar på musklick och utför vad som helst som finns i parenteserna för oss. Vi kan lägga till vår redCirc och gnistor objekt till den här lyssnaren.

document.addEventListener ("klick", funktion (e) redCirc .tune (x: e.pageX, y: e.pageY,) .play (); gnistor .tune (x: e.pageX, y: e.pageY) .play (););

De två funktionerna vi kallar här är .ställa in() och .repris(). Uppspelningsfunktionen liknar spelningsfunktionen, men den anger att animationen bör börja igen från början varje gång den klickas.

De ställa in funktionen passerar i värden till vårt objekt så att du kan ändra saker när det utlöses. I det här fallet passerar vi i sidokoordinaterna där musen klickades och tilldelade x och y-positionen för vår animering i enlighet därmed. Spara koden och försök att klicka på skärmen. Du kommer att märka några problem.

För det första visas vår första animering fortfarande mitt på skärmen, även om användaren inte klickar på någonting. För det andra utlöses inte animeringen på muspunkten, utan kompenseras och till höger. Vi kan enkelt fixa båda dessa saker.

Vår form och brast har .spela() i slutet av deras respektive kodblock. Vi behöver inte det här längre som .repris() kallas i händelsehanteraren. Du kan ta bort .play () från båda kvarteren av kod. Av samma anledning kan du ta bort isShowStart: true också, eftersom vi inte längre behöver visa det i början.

För att fixa positioneringsproblemet måste vi ange positionsvärden för våra objekt. Som du kommer ihåg från vår allra första form lägger mo.js dem i mitten av sidan som standard. När dessa värden kombineras med muspositionen skapas det förskjutningen. För att bli av med denna förskjutning, lägg bara till dessa rader till båda redCirc och gnistor objekt:

vänster: 0, topp: 0,

Nu är de enda positionvärden som våra objekt tar på sig, muspositionsvärdena som inlämnats av händelseläsenaren. Nu ska sakerna fungera mycket bättre.

Denna process med att lägga till objekt i händelsehanteraren är hur vi kommer att utlösa alla våra animeringar, så kom ihåg att lägga till allt nytt objekt till det från och med nu! Nu när vi har grunderna som fungerar hur vi vill ha dem, låt oss lägga till några större och ljusare utbrott.

Få psykedelisk

Låt oss börja med några snurrande trianglar. Tanken här var att skapa en hypnotisk stroboscopic effekt, och det är faktiskt ganska lätt att sätta upp det här. Lägg till en annan brast med dessa parametrar:

const triangles = new mojs.Burst (radius: 0: 1000, easing: 'cubic.out', vinkel: 1080: 0, easing: 'quad.out', vänster: 0, topp: 0, räkna : 20, barn: form: 'polygon', poäng: 3, radie: 10: 100, fyll: ['röd', 'gul', 'blå', 'grön'], varaktighet: 3000) ;

Allt här borde vara ganska bekant nu, men det finns några nya punkter. Du kommer att märka det snarare än att definiera formen som en triangel, vi har kallat det a polygon innan du anslår antalet poäng den har som 3.

Vi har också gett fylla funktionen en uppsättning färger att arbeta med, vart femte triangeln kommer tillbaka till rött och mönstret fortsätter. Högt värde av vinkel inställningen gör sprickhastigheten snabb nog för att producera sin stroboskopiska effekt.

Om koden inte fungerar för dig, se till att du har lagt till trianglarobjektet till händelseläsarens klass som vi gjorde med föregående objekt.

Ganska psykedelisk! Låt oss lägga till en annan brast för att följa den.

Dancing Pentagons

Vi kan använda något som är nästan identiskt med vårt trianglar anstränga sig för att göra brottet som följer den. Denna lite modifierade kod ger starkt färgade överlappande spinnande hexagoner:

const pentagons = nya mojs.Burst (rad: 0: 1000, easing: 'cubic.out', vinkel: 0: 720, lättnad: 'quad.out', vänster: 0, topp: 0, räkna : 20, barn: form: "polygon", radie: 1: 300, poäng: 5, fyll: ['lila', 'rosa', 'gul', 'grön'], fördröjning: 500, 3000);

Huvudbytet här är att vi har lagt till en fördröjning av 500ms, så att utbrottet inte börjar först efter trianglarna. Genom att ändra några värden var idén här att göra sprängningen i motsatt riktning till trianglarna. Med en lycklig olycka, när pentagonerna dyker upp, visar trippelens stroboscopic effekt att det ser ut som om de snurrar ihop.

En liten slumpmässighet

Låt oss lägga till en effekt som använder slumpmässiga värden. Skapa en brast med dessa egenskaper:

const redSparks = ny mojs.Burst (vänster: 0, topp: 0, räkning: 8, radie: 150: 350, vinkel: 0:90, lättnad: 'cubic.out', barn: "linje", streck: 'rött': 'transparent', strokevidde: 5, skalaX: 0.5: 0, gradskifte: 'rand (-90, 90)', radie: 'rand (20, 300)' , varaktighet: 500, fördröjning: 'rand (0, 150)',);

Denna utbrott kommer att skapa linjer som börjar bli röda och blekna för transparens, krympande över tiden. Vad som gör den här komponenten intressant är att slumpmässiga värden används för att bestämma några av dess egenskaper.

De degreeShift ger barnet ett föremål för startvinkel. Genom att randomisera detta ger det en helt annorlunda utbrott på varje klick. Slumpmässiga värden används också för radie och fördröjning funktioner för att lägga till den kaotiska effekten.

Här är effekten av sig själv:

Eftersom vi använder slumpmässiga värden här måste vi lägga till en extra metod för vår händelsehanterare för objektet:

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

De generera() funktionen beräknar nya slumpmässiga värden varje gång händelsen heter. Utan detta skulle formen välja slumpmässiga värden första gången den heter och fortsätta använda dessa värden för varje efterföljande samtal. Detta skulle helt förstöra effekten, så se till att du lägger till detta!

Du kan använda slumpmässiga värden för nästan alla element i mo.js-objekt, och de är ett enkelt sätt att göra unika animationer.

Slumpmässighet är inte det enda sättet att lägga till dynamiska rörelser i animationer. Låt oss titta på sprida fungera.

Svimrande linjer

För att visa upp hur sprida funktion fungerar, vi kommer att göra något lite som ett Catherine Wheel. Skapa en ny brast med dessa parametrar:

const lines = new mojs.Burst (radius: 0: 1000, easing: 'cubic.out', vinkel: 0: 1440, easing: 'cubic.out', vänster: 0, topp: 0, räkna : 50, barn: form: 'linje', radie: 1: 100, lättnad: 'elastic.out', fyll: 'ingen', stroke: ['röd', 'orange'], fördröjning: (10) ', varaktighet: 1000);

Allt här är bekant nu, en skur skapar 50 barn som är röda eller orange linjer. Skillnaden här är vi passerar fördröjning egendom a stagger (10) fungera. Detta ger 10ms fördröjning mellan utsläppet för varje barn, vilket ger den den snurrande effekten vi letar efter.

Stagger-funktionen använder inte några slumpmässiga värden, så du behöver inte a generera funktion i händelsehanteraren den här gången. Låt oss se allt vi har hittills i åtgärd:

Vi kunde enkelt stanna här, men låt oss bara lägga till en mer brast för att runda det här projektet.

Smarta kvadrater

För den här sista sprängan, låt oss göra något med rektanglar. Lägg till det här objektet i din kod- och händelselyssnare:

const redSquares = ny mojs.Burst (rad: 0: 1000, easing: 'cubic.out', vinkel: 360: 0, lättnad: 'quad.out', vänster: 0, topp: 0, räkna : 20, barn: form: 'rekt', radienX: 1: 1000, radie: 50, poäng: 5, fyll: 'ingen', stroke: 'röd': 'orange', strokevidde: 5 : 15, fördröjning: 1000, varaktighet: 3000);

Detta objekt lägger inte till något nytt för det vi redan har arbetat med idag, det ingår bara för att visa hur komplexa geometriska mönster lätt kan skapas genom kod.

Detta var inte det avsedda resultatet av det här objektet när det skapades i teststadierna för att skriva denna handledning. När koden sprang blev det klart att jag hade snubblat på något mycket vackrare än jag kunde ha gjort med syftet!

Med det här sista objektet tillagt, är vi färdiga. Låt oss se hela saken i aktion.

Mo.js: Ett kraftfullt verktyg för webb animeringar

Denna enkla introduktion till mo.js täcker de grundläggande verktygen som behövs för att skapa vackra animeringar. Hur dessa verktyg används kan skapa nästan allt, och för många uppgifter är webbbibliotek ett enkelt alternativ till att använda Photoshop, After Effects eller annan dyr programvara.

Detta bibliotek är användbart för dem som arbetar både i programmering och webbutveckling. Programmering vs Webbutveckling: Vad är skillnaden? Programmering vs Webbutveckling: Vad är skillnaden? Du kanske tror att applikationsprogrammerare och webbutvecklare gör samma jobb, men det är långt ifrån sanningen. Här är de viktigaste skillnaderna mellan programmerare och webbutvecklare. Läs mer, händelsehanteringen som används i projektet kan enkelt användas för att skapa reaktiva knappar och text på webbplatser eller i appar. Ha kul med det: det finns inga misstag, bara glada olyckor!

Utforska mer om: JavaScript.