JS旋轉動畫改變速度

Question

我嘗試制作一個旋轉塊，其旋轉速度由<input type="range" 。 問題是我找不到速度更新時不重啟動畫的解決方案。

我嘗試了三種變體：

• 通過JS直接設置CSS動畫速度。 - 重啟動畫;

• jQuery的animate - 不適用於變換;

• 庫anime.js - 它有速度變化的方法，但它也重新啟動動畫（或只是使塊跳轉，目前還不清楚）

什么方法可以通過JS動畫創建平滑變化？

 let block = anime({ targets: '#transforms .block', rotateY: '360', easing: 'linear', loop: true, duration: 1000, }); var el = document.querySelectorAll('#range')[0]; el.addEventListener('change', function() { // console.log(value); // console.log(pos); var value = this.value; anime.speed = value/20; // console.log(block); }) 

 .block { width: 500px; height: 300px; background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script> <div id="transforms"> <div class="block"></div> </div> <input id="range" type="range" min="0" max="20" step="1" value="10"> 

anime.js示例代碼在Codepen上

Answer 1

使用velocity-animate庫，您可以這樣做：

Velocity.animate(this.yourElement, {
  rotateZ: `${angle}deg`,
  duration: yourSpeed

}）

Answer 2

我想在動畫周期結束時觸發速度變化就是你所需要的。 但是使用這個包我無法將transitionend事件監聽器附加到兩個div中的任何一個。 它不會觸發。 因此，我想你可以通過將一個run屬性附加到anime options對象來獲取類似的任務，該對象將一個函數作為值並通過傳遞一個progress參數多次調用它。 一旦這個進度參數為100，我們可以在速度改變時進行速度變換操作（ newSpeed !== void 0 ）。

唐'讓void 0迷惑你。 它只是一個完美的undefined值，我更喜歡在比較未定義的值時使用。

 let block = anime({ targets : '#transforms .block', rotateY : '360', easing : 'linear', loop : true, duration: 1000, run : anim => anim.progress === 100 && newSpeed !== void 0 && (anime.speed = newSpeed, newSpeed = void 0) }); var range = document.getElementById('range'), newSpeed = void 0; // perfect undefined anime.speed = range.value/20; range.addEventListener('change', function(e) { newSpeed = e.target.value/20; }); 

 .block { width: 500px; height: 300px; background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script> <div id="transforms"> <div class="block"></div> </div> <input id="range" type="range" min="0" max="20" step="1" value="10">