Анимация SVG элементов с тегом animate

В прошлых статьях мы рассказывали о способах анимации SVG изображений с помощью CSS и JavaScript. Эта статья посвящена возможностям тега animate.


Анимация SVG была описана в спецификации SMIL. Там вы можете ознакомиться с этим тегом подробнее. В ней описаны элементы:
animate — позволяет задать анимацию для скалярных атрибутов и свойств на определенный промежуток времени;
set — является удобным сокращением для анимации, с помощью которого можно присваивать значения анимации нечисловым атрибутам и свойствам, таким как свойства видимости;
animateMotion — передвигает элемент вдоль траектории движения.
И расширения:
animateTransform — позволяет задавать анимацию одному из атрибутов преобразований SVG за определенный промежуток времени, например для атрибута transform;
path (атрибут) — позволяет любой функции синтаксиса данных пути SVG быть указанной в атрибуте пути к элементу animateMotion.
Следует помнить, что JS не работает, когда SVG встроен в качестве img или используется в качестве background-image в CSS. Поэтому использование SMIL бывает оправдано. SMIL довольно широко поддерживается браузерами. Он работает во всех браузерах за исключением Internet Explorer и Opera Mini.

Описание элемента animate


Элемент animate добавляется внутрь элемента svg, который будем анимировать.
Атрибуты элемента animate:
xlink:href — ссылается на элемент, к которому будет применена анимация.
attributeName — определяет имя атрибута.
attributeType — определяет тип атрибута.
begin — определяет начало анимации.
end — определяет конец анимации.
min — указывает величину минимального значения продолжительности действия анимации, замеряемую по времени действия элемента. Значение этого атрибута должно быть больше или равно 0 (значение по умолчанию, при котором продолжительность действия вообще не ограничивается).
max — значение часов указывает величину максимального значения продолжительности действия, измеряемую по времени действия элемента. Его значение также должно быть больше 0. Значение по умолчанию для max — indefinite. Оно не ограничивает продолжительность действия вообще.
restart — отвечает за перезагрузку анимации.
repeatDur — Указывает общую продолжительность анимации. Устанавливается в формате часов. Например, 3s
repeatCount — Определяет количество повторений анимации. Указывается число или ключевое слово «indefinite» — бесконечное количество раз.
fill — дает возможность оставить эффект от анимации.
calcMode — задает режим интерполяции для анимации.
values — универсальный способ задания контрольных значений для анимации. Чтобы указать кейфреймы, используется атрибут keyTimes. А values указывает свойство анимации для каждого фрейма.
additive — определяет, как значение анимации будет добавляться к базовому значению атрибута. От него зависит, будут ли значения from и to связаны с текущим значением атрибута или нет. Атрибут принимает одно из двух значений: sum и replace.
accumulate — определяет, как будет «накапливаться» анимация при нескольких повторениях. Контролирует, учитывается ли предыдущее конечное значение атрибута. По умолчанию его значение none, это означает, что, когда анимация повторяется, то это происходит с самого начала, не учитывая окончания предыдущей итерации. Можно установить значение sum. Это будет означать, что каждый новый цикл анимации связан с тем, где завершился предыдущий цикл.
from — задает начальное значение анимации
to — задает конечное значение анимации
by — задает относительное значение смещения анимации
dur — определяет продолжительность анимации. Указывается в формате часов, например 3s или 02:33.

Трансформация элементов


В примере изменяется радиус окружности. За три секунды окружность появится и ее радиус увеличится до 100
<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="r" from="0" to="100" dur="3s"/>
</circle>
</svg>

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


Для перемещения SVG элементов нужно только указать координаты x и y. В этом примере прямоугольник переместится вправо.
<svg>
<rect x="0" y="0" width="200" height="200" fill="slategrey">
<animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>
</rect>
</svg>
Атрибут fill определяет как анимация будет действовать после завершения. В примере значение freeze вынуждает элемент оставаться там, где завершается анимация.
Также все действует и для элемента , но для него будем изменять атрибуты cx или cy:
<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/>
</circle>
</svg>

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


В самом элементе animate можно задавать изменения только для одного атрибута, но таких элементов animate можно определить несколько. Например:
<svg>
<circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7">
<animate attributeName="r" from="0" to="100" dur="3s"/>
<animate attributeName="stroke-width" from="0" to="10" dur="7s"/>
</circle>
</svg>
В примере анимируется не только окружность, но и толщина обводки. При увеличении окружности растет и ее граница – становится толще.

Перемещение по траектории


Анимация по заданной траектории, пожалуй, является одной из самых популярных. Бегающие по кругу шарики, летающие изображения и многое другое постоянно можно встретить на сайтах.
Для SVG изображения также можно задавать анимацию элемента по заданной траектории. Это делается с помощью элемента animateMotion. Атрибут path используется, чтобы указать траекторию движения. Он представляется в том же формате и интерпретируется аналогичным образом, как и атрибут d для элемента path.
Вот пример движения шарика по траектории. Она задается с помощью кривых Безье.
<svg width="500" height="350" viewBox="0 0 500 350">
<circle id="circle" r="20" cx="100" cy="100" fill="tomato" />
<animateMotion 
xlink:href="#circle"
dur="1s"
fill="freeze"
path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"
/>
</svg>

Трансформация


Трансформации scale, translate и rotate можно использовать для анимаций с помощью элемента animateTransform:
<svg>
<rect width="200" height="200" fill="slategrey">
<animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/>
</rect>
</svg>
В атрибуте type необходимо указать тип трансформации. Они действуют по тому же принципу, что и в CSS3.
Для поворота изображения во время движения, необходимо использовать атрибут rotate. Он принимает одно из трех значений:
auto: указывает, что объект поворачивается на угол к направлению (т.е. вектору касательной) траектории движения;
auto-reverse: указывает, что объект поворачивается на угол к направлению (т.е. вектору касательной) траектории движения плюс 180 градусов;
число: указывает, что к целевому элементу применяется постоянное преобразование поворота, где угол поворота равен указанному числу в градусах.

Анимация в PIXLI


Попробуем анимировать изображение в редакторе. Покажем на примере самого простого варианта – бегающего по кругу шарика.
Добавим к блоку HTML-код
<svg width="350px" height="250px" version="1.1" viewbox="0 0 300 200">
<rect x="0" y="0" width="350" height="250" />
<circle cx="75" cy="60" r="15" fill="#fff"> 
<animateMotion begin="0s" dur="7s" repeatCount="indefinite" 
path="M 40,70 A50,50 90 1 1 41,71z" stroke-width="2px" stroke=#cbcbcb />
</circle>
</svg>


Вот собственно и все. Мы получим движение круга. Эти приемы можно использовать для реализации простых логотипов или эффектов.
20 may 2017, 14:23    Ivan Web-дизайн 0    5 0

Comments (0)

    You need to login to create comments.