8 бібліотеки JavaScript для анімації SVG
SVG - це незалежна від дозволу графіка. Це означає, що воно буде добре виглядати на будь-якому екрані без втрати якості. Крім того, ви можете також оживити SVG з деякими ефектами анімації.
У одному з повідомлень нашої серії SVG ми раніше показали, як працює анімація SVG з
Більше на Hongkiat.com:
- Animate.css - CSS3 Бібліотека для створення анімації легко
- Легко анімувати текст за допомогою Textillate.js
- Як перетворити текст Photoshop на SVG
- Анімація для приховування та слайдів вмісту за допомогою jQuery
1. Vivus
Vivus - це бібліотека JavaScript, яка надає вашому SVG вигляд малювання. Vivus працює з коробки, не потребуючи будь-яких залежностей (наприклад, jQuery). Просто включіть .js файл у вашому HTML і позначте елемент SVG, який ви хочете анімувати, разом з деякими попередньо встановленими параметрами, щоб запустити анімацію відразу.
Наприклад:
новий Vivus ('svg-element', type: 'oneByOne', тривалість: 200); Зазначене вище буде анімувати мій SVG елемент, який має svg-елемент Ідентифікатор через 200 мілісекунд. Кожен елемент цього SVG буде малюватися один за одним протягом цього часового періоду.
2. Бонсай
Бонсай - це потужна бібліотека JavaScript, яка дозволяє малювати, перетворювати і анімувати графічні елементи на веб-сторінках. Він підтримує як графічний тип HTML5 Canvas, так і SVG. З Бонсай ви можете створити простий прямокутник або коло, або, якщо хочете, a повноцінний мультиплеер анімаційна гра, як ця. Ви можете використовувати Orbit, щоб відчути, як Bonsai працює в живій акції або перевірити кілька таких вражаючих прикладів, щоб отримати натхнення.
3. Швидкість
Velocity - це бібліотека JavaScript, створена для швидких анімацій. Швидкість швидкості при візуалізації анімації неймовірно швидка. Вона перевершує jQuery і навіть CSS. API швидкості працює подібно до анімації в jQuery, за винятком того, що він використовує псевдонім ключового слова $ .velocity () замість $ .animate (). Окрім того, ви можете використовувати такі ж анімаційні ключові слова, як fadeIn і вицвітати.
4. Рафаель
RaphaelJS - це бібліотека, яка дозволяє малювати і анімацію векторного графічного SVG на веб-сторінках. Він підтримує широкий спектр браузерів, аж до IE6, що в значній мірі робить Рафаеля самою надійною бібліотекою JavaScript у ніші. За допомогою RaphaelJS ви можете створювати інтерактивні аналітичні діаграми, карти світу та взаємодії з іграми, подібні до графіків Counter Strike.
5. Прив'язка
SnapSVG - ще одна популярна бібліотека JavaScript для анімації SVG, розроблена розробником Рафаеля Дмитром Барановським разом з командою Adobe Web Platform з нуля. На відміну від Рафаеля, SnapSVG призначений тільки для останніх браузерів. Це дозволяє бібліотеці значно менше, ніж Рафаель, і підтримувати функції SVG, такі як відсікання і маскування.
6. Lazy Line Painter
Lazy Line Painter - це плагін jQuery для анімації шляхів SVG для анімації послідовності малювання, подібної до Vivus. Погана новина полягає в тому, що цей додаток робить це дуже специфічно. Тому, коли ви імпортуєте SVG з програм, таких як Illustrator або Inkscape, переконайтеся, що на SVG не залишилося жодного кольору заливки, а лише шляхи.
7. SVG.js
SVG.js - це легка бібліотека для маніпулювання та анімації SVG. За допомогою цієї бібліотеки ви зможете анімувати розмір, позицію або колір у вашому SVG-елементі. Воно не тільки оживляє; для додавання додаткових функцій можна також застосувати додаткові плагіни. У цьому прикладі використовується додаток svg.filter.js для застосування фільтрів, таких як розмивання на гауссі, зменшення насиченості, контрастність, сепія тощо..
8. Доріжка
Доріжка підтримує три типи елементів, шлях, лінії, і поліліній використовується для малювання ліній SVG. Ось приклад з Polygon, який показує анімацію консольної лінії PlayStation 4. \ t.
