您可以不受限制地停止和重复动画,但如果重新启动无限期动画,它将丢失其累积值并从初始值开始。
也许我应该用一个例子来澄清;以这个动画为例:
<animate id="main"
attributeName="transform" attributeType="XML"
begin="startbox.click" dur="1s" end="endbox.click"
from="rotate(0)" to="rotate(360)"
additive="sum"
accumulate="sum"
fill="freeze"
repeatCount="indefinite"
/>
如果我停止这个动画,然后开始另一个动画(比如说id="second"
)影响同一物体的旋转,second
将从该点完美地继续main
离开了。但是如果我通过点击开始这个startbox
(或实际上任何其他事件)它将减去由main
并在开始前重置旋转。
我想要的是一个适当的“暂停”,我可以在动画之前停止的地方继续。当然,我可以添加固定数量的相同动画和相同数量的相同开始/停止按钮来模拟效果,但这不是一个好的解决方案。特别是因为暂停次数是有限的。
整个示例(似乎仅适用于 Opera)
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Click example</desc>
<g>
<rect id="startbox"
x="10" y="10"
width="20" height="20"
stroke="none" fill="green"
/>
<rect id="endbox"
x="10" y="40"
width="20" height="20"
stroke="none" fill="red"
/>
<g transform="translate(200,200)">
<rect
x="0" y="0"
width="50" height="5"
stroke="#10e9f3" fill="#30ffd0"
>
<animate
attributeName="transform" attributeType="XML"
begin="startbox.click" dur="1s" end="endbox.click"
from="rotate(0)" to="rotate(360)"
additive="sum"
accumulate="sum"
fill="freeze"
repeatCount="indefinite"
/>
</rect>
</g>
</g>
</svg>
它内置于 SVG 中
SVGRoot.pauseAnimations();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)