SVG Animation

Animation

Contents

1 Introduction

因为网络是一个动态的媒介，SVG支持改变矢量图形的能力随着时间的推移。SVG动画内容可以在以下几个方面：

1. 利用SVG的动画元素。SVG文档片段可以描述时间修改文档的元素。使用不同的动画元素，您可以定义运动路径，淡入或淡出效果，和对象的成长，缩小，旋转或改变颜色。
2. 使用SVG DOM。SVG DOM符合文档对象模型（DOM）的关键方面1级[ DOM1 ]和文档对象模型（DOM）2级[ DOM2 ]规格。所有的属性和样式表设置访问脚本，和SVG提供了一套额外的DOM接口来支持高效的动画通过脚本。因此，几乎任何类型的动画可以实现。定时器设施如ECMAScript脚本语言可以用来启动和控制动画[ ECMA-262 ]。（见下面的例子。）
3. SVG被设计允许SMIL [SMIL]使用动画或静态SVG内容媒体组件。

2 Animation elements

概述：

SVG的动画元素与W3C同步多媒体协作开发（公司）的工作组，同步多媒体集成语言（SMIL）开发商3规范[SMIL]。Symm工作组，与SVG工作组协作，撰写了SMIL动画规范[ smilanim ]，这是一个通用的XML动画特征集。SVG具有动画功能在SMIL动画规范定义和提供了SVG的特定扩展。对介绍的方法和特点，支持SMIL动画任何语言，看到SMIL动画概述和SMIL动画模型（[ smilanim ]，部分2和3）。对动画的特点，超越SMIL动画列表，查看SVG扩展SMIL动画。

SMIL动画的关系：

SVG是SMIL动画方面的宿主语言，因此引入了额外的约束和特征的规范允许。除了任何SVG的具体规则在本规范中明确提到，SVG的动画元素和属性的规范的定义是SMIL动画规范[ smilanim ]。

SVG支持以下四个动画元件，在SMIL动画规范定义：

1   ‘animate’   允许标量属性被赋予不同的值随着时间的推移，实现单属性的动画过渡效果。
2   ‘set’   set虽然不能触发连续的动画，但是，其还是可以实现基本的延迟功能，也可以在特定时间之后修改某个属性值（也可以是CSS属性值）。如“能见度”属性
3   ‘animateMotion’ 沿着运动路径的元素
4   ‘animateColor’  修改特定属性或属性随时间的颜色值

虽然SVG有定义animatecolor，但其功能通常使用简单的“animate”元件来代替。

此外，扩展到包括以下新的SVG动画：

1   animateTransform标签，  修改变换属性值的动画元件，如“转换”

2   path属性 SVG允许任何特征从SVG路径数据语法被指定在一个“path”属性的“animateMotion”标签，（SMIL动画只允许一个“path”属性中的一个子集的SVG路径数据语法）

3   mpath 标签，SVG允许animateMotion元素包含一个孩子mpath标签引用一个SVG路径元素作为运动路径的定义

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

5 keyTimes属性跟上面提到的<list>类似，都是分号分隔一组值。keyTimes总名字上看是关键时间点的意思，大致就是这个意思。前面提到过values也是多值，这里有一些约定的规则：首先，keyTimes值的数目要和values一致，如果是from/to/by动画，keyTimes就必须有两个值。然后对于linear和spline动画，第一个数字要是0, 最后一个是1。 最后，每个连续的时间值必须比它前面的值大或者相等。
paced模式下，keyTimes会被忽略；keyTimes定义错误，也会被忽略；dur为indefinite也会被忽略。

6   keypoints 属性 SVG 添加”keypoints '属性' 就能提供animateMotion精确的贝尔塞曲线控制animateMotion的路径运动动画的速度是动画先快还是先慢。
keySplines表示的是与keyTimes相关联的一组贝塞尔控制点（默认0 0 1 1）。每个控制点使用4个浮点值表示：x1 y1 x2 y2. 只有模式是spline时候这个参数才有用，也是分号分隔，值范围0~1，总是比keyTimes少一个值。
如果keySplines值不合法或个数不对，是没有动画效果的。
【实际上就是values, keyTimes, keySplines三个人之间事情。values确定动画的关键位置，keyTimes确定到这个关键点需要的时间，keySplines确定的是每个时间点段之间的贝塞尔曲线，也就是具体的缓动表现。我们平时CSS3写的transition动画效果，也是这么回事，这是values值就两个，所以，keyTimes只能是0;1, 贝塞尔曲线就只有一个，要不ease, 要不linear等。】
7   rotate属性 SVG用添加一个“rotate”属性的“animateMotion”来控制一个对象是否是自动旋转或使定义其他旋转角度
8 from, to, by, values
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都没设置，自然没动画效果。
e. values可以是一个值或多值。在Chrome浏览器下，一个值的时候没有动画效果，多值有动画效果。当values值设置并能识别时候，from, to, by的值都会被忽略。我们实现动画，不可能就是单纯的从a位置到b位置，有时候，需要去c位置过渡下。此时，实际上有3个动画关键点。而from, to/by只能驾驭两个，此时就需要values的帮忙了。

与其他语言的兼容性：SVG在被使用时，其他语言可通过引用 ‘xlink:href’属性识别元件获得动画的目标，正如SMIL 3允许。

SMIL动画需要宿主语言定义文件的开始和结束的文件。因为一个SVG的有时是XML文档树和其他时代的根可以是父母的XML语法的一部分，对于一个给定的文件开始SVG文档片段定义为在“SVG元素的svgload触发事件的确切时间。一个SVG文档碎片的文件结束点是在文档片段已被释放，不再由用户代理加工。然而，一个在SVG文档中嵌套的SVG元素不构成在这个意义上的文件碎片，并没有定义一个单独的文件开始；在嵌套SVG片段都是相对于文档的时间定义为根的SVG元素。

在SMIL动画规范[ smilanim ]定义下，SVG定义了更多的约束错误处理。SMIL动画定义错误处理行为，在一定误差的情况下文件将继续运行，而在SVG文档有任何错误的事件，片段中的所有动画将停止。

3 以下部分描述了各种动画的属性和元素

目标元素必须是当前SVG文档片段的一部分。通过xlink：href将动画和目标元素连接起来。

这里写代码片