SVG SMIL animation动画详解

一、SVG SMIL animation概览

1. SMIL是什么？

SMIL不是指「水蜜梨」，而是Synchronized Multimedia Integration Language（同步多媒体集成语言）的首字母缩写简称，是有标准的。本文所要介绍的SVG动画就是基于这种语言。

SMIL允许你做下面这些事情：

• 动画元素的数值属性（X, Y, …）
• 动画属性变换（平移或旋转）
• 动画颜色属性
• 沿着运动路径运动

注意到“沿着运动路径运动”这一条没？前面的三条CSS3都是可以有所担当的，最后这一条，呵呵，CSS3只能蹲在墙角画圈圈了！

2. 强大之处是？

除了可以实现「路径动画」，SVG animation最强大的地方在于：只要在页面放几个animate元素，没有任何CSS, 没有任何JS，页面上的元素就像是没吃草的马儿一样，愉快地跑起来了。

唷，不信？给你个马，看它跑不跑！

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马</text>
    <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
  </g>
</svg>

二、SVG animation元素及效果概览

5大元素，1统江湖。

1. <set>
2. <animate>
3. <animateColor>
4. <animateTransform>
5. <animateMotion>

这5个元素犹如篮球场上的5名队员，分别实现不同类别的动画。

1. set

set意思设置，此元素没有动画效果。你可能会疑问了，既然这个元素没有动画效果，怎么会是animation五大天团成员之一呢？

虽然set虽然不能触发连续的动画，但是，其还是可以实现基本的延迟功能。就是指：可以在特定时间之后修改某个属性值（也可以是CSS属性值）。

举个例子，下面这个「马」会在3秒之后从横坐标160的位置移动60这个位置。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      马
      <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </text>
  </g>
</svg>

这里出现了attributeName, attributeType等属性。其含义有些顾名即可思意，有些需要点拨，这些属性后面会统一讲解。

2. animate

基础动画元素。实现单属性的动画过渡效果。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
    马
      <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
  </g>
</svg>

这里除了新增from, dur这两个通俗易懂的属性外，还蹦出了个repeatCount属性，同上，含义会后面统一讲解。

 3. animateColor
一看就知道是颜色动画。不过，animate可以实现其功能与效果，因此，此属性已经被废弃。可谓因为兄弟相争而年少陨落的天王。逝者已矣，过去的就让它过去吧~~

 4. animateTransform
此元素就是一开始给大家开眼界用到的那个元素。一看就知道实现transform变换动画效果的。知识是一脉相承的，这里的transform变换与CSS3的transform变换，以及Snap.svg.js中的transform()方法都是一个路数。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
    <animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>
  </g>
</svg>

5. animateMotion
animateMotion元素可以让SVG各种图形沿着特定的path路径运动~

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

不过上面这个马走得有点假，怎么马儿一直都是水平的啊，这不符合物理学定律，是不科学的。我们可以小小处理下，让表现更真实：

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

6. 自由组合
实际制作时候的动画，不可能总是一个属性修改。比方说，位置和透明度同时变化，怎么办呢？So easy! 直接组合就好了。

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

OK, 至此，体验SVG animation动画效果的旅程就结束了。下面进入参数详解篇。

三、SVG animation参数详解

1. attributeName = <attributeName>
要变化的元素属性名称，① 可以是元素直接暴露的属性，例如，对于本文反复出现的「马」对应的text元素上的x, y或者font-size; ② 可以是CSS属性。例如，透明度opacity.

2. attributeType = “CSS | XML | auto”
attributeType支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。x, y以及transform就属于XML, opacity就属于CSS. auto为默认值，自动判别的意思（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果你不确信某属性是XML类别还是CSS类别的时候，我的建议是不设置attributeType值，直接让浏览器自己去判断，几乎无差错。

不知大家有没有和我一样的疑问：“既然浏览器酱可以自己判断属性类别，那这个属性还有什么意义吗？”我琢磨着，可能某些属性，XML能起作用，CSS也能起作用，例如font-size, 此时就需要明确下归属。

3. from, to, by, values
上面4个属性是一个家族的，是最具哲理的一个家族。他们解决的是非常有哲理的问题：你从哪里来？要到哪里去？……

from = “<value>“

动画的起始值。

to = “<value>“

指定动画的结束值。

by = “<value>“

动画的相对变化值。

values = “<list>“

用分号分隔的一个或多个值，可以看成是动画的多个关键值点。

 from, to, by, values虽然属于一个家族，但是相互之间还是有制约关系的。有以下一些规则：

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

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

c. 如果to,by同时出现，则by打酱油，只识别to.

d. 如果to,by,values都没设置，自然没动画效果。如果任意（包括from）一个属性的值不合法，规范上说是没有动画效果。但是，据我测试，FireFox浏览器确实如此，但是Chrome特意做了写容错处理。例如，本来是数值的属性，写了个诸如a这个不合法的值，其会当作0来处理，动画效果依然存在。

e. values可以是一个值或多值。根据我在Chrome浏览器下的测试，是一个值的时候是没有动画效果。多值时候有动画效果。当values值设置并能识别时候，from, to, by的值都会被忽略。那values属性是干什么的呢？别看名字挺大众的，其还是有些功力的。我们实现动画，不可能就是单纯的从a位置到b位置，有时候，需要去c位置过渡下。此时，实际上有3个动画关键点。而from, to/by只能驾驭两个，此时就是values大显身手的时候了！

总结下，也就是from-to动画、from-by动画、to动画、by动画以及values动画。

4. begin, end
begin指动画开始的时间，看上去很简单。设个时间，延迟嘛~~实际上非也非也，上面出现的beigin="3s"只是最简单最基本的表示。

begin的定义是分号分隔的一组值。看到没？是一组值，单值只是其中的情况之一。例如，beigin="3s;5s"表示的是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值再加加减减，这个可以准确实现两个独立元素的动画级联效果。OK，看完下面的例子一定会豁然开朗，对于上面的offset-value也会有一定的认知。

这样的代码：

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate id="x" attributeName="x" to="60" begin="0s" dur="3s" fill="freeze" />
        <animate attributeName="y" to="100" begin="x.end" dur="3s" fill="freeze" />
    </text>
</svg>

于是，实现了一个马儿折线跑的效果，先横向移动，再无缝纵向移动。

begin="x.end"意思就是，当id为x的元素动画结束的时候，我执行动画。非常类似于PowerPoint动画的“上一个动画之后”的选项。

当然，我们还可以增加一些偏移值，例如begin="x.end-1s", 就表示id为x的元素动画结束前一秒开始纵向移动。

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

<svg id="svg" width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="circle" cx="100" cy="100" r="50"></circle>
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" to="60" begin="circle.click" dur="3s" />
    </text>
</svg>

也可以加上偏移值begin="circle.click+2s".即点击后2s开始执行动画。

④ repeat-value指重复多少次之后干嘛干嘛。语法为：[元素的id].repeat(整数) +/- 时间值. 举个例子，下面这个马儿会在水平运动2次之后，斜向运动。

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate id="x" attributeName="x" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="y" to="100" begin="x.repeat(2)" dur="3s" fill="freeze" />
    </text>
</svg>

begin="x.repeat(2)"指id为x的元素的动画重复2次后执行。

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

begin="accessKey(s)"，表示按下s键后执行动画。

5. dur
dur属性值比begin简单了好几层楼，就后面两种：常规时间值 | "indefinite".

“常规时间值”就是3s之类的正常值；"indefinite"指事件无限。试想下，动画时间无限，实际上就是动画压根不执行的意思。因此，设置为"indefinite"跟没有dur是一个意思，与dur解析异常一个意思。

文章出处：http://www.zhangxinxu.com/wordpress/?p=4333