旋转运动
源代码:
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="100" height="100"＞
＜g transform="translate(50,0)"＞
＜rect x="50" width="10" height="10" style="fill: red"＞
＜animateTransform attributeName="transform" type="rotate"
from="0" to="180" dur="5s" repeatCount="indefinite"/＞
＜/rect＞
＜/g＞
＜/svg＞
讲解:
＜g transform="translate(50,0)"＞＜/g＞用于圆周运动的中心点调整.＜rect＞绘制一个矩形,然后利用＜animateTransform .../＞标签完成圆周运动.其中的attributeName用于决定运动的属性,type决定运动的类型,from,to决定运动的起始角度(这里根据不同的运动类型,数值有不同的含义).dur用于决定运动的持续时间,repeatCount决定循环次数.
----------------------------------------------------------------------------------
路径运动（这里比沿路径运动多了一个rotate属性）：
源代码:
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="100" height="100"＞
＜rect x="-5" y="-5" width="10" height="10" style="fill: red"＞
＜animateMotion path="M10 50 C10 0 90 0 90 90" rotate="auto"
dur="5s" repeatCount="indefinite"/＞
＜/rect＞
＜/svg＞
讲解:
这里比沿路径运动多了一个rotate属性.rotate决定对象在运动过程是否沿路径方向旋转.auto为沿路径方向(就是始终垂直路径),auto-reverse为沿路径方向旋转180.也可自定义一个角度,例如60.
路径),auto-reverse为沿路径方向旋转180.也可自定义一个角度,例如60.
2. 竖直动画
源代码:
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="100" height="100"＞
＜rect x="45" width="10" height="10" style="fill: red"＞
＜animate attributeName="y" from="0" to="90" dur="10s"
repeatCount="indefinite"/＞
＜/rect＞
＜/svg＞
讲解:
与水平动画相似,将attributeName换为控制竖直方向的y即可.
-----------------------------------------------------
3. 斜线动画 （将水平动画和竖直动画复合,得到斜线 动画）：
源代码:
＜?xml version="1.0" encoding="utf-8"?＞
＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width="100" height="100"＞
＜rect width="10" height="10" style="fill: red"＞
＜animate attributeName="x" from="0" to="90" dur="10s"
repeatCount="indefinite"/＞
＜animate attributeName="y" from="0" to="90" dur="10s"
repeatCount="indefinite"/＞
＜/rect＞
＜/svg＞
讲解:
将水平动画和竖直动画复合,得到斜线 动画.
ass=word01> 将水平动画和竖直动画复合,得到斜线 动画.
---------------------------------------------------------
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → SVG专题教程—— 动画(2)
(订阅本版)
2006/4/12 11:51:00
新浪微博
SVG专题教程—— 动画(2)
