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

【问题标题】：Anime.js - drag slider and update speed of rotation?Anime.js - 拖动滑块并更新旋转速度？
【发布时间】：2020-03-18 02:10:42
【问题描述】：

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

所以，是这样的：

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

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

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

谢谢

【问题讨论】：

标签： javascript rotation jquery-animate image-rotation anime.js

【解决方案1】：

通过说您使用的是slide，我知道您正在谈论类型为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,
    })
}

参考：

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

【讨论】：