Home-theater-designers
Hvis du leder efter start din egen hjemmeside , flotte animationer kan få det til at skinne. Der er flere måder at opnå dette på, simpelthen at lave en animeret GIF fra et stykke eksisterende film, til at lære at lave din egen fra bunden med software som Blender eller Maya .
Der er også biblioteker til rådighed til at oprette animationer programmatisk. Historisk set brugte webkodere jQuery til at oprette simple animationer, men som internettet udviklede og HTML5 blev den nye standard, dukkede nye muligheder op. CSS -biblioteker til animation blev utrolig kraftfulde under de nye rammer, 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 for at skabe smukke billeder fra kode. Vi dækker et par grundlæggende funktioner, før vi opretter en brugerreaktiv animationsserie, der skaber smukke mønstre.
Indtast Mo.js
Mo.js er et bibliotek til nemt at oprette bevægelsesgrafik til internettet. Det er designet til at gøre det let at skabe smukke ting for dem, der ikke er for kodende, samtidig med at veteranprogrammerere kan opdage en kunstnerisk side, de aldrig vidste, de havde. Som navnet antyder, er det baseret på det populære JavaScript -programmeringssprog, selvom det er implementeret på en sådan måde, at alle nemt kan hente det grundlæggende.
Inden vi går videre, lad os tage et kig på, hvad vi skal skabe i dag:
Vi vil bruge CodePen til dagens projekt, da det giver os mulighed for at arbejde med alt i det samme browservindue. Hvis du foretrækker det, kan du arbejde i en valgfri redaktør i stedet. Hvis du vil springe trinvis vejledning over, er den fulde kode tilgængelig her.
Opret en ny pen, og du vil blive budt velkommen med denne skærm:
Inden vi går i gang, skal du foretage et par ændringer. Klik på Indstillinger ikonet øverst til højre, og naviger til JavaScript fane.
Vi kommer til at bruge Babel som vores kodeforbehandler, så vælg dette fra rullemenuen. Babel gør JavaScript lidt lettere at forstå, sammen med at levere ECMAScript 6 support til ældre browsere. Hvis du ikke ved, hvad det betyder, bare rolig , det kommer bare til at gøre vores liv lidt lettere her.
Vi skal også importere mo.js -biblioteket til projektet. Gør dette ved at søge efter mo.js i Tilføj eksterne scripts/kuglepenne tekstprompt, og vælg den.
Med disse to ting på plads skal du klikke Gem og luk . Vi er klar til at komme i gang!
Grundlæggende former med Mo.js
Inden vi går i gang med grafikken, lad os gøre noget ved den blændende hvide baggrund i visningsruden. Skift egenskaben baggrundsfarve ved at skrive denne kode i CSS brød.
body{
background: rgba(11,11,11,1);
}At oprette en form er en simpel proces, og konceptet bagved driver hele biblioteket. Lad os oprette en standardcirkelform. Indtast denne kode i JS brød:
const redCirc = new mojs.Shape({
isShowStart:true
});Her har vi skabt et konst værdi med navnet rødCirk og tildelte det til a ny mojs.Shape . Hvis du er helt ny inden for kodning, skal du være opmærksom på parentesordren her, og glem ikke semikolonet til sidst!
Indtil videre har vi bestået i ingen parametre undtagen isShowStart: sandt , 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 for mo.js. Vi kan nemt ændre denne form ved at tilføje en linje til vores kode:
const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});For at tilfø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 'rigtigt' . Gem din pen, og du vil se standardformen ændres til en firkant i stedet.
Denne proces med at videregive værdier til Form objekt 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 strøg rundt om det og uden fyld 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 til slaget, 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 enkelte anførselstegn rundt omkring 'net' eller 'ingen' , og sørg for at du har klikket 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 ske på, er ved at ændre radius og uigennemsigtighed over tid. Lad os ændre koden:
radius: {15:30},
opacity: {1:0},
duration:1000Ved at ændre radius ejendom og tilføjelse Gennemsigtighed og varighed egenskaber, har vi givet form instruktioner til at udføre over tid. Disse er Delta objekter, der holder start- og slutoplysninger for disse egenskaber.
Du vil bemærke, at der ikke sker noget endnu. Dette skyldes, at vi ikke har tilføjet .Spil() funktion til at fortælle den at udføre vores instruktioner. Tilføj det mellem endebeslagene og semikolonet, 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 mere dybdegående muligheder.
Bestilling og lethed med Mo.js
Lige nu, så snart cirklen vises, begynder den at falme ud. Dette vil fungere 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 uigennemsigtighed, lad os få vores form til at blive, hvor den starter, før den ændres efter 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();Nu vises vores form 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:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Denne kode introducerer en anden vigtig del af animationen. Hvor vi har instrueret vægt for at skifte fra 1 til 2, har vi også tildelt sinusbølgebaseret lempelse med synd. i . 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 opad.
For en visuel nedslidning af forskellige kurver, tjek servitutter.net . Kombiner dette med slagbredde 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å Bursts .
Sprængfyldt med potentiale i Mo.js
TIL Burst i Mo.js er en samling af former, der stammer fra et centralt punkt. Vi vil gøre disse til grundlaget for vores færdige animation. Du kan kalde en standard burst på samme måde som du gør en figur. Lad os lave nogle gnister:
const sparks = new mojs.Burst({
}).play();Du kan se, bare ved at tilføje en tom Burst objekt og fortæller det at spille, får vi standard burst -effekten. Vi kan påvirke burstens størrelse og rotation ved at animere dens radius og vinkel ejendomme:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{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 gnister mere, lad os ændre de former, burst bruger, og hvor mange figurer burst genererer. Det gør du ved at adressere egenskaberne for bursts børn.
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 bemærke, at de underordnede egenskaber er de samme som de formegenskaber, vi allerede har arbejdet med. Denne gang har vi valgt et kors som formen. Alle 50 af disse former har nu de samme egenskaber. Det begynder at se ganske godt ud! Dette er det første, brugeren vil se, når de klikker med musen.
Allerede selvom vi kan se, at den røde streg i vores initial rødCirk form holder sig 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.
Main Event
Vi vil bruge en event -handler til at udløse vores animationer på den position, brugeren klikker på. I slutningen af din kodeblok tilføjer du dette:
document.addEventListener( 'click', function(e) {
});Dette stykke kode lytter til museklik og udfører de instruktioner, der er i parenteserne for os. Vi kan tilføje vores rødCirk og gnister objekter for denne lytter.
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 funktioner, vi kalder her, er .tune() og .replay () . Genafspilningsfunktionen ligner afspilningsfunktionen, selvom den angiver, at animationen skal begynde igen fra starten, hver gang der klikkes på den.
Det tune funktion videregiver værdier til vores objekt, så du kan ændre ting, når det udløses. I dette tilfælde sender vi sidekoordinaterne ind, hvor musen blev klikket, og tildeler x og y -positionen 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 første animation stadig midt på skærmen, selvom brugeren ikke klikker på noget. For det andet udløses animationen ikke ved musepunktet, men opvejes nedad og til højre. Vi kan let løse begge disse ting.
Vores form og burst har .Spil() i slutningen af deres respektive kodeblokke. Vi har ikke brug for dette mere som .replay () bliver ringet op i event -handler. Du kan fjerne .play () fra begge kodeblokke. Af samme grund kan du fjerne isShowStart: sandt også, da vi ikke længere har brug for det til at vise i starten.
For at løse positioneringsproblemet skal vi indstille positionsværdier for vores objekter. Som du husker fra vores allerførste form, placerer mo.js dem som standard i midten af siden. Når disse værdier kombineres med musens position, skaber det forskydningen. For at slippe af med denne forskydning skal du blot tilføje disse linjer til begge rødCirk og gnister genstande:
left: 0,
top: 0,Nu er de eneste positionsværdier, vores objekter indtager, musens positionsværdier, der sendes ind af hændelseslytteren. Nu skulle tingene fungere meget bedre.
Denne proces med at tilføje objekter til event -handler er, hvordan vi vil udløse alle vores animationer, så husk at tilføje hvert nyt objekt til det fra nu af! Nu hvor vi har det grundlæggende til at fungere, hvordan vi vil have dem, lad os tilføje nogle større og lysere bursts.
Bliver psykedelisk
Lad os starte med nogle snurrende trekanter. Ideen her var at skabe en hypnotisk stroboskopisk effekt, og det er faktisk ret let at konfigurere dette. Tilføj et andet burst med disse parametre:
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 burde være rimeligt kendt nu, selvom der er et par nye punkter. Du vil bemærke, at i stedet for at definere formen som en trekant, har vi kaldt det en polygon inden du tildeler antallet af point den har som 3.
Vi har også givet fylde fungerer 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 får burst til at dreje hurtigt nok til at producere sin stroboskopiske effekt.
Hvis koden ikke fungerer for dig, skal du sørge for at have føjet trekantsobjektet til begivenhedslytterklassen, som vi gjorde med de tidligere objekter.
Ret psykedelisk! Lad os tilføje endnu en burst for at følge den.
Dansende Pentagoner
Vi kan bruge noget, der er næsten identisk med vores trekanter objekt for at lave det burst, der følger det. Denne let modificerede kode frembringer farvestrålende overlappende snurrende 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
}
});Hovedændringen her er, at vi har tilføjet en forsinke på 500 ms, så burst ikke begynder først efter trekanterne. Ved at ændre et par værdier var tanken her at få burst til at dreje i den modsatte retning af trekanterne. Ved et tilfældigt uheld, når femkanterne vises, får trekants stroboskopiske virkning det til at se ud som om de snurrer 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({
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 burst vil skabe 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 grad Skift giver barnobjektet en startvinkel. Ved at randomisere dette giver det et helt andet udbrud ved hvert klik. Tilfældige værdier bruges også til radius og forsinke funktioner til at tilføre den kaotiske effekt.
Her er effekten i sig selv:
Da vi bruger tilfældige værdier her, skal vi tilføje en ekstra metode til vores begivenhedshåndterer for 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 for hvert efterfølgende opkald. Dette ville ødelægge effekten helt, så sørg for at tilføje dette!
Du kan bruge tilfældige værdier for næsten alle elementer i mo.js -objekter, og de er en enkel måde at lave unikke animationer på.
hvordan man bruger internettet på roku
Tilfældighed er dog ikke den eneste måde at tilføje dynamiske bevægelser til animationer. Lad os se på forskyde fungere.
Overraskende linjer
For at vise hvordan forskyde funktion virker, skal vi lave noget lidt som et Catherine Wheel. Opret en ny burst med disse parametre:
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 kendt nu, et udbrud skaber 50 børn, som er røde eller orange linjer. Forskellen her er, at vi passerer forsinke ejendom a forskud (10) fungere. Dette tilføjer 10 ms forsinkelse mellem hvert barns udsendelse, hvilket giver det den roterende effekt, vi leder efter.
Stagger -funktionen gør ikke brug af tilfældige værdier, så du behøver ikke en frembringe denne gang i hændelsesbehandleren. Lad os se alt, hvad vi har indtil videre i aktion:
Vi kunne sagtens stoppe her, men lad os bare tilføje endnu en burst for at afslutte dette projekt.
Smarte firkanter
For denne sidste burst, lad os lave noget ved hjælp af rektangler. Føj dette objekt til din kode og hændelseslytter:
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 objekt tilføjer ikke noget nyt til det, vi allerede har arbejdet med i dag, det er kun inkluderet 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 testfaserne for at skrive denne vejledning. Da koden kørte, blev det klart, at jeg var faldet over noget meget smukkere, end jeg kunne have lavet 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 for mange opgaver er webbiblioteker et simpelt alternativ til at bruge Photoshop , After Effects eller anden dyr software.
Dette bibliotek er nyttigt for dem, der arbejder inden for både programmering og webudvikling, den hændelseshåndtering, der bruges i projektet, kan let bruges til at oprette reaktive knapper og tekst på websteder eller i apps. God fornøjelse med det: der er ingen fejl, kun lykkelige ulykker!
Del Del Tweet E -mail Er det værd at opgradere til Windows 11?Windows er blevet redesignet. Men er det nok til at overbevise dig om at skifte fra Windows 10 til Windows 11?
Læs Næste Relaterede emner- Programmering
- JavaScript
Ian Buckley er freelance journalist, musiker, performer og videoproducent bosat i Berlin, Tyskland. Når han ikke skriver eller på scenen, piller han med DIY -elektronik eller kode i håb om at blive en gal videnskabsmand.
Mere fra Ian BuckleyAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere