《无间道》（学习黑黑《战争的艺术》代码效果）

红影

红影

无间道都是表面看着你好我好，一起喝酒聊天，其实内里都在做着命运的抉择。双方都有卧底，承受着残酷的内心战争，犹如步入八大地域之最——无间地域。

红影

去黑黑的在线星形图案的帖子里弄了个星出来，本来想再多几条边，表达交织的矛盾，后来觉得可能太阳花那个在线路径可能更好，不管了，已经做了星形的，先这样吧。
这样的小点点特别难去暂停，弄了个让svg触碰暂停，不知道为什么用了一次后就不停了，还得去找小点点@马黑黑

起个网名好难

两把管制刀具啊

红影

我们都在不断赶路忘记了出路
在失望中追求偶尔的满足

对这歌词特别有感触。

红影

起个网名好难 发表于 2024-11-1 16:00
两把管制刀具啊

那是双方在对决的意思

起个网名好难

红影 发表于 2024-11-1 16:02
那是双方在对决的意思

不仔细看感觉两把刀是在那些圆点的上面，以为刀是单独的图片。

梦油

歌词挺有意思，值得玩味和思考。

马黑黑

红影 发表于 2024-11-1 15:58
去黑黑的在线星形图案的帖子里弄了个星出来，本来想再多几条边，表达交织的矛盾，后来觉得可能太阳花那个在 ...

从整体思路上看，帖子的实现方式很得分。细节设计问题：


（一）旋转着的小球很难俘获，它们承担音频控制按钮不合时宜，可改为 svg 整体充当这个角色；
（二）CSS变量 --state 是音频与动画联动机制的主要开关，想通过它局部控制一些层面的动画不太现实，应另辟蹊径改变指针交互动画。

以下是建议的代码，以注释方式保留了原先的设计：

1. <style>
   
2.         #tz { margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: url('https://pic.imgdb.cn/item/67246dcad29ded1a8c16b6b1.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative;
   
3. border-radius:32px; }
   
4.         /* 加一个CSS变量 --deg: 360deg; */
   
5.         #mysvg { --state: running; --deg: 360deg; position: absolute; left: calc(50% - 370px); top: calc(50% - 280px); width: 300px; height: 300px; animation: rot 20s linear infinite var(--state); cursor: pointer; }
   
6.         .ball { filter: drop-shadow(-10px -10px 20px darkred); transition: .4s; cursor: pointer; animation: flash .1s var(--delay) linear infinite alternate var(--state); }
   
7.         .ball:hover { r: 14; }
   
8.         /* #mysvg:hover { --state: paused; } 换成下一句 */
   
9.         #mysvg:hover { --deg: -720deg; }
   
10.         #tz::before { content: attr(data-lrc); position: absolute; right: -260px; bottom: 12px; width: 100%; height: 60px; text-align: center; font: normal 42px/60px LiSu; color: transparent; background: repeating-linear-gradient(to right, Moccasin,LightSkyBlue, Moccasin,LightSkyBlue, Moccasin) 50%/200px 60px; -webkit-background-clip: text; }
    
11.         @keyframes flash { to { opacity: .5; } }
    
12.         @keyframes rot { to { transform: rotate(var(--deg)); } }
    
13. </style>
    
14. 
    
15. <div id="tz" data-lrc="无间道">
    
16.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2070130101" autoplay loop></audio>
    
17.         <svg id="mysvg"></svg>
    
18. </div>
    
19. 
    
20. <script>
    
21. var sc = document.createElement('script');
    
22. sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
    
23. document.body.appendChild(sc);
    
24. 
    
25. sc.onload = () => {
    
26.         var dr = _dr(mysvg), balls = [];
    
27.         dr.path('M210.00 150.00,286.26 199.59,195.96 188.57,222.50 275.57,160.42 209.09,124.82 292.80,120.00 201.96,38.92 243.20,93.62 170.52,5.00 150.00,93.62 129.48,38.92 56.80,120.00 98.04,124.82 7.20,160.42 90.91,222.50 24.43,195.96 111.43,286.26 100.41z', 'none','none').id('path');
    
28.         var len = path.getTotalLength();
    
29.         for(var i = 0, tt = 72; i < tt; i ++) {
    
30.                 var point = path.getPointAtLength(len / tt * i);
    
31.                 var color = 'Gainsboro',
    
32.                         delay = Math.random() * i * -0.1;
    
33.                 dr.circle(point.x,point.y,5,color).set('class','ball').style(`--delay: ${delay}s`);
    
34.                 balls.push(dr.elm);
    
35.         }
    
36.         //balls.forEach(b => b.onclick = () => {
    
37.         //        dr.svg.style.setProperty('--state', ['paused','running'][+aud.paused]);
    
38.         //        aud.paused ? aud.play() : aud.pause();
    
39.         //});
    
40.         mysvg.onclick = () => {
    
41.                 mysvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
    
42.                 aud.paused ? aud.play() : aud.pause();
    
43.         }
    
44.         aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
    
45. };
    
46. 
    
47. var curkey = 0, lrcAr = [];
    
48. var getAr = (text) => {
    
49.     var ar = text.trim().split('\n');
    
50.     ar.sort();
    
51.     var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    
52.     ar.forEach(item => {
    
53.         let result = item.match(reg);
    
54.         let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
    
55.         lrcAr.push([tmsg, result[4].trim()]);
    
56.     });
    
57. };
    
58. aud.onseeked = () => curkey = 0;
    
59. aud.ontimeupdate = () => {
    
60.     if(curkey > lrcAr.length - 1) return;
    
61.     if(aud.currentTime >= lrcAr[curkey][0]) {
    
62.         tz.dataset.lrc = lrcAr[curkey][1];
    
63.         curkey ++;
    
64.     }
    
65. };
    
66. var lrc = `
    
67.         [00:00.473]电影《无间道》主题曲
    
68.         [00:03.273]原唱：刘德华、梁朝伟
    
69.         [00:06.273]翻唱歌手：回歌肉
    
70.         [00:09.273]作词作曲：林夕、伍乐城
    
71.         [00:12.273]学习黑黑战争艺术代码
    
72.         [00:15.273]不我不愿意结束
    
73.         [00:17.742]我还没有结束
    
74.         [00:19.944]无止境的旅途
    
75.         [00:22.377]看着我没停下的脚步
    
76.         [00:25.704]已经忘了身在何处
    
77.         [00:29.984]谁能改变人生的长度
    
78.         [00:33.931]谁知道永恒有多么恐怖
    
79.         [00:37.434]谁了解生存往往比命运还残酷
    
80.         [00:41.603]只是没有人愿意认输
    
81.         [00:45.115]我们都在不断赶路忘记了出路
    
82.         [00:49.90]在失望中追求偶尔的满足
    
83.         [00:52.782]我们都在梦中解脱清醒的苦
    
84.         [00:56.698]流浪在灯火阑珊处
    
85.         [01:00.374]去不到终点回到原点
    
86.         [01:04.368]享受那走不完的路
    
87.         [01:23.327]谁能改变人生的长度
    
88.         [01:27.237]谁知道永恒有多么恐怖
    
89.         [01:30.672]谁了解生存往往比命运还残酷
    
90.         [01:34.716]只是没有人愿意认输
    
91.         [01:38.446]我们都在不断赶路忘记了出路
    
92.         [01:42.449]在失望中追求偶尔的满足
    
93.         [01:46.138]我们都在梦中解脱清醒的苦
    
94.         [01:50.96]流浪在灯火阑珊处
    
95.         [01:53.792]去不到终点回到原点
    
96.         [01:57.691]享受那走不完的路
    
97.         [02:05.950]一路上演出难得糊涂
    
98.         [02:09.693]一路上回顾难得麻木
    
99.         [02:13.520]在这条亲密无间的路
    
100.         [02:16.729]让我像你 你像我 怎么会孤独
     
101.         [02:20.405]我们都在不断赶路忘记了出路
     
102.         [02:24.291]在失望中追求偶尔的满足
     
103.         [02:27.994]我们都在梦中解脱清醒的苦
     
104.         [02:31.972]流浪在灯火阑珊处
     
105.         [02:35.685]既然没终点回到原点
     
106.         [02:39.620]我想我们都不不在乎
     
107. `;
     
108. getAr(lrc);
     
109. </script>

复制代码

秋思梦景

精美代码音画，精心制作分享！为您点赞！

红影

起个网名好难 发表于 2024-11-1 16:18
不仔细看感觉两把刀是在那些圆点的上面，以为刀是单独的图片。

实际两把刀被我放到底图上了，本来想让它们跟着粒子一起转，感觉固定的也不错，索性做图上了

红影

梦油 发表于 2024-11-1 17:12
歌词挺有意思，值得玩味和思考。

是啊，很早以前的歌，现在我都找不到原唱了，因为喜欢，还是用这歌了

红影

马黑黑 发表于 2024-11-1 19:41
从整体思路上看，帖子的实现方式很得分。细节设计问题：

嗯，我也是想到捕捉粒子不容易，也想让svg背点击暂停，只是实现方法上不合适。谢谢黑黑的指点，原来不无法使用#mysvg:hover { --state: paused; }呢，我记得有这个功能，还去前面的帖子里找了半天

红影

马黑黑 发表于 2024-11-1 19:41
从整体思路上看，帖子的实现方式很得分。细节设计问题：

谢谢黑黑指点，原来是再加个变量上去才可以。
已经改到主贴里去了。

红影

秋思梦景 发表于 2024-11-1 19:54
精美代码音画，精心制作分享！为您点赞！

谢谢秋思梦景的鼓励，很多细节的东西还是没弄到位

小文

一直没看懂《无间道》这个电影，现在看了恩师的解说，对无间道有了一个基本的了解了，真好！喜欢这样的图，很引人入胜。

马黑黑

红影 发表于 2024-11-1 21:31
谢谢黑黑指点，原来是再加个变量上去才可以。
已经改到主贴里去了。

这是一个思路，你可以考虑其他的。

--state 变量任务重，小范围的交互不应在为难它

马黑黑

红影 发表于 2024-11-1 21:28
嗯，我也是想到捕捉粒子不容易，也想让svg背点击暂停，只是实现方法上不合适。谢谢黑黑的指点，原来不无 ...

--state 这个变量，已经由audio诸多事件监听了，:hover 再去管它会有冲突。不过也有处理方法：

xxx:hover { --state: paused !important; }

红色关键字能确保 xxx:hover 处在优先级别上。

红影

小文 发表于 2024-11-1 22:00
一直没看懂《无间道》这个电影，现在看了恩师的解说，对无间道有了一个基本的了解了，真好！喜欢这样的图， ...

其实这电影我都没看过，就是听了这歌觉得喜欢，就拿来做帖子了

红影

马黑黑 发表于 2024-11-1 22:08
这是一个思路，你可以考虑其他的。

--state 变量任务重，小范围的交互不应在为难它

我前面为难了一下它，结果效果挺不理想