Hur man gör vackra kodade webbanimationer med Mo.JS

Om du vill starta din egen webbplats , vackra animationer kan få det att lysa. Det finns flera sätt att uppnå detta, helt enkelt att göra en animerad GIF från en bit av befintlig film, till att lära sig att göra din egen från grunden med programvara som Blandare eller Maya .

Det finns också bibliotek för att skapa animationer programmatiskt. Historiskt sett använde webbkodare jQuery för att skapa enkla animationer, men när webben utvecklades och HTML5 blev den nya standarden, nya alternativ dök upp. CSS -bibliotek för animering blev otroligt kraftfulla under det nya ramverket, tillsammans med JavaScript -bibliotek utformade speciellt för vektoranimering i webbläsaren.

---

---

Idag kommer vi att titta på mo.js, en av de nyare barnen på blocket för att skapa vackra bilder från kod. Vi kommer att täcka några grundläggande funktioner innan vi skapar en användarreaktiv animationsserie som skapar vackra mönster.

Ange Mo.js

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

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

Vi kommer att använda CodePen för dagens projekt, eftersom det tillåter oss att arbeta med allt i samma webbläsarfönster. Om du föredrar det kan du arbeta i en valfri redaktör istället. Om du vill hoppa över steg -för -steg -handledningen är hela koden tillgänglig här.

Ställ in en ny penna så hälsas du välkommen med den här skärmen:

---

---

Innan vi sätter igång måste du göra ett par ändringar. Klicka på inställningar ikonen längst upp till höger och navigera till JavaScript flik.

Vi kommer att använda Babel som vår kodförbehandlare, så välj detta från rullgardinsmenyn. Babel gör JavaScript lite lättare att förstå, tillsammans med tillhandahållande ECMAScript 6 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 lättare här.

---

---

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

Med dessa två saker på plats klickar du på 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 åt ​​den bländande vita bakgrunden i visningsfönstret. Ändra bakgrundsfärgsegenskapen genom att skriva den här koden i CSS bröd.

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

Att skapa en form är en enkel process, och konceptet bakom det driver hela biblioteket. Låt oss skapa en standardcirkelform. Ange denna kod i JS bröd:

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

Här har vi skapat en konst värde med namnet redCirc och tilldelade den till a ny mojs.Shape . Om du är helt ny på kodning, var uppmärksam på parentesordningen här och glöm inte semikolonet i slutet!

Hittills har vi klarat inga parametrar utom isShowStart: true , vilket betyder att den kommer att visas på skärmen redan innan vi har tilldelat den någon rörelse. Du kommer att se att den har placerat en rosa cirkel i mitten av skärmen:

Denna cirkel ä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 = new mojs.Shape({
isShowStart:true,
shape:'rect'
});

För att lägga till fler egenskaper till ett objekt använder vi ett komma för att separera det. Här har vi lagt till en form egendom, och definierade det som en 'rätt' . Spara din penna, så ser du standardformen i stället i en ruta.

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

Grunderna i rörelse

För att få något som ser lite mer imponerande ut, låt oss sätta upp en cirkel, med ett rött streck runt det och ingen fyllning inuti.

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

Som du kan se har vi också tilldelat en bredd värde för slaget, 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 enstaka citattecken runt 'netto' eller 'ingen' , och se till att du har klickat spara överst på sidan.

Låt oss lägga till en animation till detta. I exemplet ovan visas den röda cirkeln där användaren klickar innan den bleknar utåt. Ett sätt vi kan få detta att hända är genom att ändra radie och opacitet över tid. Låt oss ändra koden:

radius: {15:30},
opacity: {1:0},
duration:1000

Genom att ändra radie egendom och lägga till opacitet och varaktighet egenskaper har vi gett formen instruktioner att utföra över tiden. Dessa är Delta objekt, med start- och slutinformation för dessa egenskaper.

Du kommer att märka att inget händer än. Detta beror på att vi inte har lagt till .spela() funktion för att säga att den ska utföra våra instruktioner. Lägg till det mellan ändfästena och semikolon, så ska du se din cirkel komma till liv.

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

Beställa och underlätta med Mo.js

Just nu, så snart cirkeln visas börjar den blekna. Detta kommer att fungera perfekt, men det vore trevligt att ha lite mer kontroll.

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

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

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

//do more stuff here
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 för att ändra från 1 till 2, har vi också tilldelat sinusvågbaserade lättnader med synd. i . Mo.js har en mängd olika lättnadskurvor inbyggda, med möjlighet för avancerade användare att lägga till sina egna. I det här fallet sker skalan över tiden enligt en sinusvåg som böjer uppåt.

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

Former är grunden för allt i Mo.js, men de är bara början på historien. Låt oss titta på Bursts .

Spricker med potential i Mo.js

TILL Brista i Mo.js är en samling former som härrör från en central punkt. Vi kommer att göra dessa till grunden för vår färdiga animering. Du kan ringa en standard burst på samma sätt som du gör en form. Låt oss göra några gnistor:

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

Du kan se, bara genom att lägga till en tom Brista objektet och säger till det att spela, får vi standard burst -effekten. Vi kan påverka burstens storlek och rotation genom att animera dess radie och vinkel egenskaper:

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

Redan har vi lagt till en anpassad radie och snurr till vår burst:

För att få dem att se mer ut som gnistor, låt oss ändra formerna som burst 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'},
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();

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

Redan om vi kan se det röda strecket i vår initial redCirc formen håller sig för länge. Prova att ändra dess varaktighet så att båda animationerna passar ihop. Det borde sluta se ut så här:

Vi är långt ifrån färdiga med vår animering, men låt oss ta ett ögonblick för att göra den användarreaktiv.

Main Event

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

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

Denna kod lyssnar efter musklick och utför alla instruktioner som finns inom parentes för oss. Vi kan lägga till vår redCirc och gnistor föremål för den här lyssnaren.

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

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

De ställa in funktion överför värden till vårt objekt så att du kan ändra saker när det utlöses. I det här fallet skickar vi in ​​sidkoordinaterna där musen klickades och tilldelar x- och y -positionen för vår animation i enlighet därmed. Spara din kod och försök klicka på skärmen. Du kommer att märka ett par problem.

För det första visas vår första animering fortfarande i mitten av skärmen, även om användaren inte klickar på någonting. För det andra utlöses inte animationen vid muspunkten, utan förskjuts nedåt och till höger. Vi kan enkelt fixa båda dessa saker.

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

För att åtgärda 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 som standard i mitten av sidan. När dessa värden kombineras med muspositionen skapar det förskjutningen. För att bli av med denna förskjutning, lägg helt enkelt till dessa rader till båda redCirc och gnistor objekt:

left: 0,
top: 0,

Nu är de enda positionsvärdena våra objekt tar på muspositionsvärdena som skickas in av evenemangslyssnaren. Nu borde saker fungera mycket bättre.

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

Blir psykedelisk

Låt oss börja med några snurrande trianglar. Tanken här var att skapa en hypnotisk stroboskopisk effekt, och det är faktiskt ganska enkelt att ställa in det. Lägg till ytterligare en burst med dessa parametrar:

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
}
});

Allt här borde vara ganska bekant nu, även om det finns ett par nya punkter. Du kommer att märka att istället för att definiera formen som en triangel, har vi kallat det för a polygon innan du tilldelar antalet poäng den har som 3.

Vi har också gett fylla fungerar en rad färger att arbeta med, var femte triangel återgår till rött och mönstret fortsätter. Det höga värdet på vinkel inställningen får skuret att snurra tillräckligt snabbt för att producera sin stroboskopiska effekt.

Om koden inte fungerar för dig, se till att du har lagt till trianglarobjektet till händelselyssarklassen som vi gjorde med de tidigare objekten.

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

Dansande pentagoner

Vi kan använda något som är nästan identiskt med vårt trianglar objekt för att göra den burst som följer den. Denna något modifierade kod producerar färgglada överlappande snurrande hexagoner:

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
}
});

Den viktigaste förändringen här är att vi har lagt till en dröjsmål på 500 ms, så att utbrottet inte börjar förrän efter trianglarna. Genom att ändra några värden var tanken här att få skuret att snurra i motsatt riktning mot trianglarna. Av en lycklig olycka, när femkanterna dyker upp, får trianglarnas stroboskopiska effekt att se ut som att de snurrar ihop.

Lite slumpmässighet

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

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)',
}
});

Denna burst kommer att skapa linjer som börjar röda och bleknar till transparens, krymper över tiden. Det som gör denna komponent intressant är att slumpmässiga värden används för att bestämma några av dess egenskaper.

De degreeShift ger barnobjektet en startvinkel. Genom att randomisera detta ger det en helt annan skur på varje klick. Slumpmässiga värden används också för radie och dröjsmål funktioner för att lägga till den kaotiska effekten.

Här är effekten i sig:

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 })
.replay()
.generate();

De generera() funktion beräknar nya slumpmässiga värden varje gång händelsen anropas. Utan detta skulle formen välja slumpmässiga värden första gången den anropas och fortsätta använda dessa värden för varje efterföljande samtal. Detta skulle förstöra effekten helt, 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.

bärbar dator ansluten till wifi men ingen internetuppkoppling Windows 10

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

Svindlande linjer

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

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
}
});

Allt här är bekant nu, ett skott skapar 50 barn som är röda eller orange linjer. Skillnaden här är att vi klarar dröjsmål egendom a vackla (10) fungera. Detta lägger till 10 ms fördröjning mellan varje barns utsläpp, vilket ger det den snurrande effekt vi letar efter.

Stagger -funktionen använder inga 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:

Vi skulle enkelt kunna sluta här, men låt oss bara lägga till ytterligare en burst för att avrunda detta projekt.

Smarta rutor

För denna sista burst, låt oss göra något med rektanglar. Lägg till det här objektet i din kod och händelse lyssnare:

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
}
});

Detta objekt tillför inget nytt till det vi redan har arbetat med idag, det ingår bara för att visa hur komplexa geometriska mönster enkelt kan skapas genom kod.

Detta var inte det avsedda resultatet av detta objekt när det skapades i testfasen för att skriva denna handledning. När koden kördes blev det klart att jag hade stött på något mycket vackrare än jag kunde ha gjort med flit!

Med detta sista objekt tillagt är vi klara. Låt oss se det hela i aktion.

Mo.js: Ett kraftfullt verktyg för webbanimationer

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

Detta bibliotek är användbart för dem som arbetar med både programmering och webbutveckling, 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!

Dela med sig Dela med sig Tweet E-post Är det värt att uppgradera till Windows 11?

Windows har gjorts om. Men är det tillräckligt för att övertyga dig om att byta från Windows 10 till Windows 11?

Läs Nästa Relaterade ämnen

• Programmering
• JavaScript

Om författaren Ian Buckley(216 artiklar publicerade)

Ian Buckley är frilansjournalist, musiker, artist och videoproducent som bor i Berlin, Tyskland. När han inte skriver eller på scenen, pysslar han med DIY -elektronik eller kod i hopp om att bli en galet forskare.

Mer från Ian Buckley

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera