已解決430363個問題，去搜搜看，總會有你想問的

SVG animate 啟動但未啟動

首頁猿問 SVG animate 啟動但未啟動

SVG animate 啟動但未啟動

JavaScript

拉莫斯之舞 2023-08-18 17:35:15

我有一個內部 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條經驗獲得超4個贊

begin和end時間，如果在不引用其他時鐘的情況下使用，則始終引用文檔的開頭。0s因此，您應該使用其他參考，而不是將該值設置為。我想到了幾種可能性：

從點擊或其他事件開始。該begin值采用以下形式<id of event target element>.<event name>：

<animate id="animation" attributeName="height"

from={5} to={10} dur="2s" begin="grafic.click"/>

</rect>

從其他一些代碼開始。該begin值保持在indefinite：

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

<animate id="animation" attributeName="height"

from={5} to={10} dur="2s"

begin={start ? `wallclock(${rightnow()})` : "indefinite"/>

</rect>

反對回復 2023-08-18

1 回答
0 關注
186 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

SVG animate 啟動但未啟動

SVG animate 啟動但未啟動

1 回答

添加回答