我有一个内部 a ，它在没有启动变量的情况下启动：<rect height={5} width={5}>
<animate
attributeName="height"
from={5} to={10} dur="2s"
begin={start ? "0s": "indefinite}/></rect>该组件位于 SVG 内部，它会重新渲染以更改“start”变量以启动动画。但是，无论我何时选择重新渲染动画，动画都会立即开始。因此，如果我在渲染其所在页面后立即按下它，那么它将正常工作。但是，如果我在 2 秒后重新渲染组件，动画将跳转到最终值。如果我在渲染组件所在页面后 1 秒启动动画，则动画将从中间播放。到底是怎么回事？！
1 回答
守着一只汪
TA贡献1872条经验 获得超3个赞
begin和end时间，如果在不引用其他时钟的情况下使用，则始终引用文档的开头。0s因此，您应该使用其他参考，而不是将该值设置为。我想到了几种可能性：
从点击或其他事件开始。该begin值采用以下形式<id of event target element>.<event name>：
<rect id="grafic" height={5} width={5}>
<animate id="animation" attributeName="height"
from={5} to={10} dur="2s" begin="grafic.click"/>
</rect>
从其他一些代码开始。该begin值保持在indefinite：
<rect id="grafic" height={5} width={5}>
<animate id="animation" attributeName="height"
from={5} to={10} dur="2s" begin="indefinite"/>
</rect>
但动画是通过 API 调用启动的：
document.getElementById('animation').beginElement();
为了获得更像 React 的感觉，请在设置属性时定义“立即”的 wallckock 值：
const rightnow = () => new Date().toLocaleTimeString()
<rect id="grafic" height={5} width={5}>
<animate id="animation" attributeName="height"
from={5} to={10} dur="2s"
begin={start ? `wallclock(${rightnow()})` : "indefinite"/>
</rect>
添加回答
举报
0/150
提交
取消