SVG动画介绍

1 SVG属性动画 SVG动画一般通过更改对象属性值来实现。SVG工作组与W3C组织的SYMM(Synchronized MultiMedia WorkingGroup，同步多媒体工作组)合作推出了SVG动画 

1 SVG属性动画

　　SVG动画一般通过更改对象属性值来实现。SVG工作组与W3C组织的SYMM(Synchronized MultiMedia WorkingGroup，同步多媒体工作组)合作推出了SVG动画元素的定义规范。SVG中用于定义动画的元素有5个，，，，。其中元素允许数量属性或样式参数随时间而变化，元素可设定非数量属性或样式参数随时间而变化，元素可以沿着指定的路径移动元素以产生动画效果；元素用来设定元素的某些与颜色有关的属性或样式参数随时间而变化；元素可以控制对可视化元素进行坐标变换时的动画效果。

　　移动和旋转动画

　　移动和旋转动画可以用元素来实现。元素用于可视化元素的动态坐标变换，其主要属性除通用属性外还有两个attributeName和type，其中attributeName属性值必须指明为’'transform"，type属性指明动态坐标变化的类型，其值可以为"translate"(表示平移变换)、"scale"(表示拉伸变换)、"rotate"(表示旋转变换)、"skewX"，及”skewY"(表示沿X和Y方向上的歪斜变换)。

　　拉幕和缩放动画

　　拉幕和缩放动画都是对图形对象的宽度和高度进行改变而引起的动画效果，可以用元素来实现，利用from和to属性来定义图形的起始和终止值。元素没有其特有的属性。

　　色彩渐变动画

　　色彩渐变动画是由对象的填充色彩变化而引起的动画效果，可以用元素来实现。元素也没有其特有的属性，只是在使用from，to，by和values等属性时，其属性值必须是颜色值。

　　沿路径动画

　　沿路径动画是指对象沿一定的路径移动，可以用SVG的元素来实现。除了通用属性外，元素还具有path、rotate及keyPoints属性，其中path指明动画路径，rotate指明可视化元素在沿着路径运动过程中是否随路径而转动，keyPoints表示各个关键点所在的位置在路径方向上与路径起点间的距离，它和key-Times属性共同决定一系列关键点以精确控制路径动画中时间与运动路程的关系。

　　顺序与同步动画

　　同步动画就是多个对象同时进行动作，顺序动画则是根据时间上的先后顺序进行动作。两种动画根据不同的动画类型可以映射为不同的SVG动画元素，最关键的地方在于动画元素中的begin属性值的设定。设置动画顺序通常要将动画元素的id和begin属性值结合起来，如果第二个对象动画(id="anim1")在第一个对象动画(id="anim2)结束后2秒才开始，那么可以设置第二个动画的begin属性为’'animl.end+2s"，如果是同步动画则设置为’'animl.begin"。

2 SVG脚本动画

　　SVG标准允许将JavaScript脚本代码以两种方式来实现:一个是内嵌脚本方式；另一个是外部脚本方式。

　　内嵌脚本

　　

　　元素内嵌脚本属性type="contentype”用MIME的方式指明所用的Script语言的类型。

　　外部脚本

　　

阅读(2224) | 评论(0) | 转发(0) |