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">