第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在 Web Animation API 中反轉(zhuǎn)無限動畫？

如何在 Web Animation API 中反轉(zhuǎn)無限動畫？

幕布斯6054654 2023-07-20 10:21:57
在Web Animation API中，我們可以通過Element.animate接口對元素進行動畫處理。返回的Animation對象可以通過 、和進行播放、暫?；?play()反轉(zhuǎn)。.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當我嘗試反轉(zhuǎn)（）動畫時出現(xiàn)此錯誤：Cannot play reversed Animation with infinite target effect end.
查看完整描述

1 回答

?
慕容森

TA貢獻1853條經(jīng)驗 獲得超18個贊

的行為reverse()，如play()，是如果動畫處于“結(jié)束”，它會跳回到開頭并開始播放。

這reverse()意味著如果您調(diào)用它時當前時間為零（如您的示例中所示），那么它應該跳回到開頭。然而，如果你的動畫有無限長度，那就意味著跳到無限！

如果您只想向后運行動畫的關(guān)鍵幀，則可以使用該direction屬性。

例如：

animation.effect.updateTiming({?direction:?'reverse'?});

但請注意，與 不同的是reverse()，在動畫進行過程中更新方向可能會導致動畫跳轉(zhuǎn)位置。

如果您希望能夠在動畫進行過程中前后更改動畫方向并使其永遠重復，您可以：

  1. 設置一個非常長的迭代計數(shù)并在該范圍的中間開始動畫，或者

  2. 使用updateTiming({ direction: 'reverse' })并調(diào)整currentTime使其不會跳躍。像下面這樣的東西可能會起作用：

    ?const?ct?=?animation.effect.getComputedTiming();
?animation.currentTime?=
?????ct.currentInteration?*?ct.duration?+
?????(ct.duration?-?ct.localTime?%?ct.duration);

updateTiming進一步注意，如果動畫異步運行（例如大多數(shù)變換和不透明動畫），即使使用 (2) 中的 as 也可能導致動畫稍微跳躍，因為 Javascript 運行的主線程上的計時之間可能存在一些小延遲以及運行動畫的線程/進程。

使用(1)（或）reverse()中的 as可以避免該問題，因為它會在更新任何異步動畫之前對其進行同步。updatePlaybackRate()


查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關(guān)注
  • 134 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號