幕布斯6054654
2023-07-20 10:21:57
在Web Animation API中,我們可以通過Element.animate接口對元素進行動畫處理。返回的Animation對象可以通過 、和進行播放、暫?;?play()反轉。.pause().reverse()let img = document.querySelector('#happy-boy');const boy_animation = [? ? { transform: 'rotate(0)' },? ? { transform: 'rotate(360deg)' },];const boy_timing = {? ? duration: 3000,? ? iterations: Infinity,}let animation = img.animate(boy_animation, boy_timing);animation.reverse(); // <-- fails with DOM exception當我嘗試反轉()動畫時出現此錯誤:Cannot play reversed Animation with infinite target effect end.
1 回答

慕容森
TA貢獻1853條經驗 獲得超18個贊
的行為reverse()
,如play()
,是如果動畫處于“結束”,它會跳回到開頭并開始播放。
這reverse()
意味著如果您調用它時當前時間為零(如您的示例中所示),那么它應該跳回到開頭。然而,如果你的動畫有無限長度,那就意味著跳到無限!
如果您只想向后運行動畫的關鍵幀,則可以使用該direction
屬性。
例如:
animation.effect.updateTiming({?direction:?'reverse'?});
但請注意,與 不同的是reverse()
,在動畫進行過程中更新方向可能會導致動畫跳轉位置。
如果您希望能夠在動畫進行過程中前后更改動畫方向并使其永遠重復,您可以:
設置一個非常長的迭代計數并在該范圍的中間開始動畫,或者
使用
updateTiming({ direction: 'reverse' })
并調整currentTime
使其不會跳躍。像下面這樣的東西可能會起作用:?const?ct?=?animation.effect.getComputedTiming(); ?animation.currentTime?= ?????ct.currentInteration?*?ct.duration?+ ?????(ct.duration?-?ct.localTime?%?ct.duration);
updateTiming
進一步注意,如果動畫異步運行(例如大多數變換和不透明動畫),即使使用 (2) 中的 as 也可能導致動畫稍微跳躍,因為 Javascript 運行的主線程上的計時之間可能存在一些小延遲以及運行動畫的線程/進程。
使用(1)(或)reverse()
中的 as可以避免該問題,因為它會在更新任何異步動畫之前對其進行同步。updatePlaybackRate()
添加回答
舉報
0/150
提交
取消