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

红影发表于 2024-11-1 15:50

红影发表于 2024-11-1 15:55

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

红影发表于 2024-11-1 15:58

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

起个网名好难 发表于 2024-11-1 16:00

两把管制刀具啊{:5_106:}

红影发表于 2024-11-1 16:01

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

对这歌词特别有感触。

红影发表于 2024-11-1 16:02

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

那是双方在对决的意思{:4_173:}

起个网名好难 发表于 2024-11-1 16:18

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

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

梦油发表于 2024-11-1 17:12

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

马黑黑 发表于 2024-11-1 19:41

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

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

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

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

<style>
#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;
border-radius:32px; }
/* 加一个CSS变量 --deg: 360deg; */
#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; }
.ball { filter: drop-shadow(-10px -10px 20px darkred); transition: .4s; cursor: pointer; animation: flash .1s var(--delay) linear infinite alternate var(--state); }
.ball:hover { r: 14; }
/* #mysvg:hover { --state: paused; } 换成下一句 */
#mysvg:hover { --deg: -720deg; }
#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; }
@keyframes flash { to { opacity: .5; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div id="tz" data-lrc="无间道">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2070130101" autoplay loop></audio>
<svg id="mysvg"></svg>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

sc.onload = () => {
var dr = _dr(mysvg), balls = [];
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');
var len = path.getTotalLength();
for(var i = 0, tt = 72; i < tt; i ++) {
var point = path.getPointAtLength(len / tt * i);
var color = 'Gainsboro',
delay = Math.random() * i * -0.1;
dr.circle(point.x,point.y,5,color).set('class','ball').style(`--delay: ${delay}s`);
balls.push(dr.elm);
}
//balls.forEach(b => b.onclick = () => {
// dr.svg.style.setProperty('--state', ['paused','running'][+aud.paused]);
// aud.paused ? aud.play() : aud.pause();
//});
mysvg.onclick = () => {
mysvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? aud.play() : aud.pause();
}
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
};

var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
   let result = item.match(reg);
   let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
   lrcAr.push(.trim()]);
});
};
aud.onseeked = () => curkey = 0;
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
   tz.dataset.lrc = lrcAr;
   curkey ++;
}
};
var lrc = `
电影《无间道》主题曲
原唱：刘德华、梁朝伟
翻唱歌手：回歌肉
作词作曲：林夕、伍乐城
学习黑黑战争艺术代码
不我不愿意结束
我还没有结束
无止境的旅途
看着我没停下的脚步
已经忘了身在何处
谁能改变人生的长度
谁知道永恒有多么恐怖
谁了解生存往往比命运还残酷
只是没有人愿意认输
我们都在不断赶路忘记了出路
在失望中追求偶尔的满足
我们都在梦中解脱清醒的苦
流浪在灯火阑珊处
去不到终点回到原点
享受那走不完的路
谁能改变人生的长度
谁知道永恒有多么恐怖
谁了解生存往往比命运还残酷
只是没有人愿意认输
我们都在不断赶路忘记了出路
在失望中追求偶尔的满足
我们都在梦中解脱清醒的苦
流浪在灯火阑珊处
去不到终点回到原点
享受那走不完的路
一路上演出难得糊涂
一路上回顾难得麻木
在这条亲密无间的路
让我像你你像我怎么会孤独
我们都在不断赶路忘记了出路
在失望中追求偶尔的满足
我们都在梦中解脱清醒的苦
流浪在灯火阑珊处
既然没终点回到原点
我想我们都不不在乎
`;
getAr(lrc);
</script>

秋思梦景 发表于 2024-11-1 19:54

精美代码音画，精心制作分享！为您点赞！{:4_199:}{:4_204:}

红影发表于 2024-11-1 21:24

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

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

红影发表于 2024-11-1 21:26

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

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

红影发表于 2024-11-1 21:28

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

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

红影发表于 2024-11-1 21:31

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

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

红影发表于 2024-11-1 21:36

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

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

小文发表于 2024-11-1 22:00

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

马黑黑 发表于 2024-11-1 22:08

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

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

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

马黑黑 发表于 2024-11-1 22:12

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

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

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

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

红影发表于 2024-11-1 23:03

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

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

红影发表于 2024-11-1 23:04

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

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

我前面为难了一下它，结果效果挺不理想{:4_173:}

页: [1] 2 3 4 5 6 7 8 9

花潮论坛's Archiver

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