srcmini重复动作用于重复动画。重复属性有两种类型, 可让你重复动画。
repeatCount：设置为一个整数值, 该值指示你希望特定动画重复多少次。
repeatDur：设置为一个时间, 该时间告诉重复应该持续多长时间。
同步动画与重复
例子
<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg height="450" width="450">
<circle cx="30" cy="60" r="30" style="fill: purple; fill-opacity: .4; stroke: black;">
<animate id="circle-anim" attributeName="cx" attributeType="XML"
begin="0s" dur="6s" repeatCount="4"
from="60" to="260" fill="freeze"/>
</circle>
<circle cx="250" cy="150" r="30" style="fill: green; fill-opacity: .4; stroke: black;">
<animate attributeName="cx" attributeType="XML"
begin="circle-anim.repeat(1)+.5s" dur="8s" repeatDur="12s"
from="260" to="60" fill="freeze"/>
</circle>
</svg>
</body>
</html>立即测试
评论前必须登录！
注册