Anime.js-拖动滑块并更新旋转速度？

Question

我有一个滑块和一个旋转动画。

所以，类似这样：

speed = 2000
var rotate1 = anime({
        targets: '#ferris',
          rotate: '1turn',
         loop:false,
         easing: 'linear',
        duration: speed,
    })

[每次我更新滑块中的值时，我都会更新速度，我想以某种方式再次调用该动画，停止旧的动画，并使用更新的speed值开始新的动画。

我该怎么做？我尝试弄乱rotate1.pause和rotate1.restart，但无济于事。

谢谢

Answer 1

通过说您正在使用幻灯片，我了解您所谈论的是类型为[[range的输入，基本上您需要做的就是将oninput事件添加到滑块中，如下所示：

<input type="range" min="5" max="10" step="1" oninput="changeSpeed(this.value)" onchange="changeSpeed(this.value)">

在您的JS中，您需要添加
var rotate1;

function changeSpeed (speed) {
anime.remove(rotate1)
rotate1 = anime({
        targets: '#ferris',
          rotate: '1turn',
         loop:false,
         easing: 'linear',
        duration: speed,
    })
}

引用：

onchange event on input type=range is not triggering in firefox while dragging
• https://github.com/juliangarnier/anime/issues/368

PS：-此代码未经测试，如果您有问题请发表评论