Home-theater-designers
Pokud se díváte na založte si vlastní web , krásně vyhlížející animace to mohou rozzářit. Existuje několik způsobů, jak toho dosáhnout, jednoduše vytváření animovaného GIFu od kusu stávajícího filmu až po učení, jak si vytvořit vlastní od začátku se softwarem podobným Mixér nebo Maya .
K dispozici jsou také knihovny pro vytváření animací programově. Historicky používali weboví kodéři 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 vektorovou animaci v prohlížeči.
Dnes se podíváme na mo.js, jedno z novějších dětí v bloku pro vytváření krásných snímků z kódu. Před vytvořením animované série reagující na uživatele, která vytváří nádherné vzory, si probereme několik základních funkcí.
Zadejte Mo.js
Mo.js je knihovna pro snadné vytváření pohyblivé grafiky pro web. Je navržen tak, aby vytváření krásných věcí bylo jednoduché i pro ty, kteří nejsou příliš znalí kódu, a zároveň umožňuje zkušeným programátorům objevit uměleckou stránku, o které nikdy nevěděli, že ji mají. Jak naznačuje jeho název, je založen na populárním programovacím jazyce JavaScript, ačkoli je implementován takovým způsobem, že si každý snadno osvojí základy.
Než půjdeme dál, podívejme se na to, co dnes vytvoříme:
Budeme používat CodePen pro dnešní projekt, protože nám umožňuje pracovat na všem ve stejném okně prohlížeče. Pokud chcete, můžete pracovat ve formátu editor podle vašeho výběru namísto. Pokud chcete krok za krokem tutoriál přeskočit, celý kód je k dispozici zde.
Nastavte si nové pero a budete uvítáni touto obrazovkou:
Než začneme, budete muset provést několik změn. Klikněte na Nastavení ikonu vpravo nahoře a přejděte na JavaScript tab.
Budeme používat Babel jako náš předprocesor kódu, tak to vyberte z rozevírací nabídky. Babel usnadňuje pochopení JavaScriptu spolu s poskytováním ECMAScript 6 podpora starších prohlížečů. Pokud nevíte, co to znamená, nedělej si starosti Tady nám to jen trochu usnadní život.
Také musíme do projektu importovat knihovnu mo.js. Udělejte to vyhledáním mo.js v Přidejte externí skripty/pera textovou výzvu a vyberte ji.
Když jsou tyto dvě věci 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ě zobrazení. Změňte vlastnost barvy pozadí zapsáním tohoto kódu do souboru CSS chléb.
body{
background: rgba(11,11,11,1);
}Vytvoření obrazce je jednoduchý proces a jeho koncept pohání celou knihovnu. Nastavíme výchozí tvar kruhu. Zadejte tento kód do JS chléb:
const redCirc = new mojs.Shape({
isShowStart:true
});Zde jsme vytvořili a konst hodnotu s názvem červený kruh a přidělil ji a 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!
Doposud 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 další vlastnosti, použijeme k jeho oddělení čárku. Zde jsme přidali a tvar vlastnictví a definoval jej jako a 'rect' . Uložte si pero a výchozí tvar se místo toho změní na čtverec.
Tento proces předávání hodnot do souboru Tvar předmětem je, jak je přizpůsobujeme. Právě teď máme čtverec, který toho opravdu moc nedělá. Zkusme něco oživit.
Základy pohybu
Abychom získali 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,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Jak vidíte, přidělili jsme také a šířka hodnotu tahu a a poloměr pro kruh. Věci už začínají vypadat trochu jinak. Pokud se váš tvar neaktualizuje, ujistěte se, že vám neunikly čárky ani jednoduché uvozovky 'síť' nebo 'žádný' a ujistěte se, že jste klikli Uložit v horní části stránky.
Pojďme k tomu přidat animaci. Ve výše uvedeném příkladu se tento červený kruh objeví tam, kde uživatel klikne, než vybledne směrem ven. Jedním ze způsobů, jak toho dosáhnout, je změna poloměru a neprůhlednosti v průběhu času. Pojďme upravit kód:
radius: {15:30},
opacity: {1:0},
duration:1000Změnou poloměr vlastnictví a přidávání neprůhlednost a doba trvání vlastnosti, dali jsme pokyny k provedení v průběhu času. Tyto jsou Delta objekty, obsahující informace o začátku a konci pro tyto vlastnosti.
Všimnete si, že se zatím nic neděje. Důvodem je, že jsme nepřidali .hrát si() funkci, která mu řekne, aby provedla naše pokyny. Přidejte to mezi koncové závorky a středník a měli byste vidět, jak váš kruh ožívá.
Nyní se někam dostáváme, ale aby to bylo opravdu zvláštní, podívejme se na několik dalších hloubkových možností.
Objednávání a ulehčení pomocí Mo.js
Právě teď, jakmile se kruh objeví, začne mizet. To bude 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ž abychom změnili poloměr nebo krytí, nechejme svůj tvar zůstat tam, kde začíná, než se po stanoveném čase změní.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Nyní se náš tvar zobrazí s hodnotami, které jsme mu přiřadili, počkejte 1000 ms, než provedete cokoli, co vložíme do .pak() funkce. Přidejme mezi závorky nějaké pokyny:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Tento kód představuje další důležitou část animace. Kde jsme dali pokyn měřítko pro změnu z 1 na 2 jsme také přiřadili uvolňování založené na sinusové vlně pomocí sin.in . Mo.js má vestavěnou řadu uvolňovacích křivek s možností pro pokročilé uživatele přidat vlastní. V tomto případě se měřítko v průběhu času děje podle sinusové vlny zakřivené nahoru.
Podívejte se na vizuální přehled různých křivek easings.net . Zkombinujte to s šířka zdvihu po nastavenou dobu trvání se změní na 0 a budete mít mnohem dynamičtější efekt mizení.
Tvary jsou základem všeho v Mo.js, ale jsou pouze začátkem příběhu. Pojďme se podívat Praskne .
Prasknutí potenciálem v Mo.js
NA Prasknout v Mo.js je kolekce tvarů vycházejících z centrálního bodu. Uděláme z nich základ naší hotové animace. Výchozí shluk můžete volat stejným způsobem jako tvar. Pojďme udělat pár jisker:
const sparks = new mojs.Burst({
}).play();Vidíte, stačí přidat prázdné Prasknout objekt a řekneme mu, aby hrál, získáme výchozí efekt shluku. Velikost a rotaci série můžeme ovlivnit její animací poloměr a úhel vlastnosti:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();Již jsme přidali vlastní poloměr a rotaci do našeho výbuchu:
Aby vypadaly více jako jiskry, změňme tvary, které série používá, a kolik tvarů série generuje. Toho dosáhnete tím, že oslovíte vlastnosti dětí skupiny.
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 podřízené vlastnosti jsou stejné jako vlastnosti tvaru, se kterými jsme již pracovali. Tentokrát jsme jako tvar vybrali kříž. 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í po kliknutí myší.
Už když vidíme, že červená tah našeho počátečního červený kruh tvar zůstává příliš dlouho. Zkuste změnit jeho trvání, aby do sebe obě animace zapadly. Nakonec by to mělo vypadat nějak takto:
S naší animací ještě zdaleka nekončíme, ale udělejme si chvilku, aby byla uživatelsky reaktivní.
Hlavní událost
Ke spuštění našich animací na pozici, na kterou uživatel klikne, použijeme obslužnou rutinu události. Na konec bloku kódu přidejte toto:
document.addEventListener( 'click', function(e) {
});Tento kousek 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 červený kruh a jiskry objekty tomuto posluchači.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});Dvě funkce, které zde nazýváme, jsou .naladit() a .Přehrát() . Funkce přehrávání je podobná funkci přehrávání, i když určuje, že animace by měla začít znovu od začátku pokaždé, když na ni kliknete.
The naladit funkce předává hodnoty našemu objektu, takže můžete věci při spuštění měnit. V tomto případě předáváme souřadnice stránky, na které jsme klikli myší, a podle toho přiřazujeme polohu xay naší animace. Uložte kód a zkuste kliknout na obrazovku. Všimnete si několika problémů.
Za prvé, naše počáteční animace se stále zobrazuje uprostřed obrazovky, i když uživatel na nic neklikne. Za druhé, animace se nespouští v bodě myši, ale je 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 obsluze událostí. .Play () můžete odebrat z obou bloků kódu. Ze stejného důvodu můžete odebrat isShowStart: true také, protože to již nepotřebujeme ukázat na začátku.
Abychom problém s určováním polohy vyřešili, budeme muset pro naše objekty nastavit hodnoty pozic. Jak si budete pamatovat z našeho úplně prvního tvaru, mo.js je ve výchozím nastavení staví do středu stránky. Když jsou tyto hodnoty zkombinovány s polohou myši, vytvoří offset. Chcete -li se tohoto offsetu zbavit, jednoduše přidejte tyto řádky do obou červený kruh a jiskry objekty:
left: 0,
top: 0,Jediné hodnoty polohy, které naše objekty získávají, jsou hodnoty polohy myši předané 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, takže nezapomeňte do něj odteď přidat každý nový objekt! Nyní, když nám základy fungují tak, jak je chceme, přidejme nějaké větší a jasnější série.
Získání psychedeliky
Začněme několika rotujícími trojúhelníky. Zde šlo o vytvoření hypnotického stroboskopického efektu a nastavení je ve skutečnosti docela snadné. Přidejte další dávku s těmito parametry:
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šechno by tu mělo být už docela známé, i když existuje několik nových bodů. Všimnete si, že místo definování tvaru jako trojúhelníku jsme jej nazvali a polygon před přiřazením čísla body má jako 3.
Také jsme dali vyplnit funguje řada barev, se kterými se pracuje, každý pátý trojúhelník se vrátí zpět do červené a vzor bude pokračovat. Vysoká hodnota úhel nastavení způsobí, že se dávka roztočí dostatečně rychle, aby měla svůj stroboskopický efekt.
Pokud kód pro vás nefunguje, ujistěte se, že jste do třídy posluchače událostí přidali objekt trojúhelníků jako u předchozích objektů.
Docela psychedelické! Pojďme přidat další dávku, abychom ji následovali.
Tančící pětiúhelníky
Můžeme použít něco téměř identického s naším trojúhelníky objekt, aby vytvořil výbuch, který za ním následuje. Tento mírně upravený kód vytváří jasně zbarvené překrývající se rotující šestiúhelní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
}
});Hlavní změnou je, že jsme přidali a zpoždění 500 ms, takže výbuch nezačne dříve než za trojúhelníky. Změnou několika hodnot zde šlo o to, aby se výbuch roztočil opačným směrem než trojúhelníky. Šťastnou náhodou, když se objeví pětiúhelníky, díky stroboskopickému efektu trojúhelníků to vypadá, že se točí společně.
Malá náhoda
Přidejme efekt, který využívá náhodné hodnoty. Vytvořte sérii 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: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});Tato série vytvoří čáry, které začínají červeně a přecházejí do průhlednosti a v průběhu času se zmenšují. Tato komponenta je zajímavá tím, že k určení některých jejích vlastností se používají náhodné hodnoty.
The stupeňShift dává dětskému objektu počáteční úhel. Tím, že to randomizujete, to při každém kliknutí způsobí úplně jinou dávku. Náhodné hodnoty se používají také pro poloměr a zpoždění funkce, které přidávají k chaotickému efektu.
Zde je účinek sám o sobě:
Protože zde používáme náhodné hodnoty, musíme do našeho obslužného programu událostí pro objekt přidat další metodu:
redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();The generovat() funkce vypočítá nové náhodné hodnoty při každém vyvolání události. Bez toho by tvar při prvním volání vybral náhodné hodnoty a tyto hodnoty by používal pro každé další volání. To by úplně zničilo efekt, takže to určitě přidejte!
Náhodné hodnoty můžete použít pro téměř každý prvek objektů mo.js a představují jednoduchý způsob vytváření jedinečných animací.
jak vytáhnout zvuk z videa
Náhodnost však není jediným způsobem, jak do animací přidat dynamické pohyby. Podívejme se na potácet se funkce.
Ohromující čáry
Ukázat, jak potácet se funkce funguje, uděláme něco trochu jako Catherine Wheel. Vytvořte novou sérii s těmito parametry:
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šechno je tu už známé, výbuch vytvoří 50 dětí, které mají červené nebo oranžové čáry. Rozdíl je v tom, že projdeme zpoždění majetek a potácení (10) funkce. To přidává 10ms zpoždění mezi vyzařováním každého dítěte, což dává efekt otáčení, který hledáme.
Funkce rozložení nepoužívá žádné náhodné hodnoty, takže nebudete potřebovat a generovat funkce v obsluze událostí tentokrát. Podívejme se, co všechno zatím máme v akci:
Tady bychom se mohli snadno zastavit, ale přidejme ještě jednu dávku, abychom tento projekt završili.
Chytré čtverce
Pro tento poslední výbuch vytvořme něco pomocí obdélníků. Přidejte tento objekt do svého posluchače kódu a událostí:
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 nepřidává nic nového k tomu, na čem jsme již dnes pracovali, je zahrnut pouze proto, aby ukázal, jak složité geometrické vzory lze snadno vytvářet pomocí kódu.
To nebyl zamýšlený výsledek tohoto objektu, když byl vytvořen v testovacích fázích psaní tohoto kurzu. Jakmile kód běžel, bylo jasné, že jsem narazil na něco mnohem krásnějšího, než jsem mohl udělat schválně!
S tímto přidaným konečným objektem 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 pokrývá základní nástroje potřebné k vytváření krásných animací. Způsob, jakým jsou tyto nástroje používány, může vytvořit téměř cokoli a pro mnoho úkolů jsou webové knihovny jednoduchou alternativou k použití Photoshop , After Effects nebo jiný nákladný software.
Tato knihovna je užitečná pro ty, kteří pracují jak v programování, tak ve vývoji webových aplikací, zpracování událostí použité v projektu lze snadno použít k vytváření reaktivních tlačítek a textu na webech nebo v aplikacích. Bavte se s tím: neexistují žádné chyby, pouze šťastné nehody!
Podíl Podíl tweet E-mailem Vyplatí se upgradovat na Windows 11?Windows byl přepracován. Ale stačí to k tomu, abyste vás přesvědčili o přechodu z Windows 10 na Windows 11?
Číst dále Související témata- Programování
- JavaScript
Ian Buckley je nezávislý novinář, hudebník, performer a producent videa žijící v Berlíně v Německu. Když nepíše nebo není na jevišti, pohrává si s elektronikou nebo DIY v naději, že se stane šíleným vědcem.
Více od Iana BuckleyhoPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru