如何使用滑块改变anime.js事件的速度（持续时间）？

Question

我正在使用anime.js对元素进行动画处理，该元素在其容器的边缘上下反弹。我希望能够使用页面上其他位置的滑块来调整此动画的速度。

我的问题是，虽然持续时间已经调整，但似乎滑块会立即实例化并停止继续动画到原本应该到达的位置。我希望它可以从最左侧移动到最右侧，但当我调整大小时，动画只会从调整大小的位置到容器的末端。

这些是我在调用滑块的onchange方法时尝试过的方法。

    function adjustSpeed() {
    alternate.duration = 300;  
    } 

and

function adjustSpeed() {
var alternate = anime({
    targets: '#alternate .el',
    translateX: width,
    direction: 'alternate',
    loop: true,
    duration: 300,
    easing: 'linear',
});

非常感谢您的帮助。

- Zachary Jordan

Answer 1

我刚刚遇到了这个问题，发现了一种更好但并不完美的解决方案。AnimeJS还有另一个静态的speed属性，默认设置为1。如果你改变这个速度，动画速度就会改变，但是动画会"跳跃"并且看起来不够平滑。

例如，如果你希望速度是原始速度的0.5倍，设置anime.speed = 0.5。

如果我想到更好的解决方案，我将更新这个答案。

- timetofly

---

刚在3.2.1上验证过，运行良好。 - Ying Dai

Answer 2

一个不太优秀的解决方案：

通过使用anime.tick和requestAnimationFrame手动管理帧，以下是演示： https://codesandbox.io/s/anime-js-speed-adjustment-lm0ui?file=/src/index.js 代码基本上已经自我解释，如果您有任何进一步的问题，请告诉我。

- Losses Don

Answer 3

当您更改速度或持续时间时，必须停止并删除当前动画。之后，您需要使用新的持续时间值启动新的动画。

以下是从左到右弹跳元素的示例。

    var duration = 500
    const animateBLS = () => {
     const el = document.getElementById('dot')
     anime.remove(el)
     animation = anime({
     targets: [el],
     left: '100%',
     direction: 'alternate',
     loop: true,
     easing: 'linear',
     duration: duration
    });
   }

这是运行新动画的代码，当持续时间改变时调用。它将以新的速度值完成当前动画，并启动我们的主要动画函数“animateBLS”。

  const el = document.getElementById('dot')
  if(animation.reversed) {
    anime.remove(el)
    animation = anime({
      targets: [el],
      left: '0%',
      direction: 'normal',
      loop: false,
      easing: 'linear',
      duration: duration,
      complete: () => {
        animateBLS()
      }
    });
  } else {
    anime.remove(el)
    animation = anime({
      targets: [el],
      left: '100%',
      direction: 'normal',
      loop: false,
      easing: 'linear',
      duration: duration,
      complete: () => {
        animation = anime({
          targets: [el],
          left: '0%',
          direction: 'normal',
          loop: false,
          easing: 'linear',
          duration: duration,
          complete: () => {
            animateBLS()
          }
        });
      }
    });
  }

- maksfromspb