本文概述
动画元素用于为SVG图形制作动画。动画元素最初是在同步多媒体集成语言(SMIL)中定义的。
在动画中, 必须指定属性, 运动, 颜色, 动画的开始时间和动画的持续时间的开始和结束值。
例子
<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg xmlns="http://www.srcmini.org/2000/svg"
xmlns:xlink="http://www.srcmini.org/1999/xlink">
<circle cx="70" cy="70" r="30" style="fill: purple; fill-opacity: .5; stroke: black; stroke-width: 1.5;">
<animate
attributeName="r" attributeType="XML"
from="30" to="50" begin="0s" dur="6s" fill="freeze" />
</circle>
</svg>
</body>
</html>立即测试
解释
width：元素中的XML属性。
from：定义属性的起始值。
to：定义属性的结束值。
begin：定义动画的开始时间。
dur：定义动画的持续时间。
单个对象上有多个动画
在这种类型的动画中, 我们在单个对象上执行多个动画。
例子
<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg width="500" height="500">
<rect x="10" y="10" width="20" height="20"
style="stroke: black; fill: green; style: fill-opacity: 0.25;">
<animate attributeName="width" attributeType="XML"
from="20" to="250" begin="0s" dur="8s" fill="freeze"/>
<animate attributeName="height" attributeType="XML"
from="20" to="200" begin="0s" dur="8s" fill="freeze"/>
<animate attributeName="fill-opacity" attributeType="CSS"
from="0.25" to="1" begin="0s" dur="3s" fill="freeze"/>
<animate attributeName="fill-opacity" attributeType="CSS"
from="1" to="0.25" begin="3s" dur="3s" fill="freeze"/>
</rect>
</svg>
</body>
</html>立即测试
解释
- 宽度和高度定义元素中的XML属性。
- from定义矩形的宽度和高度以20 x 20开头。
- 定义矩形将在整个空间上增长到250 x 200。
- 开始定义动画的时间。
- dur定义动画的持续时间。
- 因为fill-opacity是用样式设置的, 所以它用attributeType =” CSS”引用。
- 绿色的不透明度将在前三秒内增加, 然后在接下来的三秒内降低。
多个对象上的简单动画
你还可以对多个对象执行简单的动画处理。
例子
<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg xmlns="http://www.srcmini.org/2000/svg"
xmlns:xlink="http://www.srcmini.org/1999/xlink">
<rect x="10" y="10" width="20" height="20"
style="stroke: black; fill: purple; fill-opacity: .6;">
<animate attributeName="width" attributeType="XML"
begin="0s" dur="7s" from="30" to="120" fill="freeze"/>
<animate attributeName="height" attributeType="XML"
begin="0s" dur="7s" from="30" to="120" fill="freeze"/>
</rect>
<circle cx="70" cy="70" r="30"
style="fill: #ccf; stroke: black;">
<animate attributeName="r" attributeType="XML"
begin="2s" dur="4s" from="30" to="40" fill="freeze"/>
</circle>
</svg>
</body>
</html>立即测试
解释
width：元素中的XML属性。
from：定义属性的起始值。
to：定义属性的结束值。
begin：定义动画的开始时间。
dur：定义动画的持续时间。
