SVG实战开发学习(八)——动画

【SVG支持的SML动画元素的通用属性】

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

<animate>:改变数值的属性或样式的值;

<set>:改变非数值的属性或样式的值,如visibility属性等;

<animateMotion>:沿着某路径移动SVG元素获得动画效果;

<animateColor>:改变某些元素与颜色有关的属性或样式的值;

<animate Transform>:改变SVG元素进行坐标变换时的动画效果;

1、与标示相关的常用属性

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

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

2、与时间控制相关的常用属性

begin=" <clock-time-value> | wallclock-sync-value | indefine | eventName ":定义动画的开始时刻。定义的值有很多种。

a) 时间偏移值:如"3s"表示3S后开始播放动画,还可以采用"min"(分钟),"h"(小时)等。也可以使用形如"hh:mm:ss.xxxx"的精确长时间表示形式,其含义是hh小时mm分钟ss.xxxx秒后开始播放动画。

b)现实世界中的时间:定义成将来的某个具体时刻,但定义后要保证SVG文档在这个时间之前打开。

c)Indefinite:表示这个动画不会自动开始,需要使用动态脚步调用"beginElement()"方法或指向该动画元素的超链接被激活才会开始。

d)eventName:表示在某个事件触发时开始播放动画。如:begin="mousedown",鼠标左键按下时开始播放动画。

   dur="<clock-time-value | indefinite>":定义动画的持续时间,取值含义类似"begin"属性。

   end="<clock-time-value | indefinite>  ":定义动画的结束时刻,取值含义类似"begin"属性。不同的是,如果是"indefinite"属性,需要使用动态脚本调用"endElement()"方法才会结束,如果取值是"3s"、"3min"这样的时间形式,结束时刻与开始时刻无关,3秒或者3分钟后就结束。

e)restart="always | whenNotactive | never":定义动画重播的方式,默认值是"always",表示动画任意时刻都可以重播,比如设定了动画播放的触发条件是"mousedown",那么只有在鼠标左键按下的时候才会重播。"whenNotactive"表示该动画只有在播放结束后才会重新开始,过程中不受任何影响。"never"表示该动画不会重播,只播一次。

f)repeatCount="<integer>|indefinite":定义动画重播的次数,需整数值。如果取值是"indefinite",那么表示无限重播。

g)repeatDur="<integer> | indefinite ":定义动画重播的总时间,比如取值是"5s",而该动画播放一次的时间是1秒,那么动画最多只会重播5次(5/1=5)就会停止;取值是"indefinite"表示无限重复播放。

h)fill=" freeze | remove  ":定义动画播放完毕后是停留在播放的终点还是回到起始位置。"freeze"表示"凝固" 在播放的终点;"remove"表示"移除"所有内容回到播放的起点。

【 与过程控制相关的常用属性 】

下面看看动画元素都含有哪些相关属性(不适用于<set>元素)。

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

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

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

以上三个属性不同时使用,一般采用"from"、"to"、和 "from"、"by"这两个组合。

d)calcMode="discrete | linear | paced |spline":定义动画关键点直接过渡的插值计算方式。"discrete"表示不采用插值算法,动画是从一个关键点跳跃到另外一个关键点,可想而知,动画效果就是跳跃式的;"linear"表示采用线性插值算法,这是<animate>元素和<set>元素采用的默认插值算法:"paced"表示采用在时间上均匀变化的方法插值:"spline"表示采用三次贝塞尔曲线的方式来插值,需要"keySplines"

属性的配合。

【与动画叠加相关的常用属性】

a)additive=" replace |sum ":定义动画播放过程中是否在前一帧的基础上进行,默认值是"replace",也就是每次点擦除上一帧的动画效果。"sum"表示叠加所有的动画效果。

b)accumulate=" none | sum ":定义动画在循环播放的时候,后一次播放是否擦除前一次的痕迹,所以这是针对播放次数而不是帧。默认值是"sum"表示不擦擦,"none"表示擦除。

由此可见,设置"accumulate"属性为"sum"时,也就等同于设置"additive"的属性为"sum"。

原文地址:https://www.cnblogs.com/cacti/p/4721618.html