SVG动画介绍和用法示例 _动画

本文概述

单个对象上有多个动画
多个对象上的简单动画

动画元素用于为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>

【SVG动画介绍和用法示例】立即测试
解释width：元素中的XML属性。
from：定义属性的起始值。
to：定义属性的结束值。
begin：定义动画的开始时间。
dur：定义动画的持续时间。