论坛 › 动画音画 › 【小辣椒动图可控】你说世道怪不怪

亚伦影音工作室 发表于 2025-9-12 13:24

【小辣椒动图可控】你说世道怪不怪

本帖最后由 亚伦影音工作室 于 2025-9-27 13:00 编辑 <br /><br /><style>
#bj {
    position: relative;
    margin: 10px 0 40px calc(50% - 781px);
    width: 1400px;
    height: 720px;
    overflow: hidden;
    background: url(https://xlaj.cn/upfile/2025/01/15/20a.jpg)no-repeat center / cover;
    border-radius: 2px;
}

#source{width:100%;height: 100%;position:absolute;left: 0px; top:0px;}
#source img{width:100%;}
#geci {
    --motion: cover2;
    --tt: 2s;
    --state: paused;
    --bg: #ff0000;
    position: absolute;
    left: 30%;
    transform: translate(-50%);
    top: 80%;
    font: 100 3.0em 华文隶书;
    color: #045738;
    white-space: pre;
    -webkit-background-clip: text;
    filter: drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
}

#geci::before {
    position: absolute;
    content: attr(data-geci);
    width: 100%;
    height: 100%;
    color: transparent;
    overflow: hidden;
    white-space: pre;
    background: var(--bg);
    clip-path: inset(0 100% 0 0);
    -webkit-background-clip: text;
    animation: var(--motion) var(--tt) linear forwards;
    animation-play-state: var(--state);
}

@keyframes cover1 {
    to {
      clip-path: inset(0 0 0 0);
    }
}

@keyframes cover2 {
    to {
      clip-path: inset(0 0 0 0);
    }
}
#btnplay {
    width: 160px;
    height: 160px;
    cursor: pointer;
    left: 83%;
    top:43%;
    animation: rotating 6s infinite linear;
    position: absolute;filter:invert(80%) hue-rotate(130deg);
    background: url(https://xlaj.cn/upfile/2025/01/04/n7.png)no-repeat center / cover;
}

@keyframes rotating {
    to {
      transform: rotate(360deg);
    }
}
#fullscreen {
    opacity: 1;
    position: absolute;
    width: 40px;
    height: 40px;
    top:6%;
    cursor: pointer;
    left: 90%;filter:invert(80%) hue-rotate(130deg);
    z-index: 40;
}


#全屏 {
    width: 40px;
    height: 40px;
    position: absolute;
   
    background: url(https://xlaj.cn/upfile/2025/01/15/dak.png)no-repeat center/cover;
}

#退出 {
    width: 40px;
    height: 40px;
    position: absolute;
    opacity: 0;
    background: url(https://xlaj.cn/upfile/2025/01/15/tz.png)no-repeat center/cover;
}
</style>

<div id="bj">
<img id="source" src="https://pic1.imgdb.cn/item/68c28e5658cb8da5c89c9bae.gif" >
<div id="btnplay" title="播放/暂停"></div>
<div id="geci">你说世道怪不怪</div>
<span id="fullscreen" title="全屏展示/退出全屏">
    <div id="全屏"></div>
    <div id="退出"></div>
</span>
    <audio id="aud" src="https://xlaj.cn/upfile/2025/01/15/nssdgbg.m4a" loop autoplay></audio>
</div>
<script>
let lrc = `你说世道怪不怪
歌手：李发发
你说世道怪不怪
有良心的一身债
缺德的人却自在
不要脸的万两财
山中早已无妖怪
全都跑到人间来
一样皮囊各样坏
心怀鬼胎怎么猜
我不会再受伤害
该说拜拜就拜拜
你好我就真心以待
你坏我也有人替代
我不会傻傻期待
也不会求谁偏爱
有风没风花一样开
有你没你我都精彩
我都一样精彩

山中早已无妖怪
全都跑到人间来
一样皮囊各样坏
心怀鬼胎怎么猜
我不会再受伤害
该说拜拜就拜拜
你好我就真心以待
你坏我也有人替代
我不会傻傻期待
也不会求谁偏爱
有风没风花一样开
有你没你我都精彩
我不会再受伤害
该说拜拜就拜拜
你好我就真心以待
你坏我也有人替代
我不会傻傻期待
不会求谁的偏爱
有风没风花一样开
有你没你我都精彩
我都一样精彩
谢谢欣赏

`;
aud.addEventListener("seeked", myFunction)
aud.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function lrcTime (ar) {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}
aud.addEventListener('play', playing,false);
aud.addEventListener('pause', playing,false);
function playing() {
      geci.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    }
let lrcAr = getLrcAr(lrc);
let fs= true;
fullscreen.onclick = () => {
      fs ? (bj.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

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

    // 事件绑定处理
btnplay.addEventListener('click', function () {
      if (aud.paused) {btnplay.style.animationPlayState = 'running';
            paused = false;aud.play();
            renderImage(canvas.nextResult);
      } else {btnplay.style.animationPlayState = 'paused';
aud.pause();
            paused = true;
      }
    });
};
    renderGif(source);
</script>

亚伦影音工作室 发表于 2025-9-12 13:24

全屏有缺点！

梦油 发表于 2025-9-12 17:23

欣赏佳作，问候亚伦。

红影 发表于 2025-9-12 20:09

又是可以停留在任何帧的动图控制方式呢，真棒。
总觉动图还是有点问题的，通常因为文件比较大，加载比较慢，会有卡顿等问题呢。{:4_204:}

红影 发表于 2025-9-12 20:09

这个制作很棒，欣赏亚伦老师好帖{:4_199:}

小文 发表于 2025-9-12 21:31

{:4_191:}厉害！问好！

杨帆 发表于 2025-9-12 22:19

漂亮！谢谢亚伦老师精彩分享{:4_191:}

查看完整版本: 【小辣椒动图可控】你说世道怪不怪