Анимация SVG с помощью SMIL

Язык интеграции синхронизированных мультимедиа (SMIL) — это язык на основе XML для создания интерактивных мультимедийных презентаций. Авторы могут использовать синтаксис SMIL в других языках на основе XML, чтобы задавать время и расположение элементов для анимации.

SMIL позволяет:

• анимировать числовые атрибуты элемента (x, y и т. д.)
• анимировать атрибуты transform (перемещение, вращение и т. д.)
• анимировать атрибуты color
• перемещаться по траектории

В следующих разделах показано, как использовать SMIL в SVG для этих четырёх сценариев.

Анимация атрибутов элемента

В следующем примере анимируется атрибут cx круга. Для этого добавим элемент <animate> внутрь элемента <circle>. Важные атрибуты элемента <animate>:

attributeName

Имя анимируемого атрибута.

from

Начальное значение атрибута.

to

Конечное значение.

dur

Длительность анимации (например, укажите «5s» для 5 секунд).

Чтобы анимировать другие атрибуты того же элемента, можно добавить ещё элементы <animate>.

<svg width="300" height="100">
  <title>Attribute Animation with SMIL</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animate
      attributeName="cx"
      from="0"
      to="500"
      dur="5s"
      repeatCount="indefinite" />
  </circle>
</svg>

Анимация атрибутов transform

Элемент <animateTransform> позволяет анимировать атрибуты transform. Этот элемент необходим, поскольку мы анимируем не одиночный атрибут, например x, который является числом. Атрибуты вращения выглядят так: rotation(theta, x, y), где theta — угол в градусах, а x и y — абсолютные координаты. В примере ниже анимируются центр вращения и угол.

<svg width="300" height="100">
  <title>SVG SMIL Animate with transform</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <rect
    x="0"
    y="50"
    width="15"
    height="34"
    fill="blue"
    stroke="black"
    stroke-width="1">
    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="20s"
      type="rotate"
      from="0 60 60"
      to="360 100 60"
      repeatCount="indefinite" />
  </rect>
</svg>

Анимация движения по траектории

Элемент <animateMotion> позволяет анимировать положение и вращение элемента в соответствии с траекторией. Траектория задаётся так же, как в элементе <path>. Можно задать атрибут, определяющий, будет ли объект вращаться вслед за касательной к траектории.

Пример 1: Линейное движение

В этом примере синий круг бесконечно перемещается от одного края чёрного прямоугольника к другому, отскакивая от них. Анимацией управляет элемент <animateMotion>. В данном случае мы задаём траекторию, состоящую из команды MoveTo, которая определяет начальную точку анимации, затем команды Horizontal-line, перемещающей круг на 300 пикселей вправо, и команды Z command, которая замыкает траекторию, создавая петлю, возвращающуюся в начало. Устанавливая значение атрибута repeatCount равным indefinite, мы указываем, что анимация должна повторяться бесконечно, пока существует изображение SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
  <title>SVG SMIL Animate with Path</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

Посмотреть работающий пример

Пример 2: Движение по кривой

Тот же пример, что и выше, но с криволинейной траекторией и движением вдоль неё.

<svg width="300" height="100">
  <title>SVG SMIL Animate with Path</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <rect
    x="0"
    y="0"
    width="20"
    height="20"
    fill="blue"
    stroke="black"
    stroke-width="1">
    <animateMotion
      path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
      dur="3s"
      repeatCount="indefinite"
      rotate="auto" />
  </rect>
</svg>

См. также

• SVG
• Спецификация анимации SVG
• Спецификация SMIL