Home-theater-designers
Hvis du er ute etter start ditt eget nettsted , vakre animasjoner kan få det til å skinne. Det er flere måter å oppnå dette på, ganske enkelt lage en animert GIF fra et stykke eksisterende film, til å 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, dukket det opp nye alternativer. CSS -biblioteker for animasjon ble utrolig kraftige under det nye rammeverket, sammen med JavaScript -biblioteker designet spesielt for vektoranimasjon i nettleseren.
I dag skal vi se på mo.js, en av de nyere barna på blokken for å lage vakre bilder fra kode. Vi vil dekke noen få grunnleggende funksjoner, før vi lager en brukerreaktiv animasjonsserie som lager vakre mønstre.
Skriv inn Mo.js
Mo.js er et bibliotek for å lage bevegelig grafikk for nettet med letthet. Den er designet for å gjøre det å lage vakre ting enkelt for de som ikke er for kodekyndige, samtidig som veteranprogrammerere 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 enkelt kan ta det grunnleggende.
La oss ta en titt på hva vi skal lage i dag før vi går videre:
Vi kommer til å bruke CodePen for dagens prosjekt, siden det lar oss jobbe med alt i det samme nettleservinduet. Hvis du foretrekker det, kan du jobbe i en valgfri redaktør i stedet. Hvis du vil hoppe over trinnvis veiledning, er hele koden tilgjengelig her.
Sett opp en ny penn, og du vil bli møtt med denne skjermen:
Før vi begynner, må du gjøre et par endringer. Klikk på Innstillinger ikonet øverst til høyre, og naviger til JavaScript kategorien.
Vi kommer til å bruke Babel som vår kodeprosessor, så velg dette fra rullegardinmenyen. Babel gjør JavaScript litt lettere å forstå, sammen med å tilby ECMAScript 6 støtte for eldre nettlesere. Hvis du ikke vet hva det betyr, ikke bekymre deg , det kommer bare til å gjøre livet vårt litt lettere her.
Vi må også importere mo.js -biblioteket til prosjektet. Gjør dette ved å søke etter mo.js i Legg til eksterne skript/penner tekstmeldingen, og velg den.
Klikk på med disse to tingene på plass 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 visningsruten. Endre bakgrunnsfargeegenskapen ved å skrive denne koden i CSS brød.
body{
background: 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 brød:
const redCirc = new 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 innen koding, vær oppmerksom på brakettrekkefølgen her, og ikke glem semikolonet til slutt!
Så langt har vi bestått i ingen parametere unntatt isShowStart: true , noe som betyr at den vil vises på skjermen selv før vi har tildelt den noen bevegelse. Du vil se at den har plassert en rosa sirkel i midten av skjermen:
Denne sirkelen er standard Form for mo.js. Vi kan enkelt endre denne formen ved å legge til en linje i koden vår:
const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});For å legge til flere egenskaper til et objekt, bruker vi et komma for å skille det. Her har vi lagt til en form eiendom, og definerte det som en 'rett' . Lagre pennen din, og du vil se standardformen endres til et kvadrat i stedet.
Denne prosessen med å overføre verdier til Form objektet er hvordan vi tilpasser dem. Akkurat nå har vi en firkant som egentlig ikke gjør så mye. La oss prøve å animere noe.
Grunnleggende om bevegelse
For å få noe som ser litt mer imponerende ut, la oss sette opp en sirkel, med et rødt strøk rundt og uten fyll inni.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Som du kan se, har vi også tilordnet en bredde verdi for slaget, og a radius for sirkelen. Ting begynner allerede å se litt annerledes ut. Hvis formen din ikke oppdateres, må du kontrollere at du ikke har gått glipp av kommaer eller anførselstegn rundt deg 'nett' 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 der brukeren klikker, før den falmer utover. En måte vi kan få dette til på er ved å endre radius og ugjennomsiktighet over tid. La oss endre koden:
radius: {15:30},
opacity: {1:0},
duration:1000Ved å endre radius eiendom, og legge til ugjennomsiktighet og varighet egenskaper, har vi gitt form instruksjoner for å utføre over tid. Disse er Delta objekter, holde start- og sluttinformasjon for disse egenskapene.
Du vil legge merke til at ingenting skjer ennå. Dette er fordi vi ikke har lagt til .spille() funksjon for å be den om å utføre instruksjonene våre. Legg den mellom endeparentesene og semikolonet, så skal du se sirkelen din komme til liv.
Nå kommer vi et sted, men for å gjøre det veldig spesielt, la oss se på noen flere grundige muligheter.
Bestille og lette med Mo.js
Akkurat nå, så snart sirkelen vises, begynner den å falme ut. Dette vil fungere helt fint, men det ville være fint å ha litt mer kontroll.
Vi kan gjøre dette med .deretter() funksjon. I stedet for å endre radius eller ugjennomsiktighet, la oss få formen til å bli der den begynner, før den endres etter en bestemt tid.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Nå vil formen vår vises med verdiene vi har tildelt den, vent i 1000 ms, før vi utfører noe vi legger inn .deretter() funksjon. La oss legge til noen instruksjoner mellom parentesene:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Denne koden introduserer en annen viktig del av animasjonen. Der vi har instruert skala for å endre fra 1 til 2, har vi også tildelt sinusbølgebasert lettelse med synd. i . Mo.js har en rekke lette kurver innebygd, med mulighet for avanserte brukere til å legge til sine egne. I dette tilfellet skjer skalaen over tid i henhold til en sinusbølge som buer oppover.
For en visuell nedtur av forskjellige kurver, sjekk ut easings.net . Kombiner dette med slagbredde endres til 0 over den angitte varigheten, og du har en mye mer dynamisk forsvinnende effekt.
Former er grunnlaget for alt i Mo.js, men de er bare starten på historien. La oss se på Utbrudd .
Bursting with Potential i Mo.js
TIL Burst i Mo.js er en samling former som kommer fra et sentralt punkt. Vi skal gjøre disse til grunnlaget for vår ferdige animasjon. Du kan kalle en standard burst på samme måte som du gjør en figur. La oss lage noen gnister:
const sparks = new mojs.Burst({
}).play();Du kan se, bare ved å legge til en tom Burst objektet og forteller det å spille, får vi standard burst -effekten. Vi kan påvirke størrelsen og rotasjonen av utbruddet ved å animere dens radius og vinkel egenskaper:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();Vi har allerede lagt til en tilpasset radius og spinn i utbruddet vårt:
For å få dem til å se mer ut som gnister, la oss endre figurene som burst bruker, og hvor mange former bursten genererer. Du gjør dette ved å adressere egenskapene til utbruddets 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 vil legge merke til at barneegenskapene er de samme som formegenskapene vi allerede har jobbet med. Denne gangen har vi valgt et kors som formen. Alle disse 50 formene har nå de samme egenskapene. Det begynner å se ganske bra ut! Dette er det første brukeren vil se når de klikker med musen.
Allerede selv om vi kan se at den røde streken i initialen vår redCirc formen holder seg for lenge. Prøv å endre varigheten slik at begge animasjonene passer sammen. Det skulle ende opp med å se slik ut:
Vi er langt fra ferdige med animasjonen vår, men la oss ta et øyeblikk for å gjøre den brukerreaktiv.
Hovedbegivenheten
Vi bruker en hendelsesbehandler for å utløse animasjonene våre på den posisjonen brukeren klikker på. På slutten av kodeblokken legger du til dette:
document.addEventListener( 'click', function(e) {
});Denne koden lytter etter museklikk, og utfører alle instruksjonene som er i parentesene for oss. Vi kan legge til vår redCirc og gnister objekter for denne lytteren.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});De to funksjonene vi kaller her er .melodi() og .replay () . Replay -funksjonen ligner på play -funksjonen, selv om den spesifiserer at animasjonen skal begynne på nytt fra starten hver gang den klikkes.
De melodi funksjon overfører verdier til objektet vårt, slik at du kan endre ting når det utløses. I dette tilfellet sender vi inn sidekoordinatene der musen ble klikket, og tildeler x- og y -posisjonen til animasjonen vår tilsvarende. Lagre koden, 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 på noe. For det andre utløses ikke animasjonen ved musepunktet, men forskyves nedover og til høyre. Vi kan enkelt fikse begge disse tingene.
Vår form og burst har .spille() på slutten av deres respektive kodeblokker. Vi trenger ikke dette lenger .replay () blir oppringt i hendelsesbehandleren. Du kan fjerne .play () fra begge blokkene med kode. Av samme grunn kan du fjerne isShowStart: true også, som vi ikke lenger trenger det for å vise i starten.
For å fikse posisjoneringsproblemet må vi sette posisjonsverdier for objektene våre. Som du husker fra vår aller første form, setter mo.js dem som standard på midten av siden. Når disse verdiene kombineres med museposisjonen, skaper det forskyvningen. For å bli kvitt denne forskyvningen, legg bare til disse linjene i begge redCirc og gnister objekter:
left: 0,
top: 0,Nå er de eneste posisjonsverdiene objektene våre tar på oss museposisjonsverdiene som blir sendt inn av hendelseslytteren. Nå burde ting fungere mye bedre.
Denne prosessen med å legge til objekter i hendelsesbehandleren er hvordan vi vil utløse alle animasjonene våre, så husk å legge hvert nytt objekt til det fra nå av! Nå som vi har det grunnleggende som fungerer slik vi vil ha dem, la oss legge til noen større og lysere utbrudd.
Blir psykedelisk
La oss starte med noen snurrende trekanter. Tanken her var å lage en hypnotisk stroboskopisk effekt, og å sette opp dette er faktisk ganske enkelt. Legg til en ny serie med disse parameterne:
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
}
});Alt her bør være ganske kjent nå, selv om det er et par nye punkter. Du vil legge merke til at i stedet for å definere formen som en trekant, har vi kalt den a polygon før du tildeler antall poeng den har som 3.
Vi har også gitt fylle funksjon en rekke farger å jobbe med, vil hver femte trekant gå tilbake til rødt og mønsteret vil fortsette. Den høye verdien av vinkel innstillingen får burst til å spinne raskt nok til å produsere sin stroboskopiske effekt.
Hvis koden ikke fungerer for deg, må du kontrollere at du har lagt trekantsobjektet til hendelseslytterklassen slik vi gjorde med de forrige objektene.
Ganske psykedelisk! La oss legge til en ny serie for å følge den.
Dansende pentagoner
Vi kan bruke noe som er nesten identisk med vårt trekanter objekt for å lage utbruddet som følger det. Denne litt modifiserte koden produserer fargerike overlappende spinnende sekskanter:
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
}
});Hovedendringen her er at vi har lagt til a forsinkelse på 500 ms, slik at utbruddet ikke begynner før etter trekanter. Ved å endre noen få verdier, var tanken her å få burst til å snurre i motsatt retning av trekanter. Ved et tilfeldig uhell, når femkantene vises, får den stroboskopiske effekten av trekanter det til å se ut som de snurrer sammen.
En liten tilfeldighet
La oss legge til en effekt som bruker tilfeldige verdier. Lag en serie med disse egenskapene:
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)',
}
});Dette utbruddet vil skape linjer som begynner rødt og falmer til gjennomsiktighet, og krymper over tid. Det som gjør denne komponenten interessant er at tilfeldige verdier brukes til å bestemme noen av dens egenskaper.
De grad Skift gir barneobjektet en startvinkel. Ved å randomisere dette, gir det en helt annen burst på hvert klikk. Tilfeldige verdier brukes også for radius og forsinkelse funksjoner for å legge til den kaotiske effekten.
Her er effekten i seg selv:
Siden vi bruker tilfeldige verdier her, må vi legge til en ekstra metode i hendelsesbehandleren for objektet:
redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();De generere() funksjon beregner ferske tilfeldige verdier hver gang hendelsen kalles. Uten dette ville formen velge tilfeldige verdier første gang den blir kalt, og fortsette å bruke disse verdiene for hver påfølgende samtale. Dette ville ødelegge effekten helt, så sørg for å legge til dette!
Du kan bruke tilfeldige verdier for nesten hvert element av mo.js -objekter, og de er en enkel måte å lage unike animasjoner.
hvordan endre instagram feed tilbake til kronologisk
Tilfeldighet er imidlertid ikke den eneste måten å legge til dynamiske bevegelser til animasjoner. La oss se på vakle funksjon.
Svimlende linjer
For å vise hvordan vakle funksjon fungerer, skal vi lage noe som ligner et Catherine Wheel. Lag en ny serie med disse parameterne:
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
}
});Alt her er kjent nå, et utbrudd skaper 50 barn som er røde eller oransje linjer. Forskjellen her er at vi passerer forsinkelse eiendom a vakle (10) funksjon. Dette gir 10 ms forsinkelse mellom hvert barns utslipp, og gir det den spinnende effekten vi leter etter.
Stagger -funksjonen bruker ikke tilfeldige verdier, så du trenger ikke a generere funksjon i hendelsesbehandleren denne gangen. La oss se alt vi har så langt i aksjon:
Vi kan enkelt stoppe her, men la oss bare legge til en ny serie for å avrunde dette prosjektet.
Smarte firkanter
For dette siste utbruddet, la oss lage noe ved hjelp av rektangler. Legg til dette objektet i koden og hendelseslytteren:
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
}
});Dette objektet gir ikke noe nytt til det vi allerede har jobbet med i dag, det er bare inkludert for å vise hvordan komplekse geometriske mønstre lett kan opprettes gjennom kode.
Dette var ikke det tiltenkte resultatet av 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 over noe langt vakrere enn jeg kunne ha laget med vilje!
Med dette siste objektet lagt til, er vi ferdige. La oss se det hele i aksjon.
Mo.js: Et kraftig verktøy for webanimasjoner
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 hva som helst, og for mange oppgaver er nettbiblioteker et enkelt alternativ til å bruke Photoshop , After Effects eller annen kostbar programvare.
Dette biblioteket er nyttig for de som jobber med både programmering og webutvikling, hendelseshåndteringen som brukes i prosjektet kan enkelt brukes til å lage reaktive knapper og tekst på nettsteder eller i apper. Ha det gøy: det er ingen feil, bare lykkelige ulykker!
Dele Dele kvitring E -post Er det verdt å oppgradere til Windows 11?Windows har blitt redesignet. Men er det nok til å overbevise deg om å bytte fra Windows 10 til Windows 11?
Les neste Relaterte temaer- Programmering
- JavaScript
Ian Buckley er frilansjournalist, musiker, utøver og videoprodusent bosatt i Berlin, Tyskland. Når han ikke skriver eller står på scenen, pusler han med DIY -elektronikk eller kode i håp om å bli en gal forsker.
Mer fra Ian BuckleyAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere