SVG探索（五）：SVG 动画三剑客 animate, animateTransform, animateMotion

前言

首先，SVG 是什么？

SVG 是指可缩放矢量图形（Scalable Vector Graphics，SVG），基于 XML 标记语言，可以用于描述二维的矢量图形。显而易见，SVG 格式提供的是矢量图，因此图片可以被无限放大而不失真或降低质量，并且可以方便地修改内容和进行定制化开发。

在前端开发工作中，我们经常会用到 SVG 定义的图标、图片等。本文介绍了SVG中的动画三剑客：animate, animateTransform, animateMotion。

animate

<animate>元素提供了给元素添加动画的方法。使用时，需要将<animate>元素放在形状元素的内部。具体是：

首先，使用attributeName属性指定哪个属性设置了动画。

接着，可以设置的动画时间属性有：begin、dur、end、min、max、restart、repeatCount、repeatDur、fill，动画取值属性有：calcMode、values、keyTimes、keySplines、from、to、by。

这些属性可以从名称看出大概意思，比如：

repeatCount 属性表示动画将发生的次数。

repeatDur 属性指定重复动画的总持续时间。

fill 属性的默认值是 remove，表示当动画元素结束时，目标元素的外观属性不再应用该效果；而 freeze 表示在动画结束后，动画效果会保持“冻结”着的状态。

举个例子，我们设置矩形的 rx 属性，让其数值从 0 -> 5 -> 0 不断变化，动画持续时间 3s、动画是无限次（indefinite）。

<svg width="100" height="100" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate attributeName="rx" values="0;5;0" dur="3s" repeatCount="indefinite" />
  </rect>
</svg>

再举个例子，我们修改矩形的宽度，以下两种方法，其一是使用 from, to，其二是使用 by，效果都是从100到150。

<p>animate from, to</p>

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" height="100">
    <animate attributeName="width" fill="freeze" from="100" to="150" dur="3s" />
  </rect>
</svg>


<p>animate by</p>

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100">
    <animate attributeName="width" fill="freeze" by="50" dur="3s" />
  </rect>
</svg>

效果如下：

animateTransform

animateTransform元素可以设置目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。参考官方文档，animateTransform元素有以下几种类型：

类型 type	值
translate	`<tx> [,<ty>]`
scale	`<sx> [,<sy>]`
rotate	`<rotate-angle> [<cx> <cy>]`
skewX	`<skew-angle>`
skewY	`<skew-angle>`

举个例子，我们设置了rotate属性，使得三角形绕着旋转中心旋转一圈，再设置repeatCount="indefinite"实现不间断地旋转。

<p>animateTransform rotate</p>

<svg width="120" height="120"  viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <polygon points="60,30 90,90 30,90">
    <animateTransform attributeName="transform"
                      type="rotate"
                      from="0 60 70"
                      to="360 60 70"
                      dur="10s"
                      repeatCount="indefinite"/>
  </polygon>
</svg>

在下面的例子中，我们设置了scale属性，实现缩放效果。

<p>animateTransform scale</p>

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100">
    <animateTransform attributeName="transform" type="scale" from="1" to="2" repeatCount="indefinite" dur="3s" fill="freeze"/>
  </rect>
</svg>

效果如下：

animateMotion

<animateMotion> 元素定义了一个元素如何沿着运动路径进行移动。该元素的强大之处在于我们可以使用自定义的路径去实现动画效果！

举个例子，这里我们用 AI 软件画了一个路径 path：数字"6"，然后用 circle 画一个小球，并在小球内部设置 animateMotion 属性，其 path 值也就是数字"6"的路径，设置 dur 和 repeatCount 属性，最终可以实现小球沿着路径"6"运动的效果~

<svg width="200" height="200" viewBox="50 200 200 200" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
  <path fill="none" stroke="#000000" d="M163.41,264.43c-12.73,16.35-22.85,43.57-28.35,60.52c-2.93,9.04-4.55,15.15-4.55,15.15s0.09,31.57,4.34,34.85 c4.25,3.28,36.34,6.03,36.34,6.03l16.42-17.24l3.12-18.8l-18.91-20.92l-32.99,2.65"/>

  <circle r="5" fill="red">
    <animateMotion
      dur="5s"
      repeatCount="indefinite"
      path="M163.41,264.43c-12.73,16.35-22.85,43.57-28.35,60.52c-2.93,9.04-4.55,15.15-4.55,15.15s0.09,31.57,4.34,34.85 c4.25,3.28,36.34,6.03,36.34,6.03l16.42-17.24l3.12-18.8l-18.91-20.92l-32.99,2.65" />
  </circle>
</svg>

效果如下：