JS旋转动画变化速度

Question

我试着做一个旋转块，它的转速由<input type="range"控制。问题是我找不到解决方案，当速度更新时，不会重新启动动画。

我尝试了三种变体：

• 直接设置CSS动画速度由JS。-重新启动动画；
• 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示例代码论科迪

Answer 1

使用速度动画库，您可以这样做：

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

})

Answer 2

我想在动画周期结束时触发速度变化是你所需要的。但是，对于这个包，我无法将过渡端事件侦听器附加到这两个div中的任何一个。不会触发的。因此，深入了解这个库，我想您可能会通过将一个run属性附加到anime options对象来完成类似的任务，该对象接受一个函数作为值，并通过传递一个进度参数多次调用它。一旦这个进度参数是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">

​