1，animate
效果
代码
<!--Created by Sukla on 2018/3/20.-->
<!DOCTYPE html>
<html>
<head lang="en">
<title>animate 实例</title>
<meta charset="utf-8">
</head>
<body>
<!--准备一个500*500的空白画布-->
<svg width="500" height="500">
<!--以200 200为圆心 50为半径 画一个圆-->
<circle cx="200" cy="200" r="50" style="fill:#ff7700">
<!--给这个圆添加一个动画 -->
<!--动画id为 a001-->
<!--变化的属性是 attributeName 圆的半径 r-->
<!--半径 r 的数据来自 attributeType 当前 XML-->
<!--半径 r 变化的几个关键点是 values 从 50 变到 80 再变到 50-->
<!--圆从 begin 0s 开始执行动画 a001-->
<!--动画的周期是 dur 2s -->
<!--动画结束后 fill 不回到起始点 而是停留在结束点 freeze-->
<!--动画的执行次数是 indefinite 无限循环-->
<animate
id="a001"
attributeName="r"
attributeType="XML"
values="50;80;50"
begin="0s"
dur="2s"
fill="freeze"
repeatCount="indefinite">
</animate>
<!--可以多个动画同步使用，-->
<!--同时改变填充透明度 attributeName fill-opacity-->
<!--在 attributeType CSS文件中查找透明度-->
<animate
id="a002"
attributeName="fill-opacity"
attributeType="CSS"
values="1;0.1;1"
begin="0s"
dur="2s"
repeatCount="indefinite">
</animate>
</svg>
</body>
</html>2，animateTransform
效果
代码
<!--Created by Sukla on 2018/3/20.-->
<!DOCTYPE html>
<html>
<head lang="en">
<title>animateTransform 实例</title>
<meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
<!--画一个多边形-->
<polygon points="122 59,72 205,194 114,49 114,171 205" style="fill:#ff7700">
<!--添加一个 animateTransform 改变位置的动画 -->
<!--位置从 attributeType 当前XML 读取-->
<!--改变的属性是 type rotate 角度-->
<!--初始位置是 0° 在250 250位置-->
<!--结束位置是 360° 在250 250位置-->
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
form="0 250 250"
to="360 250 250"
begin="0s"
dur="3s"
repeatCount="indefinite"
/>
<animate
id="a002"
attributeName="fill-opacity"
attributeType="CSS"
values="1;0.1;1"
begin="0s"
dur="2s"
repeatCount="indefinite">
</animate>
</polygon>
</svg>
</body>
</html>3，animateMotion
效果
代码
<!--Created by Sukla on 2018/3/20.-->
<!DOCTYPE html>
<html>
<head lang="en">
<title>animateMotion 实例</title>
<meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
<!--以100 100为起点 画一条弧形 到300 300 在从300 300 画到100 100-->
<path d="M100 100,A120 120,-45 0 1,300 300 A120 120,-45 0 1,100 100"
stroke="#ccc" stroke-width="2" fill="none"
/>
<!--画一个多边形 按照路径 path 运动 自动旋转 rotate auto-->
<polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" style="fill:#ff7700;">
<animateMotion
dur="3s"
rotate="auto"
repeatCount="indefinite"
path="M100 100,A120 120,-45 0 1,300 300 A120 120,-45 0 1,100 100"
/>
<animate
id="a002"
attributeName="fill-opacity"
attributeType="CSS"
values="1;0.1;1"
begin="0s"
dur="0.2s"
repeatCount="indefinite">
</animate>
</polygon>
</svg>
</body>
</html>
扫一扫
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
