无需登录 数据私有 本地保存

粒子特效生成器 - Canvas粒子动画代码

138
1
2
1

预设效果系统

工具内置7种精心调校的预设效果,每种预设都包含完整的参数配置方案,一键即可切换不同风格。星空银河预设模拟浩瀚宇宙中的繁星闪烁,粒子以极低速度随机漂移并带有微弱的连线效果;霓虹雨预设呈现赛博朋克风格的下落雨滴,粒子沿垂直方向加速下落并带有拖尾效果;火焰升腾预设模拟火焰燃烧的粒子上涌,粒子从底部生成并逐渐变透明消失;深海气泡预设营造水下世界的静谧氛围,气泡粒子从底部缓缓上升并伴有轻微的横向摆动;极光之舞预设展现北极光般的绚丽色彩变化,粒子沿弧线运动并带有丰富的颜色渐变;数字矩阵预设致敬黑客帝国经典场景,字符粒子沿垂直方向滚动;脉冲波纹预设以中心为原点向外扩散的同心圆环,呈现能量波动的视觉效果。

粒子参数配置

粒子数量控制面板支持10到500范围内的自由调节,默认值150个粒子在大多数场景下能够平衡视觉效果与渲染性能。粒子大小支持1到20像素的连续调节,较小的粒子适合营造细腻的星尘效果,较大的粒子则适合表现气泡或光斑。移动速度参数控制粒子的运动快慢,范围从0.1到5.0,值越大粒子运动越活跃。透明度参数决定粒子的整体不透明程度,范围从0.1到1.0,低透明度可以营造朦胧的背景层次感。

粒子形状与颜色

工具提供4种基础粒子形状:圆形适合大多数自然场景效果,方形适合几何风格或科技感设计,菱形增添独特的视觉锐度,星形则为粒子增添闪耀感。颜色配置方面,用户可以从多种预设颜色主题中选择,也可以自定义主色调。双色渐变功能允许设置起始颜色和结束颜色,粒子在生命周期中从起始颜色渐变至结束颜色,产生丰富的色彩过渡效果。背景颜色可自由设置,为粒子效果提供合适的视觉基底。

连线系统

粒子连线功能可在相邻粒子之间绘制半透明连接线,模拟神经网络或星座图的视觉效果。连线距离参数控制触发连线的最大像素距离,默认150px意味着两个粒子间距小于该值时自动连线。连线透明度控制线条的不透明度,较低的值使连线更加含蓄,较高的值则使连线更加醒目。连线的颜色通常跟随粒子自身颜色,确保整体视觉协调。

鼠标交互模式

工具提供4种鼠标交互模式:吸引模式下粒子会向鼠标位置聚拢,产生磁石般的聚合效果;排斥模式下粒子会远离鼠标,呈现类似驱赶的动态反应;环绕模式下粒子会围绕鼠标位置做圆周运动,形成旋涡般的视觉效果;无交互模式则完全由粒子自身的运动算法驱动,不受鼠标影响。交互影响范围参数控制鼠标作用的有效半径,默认180px,增大该值可以让鼠标影响更多粒子,产生更宏大的交互效果。

控制与导出功能

粒子爆发按钮触发一次性的粒子爆炸效果,所有粒子从中心位置向四周高速扩散,适合用于页面加载动画或点击反馈。全屏功能将Canvas扩展到浏览器窗口全屏,提供沉浸式的粒子体验。截图保存功能可以将当前粒子画面导出为PNG格式图片。暂停功能允许冻结动画帧,方便用户观察某一时刻的粒子状态。FPS显示功能实时监测并展示当前渲染帧率,帮助用户评估动画性能。导出代码功能将当前全部参数配置编译为可直接运行的JavaScript代码,支持一键复制到剪贴板或下载为独立文件。