Truck

马黑黑

马黑黑

帖子代码：

1. <style>
   
2. #pa { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/truck.webp') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
   
3. .myball { offset-path: path('M 765 75 Q 950 400,590 526 T 0 0'); offset-distance: 0%; animation: move 10s var(--delay) linear infinite var(--state); }
   
4. #player { cursor: pointer; transform-box: fill-box; transform-origin: center; animation:rot 10s linear infinite var(--state) }
   
5. @keyframes move { to { offset-distance: 100%; } }
   
6. @keyframes rot { to { transform: rotate(360deg); } }
   
7. </style>
   
8. 
   
9. <div id="pa">
   
10.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33682225" autoplay loop></audio>
    
11.         <svg id="msvg" width="100%" height="100%"></svg>
    
12. </div>
    
13. 
    
14. <script>
    
15. var sc = document.createElement('script');
    
16. sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
    
17. document.body.appendChild(sc);
    
18. 
    
19. sc.onload = () => {
    
20.         var dr = _dr(msvg);
    
21.         dr.defs('defs'); //创建defs标签
    
22.         //小球
    
23.         dr.g('g1').addTo('defs');
    
24.         dr.circle(0,0,6,'#fff').addTo('g1');
    
25.         for(i = 0; i < 20; i ++) {
    
26.                 let delay = -0.5 * i + 's';
    
27.                 dr.use('#g1').set('class', 'myball').style(`--delay: ${delay}`);
    
28.         }
    
29.         //渐变
    
30.         var stop = `
    
31.           <stop offset="0%" stop-color="darkred"/>
    
32.           <stop offset="50%" stop-color="green"/>
    
33.           <stop offset="100" stop-color="red"/>
    
34.         `;
    
35.         var attr = {id: 'lgd', x1: 1, x2: 0, y1: 1, y2: 1};
    
36.         dr.gradient('linearGradient', attr, stop);
    
37.         //小播 : path 添加到 player
    
38.         dr.g('player').addTo('defs');
    
39.         for(var i = 0, tt = 10; i < tt; i++) {
    
40.                 dr.path('M80 80 Q-120 90, 50 10', 'transparent', 'url(#lgd)', 8, 'round').transform(`rotate(${360/tt*i} 80 80)`).addTo('player');
    
41.         }
    
42.         dr.use('#player', 450, 300); //实例化小播
    
43.         aud.onplaying = aud.onpause = () => mState();
    
44.         player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
45.         mState = () => {
    
46.                 pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
47.         };
    
48. };
    
49. </script>

复制代码

马黑黑

帖子思路：

（一）帖子容器是一个div标签，加载了背景图片；
（二）帖子容器下装载音频标签和 svg 标签，其中，svg 标签内容为空，它将由 JS 完成动态效果的绘制；
（三）JS绘制动态效果：

使用还在开发中的 svgdr 插件绘制svg所有内容。先加载插件（14-17行），然后在资源的 onload 事件中封装JS要完成的工作，这样可以不必使用 Promise 机制。

绘制流程简述如下：

① 声明svg画笔（20行），参数 msvg 必须和HTML代码中的 svg id 相一致；

② 创建defs标签用来装载分组、渐变等代码，参数是defs的 id，后续将元素加载到defs标签的依据（21行）；

③ 绘制小球（23-28行）：小球放入分组 g1，g1 放进 defs；

④ 创建一个渐变效果（小播用），渐变也加入到 defs标签中（30-36行）；

⑤ 绘制小播（37-42）：小播使用路径绘制，它的 fill 属性使用了前面创建的渐变效果。用for语句绘制多条路经，放入id="player" 的g分组，g分组放入defs标签中，然后通过 use 实例化该分组；

⑥ 其他，如监听音频状况、音频联动动画、小播点击事件等

马黑黑

帖子的实现可以不使用 svgdr，可以考虑将相同的效果写成或通过svgdr生成 XML代码，然后将这些代码放在svg标签内，这样JS部分就会非常简洁

小文

很欣赏

梦江南

跟着黑黑老师学代码。辛苦了！

花飞飞

令人赞叹的设计，先说背景图片色彩和空间感都令人震憾。。天空之上的感觉，美。。搭上这样的音乐，更有神秘之感。。

花飞飞

小播设计颜值很高，红绿这么难驾驭的色彩，硬是让白老师一次一次用出这么高级的感觉。不愧是天选之色。。
小播乍一看以为是径向渐变，仔细看完代码才发现是线性渐变。。。应该每个线条单独来看，10片这样的线条组合起来，成花儿一样的效果，这个构思绝了。。
单个线条路径设计也是神来之笔。。单看很不起眼也很普通，组合在一起就是惊艳。。

花飞飞

小球路径设计很难的吧，要从月亮边上小白点出发，再到左上角结束，又是一个根据背景图片微调位置的贴子，要细心和耐心，花大量的时间。。（或者老师不用，眼睛就是尺）

小球数量小于20个，半径为6，每个小球出现时间比上一个延迟0.5，形成这样运动轨迹。
小球做为对象添加到到g1分组里面的。。

花飞飞

马黑黑 发表于 2024-10-24 12:13
帖子思路：

（一）帖子容器是一个div标签，加载了背景图片；

这个解释超级详细，层次分明。。
神奇的是 <svg id="msvg" width="100%" height="100%"></svg>这个空标签横空出世，划一块地儿给JS描绘。。
这些设计都令人拍案叫绝。。
原来可以这样纸处理。。

花飞飞

马黑黑 发表于 2024-10-24 12:15
帖子的实现可以不使用 svgdr，可以考虑将相同的效果写成或通过svgdr生成 XML代码，然后将这些代码放在svg标 ...

相同的效果通过svgdr生成 XML代码，这得有深厚的功底才能做到的节奏

红影

小球的路径是css路设置的二次贝塞尔曲线，JS里给它形状和个数。
小播是在JS里画的二次赛贝尔曲线，而且设置了渐变，这个曲线设置得好，10条正好能连上，看起来像内部呈圆环了。
黑黑把这些效果用得挥洒自如

红影

dr.path('M80 80 Q-120 90, 50 10', 'transparent', 'url(#lgd)', 8, 'round').transform(`rotate(${360/tt*i} 80 80)`).addTo('player');
是因为M80 80的缘故么，咋感觉应该是反向移动，去试了，不行的

红影

var attr = {id: 'lgd', x1: 1, x2: 0, y1: 1, y2: 1};这个是从右到左吧，不是45度了。如果x1: 0, x2: 1，深红和红就换了。
<stop offset="0%" stop-color="darkred"/>
<stop offset="50%" stop-color="green"/>
<stop offset="100" stop-color="red"/>这个100这里不用加 %？0那里也不用的吧。

红影

很奇妙的场景和音乐，很奇妙的svg效果。

马黑黑

小文 发表于 2024-10-24 12:30
很欣赏

晚上好

马黑黑

梦江南 发表于 2024-10-24 14:03
跟着黑黑老师学代码。辛苦了！

马黑黑

醉美水芙蓉 发表于 2024-10-24 16:49
欣赏老师带来的精彩！

马黑黑

花飞飞 发表于 2024-10-24 17:47
令人赞叹的设计，先说背景图片色彩和空间感都令人震憾。。天空之上的感觉，美。。搭上这样的音乐，更有神秘 ...