5 лучших библиотек JavaScript для SVG-анимации

1. BonsaiJS — интуитивно понятный графический API

Облегченная графическая библиотека с интуитивно понятным графическим API и средством визуализации SVG.

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

Кроме того, BonsaiJS хорошо поддерживается, имеет отличную документацию и обладает некоторыми замечательными функциями.

Особенности БонсайJS

Поддерживает как графическое полотно HTML5, так и SVG.
Раннер и рендерер архитектурно разделены.
Обеспечивает ключевой кадр и традиционную анимацию.
Контексты запуска iFrame, Worker и Node.
Поддержка всех основных браузеров, включая Chrome, Safari, Firefox и Opera.

Установка и использование

Вы можете легко установить BonsaiJS для своего проекта с помощью команды npm install bonsai. Затем вы можете использовать API BonsaiJS для встраивания и анимации изображения SVG, как показано ниже:

bonsai.run(document.body, {
  width: 600,
  height: 600,
  code: function() {
    var url = 'example.svg';
    new Bitmap(url).on('load', function() {
      this.attr('width', 200);
      this.addTo(stage);
      this.animate('3s', {
        x: 200
      });
    });
  }
});

Вы можете попробовать несколько примеров из онлайн-редактора Bonsai и обратиться к их документации за более подробной информацией.

2. VivusJS — нулевые зависимости

VivusJS — это легкая библиотека JavaScript, которая позволяет вам анимировать SVG.

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

Особенности VivusJS

Предоставляет 3 основных типа анимации: отложенную, синхронную и один за другим.
Предоставляет 5 вариантов синхронизации для пути и анимации.
Высокая производительность.
Позволяет создавать собственные SVG.
Можно протестировать перед установкой с помощью Vivus Instant.

Установка и использование

VivusJS имеет более 4500 еженедельных загрузок NPM и 13,5 тыс. звезд GitHub.

Вы можете установить VivusJS с помощью NPM, Bower или CDN.

// NPM
npm install vivus
// Bower
bower install vivus
// jsDelivr CDN
cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js

Затем вы можете использовать VivusJS для анимации ваших встроенных или динамических SVG следующим образом:

// Inline
<svg id="my-svg">
  <path...>
</svg>

<script>
  new Vivus('example.svg', {duration: 200}, myCallback);
</script>
----------------------------------------------------------
// Dynamic
<div id="svg-div"></div>
<script>
  new Vivus('svg-div', { duration: 200, file: 'example.svg' }, callback);
</script>

3. SVG.js — поддержка плагинов

SVG.js — это библиотека JavaScript с открытым исходным кодом для управления и анимации SVG.

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

Возможности SVG.js

Синтаксис прост для чтения и понимания.
16 КБ в сжатом виде и 62 КБ в минимизированном виде.
Размер, положение, преобразования, цвет и другие анимации.
Для дополнительной настройки доступно несколько плагинов.
Обтравочные контуры и маски непрозрачности полностью поддерживаются.

Установка и использование

SVG.js можно установить с помощью NPM, Yarn или CDN.

// NPM
npm install @svgdotjs/svg.js
// Yarn
yarn add @svgdotjs/svg.js
// CDNs
https://cdnjs.com/libraries/svg.js
https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js
https://unpkg.com/@svgdotjs/svg.js

После установки вы можете импортировать необходимые свойства и начать рисовать и анимировать SVG.

import { SVG } from '@svgdotjs/svg.js'
var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100).animate({
  duration: 2000,
  delay: 1000,
  when: 'now',
  swing: true,
  times: 5,
  wait: 200
}).attr({ fill: '#f06' })

4. Snap.svg — поддерживает новейшие функции SVG.

Snap.svg — это современная библиотека JavaScript, которая оживляет ваши SVG.

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

Особенности Snap.svg

Поддержка новейших функций SVG — маскирование, обрезка, шаблоны, полные градиенты и группы.
Нет необходимости генерировать SVG-контент с помощью Snap, чтобы работать с ним Snap.
Может создавать SVG-контент в Illustrator, Inkscape или Sketch, а затем использовать Snap для анимации или иных манипуляций с ним.
Поддержка современных браузеров.
100% бесплатно и с открытым исходным кодом.

Установка и использование

SVG.js можно установить с помощью NPM и Bower следующим образом:

// NPM
npm i snapsvg
// Bower
bower install snap.svg

5. Lazy Line Painter — анимация пути

Современная библиотека JavaScript для анимации пути SVG.

Lazy Line Painter немного отличается от вышеперечисленных библиотек, поскольку он специализируется на анимации контуров. Кроме того, он предоставляет онлайн-инструмент под названием Lazy Line Composer, который позволяет создавать анимированные SVG за считанные секунды.

Установка и использование

В дополнение к Lazy Line Composer, Lazy Line Painter можно напрямую установить в ваши проекты с помощью NPM или CDN.

// NPM
npm i lazy-line-painter
// CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/lazy-line-painter-1.9.4.min.js"></script>

После установки вы можете импортировать Lazy Line Painter и начать анимацию SVG.

import LazyLinePainter from 'lazy-line-painter'

let el = document.querySelector('#example-svg')
let myAnimation = new LazyLinePainter(el, { strokeWidth : 10 })
myAnimation.paint()

Заключение

В этой статье я обсудил 5 различных библиотек анимации JavaScript SVG. Каждый из них имеет некоторые уникальные функции и может использоваться в зависимости от ваших требований.

Надеюсь, мои советы помогут вам выбрать лучшие варианты SVG-анимации для вашего проекта. И не забудьте поделиться своими мыслями после работы с этими библиотеками.

Спасибо за чтение !!!

Создавайте компонуемые веб-приложения

Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых фреймворках, таких как React или Node. Создавайте масштабируемые интерфейсы и серверные части с мощным и приятным опытом разработки.

Перенесите свою команду в Bit Cloud, чтобы совместно размещать и совместно работать над компонентами, а также значительно ускорить, масштабировать и стандартизировать разработку в команде. Начните с компонуемых интерфейсов, таких как Design System или Micro Frontends, или исследуйте компонуемый сервер. Попробуйте →