Додавання анімації до вашої веб-програми є одним із найкращих підходів до покращення зовнішнього вигляду та відчуття вашої програми.
Анімація — це рухомі об’єкти, які веб-дизайнери/розробники використовують, щоб привернути увагу користувачів і скерувати їх до певних дій.
Написання коду для додавання анімації може бути дуже трудомістким. На щастя, ви можете використовувати бібліотеку анімації.
Бібліотека анімації — це набір готових файлів анімації, які дизайнери можуть додавати на свої веб-сайти.
Навіщо використовувати бібліотеки анімації?
- Економія часу: Бібліотека анімації забезпечить базову основу, даючи вам більше часу, щоб зосередитися на функціональності вашої програми.
- Можливість налаштування: бібліотеки анімації зазвичай пропонують шаблонний код, який ви можете налаштувати відповідно до своїх потреб.
- Легко досягти узгодженого дизайну: якщо у вас є анімація на різних веб-сторінках, ви можете використовувати одну бібліотеку, щоб забезпечити узгодженість змішування кольорів і шрифтів.
- Забезпечте широкий спектр ефектів: деякі бібліотеки анімації мають багато анімацій на вибір.
Я переглянув деякі з найкращих бібліотек анімації 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
або
yarn add @mojs/core
використання;
імпортувати mojs з ‘@mojs/core’;
Ключові особливості:
- Модульний: компоненти в цій бібліотеці розділені на невеликі блоки коду, які можна багаторазово використовувати. Під час тестування цієї бібліотеки я міг додавати або прибирати різні компоненти, не переписуючи весь код.
- Простота: декларативний дизайн API дозволяє легко використовувати цю бібліотеку та налаштовувати її компоненти.
- Чуйний: Mo.js готовий до сітківки, тому реагує на екрани різних розмірів.
- Надійність: цю бібліотеку було ретельно перевірено, щоб переконатися, що вона працює належним чином.
Mo.js — це безкоштовна бібліотека з відкритим кодом.
Popmotion
Popmotion — це проста бібліотека анімації для створення чудових інтерфейсів користувача. Мені легко використовувати цю бібліотеку з ванільним JavaScript і більшістю бібліотек і фреймворків JavaScript.
монтаж
npm встановити popmotion
Використання
імпорт { animate } із “popmotion”
Ключові особливості:
- Потужність: хоча функція анімації становить лише 4,5 Кб, вона підтримує пружинну, інерційну анімацію та анімацію ключових кадрів для кольорів, чисел і складних рядків.
- Підтримка TypeScript: Popmotion написано на TypeScript, верхньому індексі JavaScript. Таким чином, ви можете використовувати типи, якщо ви використовуєте TypeScript у своєму проекті.
- Можливість налаштування: компоненти з цієї бібліотеки можна налаштувати відповідно до ваших потреб анімації.
- Стабільний: усі компоненти Popmotion пройшли ретельне тестування.
Popmotion можна використовувати безкоштовно.
Theatre.js
Theatre.js — це бібліотека з професійним набором інструментів для дизайну руху. З його допомогою ви можете створювати кінематографічні сцени та чудові взаємодії інтерфейсу користувача.
Щоб використовувати 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 = require(‘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 — це бібліотека взаємодії з інтерфейсами користувача, яка забезпечує швидкий і простий спосіб розробки та створення прототипів інтерфейсів користувача. Ця бібліотека становить 9,0 Кб після архівування.
монтаж;
bower встановити anijs – зберегти
використання;
Ключові особливості:
- Простий у використанні: щоб використовувати цю бібліотеку, додайте клас AnisJS до елемента, який потрібно анімувати.
- Розширюваність: Ви можете налаштувати компоненти AnisJS відповідно до своїх потреб.
- Гнучкість: ви можете використовувати AnisJS з об’єктами JavaScript, атрибутами SVG, властивостями CSS і елементами DOM.
- Сумісність із основними браузерами: ви можете використовувати AnisJS із Chrome, Firefox, Safari та Edge.
AnisJS — це бібліотека з відкритим кодом, якою можна користуватися безкоштовно.
Three.js
Three.js — це 3D-бібліотека загального призначення. Бібліотека використовує рендерер WebGL, але також підтримує рендерери SVG і CSS3D як доповнення.
монтаж;
npm install – збережіть три
використання;
імпорт * як ТРИ з ‘три’;
Ключові особливості:
- Простота використання: 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, яка дозволяє розробникам створювати тривимірні ефекти нахилу в DOM. Ви можете використовувати Tilt.js із ванільним JavaScript або бібліотеками та фреймворками, такими як React, Preact, Angular і Polymer.
монтаж;
npm install – збережіть tilt.js
Або
yarn add tilt.js
використання;
Додайте цей сценарій безпосередньо перед закриваючим тегом
