Таблица 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 в HTML. Теперь пришел черед рассмотреть анимацию SVG .

Основы

Анимация SVG выполняется с помощью элемента :

Мы добавляем элемент внутрь элемента

attributeName : здесь определяется атрибут, который будет участвовать в анимации.

from : опциональный атрибут. Определяет стартовое значение, по умолчанию используется текущее значение.

to : данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeName значения результат может различаться. В приведенном примере будет изменяться высота элемента.

dur : определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax . Например, 02:33 соответствует 2 минутам и 33 секундам, а 3h соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.

То же самое мы проделываем с элементом , но для него будет анимировать атрибут радиуса (r).

Перемещение элементов

Для перемещения SVG элементов нужно только указать координаты x и y:

В примере мы перемещаем прямоугольник с 0 до 200 за 3 секунды. Также мы добавляем атрибут fill к элементу . Данный атрибут определяет как анимация будет действовать после завершения. В примере значение freeze вынуждает элемент оставаться там, где завершается анимация.

Также все действует и для элемента , но для него будем изменять атрибуты cx или cy:

Анимация нескольких атрибутов

Конечно, в элементе мы можем задавать изменения только для одного атрибута, но самих элементов мы можем определять несколько. Вот так, например:

Здесь мы анимируем для атрибута для элемента - радиус и ширину обводки.

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

Демо Исходники

Итак, какую концепцию мы исследуем? Первый рисования линий анимации, которая исчезает в «реальном» изображении или иллюстрации, как только соответствующая фигура в области просмотра. Это может быть отличным эффектом для любого вида иллюстрации на сайте. Вторая концепция исследует использование SVG анимации для имитации загрузки веб-сайта: части сайта представлены плоскими чертежами очертаний которые анимируются, и как только анимация закончится «реальные» элементы будут показаны. Сама методика реализуется в статическом пути, где мы используем SVG для каждого из элементов которые исчезают. Идеи для схематического представления сайта приходят из awesome Dribbble shot сделанными Chris Bannister .

Красивые иллюстрации устройств сделаны Pixeden , PSD файлы на которые вы можете найти здесь:

Вычерченные линейные SVG чертежи этих иллюстраций были тщательно созданы талантливым Emanuel Serbanoiu . Зайдите на его Dribbble profile или посетите его сайт .
Первое демо происходит рисования линий анимации с иллюстрацией fade-in:

Второе демо — рисования линий анимации сайта fade in:

И третий демо, похожее на демо 2, просто анимация и замирание элементов происходит последовательно, но в случайном временном промежутке:

Мы надеемся что вам понравились эффекты и вы найдете в них вдохновение!

Демо Исходники

Перевел для сайта wordpress-club.com: Александр Овчаренко

• 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" +")"; } } }
Реализацию можно посмотреть здесь.

Я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски.

Так как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками.

В посте много демо с анимацией, страница может подтормаживать на слабых устройствах.

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

Пример простой маски:

Как она устроена?

Внутри две линии. Я не использовала path , потому что ему нельзя задать координаты в процентах.

CSS для линий:

$mask-time: 7s; .elem-mask { stroke: #FFF; stroke-width: 0; animation: stroke-width $mask-time infinite; } @keyframes stroke-width { 50% { stroke-width: 300; } }

В исходном состоянии линии не видны, потому что stroke-width: 0 . Для того, чтобы обводки в процессе анимации служили видимой областью маски, им задан белый цвет stroke: #FFF . Также задана анимация, которая увеличивает толщину рамки до 300.

Если вытащить маску наружу, она будет выглядеть вот так:

Отображается только то, что попадает под белые области. Линии увеличиваются за счет обводки и показывают содержимое под собой.

Маска применяется к фигуре с помощью атрибута mask="url(#m-line)" или через CSS: mask: url(#m-line);

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

Простое разворачивание из центра:

Использование паттернов позволяет делать узорные маски.

Паттерны позволяют добиться интересного результата минимумом фигур, но ещё интереснее можно сделать, если задать несколько фигур внутри маски и анимировать их по отдельности.

При этом пути в маске вовсе не обязательно должны быть прямыми линиями:

Да и вообще, необязательно это должны быть линии:

Помимо преимуществ, анимированные SVG-маски имеют некоторые проблемы. Связаны они не столько с масками, сколько с анимацией. Во-первых, анимации SVG-элементов не поддерживаются в IE. Вторая проблема - производительность. Насколько мне известно, на данный момент анимации SVG-элементов не оптимизируются браузерами, поэтому имеет смысл анимированный SVG применять умеренно и аккуратно.

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