UD5工具箱
第一步：了解界面布局
打开粒子特效生成器页面后，您会看到左侧为参数控制面板，右侧为实时预览的Canvas画布。控制面板从上到下依次排列着预设效果选择区、粒子基本参数区、形状与颜色区、连线配置区、鼠标交互区以及底部的控制按钮区。右侧画布会实时反映参数的任何变化，所见即所得。
第二步：选择预设效果快速体验
对于初次使用的用户，建议先点击不同的预设效果按钮，观察每种预设的视觉差异。点击「星空银河」可以看到缓慢漂移的白色粒子和淡淡的连线；切换到「霓虹雨」则变为彩色的下落粒子流；「火焰升腾」会呈现从底部涌出的橙红色粒子。通过预设效果的切换，您可以快速理解不同参数组合产生的视觉效果，为后续的自定义调整建立直觉。
第三步：调整粒子基本参数
在粒子参数区域，您可以通过滑块或直接输入数值来调整粒子数量、大小、速度和透明度。建议从粒子数量开始调整：将数量从默认的150减少到50，观察画面上粒子变稀疏后的效果；再增加到300，感受粒子密集时的视觉冲击。粒子大小从3px调到8px后，每个粒子变得更加醒目，适合做「气泡」类效果；调到1px则呈现细腻的星尘感。移动速度的调节会显著改变动画的节奏感，速度设为0.3时粒子缓慢漂移适合冥想类页面，设为3.0时则充满能量感。
第四步：自定义粒子形状与颜色
在形状选择区域，点击不同形状按钮即可切换。圆形是最通用的选择，方形适合科技或几何主题的设计，菱形增添独特的角度感，星形粒子自带闪耀效果特别适合梦幻场景。颜色配置方面，先从预设颜色主题中选择一个基础方案，然后可以点击颜色选择器自定义具体颜色。开启双色渐变后，设置起始颜色和结束颜色，粒子将在运动过程中实现平滑的颜色过渡，例如从蓝色渐变到紫色可以模拟极光效果。
第五步：配置连线效果
勾选连线开关后，粒子之间会自动绘制连接线。调整连线距离滑块：距离设为80px时只有非常接近的粒子才会连线，产生稀疏的星座效果；距离设为250px时大量粒子互相连接，形成密集的网络结构。连线透明度建议设为0.2到0.4之间，过高会使画面过于杂乱。连线效果特别适合科技主题、数据可视化背景或创意展示页面。
第六步：设置鼠标交互
鼠标交互是粒子特效的点睛之笔。选择「吸引」模式后移动鼠标，观察粒子跟随鼠标聚集的效果，非常适合用于互动展示页面。「排斥」模式则产生有趣的驱赶效果，粒子会主动避开鼠标。选择「环绕」模式并缓慢移动鼠标，可以看到粒子围绕鼠标形成旋涡。将影响范围从180px增大到300px，鼠标的影响范围会明显扩大。对于不需要鼠标交互的背景效果，选择「无交互」模式即可。
第七步：使用控制功能
点击「粒子爆发」按钮观察所有粒子从中心爆炸扩散的震撼效果，这个功能常用于页面加载完成时的动画或按钮点击反馈。「全屏」按钮将粒子效果扩展到整个浏览器窗口，适合做全屏背景展示。「截图保存」可以将当前粒子画面保存为PNG图片，方便用于设计稿或社交媒体分享。「暂停」按钮冻结动画，您可以仔细观察某一瞬间的粒子布局。
第八步：导出代码
完成所有参数配置后，点击「导出代码」按钮。工具会将当前的所有参数编译为一段完整的JavaScript代码。您可以直接点击「复制」按钮将代码复制到剪贴板，然后粘贴到任何HTML文件的script标签中即可运行。导出的代码是独立的，不依赖任何第三方库，仅使用原生Canvas API。代码中包含完整的粒子类定义、动画循环逻辑和参数配置，结构清晰，方便您进一步修改和扩展。
性能优化建议
如果导出的代码在目标设备上运行不流畅，可以通过以下方式优化：减少粒子数量到100以下；关闭连线功能；减小鼠标交互的影响范围；降低Canvas的分辨率。FPS显示功能可以帮助您监测实时性能，当帧率低于30fps时建议减少粒子数量。