8 библиотек JavaScript для анимации SVG
SVG - независимая от разрешения графика. Это означает, что это будет хорошо выглядеть на любом типе экрана без потери качества. Помимо этого, вы также можете оживить SVG с помощью некоторых анимационных эффектов..
В одном из постов нашей серии SVG ранее мы показали, как анимация SVG работает с
Больше на Hongkiat.com:
- Animate.css - библиотека CSS3 для простого создания анимации
- Легко анимировать текст с помощью Textillate.js
- Как преобразовать текст Photoshop в SVG
- Анимировать, чтобы скрыть и слайдить контент с помощью jQuery
1. Вивус
Vivus - это библиотека JavaScript, которая дает вашему SVG видимость рисования. Vivus работает из коробки без необходимости каких-либо зависимостей (например, jQuery). Просто включите .JS файл в HTML и укажите элемент SVG, который вы хотите анимировать, а также некоторые предустановленные параметры, чтобы сразу запустить анимацию.
Например:
новый Vivus ('svg-element', тип: 'oneByOne', продолжительность: 200); Выше будет анимировать мой элемент SVG, который имеет SVG-элемент ID в 200 миллисекунд. Каждый элемент этого SVG будет нарисован один за другим в течение этого периода времени.
2. Бонсай
Bonsai - это мощная библиотека JavaScript, которая позволяет рисовать, изменять и анимировать графические элементы на веб-страницах. Он поддерживает как HTML5 графический тип Canvas, так и SVG. С бонсай, вы можете построить простой прямоугольник или круг или, если хотите, полноценный мультиплеер анимационная игра, как эта. Вы можете использовать Orbit, чтобы почувствовать, как бонсай работает в живом действии, или проверить пару из этих впечатляющих примеров, чтобы черпать вдохновение из.
3. Скорость
Velocity - это библиотека JavaScript, созданная для быстрой анимации. Скорость при рендеринге анимации невероятно высока. По сравнению с ним он превосходит jQuery и даже CSS. API Velocity работает аналогично анимации в jQuery, за исключением того, что использует псевдоним ключевого слова $ .Velocity () вместо $ .Animate (). Кроме того, вы можете использовать точно такие же ключевые слова анимации, такие как FadeIn а также исчезать.
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
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.
