Question

我正在使用anime.js动画一个从容器边缘反弹回来的元素。我希望能够使用页面上其他位置的范围滑块来调整此动画的速度。

我的问题是，在调整了持续时间时，滑块似乎完全实例化了，并且没有继续动画到其最初应假定的位置。我希望它从最左边移到最右边，但是当我调整它的大小时，动画只会从它被调整大小的地方到容器的末端。

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

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

和

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

}

任何帮助将不胜感激。

Answer 1

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

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

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

Answer 2

我刚遇到这个问题，并且找到了一个更好却不是完美的解决方案。 AnimeJS具有另一个静态speed属性，默认情况下设置为1。如果更改此速度，则动画速度会发生变化，尽管动画会“跳跃”并且看起来不流畅。

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

如果我想出一个更好的解决方案，我将更新此答案。

Answer 3

肮脏的解决方案：

通过function update() { if (gameState.cursors.left.isDown) { gameState.player.setVelocityX(-160); } else if (gameState.cursors.right.isDown) { gameState.player.setVelocityX(160); } else if (this.input.activePointer.isDown) { if(this.input.activePointer.worldX < gameState.player.getCenter().x) gameState.player.setVelocityX(-160); else gameState.player.setVelocityX(160); } else { gameState.player.setVelocityX(0); } }结合anime.tick手动管理帧，这是演示：

https://codesandbox.io/s/anime-js-speed-adjustment-lm0ui?file=/src/index.js

代码基本上是不言自明的，如果您还有其他疑问，请告诉我。

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

3 个答案: