Our Only Hope（main)

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.     #msvg { display: block; margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; box-shadow: 2px 2px 4px gray; z-index: 1; position: relative; }
   
3.     #g1 { fill: transparent; stroke: purple; stroke-width: 10; cursor: pointer; transform-box: fill-box; transform-origin:50% 50%; animation:rot 10s linear infinite var(--state); }
   
4.     #bg { transition: 1s; }
   
5.     @keyframes rot {to { transform: rotate(360deg); }}
   
6. </style>
   
7. 
   
8. <svg id="msvg" width="1024" height="640"></svg>
   
9. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=36668622" autoplay loop></audio>
   
10. 
    
11. <script>
    
12. new Promise((resolve) => {
    
13.         var sc = document.createElement('script');
    
14.         sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
    
15.         document.body.appendChild(sc);
    
16.         sc.onload = () => resolve();
    
17. }).then(() => {
    
18.         var dr = _dr(msvg);
    
19.         dr.image('https://638183.freep.cn/638183/t24/4/hope.jpg',0,0,1024,640);
    
20.         dr.image('https://638183.freep.cn/638183/web/svg/balls2.svg',0,0,1024,640).id('bg');
    
21.         dr.g('g1');
    
22.         dr.ellipse(490,310,100,40).addTo('g1');
    
23.         dr.ellipse(490,310,40,100).addTo('g1');
    
24. }).then(() => {
    
25.         aud.onplaying = aud.onpause = () => mState();
    
26.         g1.onclick = () => aud.paused ? aud.play() : aud.pause();
    
27. });
    
28. 
    
29. mState = () => {
    
30.     g1.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
31.     bg.style.opacity = aud.paused ? 0 : 1;
    
32. }
    
33. </script>

复制代码

本帖测试 svg drawer 在论坛发帖的适应状况。由于论坛加载较多的资源，以 appendChild 方式加载插件后出现后续一些异步执行指令的问题，在获取特定绘制的svg元素时返回null（空），所以使用了 JS 的 Promise 一步一步执行帖子运行的子项：① 加载JS插件，完后， ② 声明画笔 dr 接着绘制图像，接着， ③ 这时可以获取到svg内的子元素了，就加入监听 audio 标签、监听 g1（svgdrawer 画的播放器）相关事件。

mState() 函数是公用函数，可以独立，不用放在 promise 模块里，然后在 Promise 的第三步中执行它。

梦江南

背景图好酷，特效更漂亮！

梦江南

老师辛苦，学习了。

花飞飞

这是先建了一个画布。
接着建立分组g1，g1设置参数：填充为透明，描边紫色宽度为10，旋转中心点设在中间，10秒速。
JS里建立分组标签g1，把两个椭圆纳入g1分组，继承以上参数设置。这个是小播

花飞飞

背景bg变化给个1秒，对应的是粒子的透明度变化吧，当音乐暂停时直接变0了。
JS里加载粒子图片到画布，指向是bg，点击暂停时，粒子隐身。。。

花飞飞

马黑黑 发表于 2024-10-22 12:22
帖子代码：

本帖测试 svg drawer 在论坛发帖的适应状况。由于论坛加载较多的资源，以 appendChild 方式 ...

看到加了两个}).then(() => {
让它们分步进行的吧。跟正步走一样，完成一步再走下一步。

看来环境不同，执行方案也不一样。
白老师最厉害 了

花飞飞

现在来听个音乐，果然震撼，单曲循环好几遍。。
画面色彩艳丽，与粒子搭配完美。。。
粒子波动节奏与音乐节奏吻合，边看边听，美的享受

紫色小播旋转在背景衬托之下，有立体的感觉。。。

绿叶清舟

和原来的变化很大啊，开始 以为没用背景图的了

红影

这背景很有深邃的感觉，希望从中散发而出。很有寓意的制作

红影

让那散发的粒子暂停时隐形，这样的暂停效果也很独特。

红影

讲解里的一步步讲解很清晰，黑黑辛苦了

马黑黑

醉美水芙蓉 发表于 2024-10-22 20:51
欣赏老师佳作！

马黑黑

红影 发表于 2024-10-22 20:18
讲解里的一步步讲解很清晰，黑黑辛苦了

JS的单线程机制导致很多麻烦出现，阻滞、跳跃是常态，需要处理

马黑黑

花飞飞 发表于 2024-10-22 16:39
这是先建了一个画布。
接着建立分组g1，g1设置参数：填充为透明，描边紫色宽度为10，旋转中心点设在中间， ...

正确

马黑黑

红影 发表于 2024-10-22 20:13
让那散发的粒子暂停时隐形，这样的暂停效果也很独特。

之前用过的

马黑黑

花飞飞 发表于 2024-10-22 16:45
看到加了两个}).then(() => {
让它们分步进行的吧。跟正步走一样，完成一步再走下一步。

Promise，承诺，then，然后

Promise其实有两个函数参数，一个 resolve，一个reject，前者是承诺兑现了，后者是承诺爽约了。我简化了，只往好的去做

马黑黑

红影 发表于 2024-10-22 20:11
这背景很有深邃的感觉，希望从中散发而出。很有寓意的制作

马黑黑

绿叶清舟 发表于 2024-10-22 19:20
和原来的变化很大啊，开始 以为没用背景图的了

确实没有使用背景。这是直接在 svg 上画图，图有 jpg，有 .svg，有直接画的