SVG动画

前面的话

　　SVG动画非常强大，只需要设置HTML元素，不需要CSS和JS，就可以实现动画效果。本文将详细介绍SVG动画

 

概述

　　动画实际上就是值关于时间的一个函数。在这个函数中，包含起始值和结束值，经过的时间一般被称为持续时间。动画执行时的曲线就是动画函数。但是，在计算机中，不可能穷尽每一时刻的状态，而是取多个采样点，每个采样点就叫做帧。要让动画流畅显示，一般地需要每秒60帧

　　在SVG中实现动画主要通过SMIL。SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现

　　[注意]SVG动画除了IE浏览器不支持之外，兼容其他主流浏览器

 

动画元素

　　SVG动画元素共有4个，包括：<set>、<animate>、<animateTransform>、<animateMotion>

【<set>】

　　<set>可以实现基本的延迟功能。就是指：可以在特定时间之后修改某个属性值（也可以是CSS属性值）

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <set attributeName="x" attributeType="XML" to="60" begin="2s" />
    </text>
  </g>
</svg>

　　2s后，文字会向右移动30px

【<animate>】

　　<animate>是基础动画元素，用于实现单属性的动画过渡效果 

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate attributeName="x" to="60" begin="0s" dur="2s"  repeatCount="indefinite" />
    </text>
  </g>
</svg>

【<animateTransform>】

　　<animateTransform>用于实现transform变换动画效果

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animateTransform attributeName="transform" type="scale" from="1" to="1.5" begin="0s" dur="2s"  repeatCount="indefinite" />
    </text>
  </g>
</svg>

【<animateMotion>】

　　<animateMotion>可以让SVG各种图形沿着特定的path路径运动

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="0" x="0">
      火柴
      <animateMotion path="M 20 20 H 60 V 50 Z" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
    <path d="M 20 20 H 60 V 50 Z" fill="transparent" stroke="black"></path>
  </g>
</svg>

 

动画属性

【attributeName】

　　attributeName表示要变化的元素属性名称

　　① 可以是元素直接暴露的属性，例如，对应的text元素上的x, y或者font-size;

　　② 可以是CSS属性。例如，透明度opacity

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate attributeName="opacity" to="0" begin="0s" dur="1s"  repeatCount="indefinite" />
    </text>
  </g>
</svg>

【attributeType】

　　attributeType支持三个固定参数：CSS、XML、auto，用来表明attributeName属性值的列表。x、y以及transform属于XML；opacity等CSS属于CSS；auto为默认值，自动判别的意思（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果不确信某属性是XML类别还是CSS类别的时候，可以不设置attributeType值，直接让浏览器自己去判断

【from, to, by, values】

from  动画的起始值
to  指定动画的结束值
by 动画的相对变化值
values  用分号分隔的一个或多个值，可以看成是动画的多个关键值点

　　from、to、by、values相互之间有制约关系：

　　1、如果动画的起始值与元素的默认值是一样的，from参数可以省略

　　2、如果不考虑values，to、by两个参数至少需要有一个出现。否则没有动画效果。to表示绝对值，by表示相对值。以位移距离为例子，如果from是100, to值为160，则表示移动到160这个位置；如果by值是160，则表示移动到100+160=260这个位置

　　3、如果to、by同时出现，则只识别to

　　4、 当values值设置并能识别时，from、to、by的值都会被忽略

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate attributeName="x" values="30;50;30;70;30" dur="2s"  repeatCount="indefinite" />
    </text>
  </g>
</svg>

【时间表示】

　　SVG animation中的时间表示，常见单位有 "h"、"min"、"s"、"ms"。单位含义都是英文单位的缩写。例如h表示小时(hour)

　　时间值支持小数写法，因此，90s也可以使用1.5min表示。时间值还支持hh:mm:ss这种写法，因此，90s也可以使用01:30表示

　　如果begin="1.5"没有单位，这里的小数点表示秒，也就是1.5s的意思

【begin、end】

　　begin指动画开始的时间，begin的定义是分号分隔的一组值。

　　例如，beigin="3s;6s"表示的是3s之后动画走一下，6s时候动画再走一下（如果之前动画没走完，会立即停止从头开始）

　　所以，如果一次动画时间为3s, 即dur="3s"，同时没有repeatCount属性时候，可以看到动画似乎连续执行了2次

　　begin的单值除了普通value，还有下面这些类别的value：

offset-value | syncbase-value | event-value | repeat-value | accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"

　　① offset-value表示偏移值，数值前面有+或-，相对于document的begin值而言。

　　② syncbase-value基于同步确定的值。语法为：[元素的id].begin/end +/- 时间值。就是说借用其他元素的begin值进行加减运算，这个可以准确实现两个独立元素的动画级联效果

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate id="x" attributeName="x" to="70" dur="2" fill="freeze"/>
      <animate attributeName="y" begin="x.end" to="60" dur="2" fill="freeze"/>
    </text>
  </g>
</svg>

　　③ event-value表示与事件相关联的值。类似于PowerPoint动画的“点击执行该动画”。语法是：[元素的id].[事件类型] +/- 时间值

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <circle id="circle1" cx="15" cy="15" r="15"/>
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate id="x" attributeName="x" begin="circle1.click" to="70" dur="2"/>
    </text>
  </g>
</svg>

　　点击小球，会触发文字的运动。如果想点击小球2秒后文字才支持，加上偏移时间就可以了——begin="circle1.click+2s"

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <circle id="circle1" cx="15" cy="15" r="15"/>
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate id="x" attributeName="x" begin="circle1.click" to="70" dur="2"/>
    </text>
  </g>
</svg>

　　④ repeat-value指重复N次之后再进行其他运动。语法为：[元素的id].repeat(整数) +/- 时间值

　　[注意]经测试该属性并不生效

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate id="x" attributeName="x" to="70" dur="2"/>
      <animate attributeName="y" begin="x.repeat(2)" to="70" dur="2" fill="freeze"/>
    </text>
  </g>
</svg>

　　⑤accessKey-value定义快捷键。即按下某个按键动画开始。语法为：accessKey("character")。character表示快捷键所在的字符

　　[注意]经测试该属性并不生效

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="30">
      小火柴的蓝色理想
      <animate attributeName="y" begin="accessKey('s')" to="70" dur="2" />
    </text>
  </g>
</svg>

　　⑥ wallclock-sync-value指真实世界的时钟时间定义。时间语法是基于在ISO8601中定义的语法

　　⑦ "indefinite"这个字符串值，表示“无限等待”。需要指向该动画元素的超链接(SVG中的a元素)

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x" begin="indefinite" to="70" dur="1" repeatCount="indefinite"/>
    </text>
     <a xlink:href="#animate1">
          <text  y="30" fill="#cd0000" font-size="20">点击</text>
     </a>    
  </g>
</svg>

【dur】

　　dur属性值只有两种：常规时间值 | "indefinite"

　　“常规时间值”就是3s之类的正常值；"indefinite"指动画不执行

【calcMode, keyTimes, keySplines】

　　这几个参数是控制动画曲线的

　　calcMode属性支持4个值：discrete | linear | paced | spline. 中文意思分别是：“离散”|“线性”|“踏步”|“样条”

discrete from值直接跳到to值
linear animateMotion元素以外元素的calcMode默认值。动画从头到尾的速率都是一致的
paced 通过插值让动画的变化步调平稳均匀。仅支持线性数值区域内的值，这样点之间“距离”的概念才能被计算（如position, width, height等）。如果”paced“指定，任何keyTimes或keySplines值都失效
spline 插值定义贝塞尔曲线。spline点的定义在keyTimes属性中，每个时间间隔控制点由keySplines定义

keyTimes = “<list>”

　　跟上面提到的<list>类似，都是分号分隔一组值。keyTimes是关键时间点的意思，这里有一些约定的规则：首先，keyTimes值的数目要和values一致，如果是from/to/by动画，keyTimes就必须有两个值。然后对于linear和spline动画，第一个数字要是0, 最后一个是1。 最后，每个连续的时间值必须比它前面的值大或者相等

　　paced模式下，keyTimes会被忽略；keyTimes定义错误，也会被忽略；dur为indefinite也会被忽略

keySplines = “<list>”

　　keySplines表示的是与keyTimes相关联的一组贝塞尔控制点（默认0 0 1 1）。每个控制点使用4个浮点值表示：x1 y1 x2 y2. 只有模式是spline时候这个参数才有用，也是分号分隔，值范围0~1，总是比keyTimes少一个值。

　　如果keySplines值不合法或个数不对，是没有动画效果的

　　下面是离散值discrete的例子

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x"  dur="3" values="40;60;80;100" calcMode="discrete" repeatCount="indefinite"/>
    </text>
  </g>
</svg>

　　下面是踏步值paces的例子 

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x"  dur="3" values="40;60;80;100" calcMode="paced" repeatCount="indefinite"/>
    </text>
  </g>
</svg>

　　下面是贝塞尔曲线spline的例子

<svg height="70" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x"  dur="3" values="40;60;100" keyTimes="0; .8; 1" calcMode="spline"  keySplines=".5 0 .5 1; 0 0 1 1" repeatCount="indefinite"/>
    </text>
  </g>
</svg>

【repeatCount, repeatDur】 

　　repeatCount表示动画执行次数，可以是合法数值或者"indefinite"

　　repeatDur定义重复动画的总时间。可以是普通时间值或者"indefinite"

<animate attributeName="x" to="60" dur="3s" repeatCount="indefinite" repeatDur="10s" />

　　上面的代码中，动画只执行完整3个 + 一个1/3个动画。因为repeat总时间是10s

【fill】

　　fill表示动画间隙的填充方式。支持参数有：freeze | remove。其中remove是默认值，表示动画结束直接回到开始的地方。freeze“冻结”表示动画结束后像是被冻住了，元素保持了动画结束之后的状态

【accumulate, additive】

　　accumulate是累积的意思。支持参数有：none | sum。默认值是none，如果值是sum表示动画结束时候的位置作为下次动画的起始位置

　　additive控制动画是否附加。支持参数有：replace | sum。默认值是replace.，如果值是sum表示动画会附加到其他低优先级的动画上

【restart】

　　restart支持的参数有：always | whenNotActive | never.

　　always是默认值，表示总是。whenNotActive表示动画正在进行的时候，是不能重启动画的。never表示动画是一波流

【min、max】

　　min/max表示动画执行最短和最长时间。支持参数为时间值和"media"（媒介元素有效）, max还支持indefinite

 

API

　　SVG animation有内置的API可以暂停和启动动画的。语法为：

// 暂停
svg.pauseAnimations();

// 恢复
svg.unpauseAnimations()

<svg height="70" xmlns="http://www.w3.org/2000/svg" id="svg">
  <g id="test"> 
    <text font-family="microsoft yahei" font-size="20" y="30" x="40">
      小火柴的蓝色理想
      <animate id="animate1" attributeName="x"  dur="2" to="80" repeatCount="indefinite" />     
    </text>
  </g>
</svg>
<script>
svg.onclick = function(){
  if(!this.paused){
    this.paused = true;
    this.pauseAnimations();
  }else{
    this.paused = false;
    this.unpauseAnimations();
  }
} 
</script>

　　点击文字可暂停或恢复