10 ir daugiau geriausių „JavaScript“ animacijos bibliotekų, kurios bus naudojamos 2020 m

10 ir daugiau geriausių „JavaScript“ animacijos bibliotekų, kurios bus naudojamos 2020 m

10 ir daugiau geriausių „JavaScript“ animacijos bibliotekų, kurios bus naudojamos 2020 m
СОДЕРЖАНИЕ
02 июня 2020

Geriausios „JavaScript“ animacijos bibliotekos


Jei norėtumėte patraukti savo svetainės lankytojų dėmesį, kas gali būti geriau už animaciją? Naudodamiesi daugybe laisvai žiniatinklyje prieinamų programų varikliais, galite lengvai priversti savo svetainės elementus išblėsti, atšokti ar apsiverkti. Šiandienos įraše pamatysime kaip „JavaScript“ animacijos bibliotekos gali padėti su visa tai.

Pirmiausia šiek tiek apie „JavaScript“ animaciją

Pridėkite paprastų animacijų, kurioms atlikti reikia tik vieno veiksmo (pavyzdžiui, perjungti), yra vienas dalykas. Tam visada galite naudoti paprastas CSS animacijas. Tačiau sudėtingesniems ar sudėtingesniems efektams „JavaScript“ yra geresnis įrankis. Savaime suprantama, kad „JavaScript“ kurti animaciją yra sunkiau, nei naudoti CSS.

Nepaisant to, „JavaScript“ gali tvarkyti dalykus, kurių CSS negali. Tai suteikia kūrėjams daugiau galios valdyti sudėtingas animacijas, kurias reikia koordinuoti keliomis judančiomis dalimis.

„JavaScript“ animacijos įgyvendinamos pridedant laipsniškus elemento stiliaus pakeitimus. Juos galite pridėti savo eilutėje kaip savo kodo dalį arba įtraukti juos į kitus objektus. Pateikiant šiuos pakeitimus iškviečiamas laikmatis. Be to, galite valdyti animacijos tęstinumą, koreguodami pakeitimų laiko intervalą.

Geriausios „JavaScript“ animacijos bibliotekos

Čia yra „JavaScript“ animacijos bibliotekų, kurias galite naudoti norėdami pridėti keletą nuostabiai atrodančių animacijų į savo svetainę, sąrašas:

1. Anime.js

„JavaScript“ animacijos bibliotekos: Anime.js

Pradėkime šį „JavaScript“ animacijos bibliotekų sąrašą naudodamiesi Anime.js. Ši lengva animacijos biblioteka įjungia 35 K + žvaigždes „GitHub“. Dirbdami iš vienos galingos API, galite naudoti ją HTML, CSS, JS, SVG ir DOM atributams pagyvinti. Naudodamas įmontuotą stulbinančią sistemą, jis gali palengvinti sukimosi judesius, krypčių judesius, paskesnius ir sutampančius efektus. Ši sistema yra naudojama tiek laiko, tiek savybių atžvilgiu.

Naudodami įmontuotas atgalinio ryšio ir valdymo funkcijas galite nuveikti daug. Pavyzdžiui, sinchronizuotai galite leisti, pristabdyti, valdyti, atvirkščiai ir suaktyvinti įvykius. Norėdami pamatyti, kas dar įmanoma naudojant šią biblioteką, galite apsilankyti Kodepenas.

2. Velocity.js

Velocit.js

„Velocity.js“ sujungia geriausius „jQuery“ ir CSS perėjimus. Jis įvertintas beveik 17 000 žvaigždžių „GitHub“ ir gali pasigirti tokiais garsiais vartotojais kaip „WhatsApp“ ir „Mailchimp“. Elementų kilpa, atbuline eiga, atidėliojimas, paslėpimas / rodymas, nuosavybės matematika (+, -, *, /) ir aparatinės įrangos pagreitis – visa tai yra savybių dalis.

Norėdami slinkti naršyklės languose, galite naudoti „Velocity.js“. Tai gali veikti tiek su jQuery, įkelta į jūsų naršyklę, tiek nepriklausomai nuo jos, ir netgi anuliuoti ankstesnes animacijas.

3. Popmuzika

Popmuzika

Netoli 18K žvaigždės, „Popmotion“ yra funkcinė animacijos biblioteka bet kuriai „JavaScript“ aplinkai. Jis gali dirbti su beveik visomis API, kurios priima skaičius kaip įvestis, tokias kaip „React“, „Three.js“, „A-Frame“ ir „PixiJS“..

„Popmotion“ sveria tik 11,7 kb, bet vis tiek supakuoja perforatorių. Jame yra animacijos, tokios kaip raktų rėmeliai, atkirtis, kelių egzempliorių sinchronizavimo laiko juosta ir dar daugiau. Galite sudėti bet kurią animacijos ar funkcijų seriją, taip pat naudokite grynas funkcijas komponuodami savo konfigūraciją.

4. Three.js

„JavaScript“ animacijos bibliotekos: Three.js

„Three.js“ viršija šį „JavaScript“ animacijos bibliotekų sąrašą su 60 000 ir daugiau žvaigždžių „GitHub“. Tai priklauso nuo „WebGL“ sukurti ir pateikti 3D animacijas naršyklėje.

Čia yra daugybė dokumentų, kurie jums padės, ir kai peržengsite mokymosi kreivę, naudodamiesi šia biblioteka nėra tiek daug, ko negalite atlikti. Pirmiausia, naudodamiesi „Three.js“ redaktoriumi, sukuriate sceną. Po to jūs turėsite pridėti geometrines figūras, sureguliuoti apšvietimą ir kamerą. Medžiaga, tekstūra, objektas, spalva ir rūkas gali būti pataisyti, o galutinė byla paskelbta jūsų projekte.

5. „GreenSock JS“

„GreenSock“

„GreenSock“ GSAP veikia su mažų „JavaScript“ failų rinkiniu, kuris animacijai atrodo puikiai visose pagrindinėse naršyklėse. Tai sklandžiai susieja daugybę animacijos savybių ir pašalina naršyklės klaidas.

GSAP veiksmai apima animacijos kūrimą ant drobės ir bet kurio objekto scenoje animavimą. Taip pat palaipsniui bet kurį objektą atskleiskite, sutraukite ar perkelkite. Šiuo tikslu jis veikia su daugybe programinės įrangos programų, tokių kaip SVGPlugins, PixiPlugin, WebGL, Adobe Animate ir EaseJS. Jo modulinė struktūra padeda pasirinkti tik jums reikalingas funkcijas. Su 8 mln. Vartotojų ir 10 000 + žvaigždžių „GitHub“, ši galinga biblioteka turi daug ko pasiekti.

6. AniJS

AniJS

Tarp šio sąrašo „JavaScript“ bibliotekų „AniJS“ yra šiek tiek unikali. Tai leidžia jums pridėti animaciją prie elementų, į paprastą į sakinį panašų struktūros elementą, puikiai tinkantį žmonėms, pradedantiems animacija. Be to, jo nespecifinis pobūdis leidžia beveik visiems naudoti jį įprastame UX dizaine.

Įjungta „GitHub“, „AniJS“ įvertina daugiau nei 3,5 tūkst. Žvaigždžių. Tai nereikalauja jokios trečiųjų šalių bibliotekos ir paprastai padeda paspartinti plėtrą. Tai taip pat gerai veikia „Android“ ir „iOS“, taip pat visose populiariose naršyklėse.

7. Mo.js

Mo.js

Judesio grafika turi didelę reikšmę animacijoje, o „Mo.js“ yra viena iš galimybių, kuria galite padaryti įtaką. Pradėjusiesiems gali būti sunku sukurti geometrines figūras ir laiko animaciją, nes joje gali būti daugybė pamokymų ir demonstracinių versijų..

API gali pasirodyti paprastos, tačiau su jomis galite nuveikti labai daug. Įrankių rinkinyje rasite „Kreivių redaktorių“ ir „Laiko juostos“ redaktorių, kurie padės kurti animaciją, taip pat grotuvą, skirtą animacijoms valdyti. Yra įvairių modulių, skirtų sustojimui, palengvinimui, laiko juostai ir dar daugiau. Visa tai uždirba „Mo.js“, turintį beveik 16 tūkst „GitHub“.

8. Vivus.js

„JavaScript“ animacijos bibliotekos: „Vivus“

Jei norite imituoti pieštuko piešinį ekrane realiu laiku, paspausite ženklą naudodami „Vivus“. Tai leidžia jums pagyvinti SVG, sukuriant įspūdį, kad esate nupieštas. Kadangi jis neturi jokių priklausomybių, jis yra greitas ir lengvas.

Galite pasirinkti bet kurią iš galimų animacijų – atidėtą, sinchronizuotą arba „OneByOne“. Dar galite sukurti pasirinktinį scenarijų, kad nupieštumėte savo SVG. Jei norite daugiau lankstumo, naudodamiesi paprasta „JavaScript“ funkcija, galite nepaisyti kiekvieno kelio animacijos. Daugiau nei 13 000 vartotojų suteikia šios knygos nykščius „GitHub“.

9. „ScrollReveal JS“

„ScrollReveal“

Jei norite animuoti savo žiniatinklio elementus, kai jie pereina į vaizdą, „ScrollReveal“ nenuvils. Ši lengvai mokoma animacijos biblioteka neturi jokios priklausomybės ir yra 18,5 K + žvaigždutės „GitHub“.

„ScrollReveal“ palaiko įvairius efektų tipus ir gerai veikia su interneto ir mobiliųjų įrenginių naršyklėmis. Tai sąmoningai veikia su plikų kaulų konfigūracija, todėl galite tai naudoti kaip drobę savo kūrybai. Norėdami padidinti animacijos efektą, kūrėjai pataria ja naudotis atsargiai.

10. Įvesta.js

Įvesta.js

„Typed.js“ yra paprasta biblioteka (tikrai daugiau iš įskiepio), norint pagyvinti rašymą ekrane. Įvedęs bet kurią eilutę, lankytojas gali žiūrėti, kaip ji įvedama nustatytu greičiu. Galite naudoti ne tik grįžimo mygtuką, bet ir pradėti naują sakinį. Jei norite leisti lankytojams, kurių JS neįgalūs, taip pat tai peržiūrėti, jums tiesiog reikia įdėti HTML skyrių puslapyje. Tokiu būdu robotai ir paieškos sistemos taip pat gali peržiūrėti įvestus žodžius.

Ši biblioteka įvertina 9,5 K + žvaigždutes „GitHub“. Galios vartotojai yra „Slack“ ir „Envato“.

11. „Lottie“ pateikė „AirBnB“

„JavaScript“ animacijos bibliotekos: „Lottie“

„Lottie“ yra lengvas animuotos grafikos formatas, kuris subalansuoja aukštos kokybės grafiką ir jos pateikimo kainą. Tai daro programas mažesnes ir apima dinamines funkcijas. Jis gali būti naudojamas žiniatinkliui, „Android“, „iOS“ ir „IoT“, nereikia papildomos programinės įrangos.

„Lottie“ gali veikti bet kurioje naršyklėje, palaikančioje „JavaScript“. Animacijos saugomos paprastu tekstu ir yra lengvai skaitomos žmonėms. Kadangi tekstiniai duomenys saugomi JSON formatu, juos lengva prilyginti bet kuriai „JavaScript“ aplinkai. Tai daro jį populiariu animuotosios grafikos formatu, skirtu patobulinti mobiliųjų telefonų priekines dalis. Vien „Android“ versija naudojasi beveik 30 000 žvaigždžių „GitHub“.

Jei jau pasiekėte šio „JavaSCript“ animacijos bibliotekų sąrašo pabaigą, jums gali būti įdomu ieškoti kitų „JavaScript“ bibliotekų ir rėmų. Arba peržiūrėkite šias geriausias „React“ vartotojo sąsajos komponentų bibliotekas.

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 50–80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector