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

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации

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

Смотрите также:
14 JavaScript библиотек для создания анимации
20 jQuery плагинов для создания анимации при скроллинге
Инструменты для создания HTML5 анимации

Velocity

Одна из самых популярных библиотек, которая воплощает графику в жизнь. Основной упор Velocity на быстрое воспроизведение анимации. Для тех, кто знаком с анимацией в , библиотека не вызовет никаких трудностей в использовании. Библиотека использует API как в jQuery $.animate ().
Особенность библиотеки в том, что она полностью поддерживает анимацию SVG элементов, включая такие свойства, как x, rx, stroke-width и др. Также поддерживается работа с цветом.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации


SVG.JS

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

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации


Walkway

Легкая библиотека для рисования линий и полигонов. Walkway поддерживает элементы path, line и polyline. Имея столь узкое направление, она хорошо выполняет свою функцию.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации


Raphael.JS

Небольшая библиотека для упрощения работы с векторной графикой. Следуя рекомендациям W3C SVG, каждый графический объект становится также DOM-объектом, что позволяет позже изменять его с помощью JavaScript. Очень хорошая поддержка браузеров, включая версии IE6 и выше.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации


Snap.Svg

Snap.Svg имеет простой JavaScript API для создания анимации и делает содержимое более привлекательным. Библиотеку можно использовать для SVG анимации, созданной при помощи графических программ, таких как Illustrator, Inkscape или Sketch. Snap.svg имеет открытый исходный код и распространяется с лицензией Apache 2.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации


Bonsai

Bonsai включает в себя полный набор инструментов для работы с графикой и анимацией. Имеет графический API позволяющий легко создать SVG анимацию.
Можно посмотреть все функции Bonsai в онлайн редакторе. Очень мощная библиотека с которой интересно работать.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации


Lazy Line Painter

Маленький плагин для SVG анимации рисования линий. Хорошо и со стилем выполняет свою задачу. Необходимо пройти три этапа для получения готовой анимации: экспортируем линейную анимацию с Illustrator'а как svg файл, вставляем его в конвертер на сайте, получаем готовый JS код.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации


Vivus

Очень сильная библиотека для рисования линий. Позволяет выбирать стиль анимации линий: с задержкой, асинхронно или одна за другой. Посмотрите пример на сайте библиотеки и вы все поймете. Для более сложных изображений позволяет задать сценарий рисования.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации


ProgressBar.js

Это легкая и функциональная JS библиотека для создания анимированного SVG индикатора процесса (progress bar). Включает в себя базовые : линию, круг, квадрат. Но позволяет работать и с более интересными формами. Можно создать векторный progress bar в Illustrator'е или других редакторах векторной графики и задать анимацию, используя эту библиотеку.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации


Two.js

Two.js позволяет работать с SVG, Canvas и WebG анимацией. Библиотека сосредоточена на 2D-объектах и позволяет изменять их размер, вращать, перемещать и т.п. В нее входит SVG конвертер, который позволяет преобразовать файлы с редактора векторной графики в рабочую среду Two.js для дальнейшего манипулирования объектами.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 10 JavaScript библиотек для SVG анимации
Напишите свой комментарий
comments powered by HyperComments