Instagram故事进度栏

Question

我正在用HTML、TailwindCSS和JavaScript构建类似于instagram故事函数的东西。我有6种不同的幻灯片，在这些幻灯片中，我使用hammerJS的触控按钮导航。在顶部，我有6个进度栏，当用户正在查看当前幻灯片时，它们应该加载。我是和animeJS一起做的。旋转木马是用swiperJS设置的。我的问题是，我无法用animeJS加载当前幻灯片的进度条。也许有人能帮我？

HTML：

<div class="z-50 absolute fixed top-4 left-4 grid grid-cols-6 gap-4 max-w-md">
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide1" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide2" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide3" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide4" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide5" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
        <div class="w-10 h-1 bg-slate-200/50 rounded-full">
          <div id="progressSlide6" style="width: 0%;"
            class="h-full opacity-100 text-center text-xs text-white bg-white rounded-full"></div>
        </div>
      </div>

旋转木马：

let swiper = new Swiper(".mySwiper", {
      speed: 0,
      longSwipes: false,
      allowTouchMove: false,
    });

让进度栏充满前一个屏幕(就像您跳过故事一样)：

swiper.on('slideNextTransitionStart', function () {
      for (let i = 0; i < swiper.activeIndex; i++) {
        $(`#progressSlide${i + 1}`).css('width', '100%');
      }
    });

    swiper.on('slidePrevTransitionStart', function () {
      for (let i = 6; i > swiper.activeIndex; i--) {
        $(`#progressSlide${i}`).css('width', '0%');
      }
    });

用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时间线：

let timeline = anime.timeline({
      targets: `#progressSlide${swiper.activeIndex}`,
      width: "100%",
      autoplay: true,
      duration: 500,
      easing: 'linear',
      loop: false
    })

我想像这样用动画JS加载当前屏幕：

swiper.on('slideChange', function () {
      timeline.pause();
      timeline.restart();
      timeline.add({
        targets: `#progressSlide${swiper.activeIndex}`,
        width: "100%"
      })
      timeline.play();
    });

但它不能正常工作。每次它从一开始开始，意味着在到达屏幕3之后，它从屏幕1、2和3的进展动画开始，但是我只希望它只用于屏幕3，而当前的屏幕已经满载。

Answer 1

找到了解决办法：

创建动画功能：

function animationProcess() {
      anime({
        targets: `#progressSlide${swiper.activeIndex + 1}`,
        width: '100',
        easing: 'linear',
        duration: 5000,
        complete: function (anim) {
          swiper.slideNext();
        }
      });
    }

并在刷更新函数中添加.remove函数和动画功能：

swiper.on('slideNextTransitionStart', function () {
      for (let i = 0; i < swiper.activeIndex; i++) {
        $(`#progressSlide${i + 1}`).css('width', '100%');
      };
      anime.remove(`#progressSlide${swiper.activeIndex}`);
      animationProcess();
    });

    swiper.on('slidePrevTransitionStart', function () {
      for (let i = 6; i > swiper.activeIndex; i--) {
        $(`#progressSlide${i}`).css('width', '0%');
      };
      anime.remove(`#progressSlide${swiper.activeIndex + 2}`);
      animationProcess();
    });