Ako vytvárať krásne kódované webové animácie pomocou Mo.JS

Ako vytvárať krásne kódované webové animácie pomocou Mo.JS

Ak hľadáte založte si vlastnú webovú stránku , krásne vyzerajúce animácie tomu môžu dodať lesk. Existuje niekoľko spôsobov, ako to dosiahnuť, jednoducho vytváranie animovaných GIF od kusu existujúceho filmu až po naučenie sa vytvoriť si vlastný od začiatku pomocou softvéru ako je Mixér alebo Maya .





K dispozícii sú aj knižnice na programové vytváranie animácií. Historicky webové kodéry používali jQuery na vytváranie jednoduchých animácií, ale ako sa web vyvinul a HTML5 sa stal novým štandardom, objavili sa nové možnosti. Knižnice CSS pre animáciu sa v novom rámci stali neuveriteľne výkonnými spolu s knižnicami JavaScript navrhnutými špeciálne pre vektorovú animáciu v prehliadači.





Dnes sa pozrieme na mo.js, jedno z novších detí v bloku na vytváranie krásnych snímok z kódu. Pred vytvorením animovanej série reagujúcej na používateľa, ktorá vytvára krásne vzory, si rozoberieme niekoľko základných funkcií.





Zadajte Mo.js

Mo.js je knižnica na jednoduché vytváranie pohyblivej grafiky na webe. Je navrhnutý tak, aby zjednodušoval vytváranie krásnych vecí pre tých, ktorí nie sú príliš znalí kódu, a zároveň umožňoval skúseným programátorom objaviť umeleckú stránku, o ktorej nikdy nevedeli, že ju majú. Ako naznačuje jeho názov, je založený na populárnom programovacom jazyku JavaScript, hoci je implementovaný tak, aby si každý ľahko osvojil základy.

Predtým, ako pôjdeme ďalej, pozrime sa na to, čo dnes vytvoríme:



Budeme používať CodePen pre dnešný projekt, pretože nám umožňuje pracovať na všetkom v rovnakom okne prehliadača. Ak by ste chceli, môžete pracovať v editor podľa vlastného výberu namiesto. Ak chcete preskočiť tutoriál krok za krokom, celý kód je k dispozícii tu.

Nastavte si nové pero a budete vítaní touto obrazovkou:





Kým začneme, budete musieť vykonať niekoľko zmien. Klikni na nastavenie ikonu vpravo hore a prejdite na ikonu JavaScript tab.

Budeme používať Babel ako náš predprocesor kódu, tak ho vyberte z rozbaľovacej ponuky. Babel uľahčuje pochopenie JavaScriptu a poskytuje ho ECMAScript 6 podpora starších prehliadačov. Ak neviete, čo to znamená, neboj sa , tu nám to len trochu uľahčí život.





Do projektu musíme importovať aj knižnicu mo.js. Vykonajte to vyhľadaním mo.js v Pridajte externé skripty/perá textovú výzvu a vyberte ju.

Keď sú tieto dve veci na mieste, kliknite na tlačidlo Uložiť a zavrieť . Sme pripravení začať!

Základné tvary s Mo.js

Predtým, ako začneme s grafikou, urobme niečo s týmto oslepujúcim bielym pozadím na table zobrazenia. Zmeňte vlastnosť farby pozadia napísaním tohto kódu do súboru CSS chlieb.

body{
background: rgba(11,11,11,1);
}

Vytvorenie tvaru je jednoduchý proces a koncept za ním poháňa celú knižnicu. Nastavíme predvolený tvar kruhu. Zadajte tento kód do JS chlieb:

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

Tu sme vytvorili a konšt hodnotu s názvom redCirc a priradil ho a nový mojs.Shape . Ak ste v kódovaní úplní nováčici, dávajte pozor na poradie zátvoriek tu a nezabudnite na bodkočiarku na konci!

Doteraz sme neprešli v žiadnych parametroch okrem isShowStart: true , čo znamená, že sa objaví na obrazovke ešte skôr, ako mu priradíme akýkoľvek pohyb. Uvidíte, že do stredu obrazovky umiestnil ružový kruh:

Tento kruh je predvolený Tvar pre mo.js. Tento tvar môžeme ľahko zmeniť pridaním riadka do nášho kódu:

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

Aby sme k objektu pridali ďalšie vlastnosti, oddeľujeme ho čiarkou. Tu sme pridali a tvar majetku, a definoval ho ako a 'správne' . Uložte si pero a predvolený tvar sa namiesto toho zmení na štvorec.

Tento proces odovzdávania hodnôt do súboru Tvar predmetom je, ako ich prispôsobíme. Práve teraz máme námestie, ktoré naozaj veľa nerobí. Skúsme niečo oživiť.

Základy pohybu

Aby ste získali niečo, čo vyzerá trochu pôsobivejšie, vytvorme kruh s červeným ťahom okolo a bez výplne.

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

Ako vidíte, priradili sme tiež a šírka hodnotu zdvihu a a polomer pre kruh. Veci už začínajú vyzerať trochu inak. Ak sa váš tvar neaktualizuje, uistite sa, že vám neunikli čiarky ani jednoduché úvodzovky 'net' alebo 'žiadny' , a uistite sa, že ste klikli uložiť v hornej časti stránky.

Pridajme k tomu animáciu. Vo vyššie uvedenom príklade sa tento červený kruh objaví tam, kde používateľ klikne, a potom vybledne smerom von. Jedným zo spôsobov, ako to dosiahnuť, je zmena polomeru a nepriehľadnosti v priebehu času. Upravme kód:

radius: {15:30},
opacity: {1:0},
duration:1000

Zmenou polomer majetku a pridávania nepriehľadnosť a trvanie vlastností, dali sme pokyn k tvaru, ktoré je potrebné vykonať v priebehu času. Toto sú Delta objekty, ktoré obsahujú informácie o začiatku a konci týchto vlastností.

Všimnete si, že sa ešte nič nedeje. Dôvodom je, že sme nepridali súbor .hrať() funkciu, ktorá mu povie, aby vykonal naše pokyny. Pridajte ho do koncových zátvoriek a bodkočiarky a uvidíte, že váš kruh ožije.

Teraz sa niekam dostávame, ale aby to bolo naozaj špeciálne, pozrime sa na niekoľko ďalších hĺbkových možností.

Objednávanie a uľahčenie práce s Mo.js

Práve teraz, akonáhle sa kruh objaví, začne sa strácať. To bude fungovať úplne v poriadku, ale bolo by pekné mať trochu väčšiu kontrolu.

Môžeme to urobiť pomocou . potom () funkciu. Namiesto toho, aby sa zmenil náš polomer alebo nepriehľadnosť, nechajme svoj tvar zostať tam, kde začína, a potom sa po stanovenom čase nemení.

const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();

Teraz sa náš tvar zobrazí s hodnotami, ktoré sme mu priradili, počkajte 1000 ms a potom vykonajte čokoľvek, čo vložíme . potom () funkciu. Pridajme medzi zátvorky niekoľko pokynov:

//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500

Tento kód predstavuje ďalšiu dôležitú súčasť animácie. Tam, kde sme dali pokyn mierka na zmenu z 1 na 2 sme priradili aj uvoľňovanie na základe sínusovej vlny s sin.in . Mo.js má v sebe zabudovaných množstvo odľahčovacích kriviek, ktoré môžu skúsení používatelia pridať aj svoje. V tomto prípade sa stupnica v priebehu času deje podľa sínusovej vlny zakrivenej nahor.

Pozrite sa na vizuálny prehľad rôznych kriviek easings.net . Skombinujte to s zdvihová šírka počas nastaveného trvania sa zmení na 0 a vy budete mať oveľa dynamickejší efekt miznutia.

Tvary sú základom všetkého v aplikácii Mo.js, ale sú iba začiatkom príbehu. Poďme sa pozrieť na Praskne .

Prasknutie potenciálu v Mo.js

TO Výbuch v Mo.js je zbierka tvarov vychádzajúcich z centrálneho bodu. Urobíme z nich základ našej hotovej animácie. Predvolenú sériu môžete zavolať rovnakým spôsobom ako tvar. Urobme si iskry:

const sparks = new mojs.Burst({
}).play();

Môžete vidieť, len pridaním prázdneho Výbuch objektu a keď mu poviete, aby hralo, získame predvolený efekt série. Veľkosť a rotáciu série môžeme ovplyvniť jej animáciou polomer a uhol vlastnosti:

const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();

Už sme pridali vlastný polomer a rotáciu do našej série:

Aby vyzerali viac ako iskry, zmeňme tvary, ktoré sekvencia používa, a koľko tvarov sekvencia generuje. Urobíte to tak, že sa budete zaoberať vlastnosťami detí výbuchu.

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();

Všimnete si, že podradené vlastnosti sú rovnaké ako vlastnosti tvaru, s ktorými sme už pracovali. Tentokrát sme ako tvar vybrali kríž. Všetkých 50 týchto tvarov má teraz rovnaké vlastnosti. Začína to vyzerať celkom dobre! Toto je prvá vec, ktorú používateľ uvidí po kliknutí myšou.

Už aj keď vidíme, že červený ťah nášho počiatku redCirc tvar zostáva príliš dlho. Skúste zmeniť jeho trvanie, aby do seba zapadali obe animácie. Nakoniec by to malo vyzerať takto:

S našou animáciou ešte zďaleka nekončíme, ale urobme si chvíľu na to, aby bola reaktívna pre používateľov.

Hlavná udalosť

Na spustenie našich animácií na pozícii, na ktorú používateľ klikne, použijeme obslužný program udalostí. Na koniec bloku kódu pridajte toto:

document.addEventListener( 'click', function(e) {
});

Tento kúsok kódu počúva kliknutia myšou a vykonáva všetky pokyny, ktoré sú v zátvorkách pre nás. Môžeme pridať svoje redCirc a iskry namieta tento poslucháč.

document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});

Dve funkcie, ktoré tu nazývame, sú .tune () a .replay () . Funkcia opakovaného prehrávania je podobná funkcii prehrávania, hoci určuje, že animácia by sa mala začať znova od začiatku pri každom kliknutí na ňu.

The naladiť funkcia odovzdáva hodnoty nášmu objektu, takže veci môžete zmeniť, keď sú spustené. V tomto prípade odovzdáme súradnice stránky, na ktoré sme klikli myšou, a podľa toho priradíme polohu xay našej animácie. Uložte kód a skúste kliknúť na obrazovku. Všimnete si niekoľkých problémov.

Po prvé, naša počiatočná animácia sa stále zobrazuje v strede obrazovky, aj keď používateľ na nič neklikne. Za druhé, animácia sa nespustí v bode myši, ale je posunutá nadol a doprava. Obe tieto veci môžeme ľahko opraviť.

Náš tvar a výbuch majú .hrať() na konci príslušných blokov kódu. Už to nepotrebujeme .replay () sa volá v obsluhe udalostí. .Play () môžete odstrániť z oboch blokov kódu. Z rovnakého dôvodu môžete odstrániť isShowStart: true tiež, pretože ho už nepotrebujeme ukázať na začiatku.

Na vyriešenie problému s polohovaním budeme musieť pre naše objekty nastaviť hodnoty polohy. Ako si budete pamätať z nášho úplne prvého tvaru, mo.js ich predvolene umiestňuje do stredu stránky. Keď sa tieto hodnoty spoja s polohou myši, vytvorí sa posun. Aby ste sa tohto ofsetu zbavili, jednoducho pridajte tieto riadky do oboch redCirc a iskry predmety:

left: 0,
top: 0,

Teraz jediné hodnoty polohy, ktoré naše objekty získavajú, sú hodnoty polohy myši odovzdané poslucháčom udalostí. Teraz by veci mali fungovať oveľa lepšie.

Tento proces pridávania objektov do obsluhy udalostí je spôsob, akým spustíme všetky naše animácie, takže odteraz k nemu pridajte každý nový objekt! Teraz, keď máme základy fungujúce tak, ako ich chceme, pridáme niekoľko väčších a jasnejších sérií.

Získanie psychedeliky

Začnime s točivými trojuholníkmi. Cieľom bolo vytvoriť hypnotický stroboskopický efekt a toto nastavenie je v skutočnosti celkom jednoduché. Pridajte ďalšiu sériu s týmito parametrami:

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
}
});

Všetko by tu už malo byť celkom známe, aj keď existuje niekoľko nových bodov. Všimnite si, že namiesto definovania tvaru ako trojuholníka sme ho nazvali a mnohouholník pred priradením čísla bodov má ako 3.

Tiež sme dali naplniť Ak chcete pracovať s radom farieb, každý piaty trojuholník sa vráti späť na červenú a vzor bude pokračovať. Vysoká hodnota uhol nastavenie spôsobí, že sa dávka roztočí dostatočne rýchlo, aby mala svoj stroboskopický efekt.

Ak vám kód nefunguje, uistite sa, že ste do triedy poslucháča udalostí pridali objekt trojuholníkov, ako sme to urobili pri predchádzajúcich objektoch.

Docela psychedelické! Pridajme ďalší výbuch, aby sme to nasledovali.

Tancujúce päťuholníky

Môžeme použiť niečo takmer totožné s naším trojuholníky predmet, aby sa roztrhol, ktorý nasleduje za ním. Tento mierne upravený kód vytvára pestrofarebné prekrývajúce sa rotujúce šesťuholníky:

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
}
});

Hlavnou zmenou je, že sme pridali a meškanie 500 ms, aby sa roztržka začala až po trojuholníkoch. Zmenou niekoľkých hodnôt tu išlo o to, aby sa výbuch otáčal opačným smerom ako trojuholníky. Šťastnou náhodou, keď sa päťuholníky objavia, stroboskopický efekt trojuholníkov vyzerá, že sa točia spolu.

Malá náhoda

Pridajme efekt, ktorý využíva náhodné hodnoty. Vytvorte sériu s týmito vlastnosťami:

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áto sekvencia vytvorí čiary, ktoré začínajú červenou farbou a vyblednú do priehľadnosti, pričom sa v priebehu času zmenšujú. Tento komponent je zaujímavý tým, že na určenie niektorých jeho vlastností sa používajú náhodné hodnoty.

The stupeňShift dáva predmetu dieťaťa počiatočný uhol. Vďaka náhodnému výberu to spôsobí úplne inú dávku pri každom kliknutí. Náhodné hodnoty sa používajú aj pre polomer a meškanie funkcie, ktoré zvyšujú chaotický efekt.

Tu je samotný efekt:

Pretože tu používame náhodné hodnoty, musíme do nášho obslužného programu udalostí pre objekt pridať ďalšiu metódu:

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

The generovať () funkcia vypočítava čerstvé náhodné hodnoty zakaždým, keď sa volá udalosť. Bez toho by tvar pri prvom volaní vybral náhodné hodnoty a tieto hodnoty by naďalej používal pri každom nasledujúcom hovore. To by úplne zničilo efekt, takže to určite pridajte!

Náhodné hodnoty môžete použiť pre takmer každý prvok objektov mo.js a predstavujú jednoduchý spôsob vytvárania jedinečných animácií.

ako odstrániť súbor, ktorý je otvorený v inom programe

Náhodnosť však nie je jediným spôsobom, ako do animácií pridať dynamické pohyby. Pozrime sa na potácať sa funkciu.

Ohromujúce čiary

Ukázať, ako sa potácať sa funkcia funguje, urobíme niečo trochu ako Catherine Wheel. Vytvorte novú sériu s týmito parametrami:

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
}
});

Všetko je tu už známe, pri výbuchu sa vytvorí 50 detí, ktoré majú červené alebo oranžové čiary. Rozdiel tu je, že prejdeme meškanie majetok a potácať sa (10) funkciu. To pridáva 10 ms oneskorenia medzi vyžarovaním každého dieťaťa, čo dáva efekt točenia, ktorý hľadáme.

Funkcia striedania nevyužíva žiadne náhodné hodnoty, takže nebudete potrebovať a generovať tentokrát v obsluhe udalostí. Pozrime sa, čo všetko zatiaľ máme v prevádzke:

Mohli by sme sa tu ľahko zastaviť, ale pridajme ešte jednu dávku, aby sme tento projekt zavŕšili.

Inteligentné štvorce

Pre tento posledný výbuch urobme niečo pomocou obdĺžnikov. Pridajte tento objekt do svojho poslucháča kódu a udalostí:

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
}
});

Tento objekt nepridáva nič nové k tomu, na čom sme už dnes pracovali, je zahrnutý len preto, aby ukázal, ako zložité geometrické vzory je možné ľahko vytvárať pomocou kódu.

Toto nebol zamýšľaný výsledok tohto objektu, keď bol vytvorený v testovacích fázach písania tohto tutoriálu. Hneď ako kód zabehol, vysvitlo, že som narazil na niečo oveľa krajšie, ako som mohol účelovo vytvoriť!

Keď je tento konečný objekt pridaný, máme hotovo. Pozrime sa na to celé v akcii.

Mo.js: výkonný nástroj pre webové animácie

Tento jednoduchý úvod do súboru mo.js pokrýva základné nástroje potrebné na vytváranie krásnych animácií. Spôsobom použitia týchto nástrojov je možné vytvoriť takmer čokoľvek a pre mnohé úlohy sú webové knižnice jednoduchou alternatívou k použitiu Photoshop , After Effects alebo iný drahý softvér.

Táto knižnica je užitočná pre tých, ktorí pracujú v programovaní aj vo webovom vývoji, spracovanie udalostí použité v projekte by sa dalo ľahko použiť na vytváranie reaktívnych tlačidiel a textu na webových stránkach alebo v aplikáciách. Bavte sa s tým: neexistujú žiadne chyby, iba šťastné nehody!

zdieľam zdieľam Tweet E -mail Oplatí sa upgradovať na Windows 11?

Windows bol prepracovaný. Stačí to však na to, aby ste sa presvedčili o prechode z Windows 10 na Windows 11?

Čítajte ďalej
Súvisiace témy
  • Programovanie
  • JavaScript
O autorovi Ian Buckley(216 publikovaných článkov)

Ian Buckley je nezávislý novinár, hudobník, performer a producent videa žijúci v Berlíne v Nemecku. Keď nepíše, alebo nie je na javisku, pohráva si s elektronikou alebo kódom pre domácich majstrov v nádeji, že sa stane šialeným vedcom.

Viac od Iana Buckleyho

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber