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

Question

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

所以，像这样：

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

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

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

谢谢

Answer 1

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

<input type="range" min="500" max="5000" step="100" oninput="changeSpeed(this.value)">

在您的 JS 代码中，您可以添加如下内容：

var spin;

function changeSpeed(speed) {
    spin.pause();
    spin = anime({
        targets: '#ferris',
        rotate: '+=1turn',
        easing: 'linear',
        loop: true,
        duration: speed,
    });
}

参考文献：

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

PS：此代码未经测试，如有问题请评论。