

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

[code]

    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);
    }
[/code]

[code]

    html {
      height: 100vh;
    }
    
    body {
      background: #000;
    }
    
    canvas {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      max-height: 100vh;
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2022-11-21T08:29:31.240
92348
2022-11-22T07:52:51.217
55523
question
javascript ui
画像の変更方法についてどなたかご教示お願いいたします。


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

[code]

    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);
    }
[/code]

[code]

    html {
      height: 100vh;
    }
    
    body {
      background: #000;
    }
    
    canvas {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      max-height: 100vh;
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2022-11-21T09:35:01.993
92352
2022-11-22T07:52:51.217
2022-11-22T07:52:51.217
-1
92348
answer