生命线（改进版）

马黑黑 发表于 2026-8-13 08:38

马黑黑 发表于 2026-8-13 08:38

代码：

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/space.webp') no-repeat center/cover; color: orange; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; bottom: 50px; width: 16vw; height: 8vw; cursor: pointer; opacity: 1; }
#p1 { fill: none; stroke: currentColor; stroke-width: 8; stroke-dasharray: 8; stroke-dashoffset: 100%; animation: move linear 20s infinite; }
@keyframes move { to { stroke-dashoffset: 0%; } }
</style>

<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/17/5e1c837dca409.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
   <title>播放/暂停(Alt+X)</title>
   <path id="p1" d="M0 100 H400" />
</svg>
</div>

<script>
var options = {
   pa: '.pa',
   urls: [['https://music.163.com/song/media/outer/url?id=38019092', '生命线']],
   btns: ,
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

function tzRun() {
   var aud = new AudPlayer(options);

   aud.aud.ontimeupdate = () => {
         var tt = 15;
         var str = '';
         Array.from({length: tt}).forEach((_,k) => {
            var x = (k + 1) * (360 / tt);
            var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
            str += k === 0 ? `M0 100 H${x}` : ` L${x} ${y}`;
         });
         path = `${str}L400 100`;
         p1.setAttribute('d', path);
   };
}

function loadJs(url, callback) {
   var script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = url;
   script.onload = function() {
         if (callback) callback();
   };
   document.head.appendChild(script);
}
</script>

马黑黑 发表于 2026-8-13 08:42

主要改进：

（一）添加一个 stroke-dashoffset 动画，不受控制（寓意生命流永远流动）；

（二）去除路径节点坐标算法冗余，路径两端各有短直线形态（要求 tt 值合适且为奇数）。

玫瑰发表于 2026-8-13 09:18

你改进的我不懂，但是制作精彩。

霜染枫丹 发表于 2026-8-13 09:45

这个动画确实是关键，和音乐相得益彰，也可能每个人眼睛看到的东西都不一样，我觉得没了这个动画，这个形式就缺少了活力。谢马老师分享！{:4_204:}{:4_190:}

雨季工作室 发表于 2026-8-13 10:06

欣赏学习马黑黑老师佳作，辛苦了。

梦江南 发表于 2026-8-13 11:51

谢谢黑黑老师辛苦，学习了！{:4_187:}

红影发表于 2026-8-13 15:03

改进后的形态更漂亮了。欣赏黑黑好帖{:4_199:}

杨帆发表于 2026-8-13 21:56

改进后效果更好，谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2026-8-15 08:37

杨帆发表于 2026-8-13 21:56
改进后效果更好，谢谢马老师精彩分享

{:4_191:}

马黑黑 发表于 2026-8-15 08:37

红影发表于 2026-8-13 15:03
改进后的形态更漂亮了。欣赏黑黑好帖

{:4_180:}

马黑黑 发表于 2026-8-15 08:38

梦江南发表于 2026-8-13 11:51
谢谢黑黑老师辛苦，学习了！

{:4_190:}

马黑黑 发表于 2026-8-15 08:38

雨季工作室发表于 2026-8-13 10:06
欣赏学习马黑黑老师佳作，辛苦了。

{:4_190:}

马黑黑 发表于 2026-8-15 08:40

霜染枫丹发表于 2026-8-13 09:45
这个动画确实是关键，和音乐相得益彰，也可能每个人眼睛看到的东西都不一样，我觉得没了这个动画，这个形式 ...

N久以前，专门做过示波图播放控制器，当时是用 canvas 制作的。

SVG 做这个不是很合适，但通过动态改变路径节点也能勉强实现同类需求。

霜染枫丹 发表于 2026-8-15 14:59

马黑黑发表于 2026-8-15 08:40
N久以前，专门做过示波图播放控制器，当时是用 canvas 制作的。

SVG 做这个不是很合适，但通过动态改 ...

我感觉单纯的一个图似乎单薄了一些。您有很多奇思妙想，都特别靠谱可以拓展，这一点很多教程做不到。我喜欢教程给我一个路径，可以引领我去在尝试不同的想法。我自己确实思维宽度不够。这幅图您给了制作的代码，这就很完美了。教程不是作品，是纲举目张的那个“纲“，我很喜欢这个教程！我都会抱走。

谢马老师分享！下午好~·{:4_204:}{:4_190:}

马黑黑 发表于 2026-8-15 18:50

霜染枫丹发表于 2026-8-15 14:59
我感觉单纯的一个图似乎单薄了一些。您有很多奇思妙想，都特别靠谱可以拓展，这一点很多教程做不到。我喜 ...

任何人的设想其实都有可借鉴之处

朵拉发表于 2026-8-16 23:14

老师创意十足，学生已交作业，请您指正{:4_190:}

马黑黑 发表于 2026-8-18 07:47

朵拉发表于 2026-8-16 23:14
老师创意十足，学生已交作业，请您指正

{:4_199:}

小辣椒 发表于 2026-8-26 21:01

这个动感频谱小播挺漂亮的{:4_199:}

小辣椒 发表于 2026-8-26 21:02

这么多天没有来，黑黑发的新当心不少哦，今天仔细看看

页: [1] 2

花潮论坛's Archiver

生命线（改进版）