Элемент анимации SVG <Animation>

Элемент анимации SVG <Animation> используется для создания анимации SVG-графики. Элемент анимации был первоначально определен в синхронном мультимедийном интеграционном языке (SMIL). В анимации необходимо определить атрибуты, движение, цвет, время начала и продолжительность анимации.

Анимацию можно добавить к формам SVG-изображений. Есть несколько методов анимации SVG-форм. В этой статье я介绍一下 все возможности.

Пример анимации SVG

Это пример простой анимации SVG:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="10" y="10" height="110" width="110"
　　　　　　　　　style="stroke:#ff0000; fill: #0000ff">
　　　　　　　　<animateTransform
　　　　　　　　　　　　attributeName="transform"
　　　　　　　　　　　　begin="0s"
　　　　　　　　　　　　dur="20s"
　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　from="0 60 60"
　　　　　　　　　　　　to="360 60 60"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　/>
　　　　</rect>
</svg>

Обратите внимание, как элемент <rect> вложен в элемент <animateTransform>. Это элемент, который анимирует прямоугольник.

Это созданный SVG анимации:

Обзор вариантов анимации

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

1. <set>

2. <animate>

3. <animateColor>

4. <animateTransform>

5. <animateMotion>

Каждый из этих элементов SVG анимации устанавливает или устанавливает анимацию различных аспектов SVG формы. Эти элементы анимации будут описаны в remainder of the article.

set

Этот элемент set является одним из самых простых элементов в элементах SVG анимации. Через определенный интервал времени он просто устанавливает атрибут в определенное значение. Поэтому форма не анимируется непрерывно, а только изменяется значение атрибута один раз.

Это пример элемента <set>:

<svg　width="500"　height="100"><circle　cx="30"　cy="30"　r="25"　style="stroke:　none;　fill:　#0000ff;">
　　　　<set attributeName="r" attributeType="XML"
　　　　　　　　　to="100"
　　　　　　　　　begin="0s"　　/>
</circle></svg>

Обратите внимание, что элемент <set> вложен в элемент circle. Это способ применения элемента <set> к форме - через его вложение в SVG-элемент, к которому нужно применить форму.

Элемент <set> устанавливает значение атрибута в определенный момент времени. Название атрибута, который нужно установить, указывается в атрибуте attributeName. Значение, которое нужно установить, указывается в атрибуте to. Время установки значения атрибута указывается в атрибуте begin.

В примере выше r устанавливает атрибут в 100 через 5 секунд. Эффект изображения после выполнения:

attributeType

В предыдущем примере в элементе <set> также есть атрибут attributeType. Значение установлено в XML. Это потому, что атрибут (r атрибут), который нужно настроить в этом примере, является атрибутом SVG Circle, а SVG элементы являются XML-элементами, поэтому их атрибуты также являются XML-атрибутами.

Вы также можете настроить анимацию CSS-атрибутов формы. Если вы это делаете, вам нужно установить attributeType в CSS. Если не предоставляется атрибут attributeType, браузер будет пытаться угадать, является ли атрибут, который вы хотите анимировать, XML-атрибутом или CSS-атрибутом.

animate

Элемент animate используется для установки анимации для свойств формы SVG. Вы можете嵌入 элемент animate в форму, которую вы хотите применить. Вот пример:

<svg　width="500"　height="100"><circle　cx="30"　cy="30"　r="25"　style="stroke:　none;　fill:　#0000ff;">
　　　　<animate　attributeName="cx"　attributeType="XML"
　　　　　　　　　　　　　from="30"　to="470"
　　　　　　　　　　　　　begin="0s"　dur="5s"
　　　　　　　　　　　　　fill="remove"　repeatCount="indefinite"/>
</circle></svg>

Этот пример анимации устанавливает анимацию для свойства cx элемента <circle> от значения 30 (свойство “from”) до значения 479 (свойство “to”). Анимация начинается с 0 секунд (свойство “begin”) и продолжается 5 секунд (свойство “dur”)

После завершения анимации свойства анимации будут установлены на их исходные значения (свойство fill=“remove” устанавливается). Если вы хотите, чтобы свойства анимации оставались на значении “to-value”, установите атрибут “fill” в “freeze”. Анимация повторяется бесконечно (свойство “repeatCount”)

Вот созданная анимация:

animateTransform

Элемент <AnimateTransform> может устанавливать анимацию для свойства Transform формы. Элемент <Animate> этого не делает.

Вот пример:

<svg　width="500"　height="100"><rect　x="20"　y="20"　width="100"　height="40"
　　　　style="stroke:　#ff00ff;　fill:none;"　>
　　<animateTransform　attributeName="transform"
　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　from="0　100　100"　to="360　100　100"
　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　/>
</rect></svg>

Этот пример анимации transform применяет анимацию к свойствам элемента <rect, встроенного в transform. Свойство type установлено в rotate (функция вращения), что означает, что анимация будет вращением. Анимация параметров, установленных в свойствах from и to, передается функции rotate. В этом примере анимация вращения вокруг точки 100,100 с 0 до 360 градусов.

Вот пример анимации пропорций квадрата:

<svg　width="500"　height="200">
　　　　<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　　　　　style="stroke:　#ff00ff;　fill:　none;"　>
　　　　　　　　<animateTransform　attributeName="transform"
　　　　　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　　　　　from="1 1"　to="2 3"
　　　　　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　　　</animateTransform>
　　　　</rect>
</svg>

Еще раз обратите внимание, что атрибуты from и to содержат значения, которые обычно передаются в функцию преобразования scale().

Вот созданная анимация:

animateMotion (анимация движения)

<animateMotion> элемент может анимировать движение формы по траектории. Он также может повернуть форму, чтобы соответствовать наклону траектории, как, например, автомобиль, движущийся по горному ходу. Вот пример:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"
　　　　　　　　　　　　</path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　</animateMotion>
　　　　</rect>
</svg>

Элемент path определяет траекторию анимации формы в атрибуте <animateMotion>. Атрибут path использует syntax, аналогичнуюэлемент pathТоже синтаксис.

Это также显示了路径а и результат анимации, чтобы вы могли лучше следить за движением.

Чтобы повернуть квадрат так, чтобы он соответствовал склону траектории, установите атрибут rotate элемента <animateMotion> в auto. Вот пример:

<svg　width="500"　height="150">
　　　　<path　d="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"></path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　rotate="auto"
　　　　　　　　　　　　　　　</animateMotion>
　　　　</rect>
</svg>

Это генерируемая анимация. Обратите внимание, как вращение квадрата изменяется, чтобы соответствовать траектории.

Вы можете установить атрибут rotate в определенное значение, например, 20 или 30 и т.д. Таким образом, форма будет вращаться на указанный угол в течение всего анимации.

Единицы времени

При определении анимации SVG можно указать время начала и продолжительность анимации. Указывая время, вы можете выбирать между различными единицами времени. В этих единицах времени обычно указываются свойства begin, dur и end различных элементов анимации.

В этих свойствах вы можете указать число, за которым следует единица времени, как в примере, приведенном в данном документе. Например, 5s5 секунд. Вот список единиц времени, которые вы можете использовать:

Вы также можете указать время в формате, включающем часы, минуты и секунды. Формат следующий:

hh:mm:ss

Вот пример:

1:30:45

Этот пример указывает время 1 час 30 минут 45 секунд (естественно, для анимации это очень долгое время).

Синхронизация анимаций

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

<svg　width="500"　height="100">
<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　<animate　id="one"　attributeName="x"　attributeType="XML"
　　　　　　　　　　　　　from="0"　to="400"
　　　　　　　　　　　　　begin="0s"　dur="10s"　fill="freeze"
　　　　　　　　　　</animate>
　　　　<animate　attributeName="y"　attributeType="XML"
　　　　　　　　　　　　from="0"　to="50"　begin="one.end"　dur="10s"　fill="freeze"
　　　　　　　　　　</animate>
</rect>
　　　　</svg>

Вот созданная анимация:

Свойство id первой анимации установлено в one.

Вторая анимация ссылается на первую анимацию через свойство begin. Значение этого свойства установлено в one.end, что означает, что анимация должна начинаться в конце анимации с ID one.

Когда другой анимации начинается или заканчивается, анимацию можно запустить с помощью id.begin или id.end. Вместо id используется ID элемента анимации для синхронизации.

Вы также можете указать смещение времени начала или окончания другого анимации, например:

one.begin+10s
one.end+5s

Кроме того, вы можете указать明确的 время окончания анимации в свойстве end анимации. Это не заменяет свойство dur. Оно просто добавляет другую возможную концовку анимации, поэтому приоритет имеет та, которая наступает первой. Вот пример:

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"　end="one.end"
　　　　　　　　fill="freeze"
　　　　　　　　/>

Dlinna etoy animatsii - 10 sekund, ili okonchaniye animatsii s ID one, v zavisimosti ot togo, kto dochet do konca pervym.

Povtornoye ispol'zovanie animatsii

Vy mozhete ispol'zovat dva atributa v elemente animatsii, chtoby povtorit' animatsiyu.

Perviy atribut - atribut repeatCount. V etom atribute vy mozhete ustanovit' chislo, kotoroe vozmozhno povtorit' animatsiyu, ili znacheniye indefinite, kotoroe vozmozhno ustanovit' animatsiyu na borzhego vremeni, ne prestanavlivaya deystvovat.

Vtoroy atribut - repeatDur, on ustanavlivayet prohodimuyu vremya, na kotoroy animatsiya budet povtorchat'sya. Vy mozhete takzhe ispol'zovat znacheniye indefinite v atribute repeatDur, kotoroe deystvuet takzhe, kak i znacheniye repeatCount v atribute.

Eto dva primerа:

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatCount="3"
　　　　　　　　fill="freeze"
　　　　　　　　/>

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatDur="30s"
　　　　　　　　fill="freeze"
　　　　　　　　/>

Kombinirovannye animatsii

Vy mozhete v elemente vyvodit mnogochislennye animatsii, ispol'zuem animatsiyu. Vy uvideli eto, no eto etot primer:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="10"　y="10"　width="40"　height="20"
　　　　　style="stroke:　#000000;　fill:　none;">
　　　<animate　attributeName="x"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="400"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　</animate>
　　　<animate　attributeName="y"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="100"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　</animate>
</rect>
</svg>

V etom primeru dva animatsii, kazhdaya iz kotorih nastroyivat animatsiyu dlya atributov x i y pravilnogo kvadrata. Eto sozdannuyu animatsiyu:

Когда kombiniruyutsya elementy <animateTransform>, standartnoe povedenie - vtoroy animatsiyu potushchivaet pervuyu. No, vy mozhete sovmestit peremennye animatsii, dobaviv k dvoim elementam <animateTransform> atributy additive i znacheniye sum. Eto etapnoy primer:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><rect　x="10"　y="10"　width="40"　height="20"
　　　　　　style="stroke:　#000000;　fill:　none;">
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　from="1"　to="3"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　additive="sum"
　　　　　　　　　　　　</animateTransform>
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　　　from="0　30　20"　to="360　30　20"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"　additive="sum"
　　　　　　　　　　　　</animateTransform>
</svg>

Это результат анимации масштабирования и поворота прямоугольника: