SVG动画:使用时间介绍和示例

SVG的加载完成后, SVG的动画时钟开始计时。当用户离开页面时, 它将停止打勾。

有三种方法可以将特定动画片段的开始或持续时间指定为数值:

  • 完整的时钟值以小时, 分钟和秒来定义, 就像:(1:20:23)。
  • 部分时钟值以分钟和秒为单位定义, 就像:(2:15)。
  • 矩阵时间值可以用h(小时), min(分钟), s(秒)或ms(毫秒)定义, 就像:dur =” 5s” begin =” 2min”。

例子

<!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="60" cy="60" r="30" style="fill: blue; fill-opacity: .6; stroke:black;" >
<animate id="p1" attributeName="r" attributeType="XML"
 from="30" to="10" begin="0s" dur="4s"  fill="freeze"/>
</circle>

<circle cx="120" cy="60" r="10" style="fill: red; fill=opacity: .5; stroke: black;">
<animate attributeName="r" attributeType="XML"
 begin="p1.end" dur="4s" from="10" to="30" fill="freeze"/>
</circle>

</svg>
</body>
</html>

立即测试


结束元素

end元素用于暂停动画。你可以根据需要设置值。

例子

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg width="500" height="500">

<rect x="10" y="10" width="200" height="40"
 style="stroke: black; fill: green; fill-opacity: 0.5;">
<animate attributeName="width" attributeType="XML"
 begin="0s" dur="12s" end="5s"
 from="10" to="200" fill="freeze"/>
</rect>

</svg>
</body>
</html>

立即测试

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