html特效粒子漩涡代码

 人参与 | 时间：2026-10-17 06:51:54
粒子漩涡的特效核心逻辑就一句话：让每个粒子围绕一个中心点做螺旋运动。你不需要懂复杂的粒漩物理引擎，canvas的涡代2D上下文加几十行JavaScript就够。我见过有人用three.js做3D版，特效但平面漩涡做好了，粒漩视觉冲击力完全不输——关键在于粒子的涡代密度和速度衰减曲线。 先看最基础的特效数学模型。每个粒子的粒漩位置由角度θ和半径r决定，每帧更新时让θ增加一个固定值，涡代r按比例缩小。特效当r小于某个阈值时，粒漩重置粒子到外圈。涡代这个“外圈重生”的特效机制是漩涡保持连续感的关键。我用一个数组存粒子对象，粒漩每个对象包含当前角度、涡代半径、速度系数，还有颜色值。 代码里有个容易被忽略的细节：粒子的透明度要随半径变化。靠近中心的粒子透明度低，外围粒子透明度高，这样能营造出“被吸入”的纵深错觉。我调了三个小时才找到合适的alpha公式——0.3 + 0.7 * (r / maxRadius) 效果不错，但你可以按自己喜好改。 实际跑起来你会发现，单纯螺旋运动太规整，像机械表齿轮。我加了两个“破坏因子”：一是每个粒子的角速度带±15%的随机偏差，二是每帧给角度叠加一个低频正弦扰动。这样粒子轨迹会出现轻微的缠绕和抖动，漩涡看起来才有“活气”。别小看这点随机性，它决定了你是做出动态壁纸还是做出一堆乱飞的点。 颜色方案我推荐双色渐变，比如青色到洋红。做法是预定义两个RGB端点，每帧按粒子的径向位置插值。如果想让效果更炸，可以每隔几帧让某个粒子突然加速——这需要额外存一个“爆发计时器”，触发时临时加大该粒子的角速度增量。这种不规则性能让观看者觉得漩涡在“呼吸”。 性能方面，粒子数量控制在300到500之间最稳。超过800，普通笔记本的canvas就会开始掉帧。我试过用requestAnimationFrame配合离屏canvas缓存背景，但说实话，对纯粒子效果没必要——除非你叠加了模糊滤镜或光晕效果。那种情况才需要把粒子绘制到小尺寸离屏画布上，再放大显示，用降分辨率换性能。 最后提个交互细节。鼠标位置作为漩涡中心是常见的做法，但别直接把粒子中心绑到鼠标坐标上——加个缓动系数，让中心点滞后鼠标一段距离。这样漩涡移动时会有拖尾式的惯性感，比同步跟随高级得多。我自己的实现里，中心点每帧向鼠标坐标靠近10%，效果已经足够顺滑。 写到这里，建议你直接打开浏览器控制台，把上面的canvas代码粘贴进去跑一遍。先看基础效果，再逐行修改参数——把粒子的数量调到100，观察运动轨迹；把alpha公式里的0.3改成0.8，感受视觉密度变化。调试的过程比看任何教程都管用。漩涡特效说白了就是数学公式的视觉化，你调参调得越狠，对运动规律的理解就越深。 顶: 46踩: 4