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

2024-03-054356
AI 快速预览详细 收起
本文介绍了对几何粒子星空连线动态背景的优化方法。通过改进粒子运动算法,避免了粒子在鼠标周围聚集的问题;扩展画布使粒子可以自由飞出屏幕,增加了广阔感;添加页面滚动效果,提升了层次感。这些改进使得互动效果更加流畅自然。


使用效果

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

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

浅色主题应用效果


(对不起啦,有些板块发帖不允许使用html代码,我只好在这发帖了)


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

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

但是,在使用过程中,发现了以下问题:

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

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

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


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

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

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

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


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

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


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

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

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

strbkg.png (9.65 KB, 下载次数: 3528)

效果

几何粒子星空连线 · 动态背景优化教程_image_3.webp

几何粒子星空连线动态背景.zip

7.58 KB, 下载次数: 5014

创作许可协议

本项目采用 None(不开放任何权利,保留所有权利) 进行许可。

评论(1)
木子哦
木子哦
WOW!!!梦幻,好玩!
- 没有更多了 -