Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Animácie v JavaScripte pomocou Anime.js (1. časť): Ciele a vlastnosti

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called JavaScript-Based Animations Using Anime.js.
JavaScript-Based Animations Using Anime.js, Part 2: Parameters

Slovak (Slovenčina) translation by Ryan (you can also view the original English article)

Anime.js je ľahká knižnica pre vytváranie animácii v JavaScripte. Môžete ju použiť pre animáciu rôznych vlastností v CSS, SVG alebo atribútov DOM vo vašej stránke. Knižnica vám umožňuje ovládať všetky aspekty animácie a poskytuje kopec spôsobov, ako určiť prvky alebo vlastnosti, ktoré chcete animovať.

Máte plnú kontrolu nad sekvenciou, podľa ktorej sa prehrajú animácie a ako sú animácie synchronizované. Knižnica podporuje všetky moderné prehliadače vrátane IE 10+.

V tejto sérii návodov sa pozrieme na všetky vlastnosti Anime.js, ktoré môžete jednoducho používať vo vašich projektoch:

Predtým, než sa budeme zaoberať touto knižnicou, musíme ju najprv nainštalovať. Môžete to urobiť pomocou npm alebo bower spustením týchto príkazov:

Taktiež si knižnicu môžete stiahnuť a zahŕnuť ju vo vašom projekte alebo pridať odkaz na verziu hostovanú v CDN.

Po úspešnej inštalácii ste pripravený k použitiu tejto knižnice pre pridanie zaujímavej animácie do vašich prvkov. Začneme so základmi knižnice, kde sa budeme zameriavať na vlastnosť po vlastnosti.

Určovanie cieľových prvkov

Pre vytváranie animácií pomocou Anime.js si musíte zavolať funkciu anime() a posunúť objekt, ktorý určuje cieľové prvky a vlastnosti, ktoré chcete animovať. Taktiež môžete použiť kľúč targets, aby ste naznačili Anime.js, ktoré prvky chcete animovať. Tento kľúč prijíma hodnoty v rôznych formátoch.

CSS selektory: Môžete posunúť jeden alebo viac CSS selektorov ako hodnotu kľúča targets.

V prvom prípade Anime.js vykoná animáciu vo všetkých prvkoch s triedou blue. V druhom prípade Anime.js vykoná animáciu vo všetkých prvkoch s triedou red alebo blue. V treťom prípade Anima.js vykoná animáciu pre všetky párne prvky s triedou square. V poslednom prípade Anime.js vykoná animáciu pre prvky s triedou square, ktoré nemajú triedu red.

DOM Node alebo NodeList: Taktiež môžete použiť Node alebo NodeList ako hodnotu kľúča targets. Tu je niekoľko príkladov nastavenia Node ako hodnotu kľúča targets.

V prvom prípade používame funkciu getElementById() pre získanie nášho špeciálneho prvku. Funkcia querySelector() sa využíva pre vybranie prvého prvku, ktorá má triedu blue. Funkcia querySelectorAll() sa využívate pre získanie všetkých prvkov, ktoré sú súčasťou skupiny selektorov.

Existuje kopec iných funkcií, pomocou ktorých môžete vybrať cieľové prvky, ktoré chcete animovať. Napríklad, keď chcete vybrať prvky podľa názvu triedy, môžete použiť funkciu getElementsByClassName(). Podobne, keď chcete vybrať všetky prvky podľa názvu značky, použite funkciu getElementsByTagName().

Akákoľvek funkcia, ktorá vracia Node alebo NodeList, môže byť použitá pre nastavenie kľúča targets v Anime.js.

Objekt: Taktiež môžete použiť objekt ako hodnotu kľúča targets. V tomto kľúči je tento objekt použitý ako identifikátor, kde jej hodnota je číslo, ktoré je potrebné animovať.

Potom môžete zobraziť animáciu vo vnútri nejakého HTML prvku s pomocou prídavného JavaScriptu. Tu je kód pre animáciu hodnôt dvoch rôznych kľúčov.

Kód vyššie vykoná animáciu pre počet skenovaných súborov od 0 po 1000 a počet infikovaných súborov od 0 po 8. Vedzte, že týmto spôsobom viete animovať iba číselné hodnoty. Pokus o animáciu z "AAA" do "BOY" vyhodí chybu.

Do kľúča update sme použili spätné volanie, ktoré je volané, vždy, keď sa zaktualizuje hodnota. Túto funkciu sme použili na aktualizáciu počtu skenovaných a infikovaných súborov. Avšak môžete ísť ďalej a zobraziť chybovú správu vždy, keď počet infikovaných súborov prekročí maximum.

Pole: Možnosť určiť pole ako cieľ je užitočné, keď máte animovať niekoľko prvkov pod rôznymi kategóriami. Napríklad, keď máte animovať Node, objekt alebo niekoľko iných prvkov na základe CSS selektorov, môžete to urobiť tak, že ich dáte do vnútri poľa a určite ho ako hodnotu kľúča targets. Tento príklad by to mal objasniť:

Vlastnosti, ktoré môžu byť animované pomocou Anime.js

Teraz, keď viete, ako určiť rôzne prvky, ktoré chcete animovať, je čas sa pozrieť na to, ako je možné animovať prvky a atribúty pomocou tejto knižnice.

CSS vlastnosti: Anime.js vám umožňuje animovať veľký počet CSS vlastností, ako je šírka, výška a farba pre rôzne cieľové prvky. Konečné hodnoty vlastností ako je background-color alebo border-width sú určené pomocou camel case názvu tejto vlastnosti. To znamená, že background-color je backgroundColor a border-width je borderWidth. Tento kód vytvára animáciu na ľavé miesto a farbu pozadia v cieľovom prvku v Anime.js.

Vlastnosti môžu prijímať akékoľvek typy hodnôt, ktoré môžu byť prijaté v obyčajnom CSS. Napríklad, vlastnosť left môže mať hodnotu 50vh, 500px alebo 25em. Taktiež môžete určiť obyčajné číslo ako hodnotu. V tomto prípade by číslo bolo premenené na pixelovú hodnotu. Podobne môže byť farba pozadia určená ako hexadecimálna, RGB alebo HSL hodnota.

CSS transformy: Taktiež môžete pomocou Anime.js animovať rôzne vlastnosti CSS transform. Preklad medzi osami x a y môže byť vykonaný pomocou vlastností translateX a translateY. Podobne je možné škálovať, prekrútiť alebo otočiť prvok podľa určenej osi pomocou vlastností scale, skew alebo rotate.

Taktiež môžete určiť rôzne uhly buď v stupňoch alebo výrazu turn. Jedno otočenie (turn) sa rovná 360°. Toto môže uľahčiť kalkuláciu, keď viete, koľko krát chcete otočiť prvky. Tento príklad ukazuje, ako animovať škálovanie, preklad alebo otáčanie prvku.

SVG atribúty: Je možné animovať atribúty rôznych SVG prvkov pomocou Anime.js. Jedinou podmienkou je, že tieto atribúty musia byť v číselnej hodnote. Schopnosť animovať rôzne atribúty otvára možnosť vytvárať niektoré veľmi skvelé efekty. Pretože iba začínate s Anime.js, tieto príklady budú veľmi jednoduché.

Keď budeme pokračovať, naučíme sa o tvorbe veľmi zložitých animácií. Tu je kód pre animáciu atribútov kruhu cx, cy a stroke-width. Podobne ako s CSS vlastnosťami, potrebujete používať camel case názov atribútu stroke-width.

DOM atribúty: Taktiež môžete animovať číselné DOM atribúty podobne ako sa môžu animovať SVG atribúty. Jedna zo situácií, kedy je animácia DOM atribútu užitočná je použitie prvku progress. Tento prvok ma dva atribúty, value a max. V tomto príklade ho budeme animovať pre zobrazenie stavu procesu prenosu súbora. Tu je kód k animácii atribútu value.

Posledné slová

V tomto návode sme sa pozreli na všetky spôsoby výberu cieľových prvkov v Anime.js a ako animovať rôzne CSS vlastnosti a atribúty ním príbuzné. V tomto bode neovládame nič, čo sa týka skutočnej animácie.

JavaScript je jazykom webu. Avšak nie je bez nejakých kriviek učenia a existuje kopec frameworkov a knižníc, ktoré vás zaneprázdnia. Ak hľadáte skutočné zdroje k štúdiu alebo použitiu do vašej práce, pozrite sa, čo máme dostupné v obchode Envato.

V ďalšom návode tejto série sa pozrieme na to, ako ovládať zmiernenie, oneskorenie a čas animácie pre rôzne vlastnosti ako v skupine tak aj jednotlivo. Potom sa naučíme, ako ovládať všetky parametre animácie pre jednotlivé prvky.

Ak máte nejaké otázky ohľadom tohto návodu alebo ak ste použili Anime.js v nejakých zaujímavých projektoch, dajte nám vedieť v komentároch.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.