HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画

SVG支持动画。可以通过以下几种方法获得动画效果:

  • 使用SVG动画元素。SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀、收缩、旋转和变换颜色。
  • 使用SVG DOM。SVG DOM兼容DOM1和DOM2,而SVG又定义了一套附加的DOM接口,支持脚本动画。通过这个方法可以获得各种动画效果。脚本语言中的定时器对象可以用来启动和控制动画。
  • SVG被设计为支持未来版本的SMIL(Sychronized Multimedia Integration Language)。SMIL将被模块化而与SVG及其它基于XML的语言连接,产生动画效果。

一、SVG中的动画元素

SVG中的动画元素有五个,它们都可以随着时间的变化而改变SVG元素的属性或样式值,如下所示:

  • <animate>:改变数值的属性或样式的值;
  • <set>:改变非数据值的属性或样式的值,如visibility属性等;
  • <animateMotion>:沿着某路径移动SVG元素获得动画效果;
  • <animateColor>:改变某些元素与颜色有关的属性或样式的值;
  • <animateTransform>:改变SVG元素进行坐标变换时候的动画效果;

 attributeName="<attributeName>":批明所作用的SVG元素中哪个属性或样式需要产生动画效果。

attrbuteType="<XML|CSS|auto>":指明产生动画效果的属性或样式值是哪个命名空间定义的。“XML”表示“attributeName”的值是默认XML命名空间里定义的XML属性名;“CSS”表示“attributeName”的值是默认CSS属性的名称;“auto”是默认值,解析器解析时先在CSS属性列表中查找是否有匹配“attributeName”的属性名,然后再在XML的命名空间里找

1.与时间控制相关的常用属性

begin="<clock-time-value>|wallclock-sync-value|indefinite|eventName":定义动画的开始时刻。

  • a.时间偏移值,如3S表示3秒后开始播放动画(hh:mm:ss.xxxx)
  • b.现实世界中的时间,定义后要保证SVG文档要在这个时间之前打开
  • c.Endefinite:表示这个动画不会自动开始,需要使用动态脚本调用"beginElement()"方法或指向动画元素
  • d.eventName:表示在某个事件触发时开始播放动画。如begin="mousedown"
    • 1.dur="<clock-time-value>|indefinite":定义动画的持续时间
    • 2.end="<clock-time-value>|indefinite":定义动画的结束时间
    • 3.restart="always|whenNotactive|never":是否重播
    • 4.repeatCount:重复播放次数 indefinite表示无限重播
    • 5.repeatDur:定义动画播放总时间
    • 6.fil="freeze|remove":定义动画播放完毕后是停留在播放的终点还是回到起始位置

2.与过程控制相关的常用属性

from="<value>":定义该动画元素所作用的属性值在开始变化时的值

to="<value>":定义该动画元素所作用的属性值在结束变化时的值

by="<value>":定义该动画元素所作用的属性值每次变化的步长值

calcMode="discrete|linear|paced|spline":定义动画关键点直接过渡的插值计算方式

  • discrete表示不采用插值算法,动画是从一个关键点跳跃到另外一个关键点
  • linear表示采用线性插值算法,这是<animate>元素和<set>元素采用的默认插值算法
  • paced表示采用在埋单上均匀变化的方法来插值
  • spline表示采用三次贝塞尔曲线的方式来插值,需要"KeySplines"属性的配合

 例子1:

<rect x="50" y="50" width="100" height="50">
    <animate attributeType="XML" attributeName="x" from="50" to="300" dur="3s" begin="3s" restart="always" repeatCount="3" >
</animate>
</rect>

例子2:

<text x="0" y="0" font-size="37" visibility=‘hidden" stroke="black" stroke-width="2" >
    <animateMotion path="M0,0 L50,50 L100,150" begin="1s" dur="5s" fill="freeze" rotate="auto"/>
</text>

例子3:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(100,100)"> 
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It‘s SVG!
        <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
        <animateMotion path="M 50 50 L 300 300" begin="1s" dur="5s" fill="freeze" />
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" begin="1s" dur="15s" fill="freeze" repeatCount=‘indefinite‘/> 
        <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" /> 
    </text> 
</g> 
</svg>

 二、

参考:

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。