论坛 › 欢乐水吧 › 通过按钮控制动图

亚伦影音工作室 发表于 2025-7-11 22:49

通过按钮控制动图

本帖最后由 亚伦影音工作室 于 2025-7-20 09:25 编辑 <br /><br /><style>

#source{width:550px;height: 325px;position: relative;left: 0px; top: 0px;animation-duration: 2s;}
#source img{width:100%;height: 100%;}

#btn{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 1%; top: -50px;position:relative;z-index: 20;cursor: pointer;}
</style>

<img id="source"src="https://pic1.imgdb.cn/item/67ff1b5e88c538a9b5d252a3.gif">
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/e6/09/98/6e1ebeeca17bb7f13a4baa9eb5e31982/audio.mp3" loop autoplay ></audio>
<p id="btn"></p>


<script>
const renderGif = function (dom) {
    if (!dom || !dom.src) {
      return;
    }
    // gif图片的url地址
    const src = dom.src;

    // 创建的用来播放gif的canvas元素
    const canvas = document.createElement('canvas');
    const context = canvas.getContext("2d");

    // 一些与GIF播放有关的变量
    let imageDecoder = null;
    let imageIndex = 0;
    let paused = false;

    // 绘制方法
    const renderImage = function (result) {
      context.drawImage(result.image, 0, 0);

      const track = imageDecoder.tracks.selectedTrack;

      // 如果播放结束，从头开始循环
      if (imageDecoder.complete) {
            if (track.frameCount === 1) {
                return;
            }

            if (imageIndex + 1 >= track.frameCount) {
                imageIndex = 0;
            }
      }

      // 绘制下一帧内容
      imageDecoder
            .decode({ frameIndex: ++imageIndex })
            .then((nextResult) => {
                if (paused === false) {
                  setTimeout(() => {
                        renderImage(nextResult);
                  }, result.image.duration / 1000.0);
                } else {
                  canvas.nextResult = nextResult;
                }
            })
            .catch((e) => {
            // imageIndex可能超出的容错处理
            if (e instanceof RangeError) {
                imageIndex = 0;
                imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
            } else {
                throw e;
            }
      });
    };

    // 判断地址能够请求
    fetch(src).then((response) => {
      // 可以请求，进行样式处理
      // 设置canvas尺寸
      canvas.width = dom.naturalWidth;
      canvas.height = dom.naturalHeight;
      // 实际显示尺寸
      canvas.style.width = dom.clientWidth + 'px';
      canvas.style.height = dom.clientHeight + 'px';
      // 隐藏图片，显示画布
      dom.after(canvas);
      dom.style.position = 'absolute';
      dom.style.opacity = '0';

      // 将GIF绘制在canvas上
      imageDecoder = new ImageDecoder({
            data: response.body,
            type: "image/gif"
      });
      // 解析第一帧并绘制
      imageDecoder.decode({
            frameIndex: imageIndex
      }).then(renderImage);
    });

    // 事件绑定处理

btn.addEventListener('click', function () {
      if (aud.paused) {
            paused = false;aud.play();btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
            renderImage(canvas.nextResult);
      } else {aud.pause();btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
            paused = true;
      }
    });

};
    renderGif(source);
</script>

杨帆 发表于 2025-7-11 23:21

谢谢分享，恭喜亚伦老师再创新作{:4_191:}

红影 发表于 2025-7-11 23:36

这个也是可以停在任意帧的，还加了按钮，很赞{:4_187:}

红影 发表于 2025-7-11 23:36

漂亮的磁带效果。欣赏亚伦老师好帖{:4_199:}

查看完整版本: 通过按钮控制动图