战争艺术
<style>#tz { margin: 30px 0 30px calc(50% - 621px); width: 1080px; height: 608px; background: url('https://638183.freep.cn/638183/t24/webp2/war.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; }
#mysvg { --state: running; position: absolute; left: calc(50% - 300px); top: calc(50% - 250px); width: 600px; height: 500px; }
.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: 30; }
@keyframes flash { to { opacity: .5; } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1941982" 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('M300 160 Q-200 -150,300 450 Q800 -150,300 160', 'none','none').id('path');
var len = path.getTotalLength();
for(var i = 0, tt = 30; i < tt; i ++) {
var point = path.getPointAtLength(len / tt * i);
var color = '#' + Math.random().toString(16).substring(2,8),
delay = Math.random() * i * -0.1;
dr.circle(point.x,point.y,20,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();
});
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
};
</script>
<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#tz { margin: 30px 0 30px calc(50% - 621px); width: 1080px; height: 608px; background: url('https://638183.freep.cn/638183/t24/webp2/war.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; }
#mysvg { --state: running; position: absolute; left: calc(50% - 300px); top: calc(50% - 250px); width: 600px; height: 500px; }
.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: 30; }
@keyframes flash { to { opacity: .5; } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1941982" 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('M300 160 Q-200 -150,300 450 Q800 -150,300 160', 'none','none').id('path');
var len = path.getTotalLength();
for(var i = 0, tt = 30; i < tt; i ++) {
var point = path.getPointAtLength(len / tt * i);
var color = '#' + Math.random().toString(16).substring(2,8),
delay = Math.random() * i * -0.1;
dr.circle(point.x,point.y,20,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();
});
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
};
</script>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>
这个图挺特别的。 34行代码：
aud.play() 是播放音频指令。audio控件的播放会返回一个 promise，当不能返回正常值时一般的原因是浏览器没有开启自动播放声音的设置，所以用 catch 去捕捉到错误，并令svg（或对应宿主元素）的 --state 变量设为暂停值，得到的结果是 --state 变量所能作用的动画不播放。
这是简单处理，有一个预设，就是音乐地址是真实有效可访问的。全方位检测播放错误代码量会增多，对帖子来讲会头重脚轻。
catch机制需要audio标签配套，不要 autoplay 属性，autoplay 是自动播放，优先级别高于 play 方法。 早上问好老师，辛苦了！{:4_190:} 效果新颖，学习了{:4_204:} 这个元素闪烁动画的实例，这里的小球还是带阴影的。漂亮{:4_199:} 这个路径图案也有趣，心形的，怪不得残酷的战争也能被叫做艺术，双方明明是同归于尽的感觉{:4_173:} 马黑黑 发表于 2024-10-30 07:45
34行代码：
aud.play() 是播放音频指令。audio控件的播放会返回一个 promise，当不能返回正常值时一般的 ...
这个catch貌似头一次见呢，感谢黑黑的详细讲解{:4_187:} 战斗民族骨子里的战斗基因觉醒。。。
看到这标题就想，东风不知道准备好了木有呀。。{:4_173:}
来个伏尸万里，血流成河。。 这个圆片片有了背景衬托闪亮效果更好。。。看代码小球有阴影，触碰可变大一些。。。
所有小球都可以控制动态，这个虽然用了好几次，但感觉还是很牛。。 醉美水芙蓉 发表于 2024-10-30 11:46
欣赏老师带来的精彩！
{:4_190:} 醉美水芙蓉 发表于 2024-10-30 11:45
咦！小球有变化！
{:4_181:} 红影 发表于 2024-10-30 09:54
这个catch貌似头一次见呢，感谢黑黑的详细讲解
then ... catch ... finally 什么的是子ES6以来有的 愤怒的葡萄 发表于 2024-10-30 07:44
这个图挺特别的。
中午好 梦江南 发表于 2024-10-30 08:37
早上问好老师，辛苦了！
{:4_191:} 朵拉 发表于 2024-10-30 09:13
效果新颖，学习了
{:4_190:} 红影 发表于 2024-10-30 09:47
这个元素闪烁动画的实例，这里的小球还是带阴影的。漂亮
{:4_190:}