论坛 › 马黑黑教程专版 › 一圈圈抛出的svg粒子

马黑黑 发表于 2024-9-16 22:18

一圈圈抛出的svg粒子

本帖最后由 马黑黑 于 2024-9-16 22:22 编辑 <br /><br /><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>
<p><br><br><input id="mkcode" type="button" value="显示svg代码" onclick="txtbox.style.display='inline-block';" /></p>
<p><br><br><textarea id="txtbox" style="min-width: 600px; min-height: 300px; display: none;"></textarea></p>

<script>
generateAni = (total) => {
        if(total % 2 === 0) total += 1;
        var str = '', dur = 6, delay = (dur / 6).toFixed(2);
        var size = svg.clientWidth / 2, r = 5;
        Array(total).fill(0).forEach((a,b) => {
                a = b + 1;
                var beginstr = b % 3 === 0 ? `a2.begin+${delay}s` : ( b % 2 === 0 ? `a1.begin+${delay}s` : `0s;a3.begin+${delay}s`);
                var color = `#${Math.random().toString(16).substring(2,8)}`;
                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>`;
        });
        return str;
};

var svg = document.querySelector('svg');
svg.innerHTML = generateAni(60);
txtbox.value = svg.outerHTML;
</script>

马黑黑 发表于 2024-9-16 22:23

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

马黑黑 发表于 2024-9-16 22:27

本帖最后由 马黑黑 于 2024-9-16 22:33 编辑

为方便朋友们定制，现将一楼代码公布如下，后面有简单说明：<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>
<p><br><br><input id="mkcode" type="button" value="显示svg代码" onclick="txtbox.style.display='inline-block';" /></p>
<p><br><br><textarea id="txtbox" style="min-width: 600px; min-height: 300px; display: none;"></textarea></p>

<script>
generateAni = (total) => {
      if(total % 2 === 0) total += 1;
      var str = '', dur = 6, delay = (dur / 6).toFixed(2);
      var size = svg.clientWidth / 2, r = 5;
      Array(total).fill(0).forEach((a,b) => {
                a = b + 1;
                var beginstr = b % 3 === 0 ? `a2.begin+${delay}s` : ( b % 2 === 0 ? `a1.begin+${delay}s` : `0s;a3.begin+${delay}s`);
                var color = `#${Math.random().toString(16).substring(2,8)}`;
                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>`;
      });
      return str;
};

var svg = document.querySelector('svg');
svg.innerHTML = generateAni(60);
txtbox.value = svg.outerHTML;
</script>
svg 的 width 和 height 属性值可以更改，建议宽高一致；更改后，viewBox 的宽高要跟随更改；

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

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

红影 发表于 2024-9-16 22:40

那个显示代码就是3楼代码运算后结果吧{:4_204:}

红影 发表于 2024-9-16 22:45

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

马黑黑 发表于 2024-9-16 22:47

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

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

马黑黑 发表于 2024-9-16 22:52

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

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

红影 发表于 2024-9-16 22:53

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

红影 发表于 2024-9-16 22:55

漂亮的粒子效果{:4_199:}

马黑黑 发表于 2024-9-16 22:58

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

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

红影 发表于 2024-9-16 23:01

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

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

红影 发表于 2024-9-16 23:03

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

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

马黑黑 发表于 2024-9-16 23:03

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

这是什么意思？

红影 发表于 2024-9-16 23:05

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

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

马黑黑 发表于 2024-9-16 23:05

红影 发表于 2024-9-16 23:03
to="${size*4}"看到都是移动到800，换小点让它*2，就觉得没那么好看。这个倍数倒挺合适的
其实也就是将小球移出画布的半径，可以适当调整，或弄个算式一劳永逸

马黑黑 发表于 2024-9-16 23:09

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

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

起个网名好难 发表于 2024-9-17 09:42

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

起个网名好难 发表于 2024-9-17 09:51

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

${}有点多看得头晕
https://img.mp.itc.cn/upload/20160813/2883496ef34b4e7cb9121c4364010c03.jpg

红影 发表于 2024-9-17 10:41

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

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

红影 发表于 2024-9-17 10:44

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

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

查看完整版本: 一圈圈抛出的svg粒子