SVG中国

文章首页
简单形象易上手的SVG教程
SVG元素标签的实例与教程
SVG动态图片动画的制作

SVG 引用SMIL动画元素

• <animate>   对单一随时间变化的属性做动画
• <set> 非数值属性和性质的动画
• <animateMotion>  让一个元素沿着路径运动
• <animateColor>  设定随时改变的颜色转换

SVG 延伸SMIL动画元素

　　<animateTransform> 允许动画控制平移、缩放、旋转、倾斜
　　Path属性 允许path属性设定到animateMotion元素
　　<mpath>  SVG允许一个animateMotion元素包含一个参考到SVGpath元素，当作运动路径定义的mpath子元素
　　keyPoint属性 SVG增加keyPoint属性，对animateotion元素运动路径动画精确的速度控制
　　rotate属性 SVG增加rotate属性，提供animateMotion元素控制物件在她的X轴相同方向或相反方向自动旋转，当为运动路径的方向切线速度

SVG的动态图片1

　　之前的效果

 
　　之后的效果

<animate attributeName="width" form=“400" to=“800" begin="0s" dur="10s" repeatCount="1" fill="freeze"/>

　　这个动态图片是一张图片分割成两边，从中间向两旁延伸，以上的文件是属于右边的延伸，form=“400" to=“800”表示从图片横向座标的400到800做延伸，左边则是form=“400" to=“0”

　　例图：

SVG的动态图片2

　　这个动态图片是利用begin元素设定不同的触发条件来控制图片起跑的顺序

　　例图：

<animate id="r1X" xlink:href="#r1" attributeName="x" attributeType="XML" from="0" to="600" begin="r1.click"  dur="2s" repeatCount="1" />

　　这段的文件，控制第一张图片的起跑触发是begin="r1.click"，我们将它设定为当我点下滑鼠才会起跑

　　另外四张图，都有不同的触发条件

• begin=“r1.click“  点一下起跑
• begin=“accessKey(S)“ 按下S起跑
• begin=“0s;r5X.end“ 一开始起跑和r5结束起跑
• begin=“r3X.repeat(2)“ r3跑两次后起跑
• begin=“r4X.end+1s“ r4结束后一秒起跑

　　好了，本篇文章讲到这里就结束了，对于SVG入门文章大家可以可以参见更详细的内容：“新一代Web设计及互动媒体的革” 与 “什么是SVG(可升级矢量图形)”。该两篇文章主要是让大家了解什么是SVG,以及SVG的优点等知识。

(THE END)