生命线（改进版）

马黑黑

马黑黑

代码：

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/space.webp') no-repeat center/cover; color: orange; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #msvg { position: absolute; bottom: 50px; width: 16vw; height: 8vw; cursor: pointer; opacity: 1; }
   
7.     #p1 { fill: none; stroke: currentColor; stroke-width: 8; stroke-dasharray: 8; stroke-dashoffset: 100%; animation: move linear 20s infinite; }
   
8.     @keyframes move { to { stroke-dashoffset: 0%; } }
   
9. </style>
   
10. 
    
11. <div id="pa" class="pa">
    
12.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/17/5e1c837dca409.mp4" autoplay loop muted></video>
    
13.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
    
14.         <title>播放/暂停(Alt+X)</title>
    
15.         <path id="p1" d="M0 100 H400" />
    
16.     </svg>
    
17. </div>
    
18. 
    
19. <script>
    
20.     var options = {
    
21.         pa: '.pa',
    
22.         urls: [['https://music.163.com/song/media/outer/url?id=38019092', '生命线']],
    
23.         btns: [msvg],
    
24.     };
    
25. 
    
26.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
    
27. 
    
28.     function tzRun() {
    
29.         var aud = new AudPlayer(options);
    
30. 
    
31.         aud.aud.ontimeupdate = () => {
    
32.             var tt = 15;
    
33.             var str = '';
    
34.             Array.from({length: tt}).forEach((_,k) => {
    
35.                 var x = (k + 1) * (360 / tt);
    
36.                 var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
    
37.                 str += k === 0 ? `M0 100 H${x}` : ` L${x} ${y}`;
    
38.             });
    
39.             path = `${str}L400 100`;
    
40.             p1.setAttribute('d', path);
    
41.         };
    
42.     }
    
43. 
    
44.     function loadJs(url, callback) {
    
45.         var script = document.createElement('script');
    
46.         script.charset = 'utf-8';
    
47.         script.src = url;
    
48.         script.onload = function() {
    
49.             if (callback) callback();
    
50.         };
    
51.         document.head.appendChild(script);
    
52.     }
    
53. </script>

复制代码

马黑黑

主要改进：

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

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

玫瑰

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

霜染枫丹

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

雨季工作室

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