Knižnice JavaScript na vytváranie úžasných animácií

Paul je advokátom dizajnu a výkonu

Evanjelizuje Chrome a mobilný web v tíme pre vzťahy s vývojármi v spoločnosti Google.

Existujú dva hlavné spôsoby vytvárania animácií na webe: pomocou CSS a JavaScriptu. Ktorý by ste si mali vybrať? Závisí to od iných charakteristík vášho projektu, ako aj od toho, aké efekty sa snažíte dosiahnuť.

TL;DR

• Použite animáciu CSS na jednoduché, krátke prechody, ako je napríklad prepínanie stavu prvkov používateľského rozhrania.
• Animáciu JavaScript použite vtedy, keď sú potrebné zložité efekty, ako je poskakovanie, zastavenie, pozastavenie, pretáčanie alebo spomalenie.
• Ak sa rozhodnete animovať pomocou JavaScriptu, použite TweenMax alebo, ak chcete jednoduchšie riešenie, TweenLite.

Najjednoduchšiu animáciu je možné vytvoriť pomocou CSS aj JavaScriptu, ale množstvo práce a času sa budú líšiť (pozri tiež článok). Každá možnosť má svoje klady a zápory, no treba dodržiavať dobré pravidlá:

• Použite CSS pri riešení samostatných stavov pre malé prvky používateľského rozhrania. Prechody a animácie CSS sú ideálne na zobrazenie navigačnej ponuky na bočnej strane obrazovky alebo na zobrazenie popisu. Na ovládanie stavu je možné použiť JavaScript, ale samotná animácia bude vykonaná pomocou CSS.
• Ak sa vyžaduje vysoký stupeň kontroly nad animáciou, použite JavaScript. Ak potrebujete implementovať dynamické sledovanie dotykov alebo animáciu, ktorú je potrebné zastaviť, pozastaviť, spomaliť alebo vrátiť späť, mal by sa použiť JavaScript.

Ak už používate jQuery alebo framework JavaScript, ktorý má funkcie animácie, možno by bolo lepšie použiť tieto funkcie, než prejsť na CSS.

Animácia pomocou CSS

Animácia pomocou CSS je bezpochyby najjednoduchší spôsob, ako rozhýbať niečo na obrazovke.

Nasleduje kód CSS, ktorý posúva prvok o 100 pixelov pozdĺž osi x a y. To sa vykonáva pomocou prechodov CSS, ktoré sú nastavené na spustenie do 500 ms. Po pridaní triedy presunu sa zmení hodnota vlastnosti transform a začne sa prechod.

Box ( -webkit-transform: translate(0, 0); -webkit-transition: -webkit-transform 500 ms; transform: translate(0, 0); transition: transform 500 ms; ) .box.move ( -webkit-transform: translate(100px, 100px); transform: translate(100px, 100px); )

Ak sú, ako v úryvku vyššie, vytvorené samostatné triedy CSS na ovládanie animácie, každú animáciu možno zapnúť a vypnúť pomocou JavaScriptu:

Box.classList.add("presunúť");

Dosiahnete tak veľmi dobrú vyváženosť vašich aplikácií. Zamerať sa môže na správu stavu pomocou JavaScriptu. Pre zvyšok stačí nastaviť príslušné triedy pre cieľové prvky a prehliadač vykoná animáciu. Ak zvolíte túto cestu, budete môcť prijímať prechodové udalosti pre prvok. Toto však nie je vhodné pre staršie verzie Internet Explorera; verzia 10 bola prvá, ktorá podporovala tieto udalosti. Všetky ostatné prehliadače túto udalosť podporujú už nejaký čas.

Kód JavaScript potrebný na prijatie udalosti ukončenia prechodu je nasledujúci:

varbox = document.querySelector(".box"); box.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() ( // Spracovanie dokončenia prechodu. )

Okrem použitia prechodov CSS môžete použiť aj animácie CSS, ktoré vám poskytujú oveľa väčšiu kontrolu nad jednotlivými kľúčovými snímkami, trvaním a prechodmi animácie.

Poznámka:Ak je pre vás animácia novinkou, mali by ste vedieť, že kľúčové snímky sú starý termín používaný z čias, keď sa animácia kreslila ručne. Animátori vytvorili špeciálne snímky pre akciu, ktoré sa nazývali kľúčové snímky. Zachytili veci ako najextrémnejšiu časť určitého pohybu a potom nakreslili všetky jednotlivé snímky medzi kľúčové snímky. Dnes pri vytváraní animácií pomocou CSS existuje podobný proces, keď prehliadaču povieme, aké hodnoty by vlastnosti CSS mali mať v určitých bodoch, a prehliadač vyplní medzery.

Rovnakým spôsobom môžete napríklad animovať štvorec pomocou prechodov, ale animácia prebehne bez akejkoľvek akcie používateľa (napríklad kliknutia) a bude sa opakovať donekonečna. Okrem toho môžete zmeniť niekoľko vlastností súčasne:

/** * Toto je zjednodušená verzia bez * predpôn dodávateľa. S nimi zahrnutými * (ktoré budete potrebovať) budú veci ďaleko * podrobnejšie! */ .box ( /* Vyberte animáciu */ názov-animácie: moveBox; /* Trvanie animácie */ Trvanie animácie: 1300 ms; /* Počet, koľkokrát sa má animácia spustiť */ animation-itration-count : nekonečno; /* Spôsobí, že sa animácia obráti pri každej nepárnej iterácii */ smer animácie: alternatívne; ) @keyframes movingBox ( 0 % ( transform: translate(0, 0); nepriehľadnosť: 0,3; ) 25 % ( nepriehľadnosť: 0,9 ; ) 50 % ( transformácia: translate(100px, 100px); nepriehľadnosť: 0,2; ) 100% ( transformácia: translate(30px, 30px); nepriehľadnosť: 0,8; ) )

Pri vytváraní animácie pomocou CSS definujete samotnú animáciu bez ohľadu na cieľový prvok a potom vyberiete požadovanú animáciu pomocou vlastnosti animation-name.

Animácia pomocou CSS je stále vo veľkej miere závislá od prehliadača, hoci prehliadače Chrome, Safari, Opera, Safari Mobile a Android Browser používajú na jej označenie predponu -webkit-. Internet Explorer a Firefox nepoužívajú predpony. Existuje mnoho nástrojov, ktoré vám umožňujú vytvárať požadované verzie CSS s predponou a verziu bez predpony môžete zapísať do zdrojových súborov.

Animácia pomocou JavaScriptu

Vytváranie animácií pomocou JavaScriptu je ťažšie ako písanie prechodov alebo animácií pomocou CSS, ale JavaScript vo všeobecnosti dáva vývojárom oveľa väčšiu silu. Zvyčajne sa používa funkcia requestAnimationFrame a potom sa na každom snímku animácie manuálne určí hodnota každej vlastnosti prvku, ktorý je animovaný.

Poznámka:Na webe môžete nájsť publikácie kódu, ktoré na animáciu používajú funkciu setInterval alebo setTimeout. Toto je hrozné rozhodnutie, pretože animácia nebude synchronizovaná s frekvenciou obrazovky, a preto existuje vysoká pravdepodobnosť trhnutia a výpadkov. Tento druh kódu nie je žiaduci vo všetkých situáciách a namiesto toho sa odporúča použiť funkciu requestAnimationFrame, ktorá je správne synchronizovaná.

Function Box () ( var animationStartTime = 0; var animationDuration = 500; var target = document.querySelector(".box"); this.startAnimation = function() ( animationStartTime = Date.now(); requestAnimationFrame(update); ) ; function update() ( var currentTime = Date.now(); var positionInAnimation = (currentTime - animationStartTime) / animationDuration; var xPosition = positionInAnimation * 100; var yPosition = positionInAnimation * 100; target.style.transform = "translate(" + xPosition + "px, " + yPosition + "px)"; if (positionInAnimation<= 1) requestAnimationFrame(update); } } var box = new Box(); box.startAnimation();

Tento kód sa stáva veľmi zložitým a zle spravovateľným, ak sa pokúšate pokryť viacero prípadov, preto sa vo všeobecnosti odporúča vybrať si jednu z mnohých dostupných animačných JavaScript knižníc. Ak už vo svojom projekte používate jQuery, pravdepodobne by ste nemali prechádzať na iné možnosti. Použite funkcie .animate(). Ak potrebujete vlastnú knižnicu, vyskúšajte mimoriadne výkonný nástroj TweenMax od spoločnosti Greensock. Existuje jeho zjednodušená verzia s názvom TweenLite, ktorá vytvára menšie súbory.

Keďže animácia JavaScript vám umožňuje mať úplnú kontrolu nad štýlmi prvkov v každom kroku, môžete animáciu spomaliť, pozastaviť, zastaviť, prehrať dozadu a vykonávať ďalšie manipulácie.

Ak nie je uvedené inak, obsah tejto stránky je licencovaný v rámci licencie Creative Commons Attribution 3.0 License a ukážky kódu sú licencované v rámci licencie Apache 2.0 License. Podrobnosti nájdete v našom . Java je registrovaná ochranná známka spoločnosti Oracle a/alebo jej pridružených spoločností.

Aktualizované 8. augusta 2018

Medzi webovými vývojármi existuje mylná predstava, že animácia CSS je jediný produktívny spôsob animácie na webe. Tento mýtus viedol mnohých vývojárov k úplnému opusteniu animácií založených na JavaScripte. Touto cestou:

1. Prinútili sme sa spravovať zložité interakcie používateľského rozhrania v šablónach so štýlmi
2. Zablokovali sa z podpory prehliadača Internet Explorer 8 a 9
3. Vyhnite sa budovaniu pohybovej fyziky, čo je možné len v JavaScripte

Kontrola reality: Animácia založená na JavaScripte je rovnako rýchla ako animácia založená na CSS – niekedy dokonca rýchlejšia. Animácie CSS majú zvyčajne výhodu iba oproti $.animate() jQuery, ktoré je v skutočnosti veľmi pomalé. Knižnice animácií JavaScriptu, ktoré obchádzajú jQuery, však vykazujú neuveriteľný výkon tým, že sa čo najviac vyhýbajú manipulácii s DOM. Tieto knižnice môžu byť až 20-krát rýchlejšie ako jQuery.

Poďme teda vyvrátiť niektoré mýty, ponoriť sa do niekoľkých skutočných príkladov animácií a zlepšiť naše programovacie schopnosti. Ak radi vyvíjate praktické animácie používateľského rozhrania pre svoje projekty, potom je tento článok určený práve vám.

Prečo JavaScript?

Animácie CSS sú užitočné, keď potrebujete vykonať prechody vlastností v šablónach so štýlmi. Navyše poskytujú fantastický výkon hneď po vybalení – bez pridania knižnice na stránku. Keď však použijete prechody CSS na podporu bohatého dizajnu pohybu (ako to uvidíte v najnovších verziách IOS a Androidu), stanú sa príliš ťažko spravovateľnými alebo sa ich funkčnosť jednoducho pokazí.

V konečnom dôsledku vás animácie CSS obmedzujú na určitú špecifikáciu. V JavaScripte máte zo samotnej podstaty akéhokoľvek programovacieho jazyka nekonečné množstvo logickej kontroly. Animačné motory JavaScript využívajú túto skutočnosť na poskytovanie nových funkcií, ktoré vám umožňujú vykonávať niektoré veľmi užitočné triky:

Poznámka: Ak vás zaujíma téma performance, môžete si prečítať Julian Shapiro “CSS vs. S Animácia: čo je rýchlejšie? a Jack Doyle: „Búranie mýtu: CSS animácie vs. JavaScript“. Ukážku výkonu nájdete na paneli výkonu v dokumentácii Velocity a ukážke „Knižnica porovnávania rýchlosti“ GSAP.

Rýchlosť a GSAP

Dve najpopulárnejšie JavaScriptové knižnice animácií sú Velocity.js a GSAP. Oba fungujú s jQuery aj bez neho. Pri použití týchto knižníc v spojení s jQuery nedochádza k žiadnej výkonnostnej penalizácii, pretože úplne obchádzajú zásobník animácií jQuery.

Ak je na vašej stránke prítomný jQuery, môžete použiť Velocity a GSAP rovnako ako $.animate() jQuery. Napríklad, $element.animate(( nepriehľadnosť: 0,5 )); len sa stáva $element.velocity(( nepriehľadnosť: 0,5 )).

Tieto dve knižnice fungujú aj vtedy, keď na stránke nie je prítomný jQuery. To znamená, že namiesto reťazenia vyvolania animácie do elementu objektu jQuery – ako je to jednoducho znázornené – by ste cieľový element(y) odovzdali vyvolaniu animácie:

1 2 3 4 5

/* Práca bez jQuery */ Velocity(prvok, ( opacity: 0,5 ) , 1000 ); // Rýchlosť TweenMax.to (prvok, 1 , ( nepriehľadnosť: 0,5 ) ); // GSAP

Ako môžete vidieť, Velocity si zachováva rovnakú syntax ako $.animate() jQuery, aj keď sa používa bez jQuery; stačí posunúť všetky parametre doprava o jednu pozíciu, aby sa vytvoril priestor na prechod zamýšľaných prvkov na prvej pozícii.

GSAP naproti tomu používa objektovo orientovaný dizajn API, ako aj pohodlné statické metódy. Môžete tak mať plnú kontrolu nad animáciami.

V oboch prípadoch už animujete objekt prvku jQuery, ale surový uzol DOM. Pripomíname, že k nespracovaným uzlom DOM pristupujete pomocou document.getElementByID , document.getElementsByTagName , document.getElementsByClassName alebo document.querySelectorAll (ktorý funguje rovnakým spôsobom ako mechanizmus výberu jQuery). S týmito funkciami budeme pracovať v ďalšej časti.

Práca bez jQuery

(Poznámka: ak potrebujete základný základ pre $.animate() jQuery, pozrite si niekoľko prvých sekcií v dokumentácii Velocity.)

Poďme preskúmať querySelectorAll, pretože to je pravdepodobne zbraň, ktorú budete používať pri výbere prvkov bez jQuery:

Ako je znázornené, jednoducho odošlete querySelectorAll selektor CSS (rovnaké selektory, ktoré by ste použili vo svojich štýloch) a vráti všetky zodpovedajúce prvky v poli. Preto môžete urobiť toto:

1 2 3 4 5

/* Získať všetky div. */ var divs = document.querySelectorAll("div" ) ; /* Animovať všetky divy naraz. */ Velocity(divs, ( opacity: 0,5 ) , 1000 ); // Rýchlosť TweenMax.to (divs, 1 , ( nepriehľadnosť: 0,5 ) ); // GSAP

Keďže už nepripájame animácie k objektom prvku jQuery, možno vás zaujíma, ako môžeme animácie spojiť:

V aplikácii Velocity jednoducho voláte animácie jednu po druhej:

/* Tieto animácie sú automaticky zreťazené. */ Velocity(prvok, ( opacity: 0,5 ) , 1000 ); Velocity(prvok, ( opacity: 1 ) , 1000 );

Animácia týmto spôsobom nemá žiadnu výkonnostnú nevýhodu (ukladáte do vyrovnávacej pamäte prvok, ktorý sa má animovať, do premennej, namiesto opakovaného načítavania querySelectorAll pre ten istý prvok).

(Rada: Pomocou balíka Velocity UI Pack môžete vytvoriť svoje vlastné animácie viacerých hovorov a dať im vlastné názvy, ktoré môžete neskôr použiť ako prvý parameter Velocity. Ďalšie informácie nájdete v dokumentácii k balíku Velocity UI Pack.)

Jednorazové ovládanie rýchlosti má obrovskú výhodu: ak s animáciami rýchlosti použijete prísľuby, každé volanie rýchlosti vráti efektívny prísľubový objekt. Viac o práci so sľubmi sa dozviete v článku Jakea Archibalda. Sú neuveriteľne silné.

V prípade GSAP vám jeho expresívne objektovo orientované API umožňuje umiestniť vaše animácie na časovú os, čo vám dáva kontrolu nad plánovaním a načasovaním. nie ste obmedzení na reťazové animácie; môžete vkladať časové osi, prekrývať animácie atď.:

Úžasnosť JavaScriptu: Pracovný postup

Animácia je v podstate experimentálny proces, ktorý sa musí hrať s načasovaním a uvoľnením, aby ste získali ten správny pocit z aplikácie. Samozrejme, aj keď sa vám zdá dizajn skvelý, klient bude často požadovať netriviálne zmeny. V týchto situáciách sa stáva dôležitým riadený pracovný postup.

Zatiaľ čo prechody CSS sa dajú pomerne ľahko vložiť do projektu pre efekty, ako je vznášanie sa, pri pokuse o zefektívnenie aj stredne zložitých animácií sa stanú neovládateľnými. To je dôvod, prečo CSS poskytuje animáciu kľúčových snímok, ktorá vám umožňuje zoskupiť logiku animácie do sekcií.

Základnou nevýhodou API kľúčových snímok je však to, že sekcie musíte definovať v percentách, čo nie je intuitívne. Napríklad:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@keyframesmyAnimation( 0 % { nepriehľadnosť: 0 transform: scale(0 , 0 ) ; } 25 % { nepriehľadnosť: 1 transform: scale(1 , 1 ) ; } 50 % { transform: translate(100px, 0) ; } 100 % { transform: translate(100px, 100px) ; } } #box( animácia: myAnimation 2,75s; }

Čo sa stane, ak vás klient požiada, aby ste predĺžili animáciu translateX o sekundu? To si vyžaduje obnovenie matematiky a zmenu všetkých (alebo väčšiny) percent.

Anotácia: Jednoduchý príklad: metóda vyblednutia žltej farby. Animácia s knižnicami JavaScript. Zložitejší príklad: presúvanie a zmena veľkosti. CSS prechody.

Princíp blednutia spočíva v tom, že farba pozadia miznúceho prvku je nastavená na žltú a potom sa v určitom slede krokov jeho farba vráti do pôvodnej farby. Takže ak bola pôvodná farba pozadia červená, potom sa farba nastaví na žltú, potom oranžovo-žltú, potom oranžovú, potom červeno-oranžovú a potom červenú. Počet použitých krokov určuje, ako hladko dôjde k zmene farby, a čas medzi krokmi určuje, ako dlho zmena farby trvá. Pri zmene farby môžete využiť užitočný fakt z CSS: farba môže byť definovaná ako trojica obyčajných čísel alebo ako hexadecimálny reťazec. Takže #FF0000 (červená farba) môže byť tiež definované ako rgb(255,0,0) . Zmena zo žltej na červenú v piatich krokoch teda znamená prechod z rgb(255,255,0) (žltá) na rgb(255,0,0) v nasledujúcich piatich krokoch:

rgb(255,255,0) rgb(255,192,0) rgb(255,128,0) rgb(255,64,0) rgb(255,0,0)

Zložitejší príklad: presun a zmena veľkosti

Metóda žltého vyblednutia je síce animovaná, no je do istej miery nudná. Keď väčšina ľudí myslí na animáciu, zvyčajne majú na mysli pohyb. Zaujímavá technika, ako upozorniť používateľa, že sa niečo stalo, bez toho, aby to prerušil pracovný tok, pozostáva z nemodálnej správy. Namiesto zobrazenia dialógového okna alert(), ktoré vyžaduje, aby používateľ klikol na OK, skôr ako bude môcť pokračovať, vložte správu jednoducho do plávajúceho prvku div na stránke, ktorý tam nenápadne zostane, kým nedostane potvrdenie. Druhou pomerne zaujímavou vecou potom môže byť umožnenie používateľovi vrátiť sa k správe, pri ktorej potvrdil túžbu prečítať si ju znova. Implementujme teda plávajúcu správu, ktorá sa po kliknutí „zrúti“ do rohu obrazovky a potom sa dá po kliknutí obnoviť. Ak chcete získať nápad, môžete si pozrieť malú ukážku takejto „kolabujúcej správy“ (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html).

Ak robíte serióznu animáciu alebo serióznu prácu s JavaScriptom, takmer vždy sa oplatí použiť knižnicu JavaScript. To vám umožní vytvoriť požadované zobrazenie pre používateľov bez obáv z matematických komplikácií potrebných na vykonanie animácie. (Keď ste videli prvý príklad vyššie, teraz viete, ako to urobiť a ako použiť setInterval , ale ušetríte čas a námahu použitím hotových riešení.)

Vyššie uvedená ukážka používa na prácu knižnicu jQuery (http://jquery.com/), ale ako už bolo spomenuté, väčšina knižníc poskytuje dostatočne podobný koncept animácie, takže by ste mali byť schopní implementovať základnú časť pomocou vašej preferovanej knižnice. V podstate musíte urobiť nasledovné:

1. Zobraziť plávajúcu správu v strede obrazovky
2. Keď sa naň klikne:
   1. Posuňte jeho vodorovnú polohu úplne vpravo
   2. Posuňte jeho vertikálnu polohu nahor
   3. Nastavte jeho šírku na 20 pixelov
   4. Nastavte jeho výšku na 20 pixelov
   5. Nastavte jej hustotu na 20 %, aby bola takmer priehľadná a skryte v nej text
3. Po kliknutí na túto „mini“ verziu správy ju obnovte do stredu obrazovky (t. j. opak toho, čo sme urobili pri jej komprimácii) a poskytnite používateľovi jasný obraz o tom, čo sa stalo s jeho správou. veľkosť správ do minisprávy by mala byť animovaná (aby sa im správa „scvrkla“ do rohu okna).

Animácia s jQuery je veľmi jednoduchá: stačí použiť . animovať() a uveďte požadovaný konečný výsledok animácie (a ako dlho by mala bežať):

$(ourObject).animate(( šírka: "20px", výška: "20px", hore: "20px", vpravo: "20px", marginRight: "0px", nepriehľadnosť: "0,2" ), 300);

Funkcia vezme objekt ourObject a za 300 milisekúnd zmení jeho šírku a výšku na 20 pixelov, svoju hornú a pravú pozíciu na 20 pixelov, vlastnosť štýlu margin-right na 0 pixelov a hustotu (v prehliadačoch, ktoré podporujú hustotu obrázkov) na 20 %. Potom už ide len o štýlové naprogramovanie

Pod pojmom „animácia“ najčastejšie myslíme animované filmy – naše obľúbené „kreslené filmy“ už od detstva. Ak sa však pozriete do výkladového slovníka, zistíme, že v preklade z francúzštiny to znamená „oživenie“, „animácia“. A tu sa ukazuje, že táto hodnota je prekvapivo presná nielen pre filmový priemysel, ale aj pre webové technológie.

Použitie rôznych animačných efektov(prechody, pohyby, transformácie atď.) výrazne „oživujú“ webovú stránku, umožňujú kontrolovať pozornosť používateľa, prepínať ho na požadovaný prvok a dávať určité vizuálne podnety.

Keď už hovoríme o animácii, nemožno nespomenúť známych 12 princípov formulovaných Disney animátormi, ktorých použitie je mimoriadne dôležité pre rozumné a kvalitné využitie animačných efektov.

Keď už hovoríme o technológiách, ktoré poskytujú pomocou animácií na webových stránkach, je ich viacero, no snáď ani jeden nie je taký silný ako . Ešte pred niekoľkými rokmi bola technológia animácií Flash veľkým konkurentom a veľmi populárna. Teraz sa však zdá, že svoje najlepšie roky má za sebou a zo stránok stránok ho postupne vytláčajú výkonnejšie a flexibilnejšie Java skripty. A ak to myslíš vážne použite animáciu na svojom webe, potom by ste mali staviť na JavaScript. A aby som si rozumne vybral knižnicu, urobil som dnešnú recenziu.

Dynamics.js

Asi začnem s Dynamics.js. Toto je seriózna a výkonná knižnica, ktorá vám umožňuje vytvárať fyzicky realistické animácie (ako harmonické tlmené oscilácie bodu na hlavnej stránke webu). Knižnica je schopná spravovať vlastnosti akéhokoľvek prvku DOM. Dynamics.js sa používa na vytváranie ponúk, tlačidiel, indikátorov priebehu, značiek. V tomto prípade je k dispozícii široká škála parametrov, ako je frekvencia, faktor tlmenia, parametre charakterizujúce elasticitu alebo trvanie procesu atď.

cta.js

Malý objemom knižnica cta.js zamýšľané na vytvorenie animačných efektov na stránke typu „akcia-efekt“, t.j. vznášanie sa alebo kliknutie na objekt ukazovateľom myši má špecifický účinok. Je veľmi vhodné použiť pri vývoji dlaždicových rozhraní, keď kliknutie na prvok spôsobí jeho otvorenie vo forme modálneho okna, celej stránky alebo vo forme bočného posuvného panela.

beep.js

Zaujímavá knižnica, ktorá využíva rozhranie WebAudio API na vytvorenie hudobného syntetizátora na stránke. Môže byť použitý pri vývoji online hudobného tutoriálu alebo ako zábavná hračka.

Rainyday.js

Neuveriteľne krásny dažďový efekt so stekajúcimi kvapkami rôznych veľkostí. Je pravda, že podľa môjho názoru veľkým poklesom chýba realizmus (možno rovnaká fyzika, ktorá je prítomná v Dynamics.js?). Existujúce API vám však umožňuje vytvárať vlastné objekty a ovládať ich správanie, čím vytvárate ešte neuveriteľnejšie efekty.

Dom-Animator.js

Dom-Animator.js je takzvaný easter egg. Efekt ním vyvolaný nie je viditeľný „voľným“ okom, t.j. tí, ktorí si stránku prezerajú v bežnom okne prehliadača. Ale tí, ktorí budú analyzovať váš kód, ho uvidia v konzole (ak stále nerozumiete, o čo ide, potom je tu video, z ktorého bude všetko jasné).

Slávny

Slávne - orientované na udalosti JS knižnica na vytváranie moderných animácií. Má výkonné geometrické jadro, ktoré vám umožňuje manipulovať s rôznymi 3D objektmi – bodovými a objemovými – aplikovať na ne sily a zrýchlenia, ukladať obmedzenia a kontrolovať kolízie.

bounce.js

Nie zlé Knižnica JavaScript na vytváranie pôsobivých animácií pomocou CSS. Umožňuje aplikovať na objekty rôzne typy pohybu, rotácie, zmeny mierky a transformácie.

Snabbt.js

Ľahká a rýchla knižnica, ktorá podľa vývojárov prináša 60 fps aj na mobilných zariadeniach. Pomocou transformačných matíc vám CSS umožňuje presúvať, otáčať, škálovať a vykonávať ďalšie manipulácie s objektmi. Umožňuje vám tiež použiť špeciálne efekty na upútanie pozornosti na objekty, ktoré možno použiť pri vypĺňaní formulárov.

Rekapi

Rekapi vám umožňuje používať oboje Animácia kľúčových snímok CSS(pravidlo @keyframes) a animáciu DOM s JavaScriptom. Táto knižnica vám umožňuje vytvárať pomerne zložité dynamické objekty, ako sú koláčové grafy, čiarové grafy, časové osi a ďalšie prvky používateľského rozhrania.

Smelé

Shifty je knižnica obsahujúca všetko, čo potrebujete na komplet animácie kľúčových snímok(tzv. „dvojčatá“) a počet objektov môže byť jednoducho obrovský. Je to nízkoúrovňová knižnica, ktorú možno použiť ako jadro pre platformy alebo knižnice vyššej úrovne. V skutočnosti je Shifty použitý ako jadro vyššie uvedeného Rekapi.

V tomto článku by sme vám chceli predstaviť niektoré z najužitočnejších JavaScriptových knižníc, ktoré môžete použiť na animáciu obsahu webových aplikácií. Tieto knižnice sú navrhnuté tak, aby vytvárali animácie pre rozbaľovacie ponuky, posuvné prvky, animácie paralaxy a dokonca aj písma.

Najlepšie zo všetkého je, že sú to všetky 100% bezplatné a open source zdroje, takže ich môžete použiť v ktoromkoľvek zo svojich projektov.

1.Dyanamic.js

Stačí zahrnúť dynamics.js na stránku a potom budete môcť animovať vlastnosti CSS na akomkoľvek prvku DOM. Budete tiež môcť animovať vlastnosti SVG.

Dynamics.js obsahuje vlastnú vlastnosť setTimeout. Dôvodom je, že requestAnimationFrame a setTimeout majú odlišné správanie. Túto vlastnosť podporujú všetky objekty JavaScript. Knižnica bola testovaná na kompatibilitu so Safari 7+, Firefox, Chrome 35+ 34+, IE10+.

2. Animate Plus

produktívny JavaScript knižnica pomôcť animovať vlastnosti CSS a atribúty SVG.

Animate Plus je skvelý na rýchlu interakciu so všetkými ovládacími prvkami rozhrania, ako aj na dlhé sekvencie animácií pre stolné a mobilné zariadenia.

3. cta.js

Kompaktný výkon JavaScript knižnica na animáciu akéhokoľvek prvku („akcia“) vo vnútri akéhokoľvek iného prvku („efekt“) na stránke.

4.Beep.js

Beep.js je sada nástrojov na vytváranie syntetizátorov JavaScriptu v prehliadači pomocou rozhrania WebAudio API.

5. Iconate.js

produktívny JavaScript knižnica animácia a transformácia ikon v rôznych prehliadačoch. iconate.js tiež podporuje modulárne vzory AMD a CommonJS.

6. Dom Animátor

JavaScript knižnica na zobrazenie malých ASCII animácií v komentároch DOM. Toto je samostatná knižnica, ktorá používa iba JavaScript ( animácia sa vykonáva v uzloch komentárov, iba v DOM).

7. Daždivý deň

Rainyday.js vám umožňuje vytvárať realisticky vyzerajúce kvapky dažďa na skle pomocou HTML5 plátien a JavaScriptu. Knižnica obsahuje rozšíriteľné API a vstavanú detekciu chýb.

Rainyday.js využíva silu HTML5, a preto ho podporuje väčšina moderných prehliadačov.

8.Anima.js

Anima.js vám umožňuje používať oneskorenia a trvanie, dokonca aj pre animácie CSS. Knižnica používa na vytváranie animácií Transformácie CSS a 3D transformáciu s Javascriptom. Môžete spustiť, zastaviť, zrušiť animácie a dokonca vytvárať efekty závislé od udalosti.

9. blinkTitle.js

blinkTitle.js môže vytvoriť blikajúci HTML nadpis, varovanie alebo upozornenie v nadpise.

10. Snabbt.js

Javascript knižnica je určený na presúvanie prvkov, posun, otáčanie, mierku, nakláňanie a zmenu veľkosti. Vďaka operáciám násobenia matíc je možné transformácie kombinovať v ľubovoľnej kombinácii. Konečný výsledok je potom špecifikovaný pomocou transformačných matíc CSS3.

11. Vivus

Vivus je kompaktná trieda JavaScript ( žiadne závislosti) na animáciu SVG kreslením. Vivus obsahuje mnoho rôznych animačných efektov, implementovaná je možnosť vytvorenia vlastného skriptu.

12. Impulz

JavaScript knižnica budovať dynamické interakcie založené na reálnej fyzike so zameraním na mobilné zariadenia. Namiesto vlastností animácie, ktoré určujú časové obdobie, Impulse mení polohu a rýchlosť. Neobsahuje veľa závislostí. Nevyžaduje jQuery, ale dokáže s ním pekne interagovať.

13. Ani.js

AniJS je deklaratívne JavaScript knižnica na spracovanie CSS animácií. Je plne zdokumentovaný a ľahko sa používa.

14. Bounce.js

Nástroj na vytváranie krásnych animácií kľúčových snímok založených na CSS3. Pridajte komponent, vyberte možnosť a získajte krátku URL alebo exportujte kód do CSS .

15. Sticker.js

Sticker.js je JavaScript knižnica, ktorý umožňuje vytvárať efekty odlupovania nálepiek. Knižnica funguje vo väčšine populárnych prehliadačov, ktoré podporujú CSS3 ( vrátane IE10+). Distribuované pod licenciou MIT.

16. wow.js

WOW.js vykreslí animáciu CSS, keď sa stránka posúva nadol. V predvolenom nastavení by ste mali použiť túto akciu na spustenie animate.css , ale tieto nastavenia môžete jednoducho zmeniť.

17. Parallax.js

Parallax.js je kompaktné riešenie na vytváranie paralaxových efektov. Knižnica funguje aj na smartfónoch a tabletoch ( s gyroskopom alebo hardvérovým detektorom pohybu). Parallax.js má niekoľko možností na prispôsobenie efektu pomocou " dátové atribúty alebo cez JavaScript. Knižnica môže fungovať samostatne alebo ako doplnok jQuery a Zepto ( existujú dve verzie).