gpt4 book ai didi

svg - svg 动画可以在不丢失累积信息的情况下暂停吗?

转载 作者:行者123 更新时间:2023-12-05 00:06:56 29 4
gpt4 key购买 nike

您可以不受限制地停止和重复动画,但如果您重新启动一个不确定的动画,它将失去其累积值并从初始值开始。
也许我应该用一个例子来澄清;拿这个动画:

  <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();

关于svg - svg 动画可以在不丢失累积信息的情况下暂停吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12694045/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com