动画技术是互联网中不可缺少的一个重要组成部分，是吸引访问者的重要手段之一，SVG也同样有能力随时改变矢量图象外在表现的能力。SVG中生成动画的方式有：

1）利用SVG提供的动画元素实现：由于SVG的内容可以定义成动态变化的，因此，利用SVG提供的各种动画元素，我们就可以得到各种动画效果，比如：沿某路径运动、渐隐渐现、旋转、缩放、改变颜色等。
2）使用SVG DOM：由于SVG DOM遵循DOM1、DOM2规范的大部分内容，因此，SVG中的每个属性和样式都可以通过脚本编程来访问；另外，SVG也提供了一套扩展的DOM接口，让通过脚本编程实现动画效果的手段更方便快捷。脚本语言中的定时器可以很好地触发和控制图象的运动。

    SVG的动画元素标准的指定者与SYMM（Synchronized Multimedia）工作组合作，共同编写了SMIL动画规范，这个规范描绘了XML文档结构中使用的通用的动画特征集。SVG不但实现了SMIL的动画规范，同时也提供了一些SVG的特殊扩展。SVG定义了比SMIL动画更为严格的错误处理程序，当文档中有任何错误产生时，动画都将会停止。

    SVG支持SMIL（Synchronized Multimedia Integration Language）动画规范中定义的下面的动画元素：

animate：改变SVG元素数值属性的不同值
set：是animate的简化，主要用来改变非数值属性的属性值，比如visibility属性等
animateMotion：沿某运动路线移动SVG元素
animateColor：改变某些元素的颜色属性值
SVG对SMIL动画的扩展元素和属性有：
animateTransform：改变SVG转换的转换属性值
path属性：改变animateMotion元素中path属性的所有特性。
mpath元素：SVG允许animateMotion元素包含mpath子元素，它能够引用SVG中path元素的路径定义
rotate属性：SVG为animateMotion增加一个rotate属性，用来控制一个对象是否自动进行旋转。

    下面通过一个简单的例子，来看一看SVG是如何实现动画效果的：

<?xml version="1.0" encoding="UTF-16" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="400"
xmlns="http://www.w3.org/2000/svg">
<desc>本例子说明SVG的动画元素</desc>
<defs>
<!-- 下面定义渐变效果 -->
<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" style="stop-color: #88f;"/>
<stop offset="100%" style="stop-color: #008;"/>
</linearGradient>
</defs>

<!-- 下面代码说明了如何使用animate元素来使圆产生动画效果，同时改变圆心的位置和半径的大小 -->
<circle id="RectElement" cx="50" cy="50" r="50"
fill="rgb(255,0,0)" style="fill: url(#grad1);">
<animate attributeName="cx" attributeType="XML"
xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="250" />
<animate attributeName="cy" attributeType="XML"
xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="150" to="152" />
<animate attributeName="r" attributeType="XML"
xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="150" />
</circle>

<!-- 建立一个新的坐标系统，并使文字旋转和放大 -->
<g transform="translate(50,50)" >
<!-- 下面的代码定义了“Hello,World！”这段文字，说明了'set','animateMotion',
'animateColor'和'animateTransform'元素的用法。 -->
<text id="TextElement" x="0" y="0"
font-family="宋体-18030" font-size="18" font-weight="bold" visibility="hidden" >
欢迎光临！
<tspan dx="-100" dy="20">Hello,World!</tspan>
<set attributeName="visibility" attributeType="CSS" to="visible"
begin="4s" dur="6s" fill="freeze" />
<animateMotion path="M 0 20 L 50 120"
begin="4s" dur="6s" fill="freeze" />
<animateColor attributeName="fill" attributeType="CSS"
from="rgb(0,0,255)" to="rgb(128,0,0)"
begin="4s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-90" to="0"
begin="4s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" additive="sum"
begin="4s" dur="6s" fill="freeze" />
</text>
<text x="92" y="275" style="font-size:16pt;font-weight:bold">欢迎光临【孟宪会之精彩世界】</text>
<text x="105" y="295" style="font-size:16pt;font-weight:bold">http://lucky.myrice.com</text>
</g>
</svg>

    上面例子中，我们可以看到，一个带渐变颜色填充的圆，位置逐渐向右下方移动，圆心位置从(50,150)移动到（250,152），同时，半径也由50增大到150；文字“Hello,World!”在4秒时开始出现（可视性visibility由hidden变成了visible）,并开始向圆中心方向移动，颜色从#0000FF逐渐变成了#800000，文字方向由-90度逐渐变成0度，文字大小逐渐变化到原来的3倍；文字的变化共持续了6秒。以上代码的效果如下图所示：

   下面解释代码中与动画元素和属性：

animate:是动画元素，定义要进行变化的各种属性。
xlink:href：指定要进行动画的元素名称，是一个uri地址。要进行动画的元素必须是当前SVG文档中出现的元素，uri必须指定一个具有动画能力的元素，如果指定的元素不止一个，或者指定的元素没有进行动画的能力，则会产生错误；如果没有uri属性的话，要进行动画的元素就是当前动画元素的最接近的父元素。
attributeName：指定要进行动画变化的属性名称，可根据实际情况带上XML的名称空间。
attributeType：指定要变化的属性和属性值在什么名称空间里定义。可有三种选择之一：CSS、XML、auto。“CSS”指定attributeName的值是CSS属性的名字；“XML”指定attributeName的值是默认XML名称空间里定义的XML属性名；“auto”是默认值，首先搜索CSS属性列表看能否匹配attributeName，如果不能找到匹配的值，则寻找该元素的缺省XML名称空间
begin：指定元素何时进行动画。可以取的值有： offset-value、syncbase-value、event-value、repeat-value、accessKey-value、wallclock-sync-value、"indefinite" ，offset-value是相对于文档开始的时间，不能为负值；syncbase-value是相对于另外动画元素的同步时间，必须包含另外元素的id值；event-value是由事件触发；repeat-value是重复事件，元素动画开始时间是相对于重复事件触发的时间；accessKey-value是指相对于用户的键盘输入的时间；
wallclock-sync-value是现实世界中的时间；indefinite是由beginElement()的调用或被链接到该元素决定是否开始动画。该属性如果同时选择多个值的话，要以分号“;”隔开。
dur：指定动画的持续时间。可以取下面三者之一：大于0的数值、media和indefinite。该属性值缺省为indefinite，即无限长。
end：指定动画结束的时间。与begin的取值方法类似。
fill：指动画后的填充状态。取下面二者之一：remove和freeze。remove表示不保留动画结束时的状态；freeze表示保留动画结束时的状态。缺省为remove。
from：指定动画开始时的属性值。
to：指定动画结束时的属性值。
additive：指定动画是否是在原来的基础上进行的。取sum和replace二者之一，默认为replace。
accumulate：指定动画是否是在前一次动画的基础上进行累加的。取sum和none二者之一，默认为none。

    关于additive和accumulate两个属性的意义，我们可以通过改变下面例子中的不同值来领会。

<?xml version="1.0" standalone="no"?>
<svg width="800" height="400">
<defs>
<linearGradient id="grad1" x1="0" y1="0"
x2="100%" y2="100%" gradientUnits="userSpace">
<stop offset="0%" style="stop-color: #88f;"/>
<stop offset="100%" style="stop-color: #008;"/>
</linearGradient>
</defs>
<rect width="100px" height="200px" style="fill:url(#grad1)">
<animate attributeName="width" from="0px" to="100px"
fill="freeze" dur="10s" attributeType="XML"
additive="sum"
accumulate="none" repeatCount="5"/>
</rect>
</svg>

   另外，还有min（动画持续的最小时间）、max（动画持续的最大时间）、restart（动画重新开始的时间，取always、whenNotActive和never之一）、repeatCount（动画重复的时间）和repeatDur（所有重复的持续时间）。时间的格式可以是02:10:13、20:10:10.25、10.5s、00:00.005、12.467、5ms、3.2h等，但里面不能包含空格，头尾有空格时将被忽略。

发表于 @ 2002年01月25日 09:27:00|评论(loading...)