如何使用anime.js/velocity.js等库根据滚动位置设置动画进度？

方案说明 #

anime.js 本身就内置了你需要的进度控制能力，无需自行计算属性，也不需要引入更重的库，实现步骤如下：

1. 改造原有动画声明，存储动画实例并禁用自动播放
   你原有的代码调整后如下，duration 可以随便设置，因为进度控制不会受动画时长影响：

const scrollAnimation = anime({
  targets: '.selector',
  opacity: 0.5,
  translateX: 200,
  duration: 1000,
  autoplay: false // 核心配置：禁止动画自动播放，完全由滚动控制进度
});

2. 监听滚动进度直接控制动画进度
   anime.js 的动画实例支持直接修改 .progress 属性，传入 0-100 的数值即可对应动画的 0% 到 100% 进度，所有属性的中间值由 anime.js 自动计算：

window.addEventListener('scroll', () => {
  // 计算页面滚动进度，你也可以替换成任意滚动库的进度获取逻辑
  const totalScrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  const currentScroll = window.scrollY;
  const scrollProgress = Math.min(100, Math.max(0, (currentScroll / totalScrollHeight) * 100));
  // 直接设置动画进度即可
  scrollAnimation.progress = scrollProgress;
});

效果验证 #

你提到的需求可以完全匹配：

• 滚动进度 20% 时，opacity = 1 - (1-0.5)*0.2 = 0.9，translateX = 200 * 0.2 = 40px
• 滚动进度 50% 时，opacity = 1 - (1-0.5)*0.5 = 0.75，translateX = 200 * 0.5 = 100px
  所有计算逻辑都由 anime.js 内部处理，不需要你手动维护属性计算规则。

其他轻量方案说明 #

如果你使用 velocity.js，也可以通过其内置的 progress 控制接口实现同等效果，但 anime.js 本身体积只有十几KB，已经是比 Gsap 轻量很多的选择，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Cheg