论坛 › 音乐沙龙 › Our Only Hope（main)

马黑黑 发表于 2024-10-22 12:12

Our Only Hope（main)

<style>
    #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; }
    #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); }
    #bg { transition: 1s; }
    @keyframes rot {to { transform: rotate(360deg); }}
</style>

<svg id="msvg" width="1024" height="640"></svg>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=36668622" autoplay loop></audio>

<script>

new Promise((resolve) => {
        var sc = document.createElement('script');
        sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
        document.body.appendChild(sc);
        sc.onload = () => resolve();
}).then(() => {
        var dr = _dr(msvg);
        dr.image('https://638183.freep.cn/638183/t24/4/hope.jpg',0,0,1024,640);
        dr.image('https://638183.freep.cn/638183/web/svg/balls2.svg',0,0,1024,640).id('bg');
        dr.g('g1');
        dr.ellipse(490,310,100,40).addTo('g1');
        dr.ellipse(490,310,40,100).addTo('g1');
}).then(() => {
        aud.onplaying = aud.onpause = () => mState();
        g1.onclick = () => aud.paused ? aud.play() : aud.pause();
});

mState = () => {
    g1.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    bg.style.opacity = aud.paused ? 0 : 1;
}

</script>

马黑黑 发表于 2024-10-22 12:22

本帖最后由 马黑黑 于 2024-10-22 12:24 编辑

帖子代码：

<style>
    #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; }
    #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); }
    #bg { transition: 1s; }
    @keyframes rot {to { transform: rotate(360deg); }}
</style>

<svg id="msvg" width="1024" height="640"></svg>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=36668622" autoplay loop></audio>

<script>
new Promise((resolve) => {
      var sc = document.createElement('script');
      sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
      document.body.appendChild(sc);
      sc.onload = () => resolve();
}).then(() => {
      var dr = _dr(msvg);
      dr.image('https://638183.freep.cn/638183/t24/4/hope.jpg',0,0,1024,640);
      dr.image('https://638183.freep.cn/638183/web/svg/balls2.svg',0,0,1024,640).id('bg');
      dr.g('g1');
      dr.ellipse(490,310,100,40).addTo('g1');
      dr.ellipse(490,310,40,100).addTo('g1');
}).then(() => {
      aud.onplaying = aud.onpause = () => mState();
      g1.onclick = () => aud.paused ? aud.play() : aud.pause();
});

mState = () => {
    g1.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    bg.style.opacity = aud.paused ? 0 : 1;
}
</script>本帖测试 svg drawer 在论坛发帖的适应状况。由于论坛加载较多的资源，以 appendChild 方式加载插件后出现后续一些异步执行指令的问题，在获取特定绘制的svg元素时返回null（空），所以使用了 JS 的 Promise 一步一步执行帖子运行的子项：① 加载JS插件，完后， ② 声明画笔 dr 接着绘制图像，接着， ③ 这时可以获取到svg内的子元素了，就加入监听 audio 标签、监听 g1（svgdrawer 画的播放器）相关事件。

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

梦江南 发表于 2024-10-22 14:57

背景图好酷，特效更漂亮！{:4_199:}

梦江南 发表于 2024-10-22 14:57

老师辛苦，学习了。{:4_190:}

花飞飞 发表于 2024-10-22 16:39

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

花飞飞 发表于 2024-10-22 16:40

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

花飞飞 发表于 2024-10-22 16:45

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

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

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

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

花飞飞 发表于 2024-10-22 18:53

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

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

绿叶清舟 发表于 2024-10-22 19:20

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

红影 发表于 2024-10-22 20:11

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

红影 发表于 2024-10-22 20:13

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

红影 发表于 2024-10-22 20:18

讲解里的一步步讲解很清晰，黑黑辛苦了{:4_199:}

醉美水芙蓉 发表于 2024-10-22 20:51

马黑黑 发表于 2024-10-22 21:22

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

{:4_190:}

马黑黑 发表于 2024-10-22 21:23

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

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

马黑黑 发表于 2024-10-22 21:29

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

正确

马黑黑 发表于 2024-10-22 21:29

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

之前用过的

马黑黑 发表于 2024-10-22 21:31

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


Promise，承诺，then，然后

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

马黑黑 发表于 2024-10-22 21:32

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

{:4_190:}

马黑黑 发表于 2024-10-22 21:32

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

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

查看完整版本: Our Only Hope（main)