求助：Swiper切换时AnimeJS进度条重复播放历史动画问题

问题根源 #

你遇到的问题核心是复用了同一个AnimeJS Timeline实例，每次切换幻灯片时都往这个timeline里添加新的动画任务，导致timeline中堆积了所有历史幻灯片的动画序列。调用restart()时，就会从头执行所有积累的动画，所以切换到第3屏时会依次播放1、2、3屏的进度条动画。

解决方案 #

不要复用全局Timeline，改为每次切换幻灯片时创建独立的动画实例，同时管理好上一个动画的暂停与清除，确保只有当前激活的幻灯片进度条播放动画。

修改后的完整代码实现 #

1. 调整Swiper初始化与全局变量

// 全局存储当前正在播放的进度条动画实例
let currentProgressAnim = null;

// 初始化Swiper
let swiper = new Swiper(".mySwiper", {
  speed: 0,
  longSwipes: false,
  allowTouchMove: false,
  on: {
    // 初始化完成后启动第一张幻灯片的进度条动画
    init: function() {
      startProgressAnim(swiper.activeIndex);
    }
  }
});

2. 封装进度条动画启动函数

// 封装启动进度条动画的函数
function startProgressAnim(slideIndex) {
  // 先清除上一个动画（如果存在）
  if (currentProgressAnim) {
    currentProgressAnim.pause();
    currentProgressAnim = null;
  }

  // 获取当前幻灯片对应的进度条元素
  const progressBar = document.querySelector(`#progressSlide${slideIndex + 1}`);
  // 重置进度条宽度为0（后退切换时需要）
  progressBar.style.width = '0%';

  // 创建新的动画实例
  currentProgressAnim = anime({
    targets: progressBar,
    width: "100%",
    autoplay: true,
    duration: 5000, // 自定义每张幻灯片的展示时长，比如5秒
    easing: 'linear',
    loop: false,
    // 动画结束后自动切换到下一张（可选，模拟Instagram自动播放逻辑）
    complete: function() {
      if (slideIndex < swiper.slides.length - 1) {
        swiper.slideNext();
      }
    }
  });
}

3. 调整幻灯片切换事件处理

保留你原来的进度条状态设置逻辑，新增切换时启动当前动画的逻辑：

// 前进切换时，标记已查看的幻灯片进度条为满状态
swiper.on('slideNextTransitionStart', function () {
  for (let i = 0; i < swiper.activeIndex; i++) {
    document.querySelector(`#progressSlide${i + 1}`).style.width = '100%';
  }
});

// 后退切换时，标记未查看的幻灯片进度条为0
swiper.on('slidePrevTransitionStart', function () {
  for (let i = swiper.slides.length; i > swiper.activeIndex; i--) {
    document.querySelector(`#progressSlide${i}`).style.width = '0%';
  }
});

// 切换完成后启动当前幻灯片的进度条动画
swiper.on('slideChange', function () {
  startProgressAnim(swiper.activeIndex);
});

4. 保留HammerJS触摸导航逻辑

let hammertime = new Hammer(document.querySelector('#swiper'));
hammertime.on('tap', (e) => {
  if (e.center.x > window.innerWidth / 2) {
    swiper.slideNext();
  } else {
    swiper.slidePrev();
  }
});

关键改进点 #

• 每次切换都创建新的AnimeJS实例，避免旧动画堆积
• 用currentProgressAnim全局变量跟踪当前动画，切换时及时暂停并清除
• 封装动画启动函数，代码更简洁易维护
• 自动播放逻辑可选，符合Instagram故事的默认行为

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