论坛 › 动画音画 › 爱到流泪谁的罪 (DJ何鹏版) - 张鑫雨[动图控制]

亚伦影音工作室 发表于 2026-5-7 23:08

爱到流泪谁的罪 (DJ何鹏版) - 张鑫雨[动图控制]

本帖最后由 亚伦影音工作室 于 2026-5-11 16:35 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{margin: 10px -300px;
        width: 1086px;
        height: 600px;
        background:#000 url(https://pic1.imgdb.cn/item/69fb1f2decff72ad899f54d2.png) 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: 40% ;height: 40%;position:absolute;left: 0%; top:15%;z-index: 2;mix-blend-mode: lighten;}
#source{width: 100% ;}

#d1{width:100%;height: 100%;position:absolute;left: 0%; top:0%;z-index: 1;mix-blend-mode: lighten;}
#source1{width:100%;}

.lrc { z-index: 21; position: relative; top: 12%; left: 50%; width: 500px; 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: 70%;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/6562dc6bc458853aefee7156.gif"></div>
<divid="d1"><imgid="source1"src="https://pic1.imgdb.cn/item/64a52c121ddac507cc5fd3ac.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/05/07/blog_260848378_20260507154839449.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 = `
爱到流泪谁的罪 (DJ何鹏版) - 张鑫雨
词曲：张海宝
演唱：张鑫雨
和声：俞子欣
闪闪音乐网 www.33ve.com
Lrc编辑亚伦
出品：亚伦影音工作室

许誓言总许得很完美
承诺一生陪
不怕雨打和风吹
就怕心太累
怕天黑 怕憔悴
最怕夜冷人不归
寂寞吞噬孤单的酒杯
爱情美最怕这颜色褪
平淡到无味
狠心负心变虚伪
执着最狼狈
爱破碎 心憔悴
流着眼泪挽不回
曾经拥抱多么的可贵
爱到泪流是谁的罪
能不能真心爱一回
我爱你 你爱我
谁是谁的谁
爱到流泪是谁的罪
为什么承诺会枯萎
为了谁 骗着谁
谁惹谁伤悲
(Music)
许誓言总许的很完美
承诺一生陪
不怕雨打和风吹
就怕心太累
怕天黑 怕憔悴
最怕夜冷人不归
寂寞吞噬孤单的酒杯
爱情美最怕这颜色褪
平淡到无味
狠心负心变虚伪
执着最狼狈
爱破碎 心憔悴
流着眼泪挽不回
曾经拥抱多么的可贵
爱到泪流是谁的罪
能不能真心爱一回
我爱你 你爱我
谁是谁的谁
爱到流泪是谁的罪
为什么承诺会枯萎
为了谁 骗着谁
谁惹谁伤悲
爱到流泪是谁的罪
为什么承诺会枯萎
为了谁 骗着谁
谁惹谁伤悲
(Music)
☆★谢谢欣赏★☆
=End=

`;
      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-5-8 04:10

https://www.zhangxinxu.com/study/202311/js-mp4-parse-effect-pixi-demo.php

杨帆 发表于 2026-5-8 09:18

效果漂亮~谢谢亚伦老师精彩示范通过ImageDecoder实现动图逐帧控制

只是有的 浏览器环境 目前还不支持 ImageDecoder API，比如，360安全浏览器

杨帆 发表于 2026-5-8 09:23

本帖最后由 杨帆 于 2026-5-8 09:25 编辑

亚伦影音工作室 发表于 2026-5-8 04:10
https://www.zhangxinxu.com/study/202311/js-mp4-parse-effect-pixi-demo.php
谢谢亚伦老师推荐新的学习资料{:4_180:}

红影 发表于 2026-5-10 22:53

动图控制效果很好。欣赏亚伦老师好帖{:4_199:}

查看完整版本: 爱到流泪谁的罪 (DJ何鹏版) - 张鑫雨[动图控制]