制作缓动的svg动画

svg标签为h5原生支持，只要放到body中即可生效。更多详细内容，请参考mdn文档。

1、一个普通的svg动画使用animate标签，只改变动画元素的某个属性，适合做简单动画。

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="30" height="15" width="0">
    <animate
      calcMode="spline"
      keyTimes="0; 1"
      keySplines="0.5 0 0.5 1"
      attributeName="width"
      values="0;100"
      begin="0s"
      dur="2s"
      fill="freeze" />
  </rect>

  <rect x="10" y="55" height="15" width="0">
    <animate
      calcMode="spline"
      keyTimes="0; 1"
      keySplines="0.5 0 0.5 1"
      attributeName="width"
      values="0; 75"
      begin="0s"
      dur="2s"
      fill="freeze" />
  </rect>

  <rect x="10" y="80" height="15" width="0">
    <animate
      calcMode="spline"
      keyTimes="0; 1"
      keySplines="0.5 0 0.5 1"
      attributeName="width"
      values="0; 50"
      begin="0s"
      dur="2s"
      fill="freeze" />
  </rect>

  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width="0.5" />
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="25" x2="110" y2="25" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>

该动画只是简单地改变了矩形的宽度，使其随着时间发生某种变化。这里用values来控制它在运动过程中的绝对量（以px为单位），该属性至少应包含两组值，分别表示起始和终止的量；对于过程中间可能出现的不同的量的情况，可设多组值，组之间用封号隔开（其他属性类似）。

每组值在整个运动周期中所处的时间点的百分比由keyTimes来指定，该属性中的每组值的范围都在0~1之间且必须包含0和1。比如第一组值的所在的动画时间点为动画持续时间dur*0%=0，最后一组值所在的动画时间点为dur*100%=dur。另外，该属性的值的组数与values的值的组数相同。

设置keySplines属性必须设置calcMode为spline，该属性设置相邻两组值之间的变化速率，该属性中的每组值含有4个参数，分别是x1、y1、x2、y2，表示起点为（0,0）、终点为（1,1）的三次贝塞尔曲线的两个控制点（前两个参数属于起始控制点的两个坐标）。比如，要使values属性中的其中两组值的变化速率为先慢后快再慢，不妨设为0.5 0 0.5 1。另外，keySplines属性的值的组数要比values的值的组数少1。

fill属性在这里是设置动画停止时是否保持在最后一帧，设为freeze即可保持在最后一帧，否则回到初始状态。

一种可能的三次贝塞尔曲线及其绘制代码如下：

    <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
      <path d="M 50 250 l 200,0 0,-200 -200,0 Z" 
        stroke="#2567f3" stroke-width="2" fill="none"></path>

      <path d="M 50 250 C 150,250 150,50 250,50" 
        stroke="#2567f3" stroke-width="2" fill="none"></path>

      <line x1="50" y1="250" x2="150" y2="250" 
        stroke-width="2" stroke="#fea365"></line>
      <line x1="150" y1="50" x2="250" y2="50" 
        stroke-width="2" stroke="#fea365"></line>

      <circle cx="50" cy="250" r="4" fill="#2567f3"></circle>
      <circle cx="250" cy="50" r="4" fill="#2567f3"></circle>
      <circle cx="150" cy="250" r="4" fill="#fea365"></circle>
      <circle cx="150" cy="50" r="4" fill="#fea365"></circle>

      <text x="25" y="280" 
        style="font: 15px sans-serif;fill: #333333;">起点(0,0)</text>
      <text x="220" y="35" 
         style="font: 15px sans-serif;fill: #333333;">终点(1,1)</text>
      <text x="110" y="35" 
         style="font: 15px sans-serif;fill: #333333;">控制点2(0.5,1)</text>
      <text x="120" y="280" 
         style="font: 15px sans-serif;fill: #333333;">控制点1(0.5,0)</text>
      <text x="100" y="310" 
         style="font: 14px sans-serif;fill: #686868;">三次贝塞尔曲线</text>
    </svg>

2、这个动画用了动画路径animateMotion标签，可以做稍复杂的动画。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path 
      id="mypath" 
      d="M 100 80 L 80 120 L 120 120 Z" 
      stroke-width="2" stroke="#fea038" 
      fill="none" 
    />
  </defs>

  <use href="#mypath"></use>

  <path d="M-5,-5 L10,0 -5,5 0,0 Z" fill="#4568f3">
    <animateMotion rotate="auto" dur="6s" repeatCount="indefinite">
      <mpath href="#mypath"></mpath>
    </animateMotion>
  </path>
</svg>

先画了一个三角形区域，路径是逆时针方向，接着画了一个指向右侧的箭头并设置了运动路径，路径沿着三角形绘制路径。在运动函数中设置了rotate为auto，则可使运动图形的右侧永远朝向运动方向（注：箭头原来指向右侧 ，而现在箭头所指的方向则会自动调整为路径方向）。另外，运动图形需要以svg画布的原点（一般是左上角）为基点进行绘画，也就是说图像要尽量画在原点周围，因为动画开始时运动图形的坐标原点会转移到运动路径的起点。

defs定义了一个只能被引用而不会被渲染的内容块，里面可包含任意合法的标签，一般用use标签来引用。mpath可引用path标签定义的路径，并以此作为animateMotion标签的运动路径，相当于设置animateMotion标签中的path属性。