使用 SMIL 的 SVG 动画

同步多媒体集成语言 (SMIL) 是一种基于 XML 的语言，用于编写交互式多媒体演示文稿。作者可以在其他基于 XML 的语言中使用 SMIL 语法来定义动画元素的时间和布局。SMIL 允许您

以下部分展示了如何在 SVG 中使用 SMIL 来实现这四种用例。

动画元素的属性

以下示例动画了圆形的 cx 属性。为此，我们在 <circle> 元素内部添加了一个 <animate> 元素。对于 <animate>，重要的属性有：

attributeName

要动画化的属性的名称。

from

属性的初始值。

to

最终值。

dur

动画的持续时间（例如，5 秒写成 '5s'）。

如果要在一个元素内动画化多个属性，可以添加多个 <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> 元素允许您动画化 transform 属性。需要使用此元素，因为我们没有动画化像 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>

另请参阅