Добавянето на анимации към вашето уеб приложение е един от най-добрите подходи за подобряване на външния вид и усещането на вашето приложение.
Анимациите са движещи се обекти, които уеб дизайнерите/разработчиците използват, за да привлекат вниманието на потребителите и да ги насочат да предприемат определени действия.
Писането на код за добавяне на анимации може да бъде много работа. За щастие можете да използвате библиотека с анимации.
Анимационната библиотека е колекция от предварително направени анимационни файлове, които дизайнерите могат да добавят към своите уебсайтове.
Съдържание
Защо да използвате библиотеки за анимация?
- Спестява време: Библиотеката с анимации ще осигури базовите характеристики, като ви дава повече време да се съсредоточите върху функционалността на вашето приложение.
- Възможност за персонализиране: Библиотеките за анимация обикновено предлагат шаблонен код, който можете да персонализирате, за да отговаря на вашите нужди.
- Лесно постигане на последователен дизайн: Ако имате анимации в различни уеб страници, можете да използвате една библиотека, за да гарантирате, че смесването на цветовете и шрифтовете са последователни.
- Осигурете широк набор от ефекти: Някои библиотеки с анимации имат много анимации, от които да избирате.
Прегледах някои от най-добрите JavaScript анимационни библиотеки, които можете да използвате, както следва;
Anime.js
Anime.js е лека JavaScript библиотека с мощен API. Можете да използвате тази библиотека с JavaScript обекти, DOM атрибути, SVG и CSS свойства.
Инсталация
npm инсталирайте animejs –запазване
Използване
импортиране на аниме от ‘animejs/lib/anime.es.js’;
Основни функции:
- Лесен за използване: Намерих Anime.js лесен за използване, дори и за тези с ограничени познания за JavaScript, тъй като е добре документиран.
- Разширяем: Можете да персонализирате кодови блокове от тази библиотека, за да отговарят на вашите нужди. Можете също да създавате обратни извиквания, времеви линии и функции за облекчаване.
- Гъвкав: Anime.js не е само библиотека за анимация на JavaScript; можете да го използвате с SVG и CSS свойства.
- Поддръжка на няколко браузъра: Анимациите от Anime.js се изпълняват на различни браузъри като Chrome, Safari, IE/Edge, Firefox и Opera.
Anime.js е безплатна библиотека с отворен код.
Mo.js
Mo.js е JavaScript библиотека за движеща се графика. Библиотеката ви дава пълен контрол върху анимациите чрез своя декларативен API.
Инсталация
npm инсталирайте @mojs/core
или
прежда добавете @mojs/core
Използване;
импортирайте mojs от ‘@mojs/core’;
Основни функции:
- Модулен: Компонентите в тази библиотека са разделени на малки кодови блокове за многократна употреба. Докато тествах тази библиотека, бих могъл да добавя или премахвам различни компоненти, без да пренаписвам целия код.
- Просто: Декларативният дизайн на API улеснява използването на тази библиотека и персонализирането на нейните компоненти.
- Отзивчив: Mo.js е готов за ретина, което го прави отзивчив към различни размери на екрана.
- Надеждна: Тази библиотека е обстойно тествана, за да се гарантира, че работи според очакванията.
Mo.js е безплатна библиотека с отворен код.
Popmotion
Popmotion е проста анимационна библиотека за създаване на възхитителни потребителски интерфейси. Открих, че е лесно да използвам тази библиотека с ванилен JavaScript и повечето JavaScript библиотеки и рамки.
Инсталация
npm инсталирайте popmotion
Използване
импортиране { animate } от „popmotion“
Основни функции:
- Мощен: Въпреки че функцията за анимиране е само 4,5 kb, тя поддържа пружинни, инерционни и ключови кадри анимации за цветове, числа и сложни низове.
- Поддръжка на TypeScript: Popmotion е написан на TypeScript, горен индекс на JavaScript. По този начин можете да използвате типове, ако използвате TypeScript във вашия проект.
- Възможност за персонализиране: Компонентите от тази библиотека могат да бъдат персонализирани, за да отговарят на вашите нужди от анимация.
- Стабилен: Всички компоненти в Popmotion са подложени на щателни тестове.
Popmotion е безплатен за използване.
Theatre.js
Theatre.js е библиотека с професионален набор от инструменти за дизайн на движение. С него можете да проектирате кинематографични сцени и възхитителни UI взаимодействия.
За да използвате Theatre.js с HTML и обикновен JavaScript, можете да рекламирате неговата CDN връзка към главния раздел на вашия HTML документ.
Основни функции:
- Работи с няколко JavaScript рамки и библиотеки: Можете да използвате Theatre.js с React Three Fiber и THREE.js.
- Възможност за персонализиране: Тази библиотека разполага с авангарден редактор на последователности, който ви помага да блокирате последователности за секунди. Можете също така да настроите фино всеки кадър във вашето приложение с помощта на редактора на графики.
- Разширяем: Theatre.js има различни разширения, които допринасят за неговата използваемост. Можете да използвате вашите инструменти или да добавите разширения към тази библиотека.
Theatre.js е библиотека с отворен код.
ScrollReveal.js е JavaScript библиотека, която ви позволява да анимирате елементи, докато превъртат в прозореца за изглед.
Инсталация;
npm инсталирайте scrollreveal
Използване;
const ScrollReveal = изискване (‘scrollreveal’)
Основни функции:
- Лесен за използване: Добавете клас scrollreveal към елементите, които искате да анимирате, и сте готови да започнете да използвате тази библиотека.
- Разширяем: Можете да добавяте нови елементи или да ги премахвате от компонентите, които получавате от тази библиотека.
- Гъвкав: Можете да настроите ScrollReveal.js да разкрива елементи при задържане, щракване или превъртане. Библиотеката също ви позволява да контролирате облекчаването, посоката и скоростта на разкриването.
ScrollReveal.js е платена библиотека с пакети, започващи от $30.
GreenSock GSAP
GreenSock GSAP е JavaScript библиотека за анимиране на SVG, UI, React или Three.js компоненти. Библиотеката разполага с всичко необходимо за създаване на бързи и атрактивни анимации.
Основни функции:
- Висока съвместимост: Можете да използвате GSAP с Canvas, CSS, HTML, SVG и JavaScript библиотеки и рамки като Angular, React, Vue и jQuery.
- Разширяем: Модулната архитектура на GSAP ви позволява да персонализирате компонентите, за да отговарят на вашите нужди от анимация.
- Гъвкав: GSAP няма предварително дефиниран списък с неща, които можете да анимирате. Можете да анимирате всяко числово свойство на обект.
- Здрав: С GSAP можете да анимирате масиви, безиери, CSS свойства, цветове и др. Тази библиотека също ви позволява да създавате последователности, повторение, йойо и дефиниране на обратни извиквания.
GreenSock Animation Platform (GSAP) има безплатен пакет, докато платеният започва от £88.
ProgressBar.js
ProgressBar.js е библиотека с анимации за създаване на отзивчиви и стилни ленти за напредъка за мрежата.
Инсталация
Използване на беседка
bower инсталирам progressbar.js
Използване на npm
npm инсталирайте progressbar.js
Основни функции:
- Различни вградени форми: ProgressBar.js има три вградени форми, полукръг, кръг и линия. Можете също да създадете персонализирана форма с помощта на тази библиотека.
- Отзивчив: Лентите за напредък от тази библиотека работят перфектно на различни размери на екрана.
- Възможност за персонализиране: Можете да персонализирате цветовете, размера на шрифта и стила на шрифта на вашите компоненти.
ProgressBar.js е библиотека с отворен код.
AnisJS
AniJS е библиотека за взаимодействие с UI, която предоставя бърз и лесен начин за разработване и прототипиране на UI. Тази библиотека е 9,0 kb след компресиране.
Инсталация;
bower инсталира anijs –save
Използване;
Основни функции:
- Лесен за използване: За да използвате тази библиотека, добавете клас AnisJS към елемент, който трябва да анимирате.
- Разширяем: Можете да персонализирате компоненти от AnisJS, за да отговарят на вашите нужди.
- Гъвкав: Можете да използвате AnisJS с JavaScript обекти, SVG атрибути, CSS свойства и DOM елементи.
- Съвместим с основните браузъри: Можете да AnisJS с Chrome, Firefox, Safari и Edge.
AnisJS е библиотека с отворен код, която е безплатна за използване.
Three.js
Three.js е 3D библиотека с общо предназначение. Библиотеката използва WebGL рендър, но също така поддържа SVG и CSS3D рендери като добавки.
Инсталация;
npm инсталирайте – спестете три
Използване;
импортиране * като ТРИ от ‘три’;
Основни функции:
- Лесна употреба: Three.js има добре документиран API, което го прави лесен за настройка и използване.
- Мощен: Можете да създавате сложни 3D сцени с помощта на тази библиотека. Three.js също поддържа различни функции, като анимации, материали и осветление.
- Гъвкав: Можете да създавате различни 3D анимации, вариращи от игри, визуализации до симулации.
- Съвместим с различни рамки и библиотеки: Можете да използвате библиотеката Three.js с React Three Fiber, Egret, Aframe, PlayCanvas и Babylon.js.
Three.js е JavaScript библиотека с отворен код.
Vivus.js
vivus.js е лека JavaScript библиотека за анимиране на SVG. Когато анимирате SVG с помощта на тази библиотека, те изглеждат така, сякаш са нарисувани.
Инсталация;
npm инсталирайте vivus
или
bower инсталирайте vivus
Основни функции:
- Различни типове анимации: Vivus.js ви позволява да създавате отложени, една по една и синхронизирани анимации. Забавено е типът анимация по подразбиране в тази библиотека.
- Позволява персонализирани скриптове: Вместо да използвате типовете анимация, налични в тази библиотека, можете да създавате персонализирани скриптове, за да анимирате вашите SVG файлове.
- Без зависимости: Можете да използвате тази библиотека в повечето уеб проекти, тъй като е без зависимости.
Vivus.js е безплатна библиотека.
Tilt.js
Tilt.js е малка JavaScript библиотека, която позволява на разработчиците да създават 3D ефекти на накланяне върху DOM. Можете да използвате Tilt.js с ванилен JavaScript или библиотеки и рамки като React, Preact, Angular и Polymer.
Инсталация;
npm install –save tilt.js
Или
прежда добавете tilt.js
Използване;
Добавете този скрипт точно преди затварящия таг
