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>

立即测试

解释

width:元素中的XML属性。

from:定义属性的起始值。

to:定义属性的结束值。

begin:定义动画的开始时间。

dur:定义动画的持续时间。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?