页面无法使用lib GSAP 正常渲染动画图像

Question

我在滚动图片时做了动画，剪掉了很多一帧一帧的图片并制作了动画，但是问题来了，加载页面时没有图片，只有滚动时才会出现，滚动时又消失了备份，请帮忙...

我认为这是 render() 中的解决方案，但我不知道如何解决这个问题。我正在考虑让它不仅通过滚动来渲染，而且还像页面加载时那样渲染。

<div class="hero">
                    <div id="home">
                        <canvas></canvas>
                    </div>
                    <div class="about"></div>
                </div>

function sequence_animation() {
        const canvas = document.querySelector('#home>canvas');
        const context = canvas.getContext('2d');
    
        canvas.width = 1500;
        canvas.height = 700;
    
        let imagesLoaded = 0;
        const frameCount = 19;
        const images = [];
        const imageSeq = {
            frame: 0,
        };
    
        function files(index) {
            var data = `
            ../assets/img/animation/1.png
                ../assets/img/animation/1.png
                ../assets/img/animation/1-2.png
                ../assets/img/animation/2.png
                ../assets/img/animation/2-2.png
                ../assets/img/animation/3.png
                ../assets/img/animation/3-2.png
                ../assets/img/animation/4.png
                ../assets/img/animation/4-2.png
                ../assets/img/animation/5.png
                ../assets/img/animation/5-2.png
                ../assets/img/animation/6.png
                ../assets/img/animation/6-2.png
                ../assets/img/animation/7.png
                ../assets/img/animation/7-2.png
                ../assets/img/animation/8.png
                ../assets/img/animation/8-2.png
                ../assets/img/animation/9.png
                ../assets/img/animation/9-2.png
                ../assets/img/animation/10.png
            `;
            return data.split('\n')[index].trim();
        }
    
        for (let i = 0; i < frameCount; i++) {
            const img = new Image();
            img.src = files(i);
            images.push(img);
            img.onload = () => {
                imagesLoaded++;
                if (imagesLoaded === frameCount) {
                    render();
                }
            };
        }
    
        window.addEventListener('resize', function () {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            render();
        });
    
        gsap.to(imageSeq, {
            frame: frameCount - 1,
            snap: 'frame',
            ease: 'none',
            scrollTrigger: {
                scrub: 1,
                pin: false,
                trigger: '.header__list-item.message',
                start: 'left %',
            },
            onUpdate: render,
        });
    
        function render() {
            scaleImage(images[imageSeq.frame | 0], context);
        }
    
        function scaleImage(img, ctx) {
            var canvas = ctx.canvas;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
        }
    }
    
    sequence_animation();
})

canvas {
    margin: 0 auto;
    margin-top: -189px;
    display: block;
    aspect-ratio: 16 / 9;
}

Answer 1

页面加载后是否也可以调用 render 方法？ IE。稍微修改一下你的调整大小脚本：

// Add this function
function setup() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  render();
}

window.addEventListener('resize', setup);
window.onload = setup();

PS。

resize

事件对性能影响相当大，因此请考虑添加调整大小计时器：https://stackoverflow.com/a/5490021/9306514