一圈圈抛出的svg粒子

马黑黑

马黑黑

上面的代码，svg标签里有两个带网址的命名空间，它们不能缺少和改动，否则存为 .svg 文档时会出错。

马黑黑

为方便朋友们定制，现将一楼代码公布如下，后面有简单说明：

1. <svg version="1.1" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
   
2. <p><br><br><input id="mkcode" type="button" value="显示svg代码" onclick="txtbox.style.display='inline-block';" /></p>
   
3. <p><br><br><textarea id="txtbox" style="min-width: 600px; min-height: 300px; display: none;"></textarea></p>
   
4. 
   
5. <script>
   
6. generateAni = (total) => {
   
7.         if(total % 2 === 0) total += 1;
   
8.         var str = '', dur = 6, delay = (dur / 6).toFixed(2);
   
9.         var size = svg.clientWidth / 2, r = 5;
   
10.         Array(total).fill(0).forEach((a,b) => {
    
11.                 a = b + 1;
    
12.                 var beginstr = b % 3 === 0 ? `a2.begin+${delay}s` : ( b % 2 === 0 ? `a1.begin+${delay}s` : `0s;a3.begin+${delay}s`);
    
13.                 var color = `#${Math.random().toString(16).substring(2,8)}`;
    
14.                 str += `<circle cx="${size}" cy="${size}" r="${r}" fill="${color}" transform="rotate(${360/total*b} ${size} ${size})"><animate id="a${a}" attributeName="cy" from="${size}" to="${size*4}" dur="${dur}s" begin="${beginstr}" /></circle>`;
    
15.         });
    
16.         return str;
    
17. };
    
18. 
    
19. var svg = document.querySelector('svg');
    
20. svg.innerHTML = generateAni(60);
    
21. txtbox.value = svg.outerHTML;
    
22. </script>

复制代码

svg 的 width 和 height 属性值可以更改，建议宽高一致；更改后，viewBox 的宽高要跟随更改；

函数 generateAni() 内的 dur = 6 是动画周期时长，可以更改；r = 5 是小球半径，可以更改；

svg.innerHTML = generateAni(60); 这一行是运行函数，参数 60 表示生成 60 个小圆球，数量可以更改

红影

那个显示代码就是3楼代码运算后结果吧

红影

看角度数值，那些小球在圆上的分布不是6度，也就是不是360平分60份，看计算结果，好像分成了61份。

马黑黑

红影 发表于 2024-9-16 22:40
那个显示代码就是3楼代码运算后结果吧

是的，这是明显看得出来的。为了方便将代码存为 .svg 文档

马黑黑

红影 发表于 2024-9-16 22:45
看角度数值，那些小球在圆上的分布不是6度，也就是不是360平分60份，看计算结果，好像分成了61份。

小圆球实际上都位于svg画布的中心，它们旋转并移位（改变cy坐标值），达成分散的效果

红影

把动画周期时长改成9，小环出现得更密集了

红影

漂亮的粒子效果

马黑黑

红影 发表于 2024-9-16 22:53
把动画周期时长改成9，小环出现得更密集了

调节变量值甚至算式都可以，效果是自己想要的就行

红影

马黑黑 发表于 2024-9-16 22:47
是的，这是明显看得出来的。为了方便将代码存为 .svg 文档

一般查询文档只能看到运算后的结果么？

红影

马黑黑 发表于 2024-9-16 22:52
小圆球实际上都位于svg画布的中心，它们旋转并移位（改变cy坐标值），达成分散的效果

to="${size*4}"看到都是移动到800，换小点让它*2，就觉得没那么好看。这个倍数倒挺合适的

马黑黑

红影 发表于 2024-9-16 23:01
一般查询文档只能看到运算后的结果么？

这是什么意思？

红影

马黑黑 发表于 2024-9-16 22:58
调节变量值甚至算式都可以，效果是自己想要的就行

能在这效果上改一下看看效果就不错了，自己设计效果不会啊

马黑黑

红影 发表于 2024-9-16 23:03
to="${size*4}"看到都是移动到800，换小点让它*2，就觉得没那么好看。这个倍数倒挺合适的

其实也就是将小球移出画布的半径，可以适当调整，或弄个算式一劳永逸

马黑黑

红影 发表于 2024-9-16 23:05
能在这效果上改一下看看效果就不错了，自己设计效果不会啊

一般也不会有什么难度。做法流程：先构思好自己想要的结果，然后写JS代码生成svg代码。JS里用到的只是也不多，来来去去就是就是一些声明、小算式、生成并返回代码之类的。然后将生成的代码赋予svg元素，在赋予代码框显示出来。

起个网名好难

似乎粒子分布并非均匀的，有意为之？

起个网名好难

马黑黑 发表于 2024-9-16 22:27
为方便朋友们定制，现将一楼代码公布如下，后面有简单说明：
svg 的 width 和 height 属性值可以更改，建 ...

${}有点多看得头晕

                               
登录/注册后可看大图

红影

马黑黑 发表于 2024-9-16 23:03
这是什么意思？

点开来的代码和你3楼给出的不一样啊。

红影

马黑黑 发表于 2024-9-16 23:05
其实也就是将小球移出画布的半径，可以适当调整，或弄个算式一劳永逸

这个移出半径大点反倒更好看点，其实五六百就够移出了，但散开的效果貌似不太相同。