Sådan laves smukke kodede webanimationer med Mo.JS

Hvis du ønsker at starte dit eget websted, kan smukke flotte animationer få det til at skinne. Der er flere måder at opnå dette på, lige fra at lave en animeret GIF fra et stykke eksisterende film, til at lære at gøre din egen fra bunden med software som Blender eller Maya.

Der er også biblioteker til rådighed til at oprette animationer programmatisk. Historisk brugte webkodere jQuery til at oprette enkle animationer, men efterhånden som nettet udviklede sig og HTML5 blev den nye standard, dukkede nye muligheder op. CSS-biblioteker til animation blev utroligt magtfulde under den nye ramme sammen med JavaScript-biblioteker designet specielt til vektoranimation i browseren.

I dag vil vi se på mo.js, en af ​​de nyere børn på blokken til at skabe smukke billeder fra kode. Vi dækker et par grundlæggende funktioner, inden vi opretter en brugersreaktiv animationsserie, der skaber smukke mønstre.

Angiv Mo.js

Mo.js er et bibliotek til at oprette bevægelsesgrafik til internettet let. Det er designet til at gøre det at skabe smukke ting enkelt for dem, der ikke er for kodede, mens de tillader veteranprogrammører at opdage en kunstnerisk side, som de aldrig vidste, at de havde. Som navnet antyder, er det baseret på det populære JavaScript-programmeringssprog, skønt det implementeres på en sådan måde, at enhver nemt kan hente de grundlæggende.

Inden vi går videre, lad os se på, hvad vi skal skabe i dag:

Vi bruger CodePen til dagens projekt, da det giver os mulighed for at arbejde på alt i det samme browservindue. Hvis du foretrækker det, kan du i stedet arbejde i en editor. Hvis du vil springe trin for trin-tutorial over, er den fulde kode tilgængelig her.

Opret en ny pen, og du vil blive mødt med denne skærm:

Inden vi kommer i gang, skal du foretage et par ændringer. Klik på Indstillinger ikonet øverst til højre, og naviger til JavaScript fanen.

Vi kommer til at bruge Babel som vores kodefor-processor, så vælg dette i rullemenuen. Babel gør JavaScript lidt lettere at forstå, sammen med at give ECMAScript 6 Hvad er ES6 og hvad Javascript-programmerere har brug for at vide, hvad der er ES6, og hvad Javascript-programmerere har brug for at vide ES6 henviser til version 6 af ECMA Script (Javascript) programmeringssprog. Lad os nu se på nogle større ændringer, som ES6 bringer til JavaScript. support til ældre browsere. Hvis du ikke ved, hvad det betyder, bare rolig, det vil bare gøre vores liv lidt lettere her.

Vi er også nødt til at importere mo.js-biblioteket til projektet. Gør dette ved at søge efter mo.js i Tilføj eksterne scripts / penne tekstprompt, og vælg den.

Klik på knappen med disse to ting på plads Gem og luk. Vi er klar til at komme i gang!

Grundlæggende former med Mo.js

Inden vi begynder med grafikken, lad os gøre noget ved den blændende hvide baggrund i visningsruden. Skift baggrundsfarveegenskab ved at skrive denne kode i CSS rude.

krop baggrund: rgba (11,11,11,1); 

At skabe en form er en enkel proces, og konceptet bag det driver hele biblioteket. Lad os oprette en standardcirkelform. Indtast denne kode i JS rude:

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

Her har vi oprettet en konst værdi med navnet redCirc og tildelt det til en nye mojs.Shape. Hvis du er helt ny med kodning, skal du være opmærksom på beslagsbestillingen her, og glem ikke semikolonet i slutningen!

Indtil videre har vi ikke bestået nogen parametre undtagen isShowStart: true, hvilket betyder, at det vises på skærmen, selv før vi har tildelt det nogen bevægelse. Du vil se, at den har placeret en lyserød cirkel i midten af ​​skærmen:

Denne cirkel er standard Form til mo.js. Vi kan nemt ændre denne form ved at tilføje en linje til vores kode:

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

For at føje flere egenskaber til et objekt bruger vi et komma til at adskille det. Her har vi tilføjet en form ejendom, og definerede det som en 'Rect'. Gem din pen, så ser du standardformen ændres til en firkant i stedet.

Denne proces med overførsel af værdier til Form objektet er, hvordan vi tilpasser dem. Lige nu har vi en firkant, der ikke rigtig gør meget. Lad os prøve at animere noget.

Grundlæggende om bevægelse

For at få noget der ser lidt mere imponerende ud, lad os oprette en cirkel med et rødt strejk omkring det og uden udfyldning inde.

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

Som du kan se, har vi også tildelt en bredde værdi for slagtilfælde, og a radius for cirklen. Tingene begynder allerede at se lidt anderledes ud. Hvis din form ikke opdateres, skal du sørge for, at du ikke har gået glip af kommaer eller enkelt anførselstegn rundt 'rød' eller 'ingen', og sørg for, at du har klikket på Gemme øverst på siden.

Lad os tilføje en animation til dette. I eksemplet ovenfor vises denne røde cirkel, hvor brugeren klikker, før den falmer udad. En måde vi kunne få dette til at gøre er ved at ændre radius og opacitet over tid. Lad os ændre koden:

 radius: 15:30, opacitet: 1: 0, varighed: 1000

Ved at ændre radius ejendom, og tilføje Gennemsigtighed og varighed egenskaber, har vi givet forminstruktionerne, der skal udføres over tid. Disse er Delta objekter, der indeholder start- og slutinformation for disse egenskaber.

Du vil bemærke, at der ikke sker noget endnu. Dette er fordi vi ikke har tilføjet .Spille() funktion til at fortælle det at udføre vores instruktioner. Tilføj det mellem slutbeslagene og semikolon, og du skal se din cirkel komme til live.

Nu kommer vi et sted, men for at gøre det virkelig specielt, lad os se på et par flere dybdegående muligheder.

Bestilling og lette med Mo.js

Lige nu, så snart cirklen vises, begynder den at falme ud. Dette fungerer helt fint, men det ville være rart at have lidt mere kontrol.

Vi kan gøre dette med .derefter() fungere. I stedet for at ændre vores radius eller opacitet, lad os få vores form til at forblive der, hvor den starter, inden vi skifter efter en bestemt tidsperiode.

const redCirc = new mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', radius: 15, varighed: 1000). derefter (// gør flere ting her) .Spille();

Nu vil vores form vises med de værdier, vi har tildelt den, vent i 1000 ms, før vi udfører noget, vi lægger i .derefter() fungere. Lad os tilføje nogle instruktioner mellem parenteserne:

 // gør flere ting her slag Bredde: 0, skala: 1: 2, letter: 'sin.in', varighed: 500

Denne kode introducerer en anden vigtig del af animationen. Hvor vi har instrueret vægt for at ændre fra 1 til 2, har vi også tildelt sinusbølgebaseret lettelse med sin.in. Mo.js har en række lette kurver indbygget med mulighed for avancerede brugere at tilføje deres egne. I dette tilfælde sker skalaen over tid i henhold til en sinusbølge, der krummer sig opad.

For en visuel nedtrapning af forskellige kurver, se easings.net. Kombiner dette med strokeWidth skifter til 0 i løbet af vores indstillede varighed, og du har en meget mere dynamisk forsvindende effekt.

Former er grundlaget for alt i Mo.js, men de er kun starten på historien. Lad os se på brister.

Bursting with Potentiale i Mo.js

EN Burst i Mo.js er en samling af figurer, der stammer fra et centralt punkt. Vi vil gøre disse til grundlaget for vores færdige animation. Du kan kalde et standard burst på samme måde som du gør en form. Lad os lave nogle gnister:

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

Du kan se bare ved at tilføje en tom Burst objekt og fortælle det skal spille, vi får standard burst-effekten. Vi kan påvirke størrelsen og rotationen af ​​burst ved at animere dens radius og vinkel ejendomme:

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

Vi har allerede tilføjet en brugerdefineret radius og spin til vores burst:

For at få dem til at ligne mere gnister skal vi ændre de former, burst'en bruger, og hvor mange former bursten genererer. Dette gør du ved at adressere egenskaberne for burst-børnenes børn.

const gnister = new mojs.Burst (radius: 0:30, lettelse: 'cubic.out', vinkel: 0: 90, easing: 'quad.out', tælling: 50, børn: form: 'kryds', streg: 'hvid', punkter: 12, radius: 10, fyld: 'ingen', vinkel: 0: 360, varighed: 300). play ();

Du vil bemærke, at underordnede egenskaber er de samme som formeegenskaberne, vi allerede har arbejdet med. Denne gang har vi valgt et kors som form. Alle 50 af disse former har nu de samme egenskaber. Det begynder at se ganske godt ud! Dette er den første ting, som brugeren vil se, når de klikker på musen.

Allerede selvom vi kan se, at det røde slag i vores indledende redCirc form forbliver for længe. Prøv at ændre dens varighed, så begge animationer passer sammen. Det skulle ende med at se sådan ud:

Vi er langt fra færdige med vores animation, men lad os tage et øjeblik for at gøre den brugerreaktiv.

Hovedbegivenheden

Vi bruger en begivenhedshåndterer til at udløse vores animationer i den position brugeren klikker på. I slutningen af ​​din kodeblok, tilføj dette:

document.addEventListener ('klik', funktion (e) );

Dette stykke kode lytter til museklik og udfører de instruktioner, der findes i parenteserne for os. Vi kan tilføje vores redCirc og gnister genstande til denne lytter.

document.addEventListener ('klik', funktion (e) redCirc .tune (x: e.pageX, y: e.pageY,) .replay (); gnister .tune (x: e.pageX, y: e.pageY) .replay (););

De to funktioner, vi kalder her, er .tune() og .replay (). Replay-funktionen ligner afspilningsfunktionen, skønt den specificerer, at animationen skal begynde igen fra starten, hver gang den klikkes..

Det tune funktionen overfører værdier til vores objekt, så du kan ændre ting, når det udløses. I dette tilfælde passerer vi sidekoordinaterne, hvor musen blev klikket, og tildeler x og y-placeringen af ​​vores animation i overensstemmelse hermed. Gem din kode, og prøv at klikke på skærmen. Du vil bemærke et par problemer.

For det første vises vores oprindelige animation stadig midt på skærmen, selvom brugeren ikke klikker på noget. For det andet udløses animationen ikke ved musepunktet, men udlignes og til højre. Vi kan løse begge disse ting let.

Vores form og brast har .Spille() i slutningen af ​​deres respektive kodeblokke. Vi har ikke brug for dette mere som .replay () kaldes i begivenhedshåndtereren. Du kan fjerne .play () fra begge koder. Af samme grund kan du fjerne isShowStart: sandt også da vi ikke længere har brug for, at det skal vises i starten.

For at løse positioneringsproblemet bliver vi nødt til at indstille positionsværdier for vores objekter. Som du vil huske fra vores allerførste form, sætter mo.js dem som standard i midten af ​​siden. Når disse værdier kombineres med musepositionen, skaber det forskydningen. For at slippe af med denne forskydning skal du blot tilføje disse linjer til begge redCirc og gnister objekter:

venstre: 0, øverst: 0,

Nu er de eneste positionsværdier, som vores objekter indtager, musepositionsværdierne, der sendes ind af begivenhedslytteren. Nu skal tingene fungere meget bedre.

Denne proces med at tilføje objekter til begivenhedshåndtereren er, hvordan vi udløser alle vores animationer husk at tilføje alle nye objekter til det fra nu af! Nu hvor vi har det grundlæggende, der fungerer, hvordan vi vil have dem, lad os tilføje nogle større og lysere bursts.

Bliv psykedelisk

Lad os starte med nogle roterende trekanter. Ideen her var at skabe en hypnotisk stroboskopisk effekt, og det er faktisk ganske let at opsætte dette. Tilføj endnu et burst med disse parametre:

const triangles = new mojs.Burst (radius: 0: 1000, lettelse: 'cubic.out', vinkel: 1080: 0, easing: 'quad.out', venstre: 0, top: 0, count : 20, børn: form: 'polygon', punkter: 3, radius: 10: 100, udfyld: ['rød', 'gul', 'blå', 'grøn'], varighed: 3000) ;

Alt her skal være ret kendt nu, selvom der er et par nye punkter. Du vil bemærke, at vi snarere end at definere formen som en trekant, vi har kaldt den a polygon før du tildeler antallet af punkter det har som 3.

Vi har også givet fylde funktion en række farver at arbejde med, hver femte trekant vender tilbage til rødt og mønsteret fortsætter. Den høje værdi af vinkel indstilling gør burst burst hurtigt nok til at producere sin stroboscopic effekt.

Hvis koden ikke fungerer for dig, skal du sørge for at tilføje trekantobjektet til hændelseslytterklassen, som vi gjorde med de foregående objekter.

Temmelig psykedelisk! Lad os tilføje endnu et burst for at følge det.

Dansende Pentagoner

Vi kan bruge noget næsten identisk med vores trekanter modstand mod at gøre det burst, der følger det. Denne let modificerede kode producerer stærkt farvede overlappende spindende hexagoner:

const pentagons = new mojs.Burst (radius: 0: 1000, lettelse: 'cubic.out', vinkel: 0: 720, easing: 'quad.out', venstre: 0, top: 0, count : 20, børn: form: 'polygon', radius: 1: 300, punkter: 5, udfyld: ['lilla', 'lyserød', 'gul', 'grøn'], forsinkelse: 500, varighed: 3000);

Den vigtigste ændring her er, at vi har tilføjet en forsinke på 500ms, så bursten først begynder efter trekanterne. Ved at ændre et par værdier var ideen her at få bursten til at dreje i den modsatte retning af trekanterne. Ved en lykkelig ulykke, når pentagonerne vises, får trekanternes stroboskopiske virkning det til at se ud som om de drejer sig sammen.

En lille tilfældighed

Lad os tilføje en effekt, der gør brug af tilfældige værdier. Opret en burst med disse egenskaber:

const redSparks = new mojs.Burst (venstre: 0, top: 0, tælling: 8, radius: 150: 350, vinkel: 0:90, lettelse: 'cubic.out', børn: form: 'linje', streg: 'rød': 'gennemsigtig', stregbredde: 5, skalaX: 0.5: 0, gradskift: 'rand (-90, 90)', radius: 'rand (20, 300)' , varighed: 500, forsinkelse: 'rand (0, 150)',);

Dette burst skaber linjer, der begynder rødt og falmer til gennemsigtighed og krymper over tid. Det, der gør denne komponent interessant, er, at tilfældige værdier bruges til at bestemme nogle af dens egenskaber.

Det degreeShift giver barnet objekt en startvinkel. Ved at randomisere dette giver det et helt andet burst ved hvert klik. Tilfældige værdier bruges også til radius og forsinke funktioner for at tilføje den kaotiske effekt.

Her er effekten i sig selv:

Da vi bruger tilfældige værdier her, er vi nødt til at tilføje en ekstra metode til vores begivenhedshåndterer til objektet:

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

Det frembringe() funktion beregner friske tilfældige værdier, hver gang begivenheden kaldes. Uden dette ville formen vælge tilfældige værdier, første gang den kaldes, og fortsætte med at bruge disse værdier til hvert efterfølgende opkald. Dette vil ødelægge effekten fuldstændigt, så sørg for at tilføje dette!

Du kan bruge tilfældige værdier til næsten ethvert element af mo.js-objekter, og de er en enkel måde at lave unikke animationer på.

Tilfældighed er imidlertid ikke den eneste måde at tilføje dynamiske bevægelser til animationer. Lad os se på forskyde fungere.

Svimlende linjer

At vise, hvordan forskyde funktion fungerer, vi vil lave noget lidt som et Catherine Wheel. Opret en ny burst med disse parametre:

const lines = new mojs.Burst (radius: 0: 1000, lettelse: 'cubic.out', vinkel: 0: 1440, easing: 'cubic.out', venstre: 0, top: 0, count : 50, børn: form: 'linje', radius: 1: 100, lettelse: 'elastisk.out', udfyld: 'ingen', streg: ['rød', 'orange'], forsinkelse: 'stagger (10) ', varighed: 1000);

Alt her er kendt nu, en burst skaber 50 børn, som er røde eller orange linjer. Forskellen her er, at vi passerer forsinke ejendom a vakler (10) fungere. Dette tilføjer 10 ms forsinkelse mellem emissionen af ​​hvert barn, hvilket giver det den spindeeffekt, vi leder efter.

Stagger-funktionen bruger ikke tilfældige værdier, så du har ikke brug for en frembringe funktion i begivenhedshåndtereren denne gang. Lad os se alt, hvad vi har hidtil i aktion:

Vi kunne let stoppe her, men lad os bare tilføje endnu et burst til at afslutte dette projekt.

Smarte firkanter

For dette sidste burst, lad os lave noget ved hjælp af rektangler. Føj dette objekt til din kode og begivenhedslytter:

const redSquares = new mojs.Burst (radius: 0: 1000, lettelse: 'cubic.out', vinkel: 360: 0, easing: 'quad.out', venstre: 0, top: 0, count : 20, børn: form: 'rekt', radiusX: 1: 1000, radiusY: 50, punkter: 5, udfyld: 'ingen', streg: 'rød': 'orange', slagbredde: 5 : 15, forsinkelse: 1000, varighed: 3000);

Dette objekt tilføjer ikke noget nyt til det, vi allerede har arbejdet på i dag, det er inkluderet blot for at vise, hvordan komplekse geometriske mønstre let kan oprettes gennem kode.

Dette var ikke det tilsigtede resultat af dette objekt, da det blev oprettet i teststadierne for at skrive denne tutorial. Når koden kørte, blev det klart, at jeg havde snublet over noget langt smukkere, end jeg kunne have gjort med vilje!

Med dette sidste objekt tilføjet, er vi færdige. Lad os se det hele i aktion.

Mo.js: Et kraftfuldt værktøj til webanimationer

Denne enkle introduktion til mo.js dækker de grundlæggende værktøjer, der er nødvendige for at skabe smukke animationer. Den måde, disse værktøjer bruges på, kan skabe næsten alt, og til mange opgaver er webbiblioteker et simpelt alternativ til at bruge Photoshop, After Effects eller anden dyre software.

Dette bibliotek er nyttigt for dem, der arbejder i både programmering og webudvikling Programmering vs. Webudvikling: Hvad er forskellen? Programmering vs. webudvikling: Hvad er forskellen? Du synes måske, at applikationsprogrammører og webudviklere gør det samme job, men det er langt fra sandheden. Her er de vigtigste forskelle mellem programmerere og webudviklere. , kunne den begivenhedshåndtering, der blev brugt i projektet, let bruges til at oprette reaktive knapper og tekst på websteder eller i apps. Ha det sjovt med det: der er ingen fejl, kun lykkelige ulykker!