修改完善了一个可互动的动态背景-几何粒子星空连线

[i=s] 本帖最后由 TRIM 于 2024-3-8 12:04 编辑 [/i]

使用效果

这个帖子就是其中一个最好的效果！

如果你想看浅色主题下的效果，请移步至

浅色主题应用效果

（对不起啦，有些板块发帖不允许使用html代码，我只好在这发帖了）

这个背景起初是我在CSDN上看到的：

javascript实现几何粒子星空连线背景效果

但是，在使用过程中，发现了以下问题：

1.在原代码中，粒子在鼠标一定范围内会被吸引，但当鼠标悬停过长时间，粒子会聚集在鼠标周围“鬼畜”

想出了一个办法：在drawLine函数中传入粒子运动的dx和dy（xy方向位移变化量），计算出角度，若粒子与鼠标连线和这个角度的夹角大于90度，则不吸引（修改后代码第111~123行）

这样一来，粒子在飞向鼠标时会与鼠标互动，飞出鼠标方向后便不会被一直“拽着”，互动的效果更好了

2.作者设置粒子碰到边缘反弹，我认为不反弹，将粒子显现出飞入飞出的效果会更好

但发现如果碰到边缘后粒子马上消失，连线也会瞬间断掉，更加生硬了......

只好“扩展”了画布，大小往两边100。并且在y轴的出现消失位移上做了优化，同时也方便了对第3点的改进（修改后代码第77~93行）

这样，粒子可以自由飞出屏幕，移动至另一边相对位置再飞入，“广阔”的感觉就出来了

3.在滚动页面时背景不会动，略显单调

添加了页面滚动时粒子在y方向的位移，移动距离为页面滚动距离的1/5，凸显层次感

另外，还修了一些原有的小bug，随机粒子大小等......

不管怎么说，这东西在修改后可以直接拿去用啦！效果超级棒！

↓ 在下面下载修改后的文件和代码 ↓

WOW！！！梦幻，好玩！