无限animejs动画

Question

我有一个流畅的图案图像，并且我在重复使用背景图像。

我尝试使用anime.js每5秒执行一次backgroundPositionY: '-=10%'，但我希望它能够永远运行；并且由于图像是重复的，因此不会造成任何视觉问题。

是否可以使用anime.js做到这一点而无需创建for循环或setInterval？

anime({
     targets: 'h1 > div',
     backgroundPositionY: '-=10%',
     easing: 'linear',
     duration: 5000,
});

Answer 1

将循环设置为true应该无限播放动画。您可能还希望另外添加direction:'alternate'，这样它就不会在每次循环后立即重置

   anime({
     targets: 'h1 > div',
     backgroundPositionY: '-=10%',
     easing: 'linear',
     duration: 5000,
     loop:true
    });