论坛 › 欢乐水吧 › 《痴情的唇吻上无情的人(心碎版)-顾语涵》测试动图停在每帧上

亚伦影音工作室 发表于 2026-4-15 19:20

《痴情的唇吻上无情的人(心碎版)-顾语涵》测试动图停在每帧上

本帖最后由 亚伦影音工作室 于 2026-5-11 12:54 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{margin: 10px -250px;
        width: 1086px;
        height: 600px;
        background:#800000 url() no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}

#d{width: 100% ;height: 100%;position:absolute;left: 0%; top:0%;z-index: 2;}
#source{width: 100% ;}

#d1{width:50%;height: 50%;position:absolute;left: 2%; top:15%;z-index: 2;}
#source1{width:100%;}

.lrc { z-index: 21; position: relative; top: 12%; left: 35%; width: 600px; height: 450px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #ccc; font: 300 25px "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; transition: .3s all ease; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 50px; line-height: 50px; margin: 0 auto; cursor: pointer; }
.lrc #ul li.active { transform: scale(1.2); color: #fff000; font-weight: 300; }
#player{position:absolute;top: 20%;z-index: 99;
            left: 3%;
width: 200px;
height: 200px;
display: grid;
        place-items: center;animation: rot 8s linear infinite ;}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);
cursor: pointer;
}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}

</style>
<divid="papa">
<div id="d"><img   id="source" src="https://pic1.imgdb.cn/item/69b4b0a33c25a1c980382fcd.gif"></div>
<divid="d1"><imgid="source1"src="https://pic1.imgdb.cn/item/69b3c67c3c25a1c98035aa8c.gif"></div>

<div id="player">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>

</div>
<audio id="aud" src="https://static.oldkids.com.cn/upload/2026/04/15/blog_260855907_20260415185122240.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 / 1200.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('ended',function () {
      if (paused) {
            paused = false;
            renderImage(canvas.nextResult);
      } else {aud.pause();
            paused = true;
      }
    });
canvas.addEventListener('ended',function () {
      if (paused) {
            paused = false;
            renderImage(canvas.nextResult);
      } else {
            paused = true;
      }
    });
player.addEventListener('click', function () {
      if (paused) {aud.play();player.style.animationPlayState = 'running';
            paused = false;
            renderImage(canvas.nextResult);
      } else {aud.pause();player.style.animationPlayState = 'paused';
          paused = true;
      }
    });
};
   renderGif(source); renderGif(source1)
</script>

<script>
(function() {
      let lrc = `
痴情的唇吻上无情的人(心碎版)-顾语涵
词：周亦安
曲：周亦安
编曲：SN/周亦安
统筹：高七七
制作人：周亦安
【未经著作权人许可不得翻唱翻录或使用】
我曾经爱得那么单纯
也为你付出所有青春
直到被伤得满是伤痕
才知道自己太过天真
也许怪我太傻太愚蠢
没看出你的冷漠眼神
还在为你苦苦地沉沦
最后只剩孤独的灵魂
真心的话讲给敷衍的人
深情的我爱上薄情的人
怪就怪我们之间的缘分
让我变成最可笑的情人
真心的话说给无情的人
深情的眼看透绝情的魂
痴心的人总被薄情所困
枉费一场相遇造化弄人
也许怪我太傻太愚蠢
没看出你的冷漠眼神
还在为你苦苦地沉沦
最后只剩孤独的灵魂
真心的话讲给敷衍的人
深情的我爱上薄情的人
怪就怪我们之间的缘分
让我变成最可笑的情人
真心的话说给无情的人
深情的眼看透绝情的魂
痴心的人总被薄情所困
枉费一场相遇造化弄人

`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud");
      var ul = document.querySelector("#ul");
      var container = document.querySelector(".lrc");

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }

      function createElements() {
            let fragment = document.createDocumentFragment();

            for (let i = 0; i < result.length; i++) {
                let li = document.createElement("li");
                li.innerText = result.word;

                li.addEventListener("click", function () {
                  audio.currentTime = result.time;
                  setOffset();
                });

                fragment.appendChild(li);
            }

            ul.appendChild(fragment);
      }

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

            offset = Math.max(minOffset, Math.min(offset, maxOffset));

            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            if (index < ul.children.length) {
                ul.children.classList.add('active');
            }
      }

      audio.addEventListener("timeupdate", setOffset);
})();


</script>

梦油 发表于 2026-4-15 19:47

欣赏佳作，问候亚伦。

红影 发表于 2026-4-15 20:16

你若不标注是动图还以为是视频，真不错，两张动图都能在暂停时停到任意帧呢，很赞{:4_199:}

红影 发表于 2026-4-15 20:21

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

小辣椒 发表于 2026-4-15 23:54

欣赏亚纶精彩的制作{:4_187:}

老谟深虑 发表于 2026-4-16 09:43

         欣赏老师的佳作，点赞！

查看完整版本: 《痴情的唇吻上无情的人(心碎版)-顾语涵》测试动图停在每帧上