如何使用anime.js/velocity.js/等设置动画进度？

Question

我有这样的动画(anime.js示例)：

anime({
  targets: '.selector',
  opacity: 0.5,
  translateX: 200,
  duration: 1,
});

然后，我需要设置这个动画的进度取决于页面滚动位置(或任何用于滚动的js库)。

例如：

• 在20%的滚动中，必须设置为"opacity:0.9;transform:translateX(40px);"
• 关于50%的卷轴- "opacity:0.75;transform:translateX(100px);"
• 等。

我想避免自己计算动画的每一个价值。

anime.js/velocity.js中是否有内置工具或类似于它们的库？

gsap.js有可以根据我的需要工作的.progress()方法，但我想为此目的找到更轻的库。

Answer 1

是的，anime.js有寻找进展的功能。你要找的是寻求()。它是这样用的：

var animation = anime({
  targets: '.selector',
  opacity: 0.5,
  translateX: 200,
  duration: 1,
});
animation.seek(0.2 * animation.duration);
animation.seek(0.5 * animation.duration);

它是以毫秒为单位完成的，所以您必须乘以动画的持续时间。但就您的目的而言，只需在滚动事件处理程序中插入滚动进度，所有这些都会很好地工作。

animation.seek(scrollProgress * animation.duration);