粒子基础参数配置
支持对粒子的核心属性进行精细控制。您可以自由调整粒子数量(从 0 到数千个)、粒子大小范围(最小值和最大值独立设置)、透明度(0 到 1 之间的精确数值)、移动速度以及移动方向。这些基础参数构成了粒子效果的骨架,通过合理搭配可以创造出从稀疏星空到密集烟雾的各种视觉效果。粒子数量的设置范围足够宽泛,既能满足性能敏感场景下的轻量需求,也能实现高密度的视觉冲击。
多样化粒子形状支持
工具支持五种粒子形状:Circle(圆形)、Square/Edge(方形)、Triangle(三角形)、Polygon(多边形)和 Star(星形)。对于多边形形状,您可以自定义边数,从最基本的三角形到复杂的多边形都能轻松实现。星形粒子支持设置角数,可以创建从简单的四角星到华丽的多角星等效果。每种形状都具有独特的视觉特征,圆形柔和自然,方形现代简约,三角形动感十足,多边形和星形则适合需要特殊视觉效果的场景。
灵活的颜色系统
颜色配置支持两种模式:单色模式和调色板随机模式。单色模式下,您可以为所有粒子指定统一的颜色;调色板随机模式则允许您定义一组颜色,每个粒子会从调色板中随机选取一种颜色,创造出丰富多彩的视觉效果。此外,工具还支持粒子描边设置,包括描边颜色和描边宽度,为粒子增添轮廓效果。背景颜色也可以自由设置,确保粒子效果与页面整体设计风格保持协调。透明度参数让您可以创建从完全不透明到若隐若现的各种效果。
粒子连线系统
连线功能可以在距离较近的粒子之间绘制连接线,创造出类似星座网络或神经网络的视觉效果。您可以控制连线是否启用、连线的最大距离、线条颜色、线条宽度以及线条透明度。通过调整距离参数,您可以控制连线的密度——距离越大,连线越密集;距离越小,只有非常接近的粒子之间才会产生连线。连线颜色支持独立设置,可以与粒子颜色形成对比或呼应,线条宽度则影响连线的视觉强度。这一功能特别适合科技感、未来感的网页设计场景。
丰富交互效果
工具提供完整的鼠标交互配置能力。悬停(Hover)效果支持三种模式:Grab(抓取,鼠标靠近时粒子与鼠标之间产生连线)、Bubble(气泡,鼠标靠近时粒子膨胀变大)和 Repulse(排斥,鼠标靠近时粒子被推开)。点击(Click)效果同样提供三种模式:Push(按下时从鼠标位置发射新粒子)、Remove(点击删除附近的粒子)和 Bubble/Repulse。每种交互模式都可以独立启用或禁用,让您可以根据页面需求灵活组合交互行为,增强用户参与感和页面趣味性。
预设效果与随机化
内置 8 种精心设计的预设效果,一键即可应用:Default(经典粒子飘浮)、Snow(雪花飘落效果)、Night Sky(夜空星空效果)、Fireflies(萤火虫闪烁效果)、Bubbles(气泡上升效果)、Neon(霓虹灯效果)、Lines(线条网络效果)和 Confetti(彩纸飘散效果)。每个预设都针对特定场景进行了参数优化,可以直接使用或作为定制的起点。此外,随机化配置按钮可以一键生成全新的随机参数组合,帮助您快速探索意想不到的粒子效果,激发创作灵感。
配置导入导出系统
工具提供完善的配置管理功能。您可以一键复制 JSON 配置到剪贴板,方便直接粘贴到项目文件中;支持下载为 .json 文件,便于存档和版本管理;还支持导入已有的 Particles.js 配置文件,在其基础上进行修改和优化。这种灵活的导入导出机制让您可以在不同项目间轻松复用配置方案,也可以将团队成员的配置进行共享和协作。所有导出的配置都完全兼容标准 Particles.js 库的格式要求,无需额外修改即可直接使用。
UD5工具箱