滚动动画中的淡出

Question

所以我找到了这段代码，我想为这个动画添加一些小的淡出效果。因此，在一个卷轴上，它会经过一些帧，我想添加两件事，我需要一些帮助。那么首先，如何让它在一个卷轴上经过更多帧，其次，如何为一个卷轴添加淡出效果？是的，我现在在 JS 方面很愚蠢。

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

const frameCount = 148;
const currentFrame = index => (
  `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${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 = 1158;
canvas.height = 770;
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()

html {
  height: 100vh;
}

body {
  height: 500vh;
  background: #000;
}

canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;
}

<canvas id="hero-lightpass" />

我确实尝试了好几次自己做，但我想我只是不理解代码。

Answer 1

我明白你想做什么——不用担心，我们都是从 JS 的某个地方开始的！以下是添加这两件事的方法：

每次滚动浏览更多帧：您可以将scrollFraction乘以一个数字（例如2或3），以使其更快地浏览更多帧。

添加淡出效果：可以使用canvas上下文的globalAlpha属性。这可以让您在绘制框架时控制其不透明度。

更新后的代码如下所示：

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

const frameCount = 148;
const currentFrame = index => (
  `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${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 = 1158;
canvas.height = 770;

img.onload = function() {
  context.drawImage(img, 0, 0);
};

const updateImage = (index, opacity) => {
  context.clearRect(0, 0, canvas.width, canvas.height); // Clear previous frame
  context.globalAlpha = opacity; // Set opacity for fade-out effect
  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 multiplier = 2; // Change this to make it faster (e.g., 2, 3, etc.)
  const frameIndex = Math.min(
    frameCount - 1,
    Math.ceil(scrollFraction * frameCount * multiplier)
  );

  // Fade-out effect
  const fadeStart = 0.8; // Start fading at 80% scroll
  const opacity = scrollFraction > fadeStart 
    ? Math.max(0, 1 - (scrollFraction - fadeStart) / (1 - fadeStart))
    : 1;

  requestAnimationFrame(() => updateImage(frameIndex + 1, opacity));
});

preloadImages();

改变了什么： 一卷上有更多帧：

添加了一个乘数（此处设置为 2）以使其更快地通过帧。您可以根据自己的喜好进行调整。 淡出效果：

当滚动到达某个点（fadeStart）时，使用 globalAlpha 来降低不透明度。 尖端： 调整乘数以控制帧进展的速度。 调整 fadeStart 来决定淡出何时开始。