2024-3-5 18:38:01 [显示全部楼层]
1013浏览
查看: 1013|回复: 1

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

[复制链接]
[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,随机粒子大小等......

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

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

效果

效果

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

7.58 KB, 下载次数: 2385

木子呢  管理员

发表于 2024-3-5 19:02:01

WOW!!!梦幻,好玩!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail