Таблица 11.1. Элементы вида анимации.

Элемент	Описание
	Анимация отдельного свойства элемента в течение определенного промежутка времени.
	Задание изменения цвета элемента.
	Анимация, в которой элемент двигается вдоль заданной траектории.
	Анимация, в которой участвуют трансформации (преобразования).
	Анимация дискретного изменения свойства.

Внутри этих элементов помещаются атрибуты, определяющие тип анимации. В табл. 11.2 приводится их описание.

Таблица 11.2. Атрибуты типа анимации.

Атрибут	Описание
attributeName	Указание свойства объекта, которое будет анимироваться. Например, для изменения цвета фигуры (заливки) атрибут будет выглядеть так: attributeName="fill"
attributeType	Задание пространства имеет, указывающее тип атрибута. Возможные значения: CSS – анимация свойств, относящихся к спецификации CSS (Шрифт, цвет шрифта, кернинг и другие). XML – анимация свойства, относящегося к SVG – графике (Перенос, вращение, искажение и другие). auto – значение по умолчанию, включающее в себя значения свойств CSS и XML .

Для создания анимации следует определить, свойства объекта, которые будут изменяться, их результирующий вид, а также начало и продолжительность всех изменений. Описание представляет собой последовательную запись пар " атрибут – значение атрибута". Для создания заданной анимации, например, перемещения объекта, следует указать необходимый набор, без которого анимация просто не будет воспроизводиться. Однако кроме необходимого набора можно указывать дополнительные пары атрибутов, описывающих анимацию детальным образом или придавая ей ряд новых свойств. В табл. 11.3 приводится описание атрибутов анимации. Это общие атрибуты для всех элементов анимации.

Элемент animate

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

Внутри тега rect элемента прямоугольник помещен элемент animate . В течении анимации будет изменяться координата по горизонтали прямоугольника – на это указывает атрибут attributeName="x" . Границы изменения (в пикселях) устанавливаются от нуля (from="0" ) до двухсот (to="200" ). По умолчанию, анимация начнется сразу после загрузки в браузер , и будет продолжаться в течении 10 секунд (dur="10s" ). По истечении заданного времени прямоугольник вернется в точку 0 и анимация начнется снова, поскольку задано бесконечное повторение (repeatCount=" indefinite " ). В табл. 11.4 приводятся примеры с использованием элемента animate.

Таблица 11.4. Элемент animate.

№	Код	Вид в браузере
11.4.1	Листинг 11.4.1. Пример animate1.svg
	Описание
	Изменение абсциссы прямоугольника
№	Код	Вид в браузере
11.4.2	Листинг 11.4.2. Пример animate2.svg
	Описание
	Изменение ординаты прямоугольника.
№	Код	Вид в браузере
11.4.3	Листинг 11.4.3. Пример animate3.svg
	Описание
	Одновременное увеличение абсциссы и ординаты, в результате чего прямоугольник будет двигаться по диагонали.
№	Код	Вид в браузере
11.4.4	Листинг 11.4.4. Пример animate4.svg
	Описание
	Одновременное увеличение ширины и высоты прямоугольника.

В рассмотренных примерах мы видели изменение простейших свойств объекта – его координат, ширины и высоты.

Мы давно обещали сделать ролик про анимацию SVG элементов на страницах, но все как-то не удавалось. Сегодня мы наконец-то рады вам представить первый ролик из серии, в котором расскажем про варианты анимации SVG: с помощью CSS, SMIL и JavaScript (на примере Snap.svg).

На самом деле у нас с этим роликом было как с Мистралями. Не сложились обстоятельства для записи. Ну вот теперь наконец-то сложились.

SVG анимации

Попробуем еще разок собрать все вместе со ссылками. Существуют три способа анимации SVG элементов на странице, два из которых применимы и для HTML элементов. Я, конечно же, говорю про CSS и JavaScript анимации. Но для SVG можно еще использовать SMIL (Synchronized Multimedia Integration Language) анимации.

SMIL анимации

Это очень крутая технология если нам нужно анимировать path-ы и при этом хранить это все в одном SVG файле. Да, CSS анимации тоже можно включать в файл, но с их помощью нельзя анимировать атрибут d у path-ов, поэтому SMIL оказывается намного более интересной технологией. Собственно JavaScript тоже можно включать прямо в SVG файлы, но поддержка браузеров немного разная, поэтому нужно обязательно думать что и как использовать.

SMIL поддерживается во всех браузерах с незапамятных времен (с ранних версий), кроме Internet Explorer, который не поддерживает эти анимации до сих пор.

CSS анимации

Здесь все предельно ясно, мы уже давно привыкли использовать CSS для небольших анимаций HTML элементов. Тоже самое можно делать и с SVG: большинство атрибутов можно анимировать и поддержка браузеров значительно лучше . Ну потому что хотя бы Internet Exporer 10 узнал про такое явление, как CSS анимации.

JavaScript анимации

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

В некоторые даже включены возможности анимации, например в Snap.svg. Я бы всем советовал именно эту библиотеку, хотя многие привыкли работать с Velocity.js, такой подход тоже имеет право на существование.

5 января 2014 в 16:27

Анимация SVG-элемента path

• Разработка веб-сайтов ,
• Визуализация данных

• Tutorial

Думаю многие видели обзоры игровых консолей нового поколения от Polygon (Vox Media) . Это те, где консоли отрисовывались в стиле blueprint"ов:

Обзоры выглядели круто, довольно необычно и ново. О том как реализована основная фишка обзоров - SVG анимация, как сделать нечто подобное самому, и какие ещё «секретные» возможности скрывает старый добрый SVG в плане анимации элемента path - можно узнать под катом.

Stroke-dasharray interpolation, теория

Вообще техника подобной анимации линий не нова, просто до недавнего времени SVG и всё, что с ним связано, на мой взгляд, было несправедливо предано забвению, но к счастью ситуация меняется. Итак, трюк с анимацией элемента path возможен благодаря свойству stroke-dasharray элемента path . Это свойство позволяет задавать параметры пунктирной линии, а именно длину штриха и промежутка между штрихами. Если задать длину штриха равной всей длине линии, то получим обыкновенную сплошную линию. Если же задать длину штриха равной нулю, а длину промежутка опять-таки равной всей длине линии, то получим невидимую линию. А постепенно увеличивая длину штриха при длине промежутка, равной длине всей линии, мы можем имитировать её отрисовку. При таком подходе отрисовка будет происходить от начала линии. Если же вдруг необходимо отрисовывать с конца, то нужно использовать ещё одно свойство: stroke-dashoffset . Это свойство определяет смещение для первого штриха. Таким образом, уменьшая смещение и увеличивая длину штриха, получим отрисовку с конца линии.

Ребята из Vox Media использовали гибридный вариант (который, на мой взгляд, избыточен), кстати почитать о том, как они это делали, можно (и нужно) в их блоге: Polygon feature design: SVG animations for fun and profit .

Реализация SVG анимации

В Vox Media предлагают использовать requestAnimationFrame для плавности анимации, но у нас немного другие цели, так что мы пойдём более простым путём, воспользуемся библиотекой D3.js и реализованной в ней анимацией на основе длительности.

Вот собственно рабочий код, использовавшийся для анимации консоли из начала статьи.

Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(ready); function ready(error, xml) { //Adding our svg file to HTML document var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("width"), svgHeight = svg.attr("height"); var paths = svg.selectAll("path") .call(transition); function transition(path) { path.transition() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("end", function() { d3.select(this).call(transition); }); // infinite loop } function tweenDash() { var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // interpolation of stroke-dasharray attr return function(t) { return i(t); }; } }

Начнём просто с движения вдоль линии, пока без вращения.

Queue() .defer(d3.xml, "wiggle.svg", "image/svg+xml") .await(ready); function ready(error, xml) { //Adding our svg file to HTML document var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"); var path = svg.select("path#wiggle"), startPoint = pathStartPoint(path); var marker = svg.append("circle"); marker.attr("r", 7) .attr("transform", "translate(" + startPoint + ")"); transition(); //Get path start point for placing marker function pathStartPoint(path) { var d = path.attr("d"), dsplitted = d.split(" "); return dsplitted.split(","); } function transition() { marker.transition() .duration(7500) .attrTween("transform", translateAlong(path.node())) .each("end", transition);// infinite loop } function translateAlong(path) { var l = path.getTotalLength(); return function(i) { return function(t) { var p = path.getPointAtLength(t * l); return "translate(" + p.x + "," + p.y + ")";//Move marker } } } }
Здесь pathStartPoint(path) вытаскивает координаты начала линии из атрибута элемента path . В translateAlong(path) с помощью интерполятора задаются координаты нашего маркера. Пример можно посмотреть здесь: Marker animation along SVG path element with D3.js . А ещё можно объединить анимацию отрисовки линии и движение маркера, выглядеть это может следующим образом: Marker animation along SVG path element with D3.js II .

Усложним задачу, добавим вращение (ну и поменяем маркер с круга на что-нибудь поинтереснее). В качестве маркера у нас будет ракета с шириной 48 и длиной 24 . Поскольку по умолчанию точкой привязки маркера является левый верхний угол, нам необходимо смещать его, чтобы привязка была к центру маркера. Также необходимо учитывать это при вращении, ведь оно тоже по умолчанию происходит вокруг левого верхнего угла. Со смещением вроде разобрались. Теперь перейдём непосредственно к вращению, здесь нам поможет определение касательной , угол будем определять с помощью арктангенса.

Функция translateAlong(path) , определяющая интерполятор будет выглядеть следующим образом:

Function translateAlong(path) { var l = path.getTotalLength(); var t0 = 0; return function(i) { return function(t) { var p0 = path.getPointAtLength(t0 * l);//previous point var p = path.getPointAtLength(t * l);////current point var angle = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//angle for tangent t0 = t; //Shifting center to center of rocket var centerX = p.x - 24, centerY = p.y - 12; return "translate(" + centerX + "," + centerY + ")rotate(" + angle + " 24" + " 12" +")"; } } }
Реализацию можно посмотреть здесь.

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

Velocity

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

SVG.JS

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

Walkway

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

Raphael.JS

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

Snap.Svg

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

Bonsai

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

Lazy Line Painter

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

Vivus

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