多组scroll driven图像序列动画仅首个生效，求技术解决方案

问题场景 #

在页面中添加多组滚动驱动的图像序列动画时，仅顶部动画能正常运行，其余动画区域显示空白。页面结构如下：

=========== header ===========
--------------------------------------
---   image sequence animation A   ---
--------------------------------------
<
--------------------------------------
---   image sequence animation B   ---
--------------------------------------
<
--------------------------------------
---   image sequence animation C   ---
--------------------------------------
<
============ footer ============

原代码仅针对单个动画元素编写，全局变量和单一元素选择器导致复用冲突，无法支持多组动画并行运行。

修改后的实现方案 #

HTML 结构 #

为每个动画容器添加统一类名，通过data-*属性配置帧数量和图片路径，保证每个动画独立可配置：

<div class="hero">
    <h1>多组滚动图像序列动画</h1>
    <p>滚动查看多个动画效果</p>
</div>

<!-- 动画A -->
<div class="sequence-container" data-frame-count="87" data-image-path="images/a/">
    <div class="sticky-element">
        <div class="sequence-element">
            <canvas width="1336" height="786"></canvas>
        </div>
    </div>
</div>

<!-- 动画B -->
<div class="sequence-container" data-frame-count="87" data-image-path="images/b/">
    <div class="sticky-element">
        <div class="sequence-element">
            <canvas width="1336" height="786"></canvas>
        </div>
    </div>
</div>

<!-- 动画C -->
<div class="sequence-container" data-frame-count="87" data-image-path="images/c/">
    <div class="sticky-element">
        <div class="sequence-element">
            <canvas width="1336" height="786"></canvas>
        </div>
    </div>
</div>

<footer>
    You are awesome!
</footer>

CSS 样式 #

将原单一动画容器的样式改为通用类，适配所有动画区域：

body {
    margin: 0;
    font-family: -apple-system, sans-serif;
    color: #1d1d1f;
}

h1 {
    font-size: 40px;
    margin: 0 0 10px;
}

p {
    font-size: 22px;
}

.hero {
    padding: 40px;
    text-align: center;
}

.sequence-container {
    height: 430vh;
}

.sticky-element {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 1033px;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.sequence-element {
    width: 1336px;
    height: 786px;
}

footer {
    background: #f5f5f7;
    font-weight: 700;
    font-size: 40px;
    height: 400px;
    display: grid;
    place-items: center;
}

JavaScript 逻辑 #

通过类封装动画逻辑，每个动画容器独立实例化，避免全局变量冲突，同时优化滚动计算和图片加载逻辑：

class ScrollSequenceAnimation {
    constructor(container) {
        this.container = container;
        this.canvas = container.querySelector('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.frameCount = parseInt(container.dataset.frameCount);
        this.imagePath = container.dataset.imagePath;
        this.images = [];
        
        this.prepareImages();
        this.bindScrollListener();
    }

    prepareImages() {
        for (let i = 0; i < this.frameCount; i++) {
            const image = new Image();
            image.src = `${this.imagePath}${i}.jpg`;
            this.images.push(image);

            if (i === 0) {
                image.onload = () => this.drawImage(0);
            }
        }
    }

    drawImage(frameIndex) {
        this.ctx.drawImage(this.images[frameIndex], 0, 0);
    }

    updateAnimation() {
        const scrollTop = document.documentElement.scrollTop - this.container.offsetTop;
        const maxScrollTop = this.container.scrollHeight - window.innerHeight;
        if (maxScrollTop <= 0) return;
        
        const scrollFraction = scrollTop / maxScrollTop;
        const frameIndex = Math.max(0, Math.min(this.frameCount - 1, Math.ceil(scrollFraction * this.frameCount)));

        if (this.images[frameIndex].complete) {
            this.drawImage(frameIndex);
        } else {
            this.images[frameIndex].onload = () => this.drawImage(frameIndex);
        }
    }

    bindScrollListener() {
        window.addEventListener('scroll', () => {
            requestAnimationFrame(() => this.updateAnimation());
        });
    }
}

// 初始化所有动画容器
document.querySelectorAll('.sequence-container').forEach(container => {
    new ScrollSequenceAnimation(container);
});

关键解决点 #

• 封装独立实例：用类将每个动画的资源（canvas、图像数组）和逻辑（图片加载、滚动计算、绘制）封装，避免全局变量冲突
• 配置化参数：通过data-frame-count和data-image-path实现每个动画的独立配置，无需修改核心代码
• 精准滚动计算：每个实例仅计算自身容器的滚动偏移量，确保动画触发时机准确
• 加载状态检查：绘制前判断图片是否加载完成，避免因图片未加载导致的空白问题

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