如何在指定滚动百分比区间触发Anime.js的seek函数执行动画

算力阿峰

2026-8-29

指定滚动区间驱动Anime.js seek的实现方法

核心问题出在原有逻辑直接将全页面0-100%滚动进度映射到了动画0-100%的时长，导致全滚动范围都会触发动画。你只需要将全局滚动进度做一次区间裁剪和重映射，仅把37%~47%区间内的滚动变化对应到动画进度即可。

实现步骤

先定义动画触发的滚动区间边界：起始37%、结束47%
在滚动回调中对当前全局进度做分支判断：
- 进度低于37%时：动画固定在初始状态（seek到0ms位置）
- 进度高于47%时：动画固定在结束状态（seek到动画总时长位置）
- 进度落在37%_{47%区间内时：先计算当前进度在目标区间内的相对占比（0}1），再将该占比乘以动画总时长，作为seek的参数传入

修改后的滚动监听代码

原有timeline定义不需要改动，只需要替换window.onscroll部分的逻辑即可：

// 定义触发动画的滚动区间
const ANIM_SCROLL_START = 37;
const ANIM_SCROLL_END = 47;
const SCROLL_RANGE = ANIM_SCROLL_END - ANIM_SCROLL_START;

window.onscroll = () => {
  const globalProgress = scrollPercent();
  setProgress(globalProgress);
  let animSeekTime;

  if (globalProgress <= ANIM_SCROLL_START) {
    // 未进入动画区间，固定在动画起点
    animSeekTime = 0;
  } else if (globalProgress >= ANIM_SCROLL_END) {
    // 超过动画区间，固定在动画终点
    animSeekTime = basicTimeline.duration;
  } else {
    // 区间内换算相对进度，映射到动画时长
    const rangeProgress = (globalProgress - ANIM_SCROLL_START) / SCROLL_RANGE;
    animSeekTime = rangeProgress * basicTimeline.duration;
  }

  basicTimeline.seek(animSeekTime);
};