10+ най-добри библиотеки за анимация с JavaScript през 2020 г.

Най-добрите библиотеки за анимация на JavaScript


Ако искате да привлечете вниманието на посетителя на уебсайта си, какво може да бъде по-добре от анимациите? Използвайки много двигатели на приложения, които са свободно достъпни в мрежата, можете лесно да накарате елементите на уебсайта ви да избледняват, да отскачат или да завиват. В днешния пост ще видим как библиотеките за анимация на JavaScript могат да помогнат с всичко това.

Първо, малко за JavaScript анимациите

Едно е да добавите прости анимации, които се нуждаят само от едно действие (например превключване). За това винаги можете да използвате прости CSS анимации. Но за по-сложни или напреднали ефекти JavaScript е по-добро средство. Разбира се, че използването на JavaScript за създаване на анимации е по-предизвикателно от използването на CSS.

Въпреки това, JavaScript може да се справи с неща, които CSS не може. Това дава на разработчиците начин повече енергия да контролират сложни анимации, които трябва да координират множество движещи се части.

JavaScript анимациите се реализират чрез добавяне на постепенни промени в стила на елемента. Можете да ги добавите онлайн като част от кода си или да ги включите в други обекти. При изобразяването тези промени се извикват от таймер. Също така, можете да контролирате непрекъснатостта на анимациите, като коригирате интервала от време на промените.

Най-добрите библиотеки за анимация на JavaScript

Ето списък с библиотеки за анимация на JavaScript, които можете да използвате, за да добавите страхотни анимации към вашия уебсайт:

1. Anime.js

JavaScript Анимационни библиотеки: Anime.js

Нека започнем този списък с библиотеки за анимация на JavaScript с Anime.js. Тази лека анимационна библиотека с часовници 35K + звезди GitHub. Работейки от един мощен API, можете да го използвате за анимиране на HTML, CSS, JS, SVG и DOM атрибути. С вградена залитаща система, тя може да направи създаването на пулсации, насочващи движения, последващи и припокриващи се ефекти да изглежда просто. Тази система е използваема както за времето, така и за свойствата.

Можете да направите много, използвайки вградените функции за обратно извикване и контрол. Например, можете да играете, пауза, контрол, пренасочване и задействане на събития в синхрон. За да видите какво е възможно с помощта на тази библиотека, можете да посетите Codepen.

2. Velocity.js

Velocit.js

Velocity.js съчетава най-доброто от jQuery и CSS преходи. Той оценява близо 17K звезди на GitHub и може да се похвали с видни потребители като WhatsApp и Mailchimp. Примка, заден ход, забавяне, скриване / показване на елементи, математика на свойствата (+, -, *, /) и хардуерно ускорение, всички те са част от функциите.

Можете да използвате Velocity.js за превъртане на прозорците на браузъра. Той може да работи както с jQuery, зареден във вашия браузър, така и независимо от него, и дори да отменя предишни анимации.

3. Popmotion

Popmotion

В близост до 18K звезди, Popmotion е функционална библиотека за анимация за всяка JavaScript среда. Може да работи с почти всеки API, който приема числа като входни данни като React, Three.js, A-Frame и PixiJS.

Popmotion тежи само 11,7kB, но въпреки това събира удар. Той включва анимации като ключови кадри, разпад, времева линия за синхронизиране на няколко инстанции и други. Можете да залитате всяка серия от анимации или функции, както и да използвате чисти функции, за да съставите свои собствени конфигурации.

4. Three.js

Библиотеки за анимация на JavaScript: Three.js

Three.js оглавява този списък с библиотеки за анимация на JavaScript с включени 60K + звезди GitHub. Зависи от WebGL за създаване и изобразяване на 3D анимации в браузъра.

Има много документация, която ще ви помогне, и след като преминете кривата на обучение, няма да можете много да използвате тази библиотека. Първо, използвайки редактора Three.js, вие създавате сцена. След това можете да добавите геометрични фигури и да настроите осветлението и камерата. Материалът, текстурата, обектът, цветът и мъглата могат да бъдат оправени и окончателният файл, публикуван във вашия проект.

5. GreenSock JS

GreenSock

GSAP на GreenSock работи с набор от малки JavaScript файлове, които правят анимациите да изглеждат страхотно във всички основни браузъри. Той гладко вериги множество свойства на анимация и елиминира грешки в браузъра.

GSAP действията включват създаване на анимации на Canvas и анимиране на всеки обект в сцена. Също така постепенно разкриване, морфиране или преместване на всеки обект по пътека. За тази цел работи с куп софтуерни приложения като SVGPlugins, PixiPlugin, WebGL, Adobe Animate и EaseJS. Модулната му структура ви помага да изберете само функциите, от които се нуждаете. С 8 милиона потребители и 10K + звезди GitHub, тази мощна библиотека много работи.

6. AniJS

AniJS

Сред JavaScript библиотеките в този списък AniJS е някак уникален. Той ви позволява да добавяте анимации към елементи в проста структура, подобна на изречение, чудесна за хора, нови в анимацията. Нещо повече, неговата неспецифична природа позволява на почти всеки да го използва в рутинния UX дизайн.

На GitHub, AniJS оценява повече от 3.5K звезди. Той не разчита на никаква библиотека на трети страни и като цяло помага за ускоряване на развитието. Работи също толкова добре на Android и iOS, както и във всички популярни браузъри.

7. Mo.js

Mo.js

Движението графика играе голяма роля в анимациите, а Mo.js е една опция, с която можете да направите въздействие. С редица уроци и демонстрации за подпомагане на начинаещите може да не им е трудно да създават геометрични фигури и времеви анимации до точка.

API-ите може да изглеждат прости, но можете да направите много неща с тях. В инструментариума ще намерите редактор на криви и редактор на времевата линия, които ще ви помогнат да изградите анимациите си, както и плейър за контрол на вашите анимации. Има различни модули за залитане, облекчаване, времева линия и други. Всичко това печели Mo.js близо до 16K звезди на GitHub.

8. Vivus.js

Библиотеки за анимация на JavaScript: Vivus

Ако искате да имитирате рисунка с химикалка на екрана в реално време, ще натиснете маркировката с Vivus. Тя ви позволява да анимирате SVGs, създавайки впечатление за нарисувани. Тъй като няма зависимости, той е бърз и лек.

Можете да изберете някоя от наличните анимации – Delayed, Sync или OneByOne. Освен това можете също да създадете персонализиран скрипт, за да нарисувате SVG. За по-голяма гъвкавост можете да замените анимацията на всеки път с помощта на проста JavaScript функция. Повече от 13K потребители дават палец на тази библиотека на GitHub.

9. ScrollReveal JS

ScrollReveal

Ако искате да анимирате вашите уеб елементи, докато те превъртат в изглед, ScrollReveal няма да разочарова. Тази лесна за научаване библиотека за анимация има нулеви зависимости и 18.5K + звезди GitHub.

ScrollReveal поддържа различни видове ефекти и работи добре с уеб и мобилни браузъри. Умишлено работи с конфигурация с голи кости, така че можете да го използвате като платно за вашето творчество. За да увеличите максимално ефекта от анимациите, създателите съветват да го използвате умерено.

10. Typed.js

Typed.js

Typed.js е обикновена библиотека (всъщност повече от плъгин), за да анимирате да пишете на екрана си. След като въведете произволен низ, посетител може да наблюдава как се въвежда с зададена скорост. Не само това, можете да работите с бутона на обратно пространство, както и да започнете ново изречение. Ако искате да разрешите на посетителите с JS инвалид да го преглеждат, просто трябва да поставите HTML div на страницата. По този начин, ботовете и търсачките също могат да видят въведените думи.

Тази библиотека оценява 9,5K + звезди на GitHub. Потребителите на мощност включват Slack и Envato.

11. Лоти от AirBnB

Библиотеки за анимация на JavaScript: Lottie

Lottie е лек анимационен графичен формат, който балансира висококачествената графика срещу цената на рендирането им. Това прави приложенията по-малки и включва динамични функции. Може да се използва за уеб, Android, iOS и IoT, без да е необходим допълнителен софтуер.

Lottie може да работи на всеки браузър, който поддържа JavaScript. Анимациите се съхраняват в обикновен текст и са четими за човека. Тъй като текстовите данни се съхраняват във формат JSON, той лесно се асимилира с всяка JavaScript среда. Това го прави популярен анимационен графичен формат за подобряване на мобилните фронтове. Само версията за android се радва на близо до 30K звезди GitHub.

Ако сте стигнали до края на този списък от библиотеки за анимация на JavaSCript, може да се интересувате и от търсене на други библиотеки и рамки на JavaScript. Или проверете тези най-добри библиотеки на компоненти на React UI.

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map