Instagram故事进度条

Question

我正在用HTML, TailwindCSS和JavaScript构建类似于instagram故事功能的东西。我有6张不同的幻灯片，我用hammerJS点击导航。在顶部，我有6条进度条，应该在用户查看当前幻灯片时加载。我用animeJS做这个。旋转木马是用swiperJS设置的。我的问题是，我不能用animmejs加载当前幻灯片的进度条。也许有人能帮帮我?

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();
});