图像序列在它出现之前开始动画

Question

我正在尝试复制苹果的图像排序动画 - https://www.apple.com/airpods-pro/。我设法找到了一些示例，它们都运行良好，但它们都在页面顶部触发，我希望我的在页面中间触发。我已经尝试将触发事件附加到#graphHolder 容器，但只要您在页面顶部滚动，它仍然会开始循环浏览图像。谁能指出我哪里出错了？这是一个 jsfiddle - https://jsfiddle.net/mvyw2bc3/2/

const html = document.documentElement;
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

const frameCount = 132;
const currentFrame = index => ( `https://res.cloudinary.com/icebreakernz/image/upload/v1623273037/globalcampaign/plastic-free/sequence-test/IB-Graph_Animation${index.toString().padStart(4, '0')}.jpg`
)

const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};

const img = new Image()
img.src = currentFrame(1);
canvas.width=1920;
canvas.height=1080;
img.onload=function(){
  context.drawImage(img, 0, 0);
}

const updateImage = index => {
  img.src = currentFrame(index);
  context.drawImage(img, 0, 0);
}

window.addEventListener('scroll', () => {  
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(
    frameCount - 1,
    Math.ceil(scrollFraction * frameCount)
  );
  
  requestAnimationFrame(() => updateImage(frameIndex + 1))
});

preloadImages()

Answer 1

对于遇到同样问题的任何人，我最终选择了ScrollTrigger，这使它变得超级简单。在这里查看我的小提琴，看看它应该如何工作 - https://jsfiddle.net/jdrebugL/

const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

canvas.width = 1920;
canvas.height = 1080;

const frameCount = 132;
const currentFrame = index => ( `https://res.cloudinary.com/icebreakernz/image/upload/v1623273037/globalcampaign/plastic-free/sequence-test/IB-Graph_Animation${(index + 1).toString().padStart(4, '0')}.jpg`
);

const images = []
const airpods = {
  frame: 0
};

for (let i = 0; i < frameCount; i++) {
  const img = new Image();
  img.src = currentFrame(i);
  images.push(img);
}

gsap.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  scrollTrigger: {
    scrub: 1,
    trigger: "#hero-lightpass",
    start: "top top",
    pin: true
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

images[0].onload = render;

function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[airpods.frame], 0, 0); 
}

Answer 2

难道你不能做一个交点观察者，让它在一个被推到图像底部的 div 上触发（可能是绝对位置和底部零，或者你知道什么），然后触发内的任何回调函数观察者？我不确定这是否有任何帮助，但这是我制作的一个函数，可让您在元素相交时调用回调函数

export const elementObserver = (callback, options) => {
 if (typeof options.element != "undefined") {
   return new IntersectionObserver(
     (entries, observer) => {
       entries.forEach(entry => {
         let target = entry.target;
         if (entry.isIntersecting) {
           callback(options);
         }
       });
     },
     {
       threshold: 0.5
     }
   ).observe(options.element);
 }
}

您需要在 javascript 映射中传递所有回调函数变量，并且映射必须有一个名为“元素”的键才能工作（元素是要监视交叉点的元素）......也在它的当前状态它是用 es6 编写的，但您可以轻松翻译它。 哦，也许可以使用阈值，但将其设置为 1 以进一步延迟动作