Home-theater-designers
Jos etsit perustaa oman verkkosivuston , kauniit animaatiot voivat saada sen loistamaan. On olemassa useita tapoja saavuttaa tämä, yksinkertaisesti animoidun GIF -tiedoston tekeminen olemassa olevasta elokuvasta ja oppia tekemään itse alusta alkaen ohjelmistoja Tehosekoitin tai maya .
Saatavilla on myös kirjastoja animaatioiden luomiseen ohjelmallisesti. Historiallisesti web -kooderit käyttivät jQueryä luomaan yksinkertaisia animaatioita, mutta verkon kehittyessä ja HTML5 tuli uusi standardi, uusia vaihtoehtoja ilmestyi. CSS -kirjastot animaatioon tulivat uskomattoman tehokkaiksi uudessa kehyksessä yhdessä JavaScript -kirjastojen kanssa, jotka on suunniteltu erityisesti vektorianimaatioon selaimessa.
Tänään tarkastelemme mo.js: a, joka on yksi lohkon uusimmista lapsista luomaan kauniita kuvia koodista. Käsittelemme muutamia perustoimintoja, ennen kuin luomme käyttäjän reaktiivisen animaatiosarjan, joka luo kauniita kuvioita.
Kirjoita Mo.js
Mo.js on kirjasto, jonka avulla voit helposti luoda liikegrafiikkaa verkkoon. Se on suunniteltu tekemään kauniiden asioiden luomisesta yksinkertaista niille, jotka eivät ole liian koodin taitavia, ja antaa veteraani -ohjelmoijille mahdollisuuden löytää taiteellinen puoli, jota he eivät koskaan tienneet. Kuten nimestä voi päätellä, se perustuu suosittuun JavaScript -ohjelmointikieleen, vaikka se on toteutettu siten, että kuka tahansa voi oppia perusasiat helposti.
Ennen kuin menemme pidemmälle, katsotaanpa, mitä aiomme luoda tänään:
Tulemme käyttämään CodePen tämän päivän projektille, koska sen avulla voimme työskennellä kaiken kanssa samassa selainikkunassa. Jos haluat, voit työskennellä valitsemasi editori sen sijaan. Jos haluat ohittaa vaiheittaisen opetusohjelman, koko koodi on saatavilla täältä.
Määritä uusi kynä, ja sinua tervehtii tämä näyttö:
Ennen kuin aloitamme, sinun on tehtävä pari muutosta. Klikkaa asetukset -kuvaketta oikeassa yläkulmassa ja siirry kohtaan JavaScript välilehti.
Aiomme käyttää Babel koodin esikäsittelijänä, joten valitse tämä avattavasta valikosta. Babel helpottaa JavaScriptin ymmärtämistä ja tarjoamista ECMAScript 6 tuki vanhemmille selaimille. Jos et tiedä mitä se tarkoittaa, älä huoli , se vain helpottaa elämäämme täällä.
Meidän on myös tuoda mo.js -kirjasto projektiin. Tee tämä etsimällä mo.js kohdassa Lisää ulkoiset komentosarjat/kynät ja valitse se.
Kun nämä kaksi asiaa ovat paikoillaan, napsauta Tallenna ja sulje . Olemme valmiita aloittamaan!
Perusmuodot Mo.js: n avulla
Ennen kuin aloitamme grafiikan, tehkäämme jotain näkymäruudun sokaisevalle valkoiselle taustalle. Muuta taustavärin ominaisuutta kirjoittamalla tämä koodi kohtaan CSS leipää.
body{
background: rgba(11,11,11,1);
}Muodon luominen on yksinkertainen prosessi, ja sen taustalla oleva ajatus ohjaa koko kirjastoa. Määritetään ympyrän oletusmuoto. Kirjoita tämä koodi JS leipä:
const redCirc = new mojs.Shape({
isShowStart:true
});Tässä olemme luoneet a const arvo nimen kanssa redCirc ja määritti sen a uudet mojit. muoto . Jos olet täysin uusi koodauksessa, kiinnitä huomiota hakasjärjestykseen täällä, äläkä unohda puolipistettä lopussa!
Toistaiseksi emme ole antaneet muita parametreja kuin isShowStart: totta , eli se näkyy näytöllä jo ennen kuin olemme määrittäneet sille mitään liikettä. Näet, että se on asettanut vaaleanpunaisen ympyrän näytön keskelle:
Tämä ympyrä on oletusarvo Muoto käyttäjälle mo.js. Voimme muuttaa tätä muotoa helposti lisäämällä rivin koodiin:
const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});Jos haluat lisätä objektiin lisää ominaisuuksia, erotamme sen pilkulla. Tässä olemme lisänneet a muoto omaisuutta ja määritti sen a 'oikea' . Tallenna kynäsi, ja oletusmuoto muuttuu neliöksi.
Tämä prosessi siirtää arvoja Muoto objekti on tapa muokata niitä. Tällä hetkellä meillä on neliö, joka ei oikeastaan tee paljon. Yritetään animoida jotain.
Liikkeen perusteet
Saadaksesi jotain, joka näyttää hieman vaikuttavammalta, perustetaan ympyrä, jonka ympärillä on punainen viiva eikä sisällä täytettä.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Kuten näette, olemme myös määrittäneet a leveys iskun arvo ja a säde ympyrän puolesta. Asiat alkavat jo näyttää hieman erilaiselta. Jos muoto ei päivity, varmista, että et ole unohtanut pilkkuja tai lainausmerkkejä 'netto' tai 'ei mitään' ja varmista, että olet napsauttanut Tallentaa sivun yläreunassa.
Lisätään tähän animaatio. Yllä olevassa esimerkissä tämä punainen ympyrä näkyy kohdassa, jossa käyttäjä napsauttaa, ennen kuin se häipyy ulospäin. Yksi tapa saada tämä tapahtumaan on muuttaa sädettä ja opasiteettia ajan myötä. Muokataan koodia:
radius: {15:30},
opacity: {1:0},
duration:1000Vaihtamalla säde omaisuutta ja lisäämällä opasiteetti ja kesto ominaisuudet, olemme antaneet muoto -ohjeet, jotka on suoritettava ajan mittaan. Nämä ovat Delta objekteja, joilla on näiden ominaisuuksien alku- ja lopputiedot.
Huomaat, että mitään ei vielä tapahdu. Tämä johtuu siitä, ettemme ole lisänneet .pelata() -toimintoa kehottamaan sitä noudattamaan ohjeita. Lisää se päätesulkeiden ja puolipisteen väliin, niin näet ympyrän heräävän eloon.
Nyt ollaan menossa jonnekin, mutta jotta siitä tulisi todella erityinen, katsotaanpa muutamia syvällisempiä mahdollisuuksia.
Tilaaminen ja helpottaminen Mo.js: n avulla
Juuri nyt, kun ympyrä ilmestyy, se alkaa häipyä. Tämä toimii täydellisesti, mutta olisi hienoa saada hieman enemmän hallintaa.
Voimme tehdä tämän .sitten() toiminto. Sen sijaan, että muutamme sädettämme tai opasiteettiamme, pidämme muodon pysyä siellä, missä se alkaa, ennen kuin muutamme tietyn ajan kuluttua.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Nyt muodomme ilmestyy sille määrittämillämme arvoilla, odota 1000 ms, ennen kuin teet mitään, mitä asetamme .sitten() toiminto. Lisätään joitakin ohjeita sulujen väliin:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Tämä koodi esittelee toisen tärkeän osan animaatiosta. Missä olemme ohjeistaneet asteikko Jos haluat muuttaa 1: stä 2: ksi, olemme myös määrittäneet siniaaltoihin perustuvan helpottamisen kanssa syn.in . Mo.js: ssa on sisäänrakennettu useita helpotuskäyriä, ja kokeneet käyttäjät voivat lisätä omia. Tässä tapauksessa asteikko ajan mittaan tapahtuu ylöspäin kaartuvan siniaalto -aallon mukaan.
Jos haluat nähdä visuaalisesti eri käyrät, tutustu easings.net . Yhdistä tämä iskun leveys muutat 0: ksi asetetun keston aikana ja sinulla on paljon dynaamisempi katoavaikutus.
Muodot ovat kaiken Mo.js -sivuston perusta, mutta ne ovat vain tarinan alku. Katsotaanpa Murtumia .
Mahdollisuuksia täynnä Mo.js
TO Räjähtää Mo.js: ssa on kokoelma muotoja, jotka lähtevät keskipisteestä. Aiomme tehdä niistä pohjan valmiille animaatiollemme. Voit kutsua oletuspurskeen samalla tavalla kuin muodon. Tehdään kipinöitä:
const sparks = new mojs.Burst({
}).play();Näet vain lisäämällä tyhjän Räjähtää objekti ja kehottamalla sitä toistamaan, saamme oletusarvon. Voimme vaikuttaa purskeen kokoon ja kiertoon animoimalla sen säde ja kulma ominaisuudet:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();Olemme jo lisänneet sarjaan mukautetun säteen ja spinin:
Jotta ne näyttäisivät enemmän kipinöiltä, muutetaan purskeen käyttämiä muotoja ja kuinka monta muotoa purske tuottaa. Voit tehdä tämän käsittelemällä purskeen lasten ominaisuuksia.
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();Huomaat, että aliominaisuudet ovat samat kuin muotoominaisuudet, joiden kanssa olemme jo työskennelleet. Tällä kertaa olemme valinneet muodon risti. Kaikilla 50 muodolla on nyt samat ominaisuudet. Alkaa näyttää jo aika hyvältä! Tämä on ensimmäinen asia, jonka käyttäjä näkee napsauttaessaan hiirtä.
Jo vaikka voimme nähdä, että alkuperäinen lyönti redCirc muoto pysyy liian pitkään. Kokeile muuttaa sen kestoa niin, että molemmat animaatiot sopivat yhteen. Sen pitäisi näyttää tältä:
Emme ole vielä läheskään valmiita animaatiossamme, mutta otamme hetken tehdäksemme siitä käyttäjäreagoivan.
Päätapahtuma
Käytämme tapahtumakäsittelijää käynnistämään animaatiomme paikassa, jota käyttäjä napsauttaa. Lisää koodilohkon loppuun tämä:
document.addEventListener( 'click', function(e) {
});Tämä koodikappale kuuntelee hiiren napsautuksia ja suorittaa kaikki suluissa olevat ohjeet. Voimme lisätä omamme redCirc ja kipinöitä vastustaa tätä kuulijaa.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});Kaksi funktiota, joita kutsumme tässä, ovat .virittää() ja .uusinta() . Toistotoiminto on samanlainen kuin toistotoiminto, mutta se määrittää, että animaatio aloitetaan alusta alusta aina, kun sitä napsautetaan.
The virittää -toiminto välittää arvot objektiimme, jotta voit muuttaa asioita, kun se käynnistyy. Tässä tapauksessa ohitamme sivukoordinaatit, joissa hiirtä napsautettiin, ja määritämme animaatiomme x- ja y -asemat sen mukaisesti. Tallenna koodi ja yritä napsauttaa näyttöä. Huomaat pari ongelmaa.
Ensinnäkin alkuperäinen animaatiomme näkyy edelleen näytön keskellä, vaikka käyttäjä ei napsauta mitään. Toiseksi animaatio ei käynnisty hiiren kohdasta, vaan siirtyy alas ja oikealle. Voimme korjata molemmat asiat helposti.
Muodollamme ja räjähdyksellämme on .pelata() vastaavien koodilohkojensa lopussa. Emme tarvitse tätä enää .uusinta() kutsutaan tapahtumankäsittelijään. Voit poistaa .play (): n molemmista koodilohkoista. Samasta syystä voit poistaa isShowStart: totta myös, koska meidän ei enää tarvitse näyttää sitä alussa.
Paikannusongelman korjaamiseksi meidän on asetettava sijainti -arvot kohteillemme. Kuten muistat ensimmäisestä muodostamme, mo.js asettaa ne oletuksena sivun keskelle. Kun nämä arvot yhdistetään hiiren sijaintiin, se luo siirtymän. Päästä eroon tästä siirtymästä lisäämällä nämä rivit molempiin redCirc ja kipinöitä esineet:
left: 0,
top: 0,Ainoat sijainti -arvot, joita kohteemme ottavat, ovat tapahtuman kuuntelijan välittämät hiiren sijainti -arvot. Nyt asioiden pitäisi toimia paljon paremmin.
Tämä prosessi, jossa objekteja lisätään tapahtumakäsittelijään, käynnistää kaikki animaatiomme muista lisätä siihen jokainen uusi esine tästä lähtien! Nyt kun perusasiat toimivat haluamallamme tavalla, lisätään muutama isompi ja kirkkaampi purske.
Psykedeelistä
Aloitetaan muutamista pyörivistä kolmioista. Ideana oli luoda hypnoottinen stroboskooppinen vaikutus, ja tämän asettaminen on itse asiassa melko helppoa. Lisää toinen sarja seuraavilla parametreilla:
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
}
});Kaiken täällä pitäisi olla jo tuttua, vaikka pari uutta kohtaa on. Huomaat, että sen sijaan, että määrittäisimme muodon kolmioksi, olemme kutsuneet sitä a monikulmio ennen numeron määrittämistä pistettä siinä on 3.
Olemme myös antaneet täyttää Jos haluat käyttää värisarjaa, joka viides kolmio palaa punaiseksi ja kuvio jatkuu. Korkea arvo kulma asetus tekee sarjasta riittävän nopean tuottaakseen stroboskooppisen vaikutuksen.
Jos koodi ei toimi sinulle, varmista, että olet lisännyt kolmio -objektin tapahtumien kuunteluluokkaan kuten aiempien objektien kanssa.
Aika psykedeelistä! Lisätään seuraava sarja sen seuraamiseksi.
Tanssivat pentagonit
Voimme käyttää jotain lähes identtistä kuin meillä kolmiot tehdä sen jälkeen seuraava purske. Tämä hieman muutettu koodi tuottaa kirkkaanvärisiä päällekkäisiä pyöriviä kuusikulmioita:
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
}
});Tärkein muutos on, että olemme lisänneet a viive 500 ms, jotta purske alkaa vasta kolmioiden jälkeen. Muutamalla muutamia arvoja ajatuksena oli saada purske pyörimään vastakkaiseen suuntaan kuin kolmiot. Onnellisessa onnettomuudessa viisikulmioiden ilmestymiseen mennessä kolmioiden stroboskooppinen vaikutus saa näyttämään siltä, että ne pyörivät yhdessä.
Pientä satunnaisuutta
Lisätään tehoste, joka käyttää satunnaisia arvoja. Luo sarja seuraavilla ominaisuuksilla:
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)',
}
});Tämä purske luo viivoja, jotka alkavat punaisina ja haalistuvat läpinäkyviksi ja kutistuvat ajan myötä. Tämän komponentin tekee mielenkiintoiseksi se, että satunnaisia arvoja käytetään joidenkin sen ominaisuuksien määrittämiseen.
The asteen muutos antaa lapsiobjektille aloituskulman. Satunnaistamalla tämän, se antaa täysin erilaisen purskeen jokaisesta napsautuksesta. Satunnaisia arvoja käytetään myös säde ja viive toimintoja kaoottisen vaikutelman lisäämiseksi.
Tässä vaikutus itsessään:
Koska käytämme täällä satunnaisia arvoja, meidän on lisättävä ylimääräinen menetelmä tapahtumankäsittelijäämme varten:
redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();The Tuottaa() -toiminto laskee uudet satunnaisarvot aina, kun tapahtuma kutsutaan. Ilman tätä muoto valitsee satunnaiset arvot ensimmäisen kerran, kun sitä kutsutaan, ja jatkaa näiden arvojen käyttöä jokaisessa seuraavassa puhelussa. Tämä pilaisi vaikutuksen kokonaan, joten muista lisätä tämä!
Voit käyttää satunnaisia arvoja melkein jokaiselle mo.js -objektin elementille, ja ne ovat yksinkertainen tapa tehdä ainutlaatuisia animaatioita.
tiedosto on avoinna toisessa ohjelmassa
Satunnaisuus ei kuitenkaan ole ainoa tapa lisätä dynaamisia liikkeitä animaatioihin. Katsotaanpa porrastaa toiminto.
Järkyttäviä linjoja
Osoittamaan, miten porrastaa toiminto toimii, aiomme tehdä jotain vähän kuin Catherine Wheel. Luo uusi purske seuraavilla parametreilla:
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
}
});Kaikki täällä on jo tuttua, purske luo 50 lasta, jotka ovat punaisia tai oransseja viivoja. Ero tässä on se, että ohitamme viive omaisuus a porras (10) toiminto. Tämä lisää 10 ms: n viiveen jokaisen lapsen päästön väliin, mikä antaa sille etsimämme kehruuvaikutuksen.
Porrastustoiminto ei käytä satunnaisia arvoja, joten et tarvitse Tuottaa -toiminto tällä kertaa tapahtumakäsittelijässä. Katsotaanpa kaikkea, mitä meillä on tähän mennessä toiminnassa:
Voisimme helposti pysähtyä tähän, mutta lisätään vain yksi purske tämän projektin loppuun.
Älykkäät neliöt
Tätä viimeistä pursketta varten tehdään jotain suorakulmioiden avulla. Lisää tämä objekti koodiin ja tapahtumien kuuntelijaan:
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
}
});Tämä objekti ei lisää mitään uutta siihen, mitä olemme jo työskennelleet tänään, vaan se on tarkoitettu vain osoittamaan, kuinka monimutkaisia geometrisia kuvioita voidaan helposti luoda koodilla.
Tämä ei ollut tämän kohteen tarkoitus, kun se luotiin tämän opetusohjelman kirjoittamisen testausvaiheessa. Kun koodi suoritettiin, kävi selväksi, että olin törmännyt johonkin paljon kauniimpaan kuin olisin voinut tehdä tarkoituksella!
Kun tämä viimeinen kohde on lisätty, olemme valmiit. Katsotaan koko juttu toiminnassa.
Mo.js: Tehokas työkalu verkkoanimaatioihin
Tämä yksinkertainen johdanto mo.js -tiedostoon kattaa perustyökalut, joita tarvitaan kauniiden animaatioiden luomiseen. Näiden työkalujen käyttötapa voi luoda melkein mitä tahansa, ja moniin tehtäviin verkkokirjasto on yksinkertainen vaihtoehto käytölle Photoshop , After Effects tai muu kallis ohjelmisto.
Tämä kirjasto on hyödyllinen niille, jotka työskentelevät sekä ohjelmoinnin että web -kehityksen parissa, projektissa käytettyä tapahtumakäsittelyä voidaan helposti käyttää reaktiivisten painikkeiden ja tekstin luomiseen verkkosivustoilla tai sovelluksissa. Pidä hauskaa sen kanssa: virheitä ei ole, vain onnellisia onnettomuuksia!
Jaa Jaa Tweet Sähköposti Kannattaako päivittää Windows 11: een?Windows on suunniteltu uudelleen. Mutta riittääkö se vakuuttamaan sinut siirtymään Windows 10: stä Windows 11: een?
Lue seuraava Liittyvät aiheet- Ohjelmointi
- JavaScript
Ian Buckley on freelance -toimittaja, muusikko, esiintyjä ja videotuottaja, joka asuu Berliinissä, Saksassa. Kun hän ei kirjoita tai ei ole lavalla, hän hieroo DIY -elektroniikkaa tai koodia toivoessaan tulla hulluksi tiedemieheksi.
Lisää Ian Buckleyltätilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi