Question

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

我尝试了三种变体：

通过JS直接设置CSS动画速度。 - 重新开始动画;
jQuery＆＃39; animate - 不适用于变换;
图书馆anime.js - 它有速度变化的方法，但也有重新启动动画（或只是让块跳转，它不清楚）

什么方法可以通过JS动画创建平滑变化？

＆＃13;

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);
})

＆＃13;

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

＆＃13;

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

＆＃13;

anime.js示例代码On Codepen

Answer 1

使用velocity-animate库，你可以这样做：

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

}）

Answer 2

我想在动画周期结束时触发速度变化就是你所需要的。但是使用这个包我无法将transitionend事件监听器附加到两个div中的任何一个。它不会触发。因此深入研究这个库我想你可以通过将run属性附加到anime选项对象来实现类似的任务，该对象将函数作为值并通过传递progress参数多次调用它。一旦此进度参数为100，我们可以在速度发生变化（newSpeed !== void 0）时进行速度变化操作。

唐＆＃39;让void 0让你感到困惑。它只是一个完美的undefined值，在比较未定义的值时我更喜欢使用它。

＆＃13;

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;
                                 });

＆＃13;

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

＆＃13;

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

＆＃13;

JS旋转动画改变速度

2 个答案: