javascript - JS旋转动画改变速度

Question

我尝试制作一个 rotationg block ，其旋转速度由 <input type="range" 控制.问题是我找不到在速度更新时不重新启动动画的解决方案。

我尝试了三种变体:

• 直接通过JS设置CSS动画速度。 — 重新开始动画；

• jQuery 的 animate — 不适用于转换；

• 图书馆 anime.js - 它有变速的方法，但它也重启动画(或者只是让方 block 跳转，不清楚)

用什么方法可以创建平滑变化的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 示例代码 On Codepen

Answer 1

使用 velocity-animate 库，你可以用这种方式做一个技巧:

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

})