0

現在、フロントエンドの技術を学習中です。
下記のコードの画像を変更する方法を誰かご教示いただけないでしょうか。
何卒、よろしくお願いいたします。

console.clear();

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

canvas.width = 1158;
canvas.height = 770;

const frameCount = 147;
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 + 1
  )
    .toString()
    .padStart(4, "0")}.jpg`;

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

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

const tweenPods = (targetFrame) => {
  gsap.to(airpods, {
    frame: targetFrame,
    duration: 3,
    snap: "frame",
    ease: "none",
    onUpdate: render,
    onComplete: () => (isAnimating = false)
  });
};

const previous = () => {
  const _activeFrame = airpods.frame;
  if (isAnimating || _activeFrame === 0) return;
  isAnimating = true;
  if (_activeFrame === 146) {
    return tweenPods(100);
  }
  if (_activeFrame === 100) {
    return tweenPods(40);
  }
  tweenPods(0);
};
const next = () => {
  const _activeFrame = airpods.frame;
  if (isAnimating || _activeFrame === frameCount) return;
  isAnimating = true;
  if (_activeFrame === 40) {
    return tweenPods(100);
  }
  if (_activeFrame === 100) {
    return tweenPods(146);
  }
  tweenPods(40);
};

Observer.create({
  target: "#hero-lightpass",
  type: "wheel",
  onUp: () => previous(),
  onDown: () => next()
});

images[0].onload = render;

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

body {
  background: #000;
}

canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100vh;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - GSAP Observer AirPods Tween</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<canvas id="hero-lightpass" />
<!-- partial -->
  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap/dist/Observer.min.js'></script><script  src="./script.js"></script>

</body>
</html>

1 件の回答 1

1

image タグを作ってるのは
img.src = currentFrame(i);
なので
const currentFrame = (index) =>
が返す画像URLを変えればいいかと

console.clear();

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

canvas.width = 1536;//画像の幅(水平方向)
canvas.height = 300;//画像の高さ(垂直方向)

const frameCount = 147;
const currentFrame = (index) =>
  `https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1280px-Stack_Overflow_logo.svg.png`;//任意の画像のURL

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

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

const tweenPods = (targetFrame) => {
  gsap.to(airpods, {
    frame: targetFrame,
    duration: 3,
    snap: "frame",
    ease: "none",
    onUpdate: render,
    onComplete: () => (isAnimating = false)
  });
};

const previous = () => {
  const _activeFrame = airpods.frame;
  if (isAnimating || _activeFrame === 0) return;
  isAnimating = true;
  if (_activeFrame === 146) {
    return tweenPods(100);
  }
  if (_activeFrame === 100) {
    return tweenPods(40);
  }
  tweenPods(0);
};
const next = () => {
  const _activeFrame = airpods.frame;
  if (isAnimating || _activeFrame === frameCount) return;
  isAnimating = true;
  if (_activeFrame === 40) {
    return tweenPods(100);
  }
  if (_activeFrame === 100) {
    return tweenPods(146);
  }
  tweenPods(40);
};

Observer.create({
  target: "#hero-lightpass",
  type: "wheel",
  onUp: () => previous(),
  onDown: () => next()
});

images[0].onload = render;

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

body {
  background: #000;
}

canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100vh;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - GSAP Observer AirPods Tween</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<canvas id="hero-lightpass" />
<!-- partial -->
  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap/dist/Observer.min.js'></script><script  src="./script.js"></script>

</body>
</html>

1
  • ご教示ありがとうございます!! 編集できました! Commented 2022年11月22日 0:20

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。