Jak si vyrobit krásné kódované webové animace pomocí Mo.JS

Pokud chcete založit vlastní webovou stránku, může to vypadat nádherně vypadajícími animacemi. Existuje několik způsobů, jak toho dosáhnout, od jednoduchého vytvoření animovaného GIF z kusu existujícího filmu až po učení si vytvořit si vlastní od nuly pomocí softwaru jako Blender nebo Maya.

K dispozici jsou také knihovny pro programové vytváření animací. Historicky webové kodéry používaly jQuery k vytváření jednoduchých animací, ale jak se web vyvíjel a HTML5 se stal novým standardem, objevily se nové možnosti. Knihovny CSS pro animaci se v novém rámci staly neuvěřitelně výkonnými, spolu s knihovnami JavaScript navrženými speciálně pro vektorové animace v prohlížeči.

Dnes se podíváme na mo.js, jedno z novějších dětí v bloku pro vytváření nádherných snímků z kódu. Před vytvořením reaktivní série animací uživatele, která vytvoří krásné vzory, pokryjeme několik základních funkcí.

Zadejte Mo.js

Mo.js je knihovna pro snadnou tvorbu pohybové grafiky pro web. Je navržen tak, aby usnadňoval vytváření krásných věcí pro ty, kteří nejsou příliš důvtipní, a zároveň umožňuje veteránským programátorům objevit uměleckou stránku, kterou nikdy neznali. Jak název napovídá, vychází z populárního programovacího jazyka JavaScriptu, ačkoli je implementován tak, aby si kdokoliv mohl snadno vyzvednout základy.

Než se vydáme dále, podívejme se na to, co dnes vytvoříme:

Pro dnešní projekt použijeme CodePen, protože nám to umožní pracovat na všem ve stejném okně prohlížeče. Pokud chcete, můžete místo toho pracovat v editoru podle vašeho výběru. Pokud chcete přeskočit výuku krok za krokem, je zde k dispozici celý kód.

Nastavte si nové pero a budete uvítáni touto obrazovkou:

Než začneme, musíte provést několik změn. Klikněte na Nastavení v pravém horním rohu a přejděte na ikonu JavaScript tab.

Budeme používat Babel jako náš předprocesor kódu, vyberte jej z rozbalovací nabídky. Babel dělá JavaScript trochu srozumitelnějším a poskytuje ECMAScript 6 Co je ES6 a co potřebují programátoři Javascriptu Co je ES6 a co potřebují programátoři Javascriptu ES6 odkazuje na verzi 6 programovacího jazyka ECMA Script (Javascript). Podívejme se nyní na některé významné změny, které ES6 přináší do JavaScriptu. podpora starších prohlížečů. Pokud nevíte, co to znamená, neboj se, tady nám to jen trochu usnadní život.

Také musíme do projektu importovat knihovnu mo.js. Udělejte to hledáním mo.js v Přidejte externí skripty / pera textovou výzvu a výběr.

S těmito dvěma věcmi na místě klikněte Uložit a zavřít. Jsme připraveni začít!

Základní tvary s mo.js

Než začneme s grafikou, udělejme něco s tím oslepujícím bílým pozadím v podokně pohledu. Vlastnost barvy pozadí změníte zapsáním tohoto kódu do CSS panel.

tělo pozadí: rgba (11,11,11,1); 

Vytvoření tvaru je jednoduchý proces a koncept, který za ním stojí, řídí celou knihovnu. Nastavíme výchozí tvar kruhu. Zadejte tento kód do JS panel:

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

Zde jsme vytvořili konst hodnota s názvem redCirc a přiřadil ji k nový mojs.Shape. Pokud jste v kódování úplně nový, věnujte pozornost pořadí závorek zde a na konci nezapomeňte na středník!

Zatím jsme neprošli žádnými parametry kromě isShowStart: true, což znamená, že se objeví na obrazovce ještě předtím, než mu přiřadíme jakýkoli pohyb. Uvidíte, že do středu obrazovky umístil růžový kruh:

Tento kruh je výchozí Tvar pro mo.js. Tento tvar můžeme snadno změnit přidáním řádku do našeho kódu:

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

Chcete-li k objektu přidat více vlastností, oddělíme jej čárkou. Zde jsme přidali a tvar a definovali ji jako 'pravý'. Uložte pero a místo toho uvidíte výchozí změny tvaru do čtverce.

Tento proces předávání hodnot do Tvar objekt je, jak je přizpůsobujeme. Právě teď máme náměstí, které ve skutečnosti moc nedělá. Zkusme něco oživit.

Základy pohybu

Chcete-li získat něco, co vypadá trochu působivěji, vytvořme kruh, s červeným tahem kolem a bez výplně uvnitř.

const redCirc = new mojs.Shape (isShowStart: true, mŕtvice: 'red', mŕtviceWidth: 5, fill: 'none', radius: 15);

Jak vidíte, přidělili jsme také šířka hodnotu tahu a poloměr pro kruh. Věci již začínají vypadat trochu jinak. Pokud se váš tvar neaktualizuje, ujistěte se, že vám neunikly žádné čárky ani jednoduché uvozovky 'Červené' nebo 'žádný', a ujistěte se, že jste klikli Uložit v horní části stránky.

K tomu přidáme animaci. Ve výše uvedeném příkladu se tento červený kruh objeví, když uživatel klikne, a poté vybledne ven. Jedním ze způsobů, jak toho dosáhnout, je změna poloměru a neprůhlednosti v průběhu času. Upravme kód:

 poloměr: 15:30, neprůhlednost: 1: 0, doba trvání: 1000

Změnou poloměr vlastnost a přidání neprůhlednost a doba trvání vlastnosti, dali jsme tvarové instrukce k provedení v průběhu času. Tyto jsou Delta objekty, uchovávající informace o začátku a konci těchto vlastností.

Všimnete si, že se zatím nic neděje. Je to proto, že jsme nepřidali .hrát si() funkce, která jí řekne, aby provedla naše pokyny. Přidejte ji mezi koncové závorky a středník a měli byste vidět, jak váš kruh ožívá.

Teď se někam dostáváme, ale aby to bylo opravdu zvláštní, podívejme se na několik dalších podrobných možností.

Objednávání a zmírňování pomocí Mo.js

Právě teď, jakmile se kruh objeví, začne mizet. Bude to fungovat naprosto v pořádku, ale bylo by hezké mít trochu větší kontrolu.

Můžeme to udělat pomocí .pak() funkce. Spíše než mít změnu poloměru nebo krytí, nechme náš tvar zůstat tam, kde začíná, než se změní po stanoveném čase.

const redCirc = new mojs.Shape (isShowStart: true, mŕtvice: 'red', mŕtviceWidth: 5, fill: 'none', radius: 15, duration: 1000). then (// more more things here) .hrát si();

Nyní se náš tvar objeví s hodnotami, které jsme mu přidělili, počkejte 1000 ms, než provedete vše, co vložíme do .pak() funkce. Přidáme několik pokynů mezi závorky:

 // dělat více věcí zde mrtvice Šířka: 0, měřítko: 1: 2, uvolňování: 'sin.in', trvání: 500

Tento kód představuje další důležitou součást animace. Kde jsme poučili stupnice ke změně z 1 na 2 jsme také přiřadili uvolňování založené na sinusové vlně s sin.in. Mo.js má řadu odlehčovacích křivek zabudovaných, se schopností pro pokročilé uživatele přidat své vlastní. V tomto případě se měřítko v čase děje podle sinusové vlny zakřivené směrem nahoru.

Vizuální shrnutí různých křivek najdete na serveru easings.net. Kombinujte to s Zdvihová šířka změna na 0 během našeho nastaveného trvání a máte mnohem dynamičtější mizející efekt.

Tvary jsou základem všeho v Mo.js, ale jsou pouze začátkem příběhu. Pojďme se podívat Bursts.

Roztržení potenciálem v Mo.js

A Burst in Mo.js je kolekce tvarů vycházející z centrálního bodu. Budeme z nich dělat základ naší hotové animace. Stejným způsobem jako ve tvaru můžete volat výchozí burst. Udělejme pár jisker:

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

Můžete vidět, jednoduše přidáním prázdné Burst objekt a říkají, aby hrát, dostaneme výchozí burst efekt. Oživením jeho velikosti můžeme ovlivnit velikost a rotaci série poloměr a úhel vlastnosti:

const sparks = new mojs.Burst (poloměr: 0:30, uvolnění: 'cubic.out', úhel: 0: 90, uvolnění: 'quad.out',). play ();

Již jsme přidali vlastní poloměr a roztočili se na naši dávku:

Aby vypadaly spíše jako jiskry, změníme tvary, které burst používá, a kolik tvarů vytvoří burst. Uděláte to tak, že se zaměříte na vlastnosti burstových dětí.

const sparks = new mojs.Burst (poloměr: 0:30, uvolnění: 'cubic.out', úhel: 0: 90, uvolnění: 'quad.out', počet: 50, děti: tvar: 'kříž', tah: 'bílý', body: 12, poloměr: 10, výplň: 'žádný', úhel: 0: 360, trvání: 300) play ();

Všimněte si, že podřízené vlastnosti jsou stejné jako vlastnosti tvaru, se kterými jsme již pracovali. Tentokrát jsme vybrali kříž jako tvar. Všech 50 těchto tvarů má nyní stejné vlastnosti. Začíná to vypadat docela dobře! Toto je první věc, kterou uživatel uvidí, když klikne na myš.

Už však můžeme vidět, že červená tah našeho počátečního redCirc tvar zůstává příliš dlouho. Zkuste změnit její trvání tak, aby obě animace zapadaly do sebe. Nakonec by to mělo vypadat takto:

S naší animací jsme zdaleka neskončili, ale věnujme chvíli tomu, aby to reagovalo na uživatele.

Hlavní událost

Použijeme obslužný program událostí ke spuštění našich animací na místě, na které uživatel klikne. Na konec bloku kódu přidejte toto:

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

Tento kus kódu poslouchá kliknutí myší a provádí veškeré pokyny, které jsou v závorkách pro nás. Můžeme přidat naše redCirc a jiskry objekty tomuto posluchači.

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

Dvě funkce, které zde nazýváme, jsou .naladit() a .Přehrát(). Funkce opakování je podobná funkci přehrávání, ačkoli určuje, že animace by měla začít znovu od začátku při každém kliknutí.

naladit funkce předává hodnoty nášmu objektu, takže při spuštění je možné věci měnit. V tomto případě míjíme souřadnice stránky, na které byla kliknuta myš, a odpovídajícím způsobem přiřadíme pozici x a y naší animace. Uložte kód a zkuste kliknout na obrazovku. Uvidíte několik problémů.

Za prvé se naše počáteční animace stále zobrazuje uprostřed obrazovky, i když uživatel na nic neklikne. Za druhé, animace není spuštěna v bodě myši, ale posunuta dolů a doprava. Obě tyto věci můžeme snadno opravit.

Náš tvar a výbuch mají .hrát si() na konci příslušných bloků kódu. Už to nepotřebujeme .Přehrát() se volá v obslužné rutině události. Můžete odstranit .play () z obou bloků kódu. Ze stejného důvodu můžete odebrat isShowStart: true také, protože už to nemusíme ukázat na začátku.

K vyřešení problému s polohováním budeme muset nastavit hodnoty polohy pro naše objekty. Jak si vzpomenete z našeho prvního tvaru, mo.js je ve výchozím nastavení umístí do středu stránky. Pokud jsou tyto hodnoty kombinovány s pozicí myši, vytvoří se offset. Chcete-li se tohoto offsetu zbavit, jednoduše přidejte tyto řádky do obou redCirc a jiskry objekty:

vlevo: 0, nahoře: 0,

Nyní jedinými hodnotami pozic, které naše objekty přijímají, jsou hodnoty pozic myši předávané posluchačem událostí. Nyní by věci měly fungovat mnohem lépe.

Tento proces přidávání objektů do obsluhy událostí je způsob, jakým spustíme všechny naše animace nezapomeňte do něj od nynějška přidat každý nový objekt! Nyní, když máme základy, které fungují tak, jak je chceme, přidáme několik větších a jasnějších dávek.

Získání psychedelické

Začněme několika rotujícími trojúhelníky. Záměrem bylo vytvořit hypnotický stroboskopický efekt, a nastavení je ve skutečnosti celkem snadné. Přidejte další dávku s těmito parametry:

const trojúhelníky = new mojs.Burst (poloměr: 0: 1000, uvolnění: 'cubic.out', úhel: 1080: 0, uvolnění: 'quad.out', vlevo: 0, nahoře: 0, počet : 20, děti: tvar: 'mnohoúhelník', body: 3, poloměr: 10: 100, výplň: ['červená', 'žlutá', 'modrá', 'zelená'], trvání: 3000) ;

Všechno by zde mělo být docela dobře známé, i když existuje několik nových bodů. Všimnete si, že spíše než definování tvaru trojúhelníku, jsme to nazvali a polygon před přiřazením čísla body má jako 3.

Také jsme to dali vyplnit Funguje řada barev, se kterými bude pracovat, každý pátý trojúhelník se vrátí zpět na červenou a vzor bude pokračovat. Vysoká hodnota úhel Díky nastavení je burstová rotace dostatečně rychlá, aby vyvolala stroboskopický efekt.

Pokud pro vás kód nefunguje, ujistěte se, že jste do třídy posluchače událostí přidali objekt trojúhelníků, jako jsme to udělali s předchozími objekty..

Docela psychedelický! Pojďme přidat další výbuch, abychom to následovali.

Tančící Pentagony

Můžeme použít něco téměř stejného jako naše trojúhelníky objekt, aby se roztržení, které následuje. Tento mírně upravený kód produkuje pestrobarevné překrývající se spirálové šestiúhelníky:

const pentagons = new mojs.Burst (poloměr: 0: 1000, uvolnění: 'cubic.out', úhel: 0: 720, uvolnění: 'quad.out', vlevo: 0, nahoru: 0, počet : 20, děti: tvar: 'mnohoúhelník', poloměr: 1: 300, body: 5, výplň: ['fialová', 'růžová', 'žlutá', 'zelená'], zpoždění: 500, trvání: 3000);

Hlavní změnou je, že jsme přidali a zpoždění 500ms, takže roztržení začne až po trojúhelnících. Změnou několika hodnot bylo myšlenkou, aby se roztržení roztočilo v opačném směru než trojúhelníky. Při šťastné nehodě, v době, kdy se objeví pětiúhelníky, stroboskopický efekt trojúhelníků způsobí, že vypadají, jako by se točily společně.

Malá náhodnost

Přidejme efekt, který využívá náhodné hodnoty. Vytvořte shluk s těmito vlastnostmi:

const redSparks = new mojs.Burst (left: 0, top: 0, count: 8, radius: 150: 350, angle: 0:90, easing: 'cubic.out', children: shape: 'linka', tah: 'červená': 'transparentní', tahová šířka: 5, měřítkoX: 0,5: 0, stupeňShift: 'rand (-90, 90)', poloměr: 'rand (20, 300)' , trvání: 500, zpoždění: 'rand (0, 150)',);

Tento výbuch vytvoří čáry, které začnou červené a slábnou k průhlednosti a v průběhu času se zmenšují. To, co dělá tuto složku zajímavou, je to, že k určení některých jejích vlastností se používají náhodné hodnoty.

stupňový posun dává podřízenému objektu počáteční úhel. Tím, že to náhodně uděláte, získáte při každém kliknutí úplně jiný výbuch. Náhodné hodnoty se také používají pro poloměr a zpoždění funkce přidat k chaotický efekt.

Zde je účinek sám o sobě:

Protože zde používáme náhodné hodnoty, musíme do našeho obsluhy událostí pro objekt přidat další metodu:

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

generovat() Funkce vypočítá nové náhodné hodnoty při každém vyvolání události. Bez tohoto by tvar vybral náhodné hodnoty při prvním volání a pokračoval v používání těchto hodnot pro každé další volání. To by úplně zničilo účinek, takže se ujistěte, že jste to přidali!

Náhodné hodnoty můžete použít téměř pro každý prvek objektů mo.js a představují jednoduchý způsob vytváření jedinečných animací.

Náhodnost však není jediným způsobem, jak do animací přidat dynamické pohyby. Pojďme se podívat na ohromující funkce.

Ohromující linie

Chcete-li předvést, jak ohromující funkční práce, uděláme něco jako Catherine Wheel. Vytvořte nový shluk s těmito parametry:

const lines = new mojs.Burst (poloměr: 0: 1000, uvolnění: 'cubic.out', úhel: 0: 1440, uvolnění: 'cubic.out', vlevo: 0, nahoru: 0, počet : 50, děti: tvar: 'linie', poloměr: 1: 100, uvolnění: 'elastic.out', výplň: 'none', tah: ['red', 'orange'], delay: 'stagger (10) ', trvání: 1000);

Všechno, co je tady známo, výbuch vytvoří 50 dětí, které jsou červené nebo oranžové čáry. Rozdíl je v tom, že projdeme zpoždění majetek a potácek (10) funkce. To přidává 10ms zpoždění mezi emisemi každého dítěte, což mu dává točivý efekt, který hledáme.

Funkce rozdělování nevyužívá žádné náhodné hodnoty, takže nebudete potřebovat generovat tentokrát fungují v obsluhy událostí. Podívejme se na vše, co máme zatím v akci:

Mohli bychom se zde snadno zastavit, ale ještě jednou přidáme další roztržení, abychom tento projekt završili.

Inteligentní čtverce

Pro tento poslední roztržení udělejme něco pomocí obdélníků. Přidejte tento objekt do kódu a posluchače událostí:

const redSquares = new mojs.Burst (poloměr: 0: 1000, uvolnění: 'cubic.out', úhel: 360: 0, uvolnění: 'quad.out', vlevo: 0, nahoru: 0, počet : 20, děti: shape: 'rect', radiusX: 1: 1000, radiusY: 50, points: 5, fill: 'none', mŕtvice: 'red': 'orange', mŕtviceWidth: 5 : 15, zpoždění: 1000, trvání: 3000);

Tento objekt nepřidává nic nového k tomu, na čem jsme již dnes pracovali, je zahrnut pouze proto, aby ukázal, jak lze složité geometrické vzory snadno vytvořit pomocí kódu.

Nebyl to zamýšlený výsledek tohoto objektu, když byl vytvořen ve zkušebních fázích psaní tohoto tutoriálu. Jakmile se kód rozběhl, vyšlo najevo, že jsem narazil na něco mnohem krásnějšího, než jsem mohl úmyslně udělat!

S přidáním tohoto konečného objektu jsme hotovi. Podívejme se na celou věc v akci.

Mo.js: Výkonný nástroj pro webové animace

Tento jednoduchý úvod do souboru mo.js zahrnuje základní nástroje potřebné k vytváření krásných animací. Způsob, jakým se tyto nástroje používají, může vytvořit téměř cokoli a pro mnoho úkolů jsou webové knihovny jednoduchou alternativou k použití Photoshopu, After Effects nebo jiného nákladného softwaru..

Tato knihovna je užitečná pro ty, kteří pracují jak v programování, tak v oblasti vývoje webových stránek. Programování vs. vývoj webových aplikací: Jaký je rozdíl? Programování vs. vývoj webu: Jaký je rozdíl? Možná si myslíte, že programátoři aplikací a vývojáři webových stránek dělají stejnou práci, ale to je daleko od pravdy. Zde jsou hlavní rozdíly mezi programátory a vývojáři webu. , zpracování událostí použité v projektu lze snadno použít k vytváření reaktivních tlačítek a textu na webových stránkách nebo v aplikacích. Bavte se s tím: nejsou žádné chyby, pouze šťastné nehody!