Hvordan lage vakre kodede web animasjoner med Mo.JS

Hvis du ønsker å starte ditt eget nettsted, kan flotte, flotte animasjoner gjøre det skinnende. Det er flere måter å oppnå dette på, fra bare å lage en animert GIF fra et stykke eksisterende film, for å lære å lage din egen fra bunnen av med programvare som Blender eller Maya.

Det er også biblioteker tilgjengelig for å lage animasjoner programmatisk. Historisk sett brukte webkodere jQuery til å lage enkle animasjoner, men etter hvert som nettet utviklet seg og HTML5 ble den nye standarden, oppstod nye alternativer. CSS-biblioteker for animasjon ble utrolig kraftige under det nye rammeprogrammet, sammen med JavaScript-bibliotek designet spesielt for vektor animasjon i nettleseren.

I dag ser vi på mo.js, en av de nyere barna på blokken for å skape vakre bilder fra kode. Vi dekker noen grunnleggende funksjoner, før du lager en brukerreaktiv animasjonsserie som lager vakre mønstre.

Skriv inn Mo.js

Mo.js er et bibliotek for å lage bevegelsesgrafikk på nettet med letthet. Det er designet for å lage vakre ting enkelt for de som ikke er for kyndige, samtidig som veteranprogrammerne kan oppdage en kunstnerisk side de aldri visste at de hadde. Som navnet antyder, er det basert på det populære JavaScript-programmeringsspråket, selv om det er implementert på en slik måte at alle kan hente grunnleggende.

Før vi går videre, la oss ta en titt på hva vi skal skape i dag:

Vi bruker CodePen til dagens prosjekt, siden det gjør at vi kan jobbe med alt i samme nettleservindu. Hvis du foretrekker det, kan du i stedet arbeide i en redaktør. Hvis du vil hoppe over trinnvis opplæringen, er full koden tilgjengelig her.

Sett opp en ny penn, og du vil bli møtt med denne skjermen:

Før vi kommer i gang, må du gjøre noen endringer. Klikk på innstillinger ikon øverst til høyre, og naviger til Javascript tab.

Vi skal bruke Babel som vår kodeforprosessor, så velg dette fra rullegardinmenyen. Babel gjør JavaScript litt enklere å forstå, sammen med å gi ECMAScript 6 Hva er ES6 og hva Javascript-programmererne trenger å vite Hva er ES6 og hva Javascript-programmerer trenger å vite ES6 refererer til versjon 6 av ECMA Script (Javascript) programmeringsspråket. La oss nå se på noen store endringer som ES6 bringer til JavaScript. Les mer støtte for eldre nettlesere. Hvis du ikke vet hva det betyr, ikke bekymre deg, Det skal bare gjøre livet enklere her.

Vi må også importere mo.js biblioteket i prosjektet. Gjør dette ved å søke etter mo.js i Legg til eksterne skript / penner tekstmelding, og velg den.

Med disse to tingene på plass, klikk Lagre og lukk. Vi er klare til å komme i gang!

Grunnleggende former med Mo.js

Før vi begynner med grafikken, la oss gjøre noe med den blendende hvite bakgrunnen i visningsruden. Endre bakgrunnsfargen ved å skrive denne koden i CSS ruten.

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

Å lage en form er en enkel prosess, og konseptet bak den driver hele biblioteket. La oss sette opp en standard sirkelform. Skriv inn denne koden i JS ruten:

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

Her har vi laget en konst verdi med navnet redCirc og tilordnet det til a ny mojs.Shape. Hvis du er helt ny til koding, vær oppmerksom på brakettordren her, og ikke glem semikolonet på slutten!

Så langt har vi gått uten parametere unntatt isShowStart: true, noe som betyr at det vil vises på skjermen selv før vi har tildelt det noen bevegelse. Du vil se at den har plassert en rosa sirkel midt på skjermen:

Denne sirkelen er standard Form for mo.js. Vi kan enkelt endre denne formen ved å legge til en linje i vår kode:

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

For å legge til flere egenskaper i et objekt, bruker vi et komma for å skille det fra. Her har vi lagt til en form eiendom, og definert det som en 'Rect'. Lagre pennen, og du vil se standardformet endringer i en firkant i stedet.

Denne prosessen med å sende inn verdier til Form objektet er hvordan vi tilpasser dem. Akkurat nå har vi et torg som egentlig ikke gjør mye. La oss prøve å animere noe.

Grunnleggende om bevegelse

For å få noe som ser litt mer imponerende, la oss sette opp en sirkel, med et rødt slag rundt det og ikke fylle inn.

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

Som du ser, har vi også tildelt en bredde verdi til slag, og a radius for sirkelen. Ting begynner allerede å se litt annerledes ut. Hvis formen din ikke oppdateres, må du passe på at du ikke har gått glipp av komma eller enkelt anførselstegn rundt 'rød' eller 'ingen', og sørg for at du har klikket lagre øverst på siden.

La oss legge til en animasjon til dette. I eksemplet ovenfor vises denne røde sirkelen hvor brukeren klikker, før fading utover. En måte vi kunne gjøre dette på, er å endre radius og opasitet over tid. La oss endre koden:

 radius: 15:30, opasitet: 1: 0, varighet: 1000

Ved å endre radius eiendom og legge til opasitet og varighet egenskaper, har vi gitt formen instruksjonene å utføre over tid. Disse er Delta objekter, og hold start- og sluttinformasjon for disse egenskapene.

Du vil legge merke til at ingenting skjer ennå. Dette skyldes at vi ikke har lagt til .spille() funksjon for å fortelle det å utføre våre instruksjoner. Legg det mellom sluttbrakettene og semikolonet, og du bør se at sirkelen din kommer til liv.

Nå kommer vi et sted, men for å gjøre det veldig spesielt, la oss se på noen flere dybde muligheter.

Bestilling og utjevning med Mo.js

Akkurat nå, så snart sirkelen vises, begynner den å falme ut. Dette vil fungere helt bra, men det ville være fint å ha litt mer kontroll.

Vi kan gjøre dette med .deretter() funksjon. Snarere enn å ha vår radius eller ugjennomtrengningsendring, la oss få vår form til å bli der den starter, før du skifter etter en viss tid.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'rød', strokevidde: 5, fyll: 'ingen', radius: 15, varighet: 1000). så (// gjør flere ting her) .spille();

Nå vil vår form vises med verdiene vi har tildelt den, vent på 1000 ms, før du utfører noe vi legger inn i .deretter() funksjon. La oss legge til noen instruksjoner mellom parentesene:

 // gjør flere ting her strokeBredde: 0, skala: 1: 2, lettelse: 'sin.in', varighet: 500

Denne koden introduserer en annen viktig del av animasjonen. Hvor vi har instruert skala å bytte fra 1 til 2, har vi også tildelt sinusbølgebasert lettelse med sin.in. Mo.js har en rekke enkle kurver bygget inn, med muligheten for avanserte brukere å legge til sine egne. I dette tilfellet skjer skalaen over tid i henhold til en sinusbølge buet oppover.

For en visuell nedlasting av forskjellige kurver, sjekk ut easings.net. Kombiner dette med strokeWidth skifter til 0 over vår angitte varighet, og du har en mye mer dynamisk forsvinende effekt.

Former er grunnlaget for alt i Mo.js, men de er bare starten på historien. La oss se på Utbrudd.

Bursting med potensial i Mo.js

EN Burst i Mo.js er en samling av former som kommer fra et sentralt punkt. Vi skal gjøre disse grunnlaget for vår ferdige animasjon. Du kan ringe en standardbrudd på samme måte som du gjør en form. La oss lage noen gnister:

const gnister = nye mojs.Burst (). spill ();

Du kan se, bare ved å legge til en tom Burst objekt og fortelle det å spille, får vi standard brast-effekten. Vi kan påvirke størrelsen og rotasjonen av brasten ved å animere dens radius og vinkel eiendommer:

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

Allerede, vi har lagt til en egendefinert radius og spinn til vår utbrudd:

For å få dem til å se ut som gnister, la oss forandre formene som burstene bruker, og hvor mange former bursten genererer. Du gjør dette ved å ta opp egenskapene til burstens barn.

const sparks = new mojs.Burst (radius: 0:30, easing: 'cubic.out', vinkel: 0: 90, easing: 'quad.out', telle: 50, barn: form: 'kryss', strekk: 'hvit', poeng: 12, radius: 10, fyll: 'ingen', vinkel: 0: 360, varighet: 300).

Du vil legge merke til at barnets egenskaper er de samme som formegenskapene vi allerede har jobbet med. Denne gangen har vi valgt et kryss som formen. Alle 50 av disse figurene har nå de samme egenskapene. Det begynner å se ganske bra ut! Dette er det første som brukeren vil se når de klikker på musen.

Allerede selv om vi kan se at den røde streken av vår første redCirc form holder seg for lenge. Prøv å endre varigheten slik at begge animasjonene passer sammen. Det bør ende med å se noe slikt ut:

Vi er langt fra ferdig med animasjonen, men la oss ta et øyeblikk for å gjøre det brukerreaktivt.

Hovedarrangementet

Vi bruker en hendelseshåndterer til å utløse animasjonene på den plasseringen brukeren klikker på. På slutten av koden din legger du til dette:

document.addEventListener ('klikk', funksjon (e) );

Dette stykket kode lytter til museklikk og utfører hva som helst instruksjoner som finnes i parentesene for oss. Vi kan legge til vår redCirc og gnister gjenstander til denne lytteren.

document.addEventListener ('klikk', funksjon (e) redCirc .tune (x: e.pageX, y: e.pageY,) .play (); gnister .tune (x: e.pageX, y: e.pageY) .play (););

De to funksjonene vi kaller her er .melodi() og .avspilling (). Replay-funksjonen ligner på spillfunksjonen, selv om den angir at animasjonen skal begynne igjen fra starten hver gang den klikkes.

De melodi funksjonen passerer i verdier til objektet vårt, slik at du kan endre ting når det utløses. I dette tilfellet passerer vi i sidekoordinatene der musen ble klikket, og tilordnet x og y-posisjonen til animasjonen vår. Lagre koden din, og prøv å klikke på skjermen. Du vil legge merke til et par problemer.

For det første vises vår første animasjon fremdeles midt på skjermen, selv om brukeren ikke klikker noe. For det andre utløses ikke animasjonen ved musepunktet, men kompenseres ned og til høyre. Vi kan enkelt fikse begge disse tingene.

Vår form og briste har .spille() på slutten av deres respektive kodeblokker. Vi trenger ikke dette mer som .avspilling () blir kalt i hendelsesbehandleren. Du kan fjerne .play () fra begge blokkene med kode. Av samme grunn kan du fjerne isShowStart: true også, siden vi ikke lenger trenger å vise det i starten.

For å fikse posisjoneringsproblemet må vi sette posisjonsverdier for objektene våre. Som du vil huske fra vår aller første form, legger mo.js dem i midten av siden som standard. Når disse verdiene er kombinert med museposisjonen, oppretter den forskyvningen. For å kvitte seg med denne forskyvningen, legg ganske enkelt til disse linjene til begge redCirc og gnister objekter:

venstre: 0, topp: 0,

Nå er de eneste posisjonsverdiene som våre objekter tar på, musestatusverdiene som er sendt inn av hendelseslytteren. Nå skal ting fungere mye bedre.

Denne prosessen med å legge til objekter i hendelsesbehandleren er hvordan vi vil utløse alle våre animasjoner, så Husk å legge til hvert nytt objekt til det fra nå av! Nå som vi har det grunnleggende arbeidet med hvordan vi vil ha dem, la oss legge til noen større og lysere utbrudd.

Bli psykedelisk

La oss starte med noen spinnende trekanter. Ideen her var å lage en hypnotisk stroboscopic effekt, og å sette opp dette er faktisk ganske enkelt. Legg til en annen brast med disse parameterne:

const triangles = new mojs.Burst (radius: 0: 1000, easing: 'cubic.out', vinkel: 1080: 0, easing: 'quad.out', venstre: 0, topp: 0, telle : 20, barn: form: 'polygon', poeng: 3, radius: 10: 100, fyll: ['rød', 'gul', 'blå', 'grønn'], varighet: 3000) ;

Alt her skal være ganske kjent nå, selv om det er et par nye poeng. Du vil legge merke til det i stedet for å definere formen som en trekant, vi har kalt det a polygon før tildeling av antall punkter den har som 3.

Vi har også gitt fylle Fungerer en rekke farger for å jobbe med, vil hver femte trekant gå tilbake til rødt og mønsteret vil fortsette. Den høye verdien av vinkel innstillingen gjør bristespinnet raskt nok til å gi sin stroboscopic effekt.

Hvis koden ikke virker for deg, må du sørge for at du har lagt trekantobjektet til hendelseslytterklassen som vi gjorde med de forrige objektene.

Ganske psykedelisk! La oss legge til en annen brast for å følge den.

Dancing Pentagons

Vi kan bruke noe som er nesten identisk med vår trekanter motsette seg å gjøre bris som følger den. Denne litt modifiserte koden gir fargelagte overlappende spinnende sekskanter:

const pentagons = new mojs.Burst (radius: 0: 1000, easing: 'cubic.out', vinkel: 0: 720, easing: 'quad.out', venstre: 0, topp: 0, telle : 20, barn: form: 'polygon', radius: 1: 300, poeng: 5, fyll: ['lilla', 'rosa', 'gul', 'grønn'], forsinkelse: 500, varighet: 3000);

Hovedendringen her er at vi har lagt til en utsette på 500 ms, slik at utbruddet ikke vil begynne før etter trianglene. Ved å endre noen få verdier, var ideen her å gjøre bristespinnet i motsatt retning til trekanter. Ved en lykkelig ulykke, når pentagonene ser ut, viser den stroboscopic effekten av trekanten at de ser ut som de snurrer sammen.

En liten tilfeldighet

La oss legge til en effekt som benytter tilfeldige verdier. Lag en brast med disse egenskapene:

const redSparks = ny mojs.Burst (venstre: 0, topp: 0, telle: 8, radius: 150: 350, vinkel: 0:90, lettelse: 'cubic.out', barn: 'linje', strekk: 'rød': 'gjennomsiktig', strekkbredde: 5, skalaX: 0.5: 0, gradSkift: 'rand (-90, 90)', radius: 'rand (20, 300)' , varighet: 500, forsinkelse: 'rand (0, 150)',);

Denne utbruddet vil skape linjer som begynner rødt og falmer til gjennomsiktighet, krymper over tid. Det som gjør denne komponenten interessant er at tilfeldige verdier brukes til å bestemme noen av egenskapene.

De degreeShift gir barnet en gjenstand for en startvinkel. Ved å randomisere dette gir det en helt annen utbrudd på hvert klikk. Tilfeldige verdier brukes også til radius og utsette Fungerer for å legge til den kaotiske effekten.

Her er effekten av seg selv:

Siden vi bruker tilfeldige verdier her, må vi legge til en ekstra metode til vår hendelsesbehandler for objektet:

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

De generere() funksjonen beregner nye tilfeldige verdier hver gang hendelsen kalles. Uten dette ville formen velge tilfeldige verdier første gang den heter, og fortsett å bruke disse verdiene for hver påfølgende samtale. Dette ville ødelegge effekten helt, så vær sikker på at du legger til dette!

Du kan bruke tilfeldige verdier for nesten alle elementer i mo.js-objekter, og de er en enkel måte å lage unike animasjoner på.

Tilfeldighet er ikke den eneste måten å legge til dynamiske bevegelser i animasjoner. La oss se på vakle funksjon.

Svimlende linjer

For å vise hvordan vakle Funksjonen fungerer, vi skal lage noe litt som et Catherine Wheel. Lag en ny utbrudd med disse parameterne:

const linjer = nye mojs.Burst (radius: 0: 1000, lettelse: 'cubic.out', vinkel: 0: 1440, lettelse: 'cubic.out', venstre: 0, topp: 0, telle : 50, barn: form: 'linje', radius: 1: 100, lettelse: 'elastic.out', fyll: 'ingen', strøk: ['rødt', 'oransje'], forsinkelse: (10) ', varighet: 1000);

Alt her er kjent nå, en skur skaper 50 barn som er røde eller oransje linjer. Forskjellen her er vi passerer utsette eiendom a rave (10) funksjon. Dette gir 10ms forsinkelse mellom utslipp av hvert barn, noe som gir den den spinnende effekten vi leter etter.

Stagger-funksjonen benytter ikke noen tilfeldige verdier, så du trenger ikke a generere Funksjon i hendelsesbehandleren denne gangen. La oss se alt vi har så langt i gang:

Vi kunne lett stoppe her, men la oss bare legge til en ekstra burst for å runde dette prosjektet av.

Smarte firkanter

For denne siste utbrudd, la oss lage noe ved hjelp av rektangler. Legg til dette objektet i koden din og hendelseslytteren:

const redSquares = ny mojs.Burst (radius: 0: 1000, easing: 'cubic.out', vinkel: 360: 0, easing: 'quad.out', venstre: 0, topp: 0, telle : 20, barn: form: 'rekt', radiusX: 1: 1000, radiusY: 50, poeng: 5, fyll: 'ingen', strekk: 'rødt': 'oransje', strekkbredde: 5 : 15, forsinkelse: 1000, varighet: 3000);

Dette objektet legger ikke til noe nytt for det vi allerede har jobbet med i dag, det er bare inkludert for å vise hvordan komplekse geometriske mønstre enkelt kan opprettes via kode.

Dette var ikke meningen med dette objektet da det ble opprettet i testfasen for å skrive denne opplæringen. Når koden løp ble det klart at jeg hadde snublet på noe langt vakrere enn jeg kunne ha gjort med vilje!

Med dette siste objektet lagt til, er vi ferdige. La oss se hele greia i aksjon.

Mo.js: Et kraftig verktøy for web animasjoner

Denne enkle introduksjonen til mo.js dekker de grunnleggende verktøyene som trengs for å lage vakre animasjoner. Måten disse verktøyene brukes på, kan skape nesten alt, og for mange oppgaver er webbibliotek et enkelt alternativ til å bruke Photoshop, After Effects eller annen kostbar programvare.

Dette biblioteket er nyttig for de som arbeider i både programmering og webutvikling. Programmering vs Webutvikling: Hva er forskjellen? Programmering vs Webutvikling: Hva er forskjellen? Du tror kanskje at applikasjonsprogrammerere og webutviklere gjør den samme jobben, men det er langt fra sannheten. Her er de viktigste forskjellene mellom programmerere og webutviklere. Les mer, hendelseshåndteringen som brukes i prosjektet, kan enkelt brukes til å lage reaktive knapper og tekst på nettsteder eller i apper. Ha det gøy med det: det er ingen feil, bare lykkelige ulykker!

Utforsk mer om: JavaScript.