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"?>  
  2. <!---->
  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)" >  
  28. <!---->
  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秒。以上代码的效果如下图所示:

 

你可能感兴趣的:(编程,xml,css,互联网,脚本)