亚伦影音工作室 发表于 2025-9-10 19:12

动图可控

本帖最后由 亚伦影音工作室 于 2026-5-28 09:40 编辑 <br /><br /><style>
#papa{margin: 130px -320px;
        width: 1086px;
        height: 650px;
        background:#800000 url('https://pic1.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp') no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}
#source{width:100%;height: 100%;position:absolute;left: 0px; top:0px;cursor: pointer;}
#source img{width:100%;height: 100%;}

</style>
<divid="papa">


<imgid="source" src="https://upfile.mp3.wf/view.php/d700be68fc32599aba10fa245745faaa.gif" alt="My GIF">
</div>

<audio id="aud" src="ttps://s2.ananas.chaoxing.cohm/sv-w7/audio/e6/09/98/6e1ebeeca17bb7f13a4baa9eb5e31982/audio.mp3" loop autoplay ></audio>

<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);
});

// 事件绑定处理
dom.addEventListener('click', function () {
    if (paused) {
      paused = false;
      renderImage(canvas.nextResult);
    } else {
      paused = true;
    }
});
canvas.addEventListener('click', function () {
    if (paused) {
      paused = false;
      renderImage(canvas.nextResult);
    } else {
      paused = true;
    }
});

};
    renderGif(source);
</script>

红影 发表于 2025-9-10 19:59

这个厉害了，和视频一样，可以停在任何一帧上呢。{:4_187:}

红影 发表于 2025-9-10 19:59

欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-9-10 20:29

动图控制实现了，谢谢亚伦老师经典分享{:4_191:}

小辣椒 发表于 2025-9-11 13:50

亚纶也是厉害的，第一步完成，后面在一键停止动图的基础上加上播放器和歌词同步{:4_173:}

小辣椒 发表于 2025-9-11 13:52

期待亚纶完美实现后面部分，前面的应该比后面的难一点，后面你容易了{:4_199:}
页: [1]
查看完整版本: 动图可控