SVG中的动画技术(1)

http://blog.csdn.net/net_lover/archive/2002/01/25/6888.aspx

SVG中的动画技术(1)

    动画技术是互联网中不可缺少的一个重要组成部分，是吸引访问者的重要手段之一，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 代码

1. xml version="1.0" encoding="UTF-16" standalone="no"?>  
3. "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="500" height="400"  
5. xmlns="http://www.w3.org/2000/svg">  
6. <desc>本例子说明SVG的动画元素desc>  
7. <defs>  
8.   
9. <linearGradient id="grad1" x1="0" y1="0" x2="0" y2="100%">  
10. <stop offset="0%" style="stop-color: #88f;"/>  
11. <stop offset="100%" style="stop-color: #008;"/>  
12. linearGradient>  
13. defs>  
14.   
15.   
16. <circle id="RectElement" cx="50" cy="50" r="50"    
17. fill="rgb(255,0,0)" style="fill: url(#grad1);">  
18. <animate attributeName="cx" attributeType="XML"  
19. xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="250" />  
20. <animate attributeName="cy" attributeType="XML"  
21. xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="150" to="152" />  
22. <animate attributeName="r" attributeType="XML"  
23. xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="150" />  
24. circle>  
25.   
26.   
27. <g transform="translate(50,50)" >  
29. 'animateColor'和'animateTransform'元素的用法。 -->  
30. <text id="TextElement" x="0" y="0"  
31. font-family="宋体-18030" font-size="18" font-weight="bold" visibility="hidden" >    
32. 欢迎光临！   
33. <tspan dx="-100" dy="20">Hello,World!tspan>  
34. <set attributeName="visibility" attributeType="CSS" to="visible"  
35. begin="4s" dur="6s" fill="freeze" />  
36. <animateMotion path="M 0 20 L 50 120"    
37. begin="4s" dur="6s" fill="freeze" />  
38. <animateColor attributeName="fill" attributeType="CSS"  
39. from="rgb(0,0,255)" to="rgb(128,0,0)"  
40. begin="4s" dur="6s" fill="freeze" />  
41. <animateTransform attributeName="transform" attributeType="XML"  
42. type="rotate" from="-90" to="0"  
43. begin="4s" dur="6s" fill="freeze" />  
44. <animateTransform attributeName="transform" attributeType="XML"  
45. type="scale" from="1" to="3" additive="sum"  
46. begin="4s" dur="6s" fill="freeze" />  
47. text>  
48. <text x="92" y="275" style="font-size:16pt;font-weight:bold">欢迎光临【孟宪会之精彩世界】text>  
49. <text x="105" y="295" style="font-size:16pt;font-weight:bold">http://lucky.myrice.comtext>  
50. g>  
51. svg>  

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