8 JavaScript библиотеки за анимиране на SVG
SVG е независима от резолюцията графика. Това означава, че ще го направи изглежда добре на всякакъв вид екран, без да страдате от загуба на качество. Освен това можете да направите SVG оживен с някои анимационни ефекти.
В един от постовете на нашата SVG серия по-рано ви показахме как работи SVG анимацията с
Повече на Hongkiat.com:
- Animate.css - CSS3 Library за лесно създаване на анимация
- Лесно анимирайте текста с Textillate.js
- Как да конвертирате Photoshop текст в SVG
- Анимирайте, за да скриете и плъзнете съдържание с jQuery
1. Vivus
Vivus е JavaScript библиотека, която дава на вашия SVG външен вид на изтегляне. Vivus работи извън кутията, без да има нужда от каквито и да е зависимости (например jQuery). Просто включете .JS файл във вашия HTML код и посочете SVG елемента, който искате да анимирате, заедно с някои предварително зададени опции, за да стартирате анимацията веднага.
Например:
нов Vivus ('svg-element', type: 'oneByOne', продължителност: 200); Горното ще анимира моя SVG елемент, който има SVG-елемент ID в 200 милисекунда. Всеки елемент от този SVG ще бъде изготвен един след друг в рамките на този времеви период.
2. Бонсай
Bonsai е мощна JavaScript библиотека, която ви позволява да рисувате, преобразявате и анимирате графични елементи на уеб страниците. Той поддържа както HTML5 графичен тип Canvas, така и SVG. С Bonsai можете да изградите прост правоъгълник или кръг или ако искате, a пълноправен мултиплейър анимирана игра като тази. Можете да използвате Orbit, за да усетите как работи Bonsai в живо действие или да разгледате няколко от тези впечатляващи примери, от които да черпите вдъхновение.
3. Скорост
Velocity е JavaScript библиотека, създадена за бързи анимации. Скоростта на скоростта при визуализация на анимацията е невероятно бърза. В сравнение с JQuery и дори CSS. API на Velocity работи подобно на анимацията в jQuery, освен ако използва псевдонима на ключовата дума $ .Velocity () вместо $ .Animate (). Това настрана, можете да използвате точно същите ключови думи за анимация като избледнява и отминава.
4. Рафаел
RaphaelJS е библиотека, която ви позволява да рисувате, както и да анимирате векторна графика SVG на уеб страници. Той поддържа широк кръг браузъри чак до IE6, което до голяма степен прави Raphael най-надеждната JavaScript библиотека в нишата. С RaphaelJS можете да изграждате интерактивни аналитични диаграми, карти на света и взаимодействия на игри, подобни на тези на Counter Strike.
5. Щракам
SnapSVG е друга популярна JavaScript библиотека за SVG анимация, разработена от разработчика на Рафаел Дмитрий Барановски, заедно с екипа на Adobe Web Platform от самото начало. За разлика от Рафаел, SnapSVG е предназначен само за най-новите браузъри. Това позволява на библиотеката да бъде значително по-малка от Raphael и да поддържа SVG функции като изрязване и маскиране.
6. Мързел бояджия
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.
