|
＜?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决定循环次数. |
|
|
|
|
|
5. 沿路径运动 源代码: ＜?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" dur="5s" repeatCount="indefinite"/＞ ＜/rect＞ ＜/svg＞ 讲解: 因为是沿着路径运动,所以需要motion,使用＜animateMotion.../＞标签.path定义了路径.起点(10,50),终点(90,90). |
|
|
|
6. 沿路径旋转运动
源代码: ＜?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. |
|
|
关闭