Анимация SVG с помощью библиотек JavaScript

Векторная графика дает дизайнеру огромные возможности. Все, что раньше рисовалось в редакторе, теперь доступной в разметке. А это означает, что вы можете добавлять эффекты по событию и анимировать рисунки. Мы продолжаем разбирать возможности SVG в редакторе PIXLI.


Анимацию векторной графики (SVG) можно осуществить тремя способами:
  1. Правила CSS.
  2. Тег animate.
  3. Библиотеки JavaScript.
Как использовать таблицы стилей для анимации мы рассказали в прошлой статье. Использовались переходы transition и анимация keyframes.
Использованию тега animate мы посвятим большую статью в будущем. А сегодня рассмотрим использование готовых библиотек, написанных на JavaScript. Их много:
  • Lazy Line Painter
  • Vivus.js
  • Walkway.js
  • SVG.js
  • Snap.svg
  • Raphael.js
  • D3.js и др.
Чем хороши библиотеки JavaScript для работы с SVG? Они позволяют обойти некоторые ограничения браузеров. Например, IE вообще не любит анимацию в принципе, мало что поддерживает. Другие браузеры тоже часто обрабатывают команды по своему. Поэтому JavaScript является беспроигрышным вариантом.

Анимация с библиотекой VIVUS


Для примера попробуем изменить логотипы в готовом шаблоне.

1. Создадим сайт на основе шаблона Movers.



2.Выделим блок с меткой и удалим из нее пиктограмму.



3. В панели настроек справа удалим фон и обводку. Блок должен остаться пустым.


4. Перейдем в настройки сайта.



5. Вставим код библиотеки VIVUS в шапку.


Не забудьте, что так как код внедряется в сайт, он должен располагаться в теге script.

5.Добавим в блок код HTML и пропишем в него стиль, разметку и скрипт запуска.


<style type="text/css">
	svg * {
		fill: none;
		stroke:#000080;
	}
	.logo {
			stroke-width: 5;
			stroke-miterlimit: 10;
		}
</style>

<svg id="logo2" class="logo"  x="0px" y="0px"
 width="100%" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" onclick="logo2.reset().play();">
	<circle cx="100" cy="100" r="90"/>
	<circle cx="100" cy="100" r="85.74"/>
	<circle cx="100" cy="100" r="72.947"/>
	<circle cx="100" cy="100" r="39.74"/>
	<line x1="34.042" y1="131.189" x2="67.047" y2="77.781"/>
	<line x1="31.306" y1="75.416" x2="92.41" y2="60.987"/>
	<line x1="68.81" y1="34.042" x2="122.219" y2="67.046"/>
	<line x1="124.584" y1="31.305" x2="139.013" y2="92.409"/>
	<line x1="165.957" y1="68.809" x2="132.953" y2="122.219"/>
	<line x1="168.693" y1="124.584" x2="107.59" y2="139.012"/>
	<line x1="131.19" y1="165.957" x2="77.781" y2="132.953"/>
	<line x1="75.417" y1="168.693" x2="60.987" y2="107.59"/>
</svg>
<script>
	logo2 = new Vivus('logo2', {type: 'delayed', duration: 150})
</script>
В результате в блоке прорисуется новый значок.

С помощью настроек правой панели выровняем его по центру.
Для блока можно задать внутренний отступ, цвет и скругление углов. Тогда наш значок будет не только анимирован, но и выглядеть органично. Осталось подобрать цвет. Нам понравился такой.

Свойства класса VIVUS


Изменяя свойства в создании экземпляра объекта VIVUS, вы можете менять вашу анимацию.
  • duration – длительность.
  • delay – задержка запуска.
  • type – тип прорисовки. Sync – одновременная прорисовка линий, oneByOne – прорисовка линий по очереди, script – запуск кода, scenario или scenario-sync – запуск сценария для разных путей (path).
  • start – начало анимации. inViewport запускает когда элемент попадает в область видимости, manual позволяет создать пользовательские настройки, autostart – при загрузке страницы.
  • delay — время между выполнением (только для delayed анимации).
  • onReady — функция вызывается, когда экземпляр готов к анимации.
  • pathTimingFunction — временные функции анимации для каждого элемента пути в SVG. Позволяет указать тип анимации EASE, EASE_IN, EASE_OUTи EASE_OUT_BOUNCE.
  • animTimingFunction — временная функция анимации для выполнения SVG. Позволяет указать тип анимации EASE, EASE_IN, EASE_OUTи EASE_OUT_BOUNCE.
  • dashGap — расстояние между штрихами. По умолчанию: 2.
  • forceRender – повтор анимации. По умолчанию значение true только в IE, остальные браузеры проигрывают анимацию один раз.
  • reverseStack – установка обратного порядка выполнения. По умолчанию: false.
  • selfDestroy — удаляет все дополнительные стили на SVG, и оставляет его как оригинал.

Методы класса VIVUS


  • play(speed, callback) — воспроизведение анимации со скоростью, заданной в параметре. Это значение может быть отрицательным для обратного ходя анимации. Число между 0 и 1 замедлит прорисовку. Больше 1 ускорит ее.
  • stop() — останавливает анимацию.
  • reset() – возвращает объект в исходное состояние.
  • finish() – устанавливает объект SVG в конечное состояние.
  • setFrameProgress(progress) — установка хода анимации. Параметр должен быть числом от 0 до 1.
  • getStatus() — получить статус анимации: start, progress, end.
  • destroy() – удалить анимацию и SVG объект.
Анимация может работать некорректно в FireFox версии ранее 36, не забудьте проверить.
17 may 2017, 14:22    Ivan Web-дизайн 0    6 0

Comments (0)

    You need to login to create comments.