SVG 教程

SVG 元素

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动画元素中的一个或多个完成此操作：

<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>

这些SVG动画元素中的每一个都设置或设置SVG形状的不同方面的动画。这些动画元素将在本文的其余部分中进行说明。

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在5秒钟后将属性设置为100。运行后图像效果：

attributeType

前面的示例在<set>元素中也有一个attributeType属性。该值已设置为XML。这是因为在示例中要为其设置值的属性(r属性)是SVG Circle元素的属性。因为SVG元素是XML元素，所以SVG属性也是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>

测试看看‹/›

此示例将<circle>元素的cx属性从值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>

测试看看‹/›

本<animateTransform>示例对嵌套在transform其中的<rect>元素的属性进行动画处理。该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属性使用与path元素相同的语法。

这也是显示了路径的结果动画，因此您可以更好地跟随运动。

为了旋转正方形以使其与路径的斜率对齐，请将<animateMotion>元素的 rotate属性设置为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秒。以下是您可以使用的时间单位列表：

时间单位	描述
h	小时
min	分钟
s	秒
ms	毫秒

您还可以以包含小时，分钟和秒的时间格式指定时间。格式如下：

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属性引用第一个动画。该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"
        />

该动画的时长为10秒，或者ID one结束的动画结束时停止，以先到者为准。

重复动画

您可以在动画元素内使用两个属性，以重复动画。

第一个属性是repeatCount属性。在此属性内，您可以设置一个数字，该数字将使动画重复该次数，或者indefinite使该动画保持运行而不会停止的值。

第二个属性是，repeatDur它指定要重复播放动画的持续时间。您也可以indefinite在repeatDur属性内使用值，其效果与在属性内使用值相同 repeatCount。

这是两个示例：

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

组合动画

您可以通过<animation>在元素内列出多个动画来组合动画。您已经看到了，但这是另一个示例：

示例

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

测试看看‹/›

本示例有两个动画，每个动画为矩形的x和y属性设置动画。这是生成的动画：

当组合<animateTransform>元素时，默认的行为是第二个动画抵消第一个动画。但是，您可以通过向两个<animateTransform>元素添加属性additive和值sum来组合转换动画。这是一个示例：

示例

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

测试看看‹/›

这是缩放和旋转矩形的结果动画：

SVG javascript脚本 SVG <mask> 元素