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

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

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

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

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

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

attributeName: Название атрибута для анимации.
from: Начальное значение атрибута.
to: Конечное значение.
dur: Продолжительность анимации (например, '5s' для 5 секунд).

Если вы хотите анимировать больше атрибутов внутри одного элемента, вы можете добавить больше элементов <animate>.

html

<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>

Анимация атрибутов преобразования

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

html

<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, которая закрывает путь, создавая цикл, возвращающийся к началу. Установив значение атрибута repeatCount на indefinite, мы указываем, что анимация должна повторяться бесконечно, пока существует изображение SVG.

html

<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: Криволинейное движение

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

html

<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>

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL