8 библиотек JavaScript для анимации SVG

SVG является независимой от разрешения графикой. Это означает, что он будет хорошо смотреться на любом типе экрана без потери качества. Помимо этого, вы также можете оживить SVG с помощью некоторых анимационных эффектов.

В одном из постов нашей серии SVG ранее мы показали, как анимация SVG работает с элемент хоть и на низком уровне. На этот раз мы поделимся парой библиотек JavaScript, которые помогут расширить анимацию SVG на следующий уровень.

Больше на Hongkiat.com:
1. Вивус
Vivus библиотека JavaScript, которая придает вашему SVG видимость рисования Vivus работает из коробки без необходимости каких-либо зависимостей (например, jQuery). Просто включите файл .js в свой HTML-код и укажите элемент SVG, который вы хотите анимировать, вместе с некоторыми предустановленными параметрами, чтобы сразу запустить анимацию.

Например:

новый Vivus (‘svg-element’, {тип: ‘oneByOne’, продолжительность: 200});

Выше приведен анимация моего SVG-элемента с идентификатором svg-элемента за 200 миллисекунд. Каждый элемент этого SVG будет отображаться один за другим в течение этого периода времени.
2. Бонсай
карликовое дерево это мощная библиотека JavaScript, которая позволяет рисовать, изменять, а также анимировать графические элементы на веб-страницах. Он поддерживает как графический тип HTML5 холст и SVG. С Bonsai вы можете построить простой прямоугольник или круг или, если хотите, полноценную многопользовательскую анимационную игру как этот, Вы можете использовать Orbit, чтобы почувствовать, как бонсай работает в живом действии или проверить пара этих впечатляющих примеров черпать вдохновение из.
3. Скорость
Скорость библиотека JavaScript, созданная для быстрой анимации Скорость при рендеринге анимации невероятно высока. По сравнению с ним он превосходит jQuery и даже CSS. API Velocity работает аналогично анимации в jQuery, за исключением того, что использует псевдоним ключевого слова $ .velocity () вместо $ .animate (). Помимо этого, вы можете использовать точно такие же анимационные ключевые слова, как fadeIn и fadeOut.
4. Рафаэль
RaphaelJS – это библиотека, которая позволяет рисовать и анимировать векторную графику SVG на веб-страницах. Он поддерживает широкий спектр браузеров вплоть до IE6, что делает Raphael самой надежной библиотекой JavaScript в этой нише. С RaphaelJS вы можете создавать интерактивные аналитические карты, карты мира и игровые взаимодействия, схожие с Counter Strike.
5. Snap
SnapSVG Еще одна популярная библиотека JavaScript для SVG-анимации, разработанная разработчиком Raphael Дмитрием Барановским совместно с командой Adobe Web Platform с нуля. В отличие от Raphael, 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.