先别急着写代码这个效果看起来花哨但拆开无非三件事接住鼠标点击的坐标、在这一坐标“引爆”一批粒子、再用定时器把粒子运动状态一帧帧画出来。用Qt做这个尤其顺手因为它把“接收输入、驱动刷新、绘制窗口”这三件事的工具都备齐了。适合刚学完Qt基础教程、想用一个小项目把QPainter、事件处理、定时器串起来的人也适合给自己的工具软件加个不那么死板的交互反馈——比如点击按钮时放一小簇烟花成本很低但观感提升非常明显。我做这个项目之前先列了几个目标避免写着写着就跑偏第一不能引入任何第三方库纯Qt Widgets搞定第二代码量控制在几百行内核心逻辑尽量不绕弯第三性能要稳快速连点不能卡顿更不能崩溃。最终实现的代码确实不复杂但里面有几个坑很值得拿出来说说。1. 整体设计烟花本质是个“粒子系统”1.1 为什么说烟花效果就是粒子系统的简化版一个单击事件发生后观众看到的不是一颗炮弹而是一团光点从中心炸开然后边飞边变暗、边飞边落下。这段话翻译成程序语言就是在某个坐标生成 N 个粒子每个粒子带有位置、速度、颜色、寿命四个属性之后每帧执行“位置 速度 * 时间差”的积分运算同时让寿命衰减、让颜色透明度随寿命变化寿命归零就把粒子从容器里移除。这就是粒子系统只不过烟花只需用到一个很轻量的二维简化版本连碰撞检测都用不上。有一点想特意说一下这个效果完全用 QWidget QPainter 就能做没必要上 QGraphicsView更没必要为了粒子数量去开多线程。很多人一听说粒子就想到生产者消费者模型、线程池恨不得把每个粒子丢到单独线程里去算物理这在烟花场景里纯属给自己挖坑。几百个粒子的坐标积分单线程一帧内算完连 1 毫秒都用不到而 Qt 的绘图无论如何都得回到 GUI 线程跨线程更新界面反而要处理各种同步问题得不偿失。1.2 方案选型重写事件函数还是装事件过滤器鼠标点击的获取有两种常见姿势我在这两个方案之间犹豫过。方案一是直接继承 QWidget重写mousePressEvent这是最直观的做法所有逻辑都收在自定义控件内部方案二是给现有控件挂eventFilter在过滤器里拦截鼠标事件好处是无需改变原有类结构想给整个主窗口加全局烟花特效时特别方便。实际项目里我用的是方案一因为我的需求很纯粹点击窗口任意位置放烟花整个窗口就是烟花画布继承重写是最清晰的做法。但如果你是要把烟花效果“寄生”到别人的复杂界面上比如给某个按钮区域加点击特效那就应该用事件过滤器。两种方案的取舍我整理成了一张表方式侵入性适用场景代码组织重写 mousePressEvent高必须继承目标控件自定义窗口/控件内放烟花逻辑集中在控件类内部好维护事件过滤器 eventFilter低不需要改原类给已有界面动态加特效需要额外管理过滤器生命周期还有一个隐藏细节Qt 的QMouseEvent::pos()返回的是相对于接收事件的控件的坐标这点在嵌套布局时要特别留意。假如你给一个父窗口装了事件过滤器拿到的坐标就是父窗口坐标系下的直接拿来当全局坐标用画出来的烟花位置会偏移。反过来如果重写了子控件的鼠标事件那坐标天然就是子控件局部坐标直接用就行。我早期用过滤器做全窗口特效时就在这个坐标转换上栽过跟头后来老老实实转了mapFromGlobal。2. 核心细节粒子结构、物理模型与颜色设计2.1 先定义粒子结构体别小看这个简单类烟花粒子的数据成员并不复杂但设计是否合理直接决定后面的代码好不好写。我用一个最朴素的Particle结构体QPointF pos当前位置用浮点坐标避免整数坐标导致粒子运动有“卡顿感”QPointF vel当前速度向量单位是像素/秒QColor color粒子颜色后续透明度会随寿命变化float life剩余寿命单位是秒float maxLife总寿命用于计算透明度比例float size绘制半径bool alive存活标记用于回收为什么位置和速度都用浮点因为粒子每帧的位移可能只有零点几像素如果存在整数坐标里大量粒子的运动会变成离散的跳变看上去就不流畅了。而颜色直接存 QColor 是为了后面画图方便QPainter 拿 QColor 就能设置画笔和画刷不用临时做格式转换。写结构体时最好给成员初始化比如写成bool alive true;而不是只声明不赋初值。因为如果某个分支漏了初始化读到一个随机的alive值粒子要么显示不出来要么显示一个死粒子占着内存。这类问题调试时非常恶心有时候表现得不稳定偶尔崩一次多是结构体字段没初始化导致的。2.2 物理模型重力、阻力与初速度的计算逻辑烟花粒子炸开后视觉上要有“爆炸扩散、随后下落”的层次感。实现这个效果只需要给每个粒子施加一个向下的重力加速度再给一个阻尼系数让粒子的速度随时间慢慢衰减。参数我试出来一组比较舒服的默认值可以直接抄参数取值作用初始速度范围120 ~ 420 像素/秒决定爆炸扩散半径重力加速度200 像素/秒²控制粒子下落快慢阻尼系数0.98/帧等效 0.98^60 ≈ 0.30/秒模拟空气阻力让粒子轨迹有“减速”感粒子寿命1.2 ~ 2.0 秒随机控制烟花存续时间初速度的随机分布有讲究。最简单的是在 0~360 度上均匀取角度速度大小在固定范围内均匀随机这样炸出来是一个均匀的圆形。但为了更像真实烟花我加了一点扰动速度大小偏向中间值而不是纯均匀分布这样边缘少一点中心多一点的粒子分布更自然。实现上可以用正态分布近似或者干脆在均匀随机的基础上做两次采样的平均值效果差不多。阻尼的计算需要注意帧率差异。如果直接把速度乘以一个固定系数比如vel * 0.98f那么看似每帧衰减一点其实 60 帧每秒和 30 帧每秒的衰减速度差了整整一倍。正确做法是用帧间隔dt换算成时间无关的衰减比如vel * pow(0.98f, dt * 60.0f)这样无论机器跑 30 帧还是 144 帧粒子的视觉轨迹都保持一致。初次做粒子效果的人最容易忽略这一点在低帧率下看不出问题但换到高刷屏上就会发现烟花“膨胀”了原因就在这里。2.3 颜色设计从 HSV 取暖色避免脏色颜色是烟花观感的核心之一。直接用QColor::fromRgb随机生成 RGB很容易混出灰褐色、暗绿色这类看起来“脏脏”的颜色效果像低配版电脑屏保。更好的办法是固定一个色相区间只在饱和度和明度上做变化。我用的配色思路是以金色和暖色为主色相取[40, 60]区间金色系同时偶尔加入[0, 20]的红色系做点缀饱和度固定取 180~255明度取 255。这样整场烟花是暖色基调散射到深色背景上时对比鲜明。如果你想要彩色烟花可以把色相区间放宽到整个色轮但每次爆炸只用其中一段相邻区间比如这一炮是蓝紫色系下一炮是粉红色系而不是让一炮里面七色俱全——真实烟花一炮的颜色往往是一致的这样反而更耐看。透明度的衰减公式也值得记一下粒子绘制时透明度用alpha 255 * (life / maxLife)线性衰减。但真实烟花在炸开的一瞬间最亮然后快速衰减所以我加了点非线性处理在寿命前 10% 保持全亮之后按二次曲线加速变暗观感上更接近“噗”地一亮然后散去的效果。这个细节不调也问题不大但调完后整场烟花的高级感高了一个档次。3. 实操实现事件、绘制与定时器三件套3.1 核心类骨架与事件处理整个效果我只需要两个类粒子结构体Particle和主控件类FireworksWidget。控件类继承QWidget重写三个函数paintEvent、mousePressEvent外加一个自己实现的step更新粒子状态。构造函数里启动一个QTimer每个 16 毫秒触发一次但具体步长用QElapsedTimer测量实际流逝时间避免定时器漂移。鼠标点击事件处理很短void FireworksWidget::mousePressEvent(QMouseEvent* event) { if (event-button() Qt::LeftButton) { launchExplosion(event-pos()); } QWidget::mousePressEvent(event); }为什么会调用基类的mousePressEvent因为我的窗口没有其他需要处理的鼠标逻辑调用一下是为了遵守事件处理的基本规范避免某些情况下事件被吞掉。如果你用的是事件过滤器就不存在这个问题。顺便说一个热词里经常搜到的事情Qt 怎么模拟鼠标点击事件。如果你想把烟花做成自动演示不一定要真的模拟鼠标点击直接在程序里调用launchExplosion(QPointF(x, y))和动手点击走的是同一条路径效果完全一样。这比用QApplication::sendEvent去伪造一个QMouseEvent简单得多也少踩很多坑因为伪造的事件还有坐标系、全局坐标、接受状态等一堆细节要处理。模拟事件要慎重能直接调业务函数就别先造假事件。3.2 粒子发射与更新逻辑发射逻辑要分两批一批是爆炸大粒子从点击点向四周炸开另一批是延迟生成的小火花粒子用于模拟烟花炸开后二次产生的拖尾和闪烁。大粒子在点击瞬间入队小火花粒子我设计了一个延迟队列记录它们的出生点和剩余延迟时间帧更新时判断延迟时间是否归零归零后再生成一批小粒子。这个“二次爆炸”效果让烟花看起来更丰富是纯扩散粒子版本没有的层次。void FireworksWidget::step(float dt) { // 更新大粒子 for (auto p : m_particles) { p.vel.y GRAVITY * dt; p.vel * std::pow(DRAG_PER_FRAME, dt * 60.0f); p.pos p.vel * dt; p.life - dt; if (p.life 0.0f) p.alive false; } // 延迟生成火花粒子 for (auto item : m_pendingSparks) { item.delay - dt; if (item.delay 0.0f) { spawnSparks(item.center); item.alive false; } } // 清理死亡粒子 m_particles.erase( std::remove_if(m_particles.begin(), m_particles.end(), [](const Particle p) { return !p.alive; }), m_particles.end()); m_pendingSparks.erase( std::remove_if(m_pendingSparks.begin(), m_pendingSparks.end(), [](const PendingSpark p) { return !p.alive; }), m_pendingSparks.end()); }清理容器这里我特意用了std::remove_if配合erase而不是遍历时erase单个元素。原因很简单遍历时删除元素会让迭代器失效轻则漏删粒子重则直接崩溃。用两段式的 remove-erase 是一劳永逸的写法也顺便避开了“越过终点删除导致野指针”这类经典事故。QTimer 的驱动方式也试过坑。最开始我用timer.setInterval(16)然后在timeout里直接调step(0.016)看起来逻辑没问题但实际上定时器的回调并不是严格 16 毫秒一次窗口拖动、系统负载升高时会产生漂移。粒子运动用固定步长算会导致画面时快时慢。正确做法是用QElapsedTimer在每次回调时测量真实间隔再用这个真实间隔作为dt传给step这样闪烁和顿挫都消失了物理表现和真实时间挂钩。3.3 paintEvent 的绘制技巧半透明背景与混合模式绘制代码是烟花效果的门面里面有三个值得一提的技巧半透明背景形成拖尾、混合模式让粒子互相叠光、抗锯齿让粒子边缘平滑。void FireworksWidget::paintEvent(QPaintEvent*) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // 半透明填充实现拖尾效果 painter.fillRect(rect(), QColor(0, 0, 0, 60)); // 粒子叠加发光 painter.setCompositionMode(QPainter::CompositionMode_Plus); for (const auto p : m_particles) { QColor c p.color; c.setAlphaF(std::clamp(p.life / p.maxLife, 0.0f, 1.0f)); painter.setPen(Qt::NoPen); painter.setBrush(c); painter.drawEllipse(p.pos, p.size, p.size); } for (const auto p : m_sparks) { // 小火花绘制成短线条比圆点更有流星感 painter.setPen(QPen(p.color.withAlpha(200), 1.0)); painter.drawLine(p.pos, p.pos - p.vel * 0.03); } }第一行fillRect(rect(), QColor(0, 0, 0, 60))是拖尾效果的关键每次重绘前不是把画布完全清成黑色而是叠上一层透明度为 60 的半透明黑之前的画面会残留在背景里逐渐变暗。这就像相机长曝光粒子的旧轨迹形成快速衰减的余晖。如果你改成完全不透明的 fillRect粒子会画一帧清一帧看起来干净但少了一层“光晕”拖尾的效果完全消失。混合模式CompositionMode_Plus值得展开说一下。这个模式的含义是当前绘制的像素值和背景像素值相加在粒子的交叉区域会产生变亮的效果。粒子数量多时中心区域会出现一个自然的光晕亮点非常接近真实烟花炸开时的过曝感。如果不设置这个模式默认的 SourceOver 模式下粒子只是互相覆盖颜色混在一起容易发灰。注意设置了混合模式之后drawEllipse绘制出的颜色会变亮甚至偏白这是正常现象不要当成 bug 去调整透明度调半天。抗锯齿必须打开。不打开的话圆点粒子边缘全是锯齿尤其粒子小的时候看起来像一堆马赛克。QPainter::Antialiasing对drawEllipse和drawLine都有效几乎不消耗什么性能属于必开项。关于paintEvent还有一个细节内部不要做粒子状态更新。我第一次写的时候图省事把step逻辑塞进了paintEvent结果窗口只要一触发重绘粒子就会跳一帧又因为step里面可能调用了update()形成了“重绘-更新-再重绘”的循环窗口一直处于高占用状态。职责分离是这里的铁律paintEvent只做绘制粒子状态更新放到定时器回调里。3.4 快速连点、窗口缩放与高DPI的适配快速连点时粒子容器会在短时间内新增大量粒子这个过程有两个风险一是容器频繁扩容导致的性能抖动二是粒子数量超出合理范围。我在构造函数里给m_particles.reserve(2000)预分配空间避免插入时反复malloc同时在发射函数里判断粒子总数超过上限比如 3000就丢弃新粒子的生成保证极端情况下的流畅度。窗口缩放和高 DPI 是另一个隐形的坑。默认情况下 Qt Widgets 程序在高 DPI 屏幕上会进行坐标缩放但QPainter内部也会应用缩放如果你没有正确设置devicePixelRatio画出来的烟花可能出现位置偏移、粒子大小异常的情况。在支持高 DPI 的配置下建议在paintEvent开头调用painter.setDevicePixelRatio(devicePixelRatioF())再结合 Qt6 或 Qt5.14 以上版本默认开启的高 DPI 缩放粒子的大小和位置才能在各种屏幕上都保持一致。如果你用的是传统写法没有显式处理 DPI在某些设备上会看到烟花位置比鼠标点偏了半个身位就是这个原因。4. 常见问题与避坑实录从崩溃到优化4.1 粒子卡死或闪烁多半是重绘策略不对我用update()触发重绘而不是repaint()。这两个函数的区别是初学者最容易搞混的update()会把绘制请求合并到下一次事件循环处理连续调用多次也只会重绘一次repaint()是立即强制执行绘制如果粒子数量较多一次step后马上调repaint()会让绘制和状态更新耦合在一个紧密循环里界面其他事件根本插不进去表现为窗口拖动时卡顿、粒子闪烁不均。所有主动重绘需求都用update()这是能显著提升流畅度的一个小改动。闪烁还有一个原因是窗口默认没有开启WA_OpaquePaintEvent。这个属性的意思是告诉 Qt 你的paintEvent会覆盖整个窗口的所有像素不需要先做填充背景的准备工作。我的paintEvent第一行就用半透明黑色填充了整个rect()相当于自己管理了背景所以可以安全地开启这个属性减少一次底层背景清除闪烁问题也能缓解。4.2 窗口关闭后定时器还在跑崩溃的经典来源第一次做完这个效果我遇到过一个印象深刻的崩溃程序正常使用没问题但关闭窗口的一瞬间偶发崩溃。排查后发现是QTimer的锅。我在控件析构函数里没有主动停止定时器而定时器的timeout信号连接到step槽函数窗口销毁后信号仍可能触发一次访问到已经销毁的粒子容器于是读到野指针崩溃。解决办法其实很简单在析构函数里加m_timer.stop();甚至更稳妥地disconnect掉信号。更保险的做法是给QTimer设置this为 parent让它在对象树销毁时自动停掉但手动 stop 仍然是必要的因为它能保证在析构顺序的早期就把回调给断掉。这个坑在 Qt 里太典型了尤其是这种“控件跑动画”的场景十个类似项目里至少有三四个会踩到。4.3 粒子数量爆炸导致内存上升排查思路参考快速连点加延迟火花粒子数量是爆发式增长的。如果回收机制有 bug比如alive标记没及时置为 false粒子的增涨速度会远比清理速度快表现在任务管理器里就是内存在几十秒内肉眼可见地上升。遇到这种情况最快的排查方式是在step函数末尾打印粒子总数qDebug() particles: m_particles.size() sparks: m_sparks.size();如果总数持续上涨不回落说明有某个分支没有正确标记死亡并从容器移除。我在做延迟火花的时候犯过这个错PendingSpark的delay被减成负数之后我判断条件写成了 0.0f时才生成火花但生成火花后忘记了把alive置为 false导致这一项在清理时被保留下一帧又生成一批火花粒子数量直接翻倍增长。调试信息定位到这个问题只花了几分钟但如果没有打印日志纯靠肉眼盯画面很难发现。4.4 性能优化数量级与实测数据参考我实测了一下性能单次点击生成 80 个大粒子和 120 个小火花粒子总粒子数约 200运行在普通办公本上step加paintEvent的总耗时在 2~3 毫秒左右完全无压力。即使同时叠加 10 次点击粒子总数 2000依然能稳定在 30 帧以上。如果目标是极致的粒子数量比如上万粒子那 QPainter 的逐个drawEllipse就成了瓶颈。替代方案是预先渲染一个粒子图片然后drawPixmap绘制减少复杂路径计算的开销更进一步可以用QOpenGLWidget配合批量绘制但那个复杂度就不是这个项目能涵盖的了。说实话对于普通交互反馈来说几百个粒子带来的收益上限已经很高了再多的粒子数量观众也分辨不出来。从工程角度讲与其追求上万粒子不如把精力花在粒子的颜色、二次火花、拖尾这些视觉层次上投入产出比更高。4.5 扩展方向文字烟花与全局点击特效做完基本效果后我还做了两个扩展可以给大家参考。一个是文字烟花用QPainterPath加载文字轮廓对路径采样出一圈坐标点每个点作为火花粒子的初始位置就能输出“点击鼠标炸出一行字”的效果。这个扩展的难点在于路径采样要均匀否则笔画的密度不均字会出现一段密一段疏的问题。另一个是全局点击特效把FireworksWidget做成透明无边框的全屏覆盖窗口用事件过滤器监听桌面鼠标点击然后向对应坐标发烟花。透明窗口要设置Qt::FramelessWindowHint和Qt::WA_TranslucentBackground并处理穿透点击的事件传递复杂度会略高一些但做出来是一个很抢眼的桌面小工具。弹窗动画是几个经典坑最集中的地方粒子回收、重绘策略、定时器生命周期、高 DPI 坐标一个不少。建议想动手的朋友先做“单帧绘制版”即点击后不启动定时器、只生成一批粒子并手动调一次update()确认画面正常后再接入定时器动画这样能把绘制问题和动画问题分开排查定位 bug 的效率会高很多。这个“先静态后动态”的习惯我后来在做所有动画类界面时都保持着非常省事。最后再分享一个个人心得做这种视觉效果的项目尽量用真实参数去调而不要靠肉眼硬猜。比如观察粒子速度漂移时在step里打印一个代表性粒子的速度和坐标跟手算的理论值对一下能快速发现阻尼系数或者坐标更新公式的错误。很多看起来“有点不对但说不上来哪不对”的动画问题根源都是数值计算上的细微偏差而数值问题用日志对比一眼就能定位。对这种图形特效项目来讲最不值钱的是写代码的时间最值钱的是定位问题的思路思路清晰了效果自然就出来了。 
长河君 · 2026/10/9 22:24:16 · 阅读 1.2k Qt粒子特效实战：用QPainter与定时器实现鼠标点击放烟花
先别急着写代码这个效果看起来花哨但拆开无非三件事接住鼠标点击的坐标、在这一坐标“引爆”一批粒子、再用定时器把粒子运动状态一帧帧画出来。用Qt做这个尤其顺手因为它把“接收输入、驱动刷新、绘制窗口”这三件事的工具都备齐了。适合刚学完Qt基础教程、想用一个小项目把QPainter、事件处理、定时器串起来的人也适合给自己的工具软件加个不那么死板的交互反馈——比如点击按钮时放一小簇烟花成本很低但观感提升非常明显。我做这个项目之前先列了几个目标避免写着写着就跑偏第一不能引入任何第三方库纯Qt Widgets搞定第二代码量控制在几百行内核心逻辑尽量不绕弯第三性能要稳快速连点不能卡顿更不能崩溃。最终实现的代码确实不复杂但里面有几个坑很值得拿出来说说。1. 整体设计烟花本质是个“粒子系统”1.1 为什么说烟花效果就是粒子系统的简化版一个单击事件发生后观众看到的不是一颗炮弹而是一团光点从中心炸开然后边飞边变暗、边飞边落下。这段话翻译成程序语言就是在某个坐标生成 N 个粒子每个粒子带有位置、速度、颜色、寿命四个属性之后每帧执行“位置 速度 * 时间差”的积分运算同时让寿命衰减、让颜色透明度随寿命变化寿命归零就把粒子从容器里移除。这就是粒子系统只不过烟花只需用到一个很轻量的二维简化版本连碰撞检测都用不上。有一点想特意说一下这个效果完全用 QWidget QPainter 就能做没必要上 QGraphicsView更没必要为了粒子数量去开多线程。很多人一听说粒子就想到生产者消费者模型、线程池恨不得把每个粒子丢到单独线程里去算物理这在烟花场景里纯属给自己挖坑。几百个粒子的坐标积分单线程一帧内算完连 1 毫秒都用不到而 Qt 的绘图无论如何都得回到 GUI 线程跨线程更新界面反而要处理各种同步问题得不偿失。1.2 方案选型重写事件函数还是装事件过滤器鼠标点击的获取有两种常见姿势我在这两个方案之间犹豫过。方案一是直接继承 QWidget重写mousePressEvent这是最直观的做法所有逻辑都收在自定义控件内部方案二是给现有控件挂eventFilter在过滤器里拦截鼠标事件好处是无需改变原有类结构想给整个主窗口加全局烟花特效时特别方便。实际项目里我用的是方案一因为我的需求很纯粹点击窗口任意位置放烟花整个窗口就是烟花画布继承重写是最清晰的做法。但如果你是要把烟花效果“寄生”到别人的复杂界面上比如给某个按钮区域加点击特效那就应该用事件过滤器。两种方案的取舍我整理成了一张表方式侵入性适用场景代码组织重写 mousePressEvent高必须继承目标控件自定义窗口/控件内放烟花逻辑集中在控件类内部好维护事件过滤器 eventFilter低不需要改原类给已有界面动态加特效需要额外管理过滤器生命周期还有一个隐藏细节Qt 的QMouseEvent::pos()返回的是相对于接收事件的控件的坐标这点在嵌套布局时要特别留意。假如你给一个父窗口装了事件过滤器拿到的坐标就是父窗口坐标系下的直接拿来当全局坐标用画出来的烟花位置会偏移。反过来如果重写了子控件的鼠标事件那坐标天然就是子控件局部坐标直接用就行。我早期用过滤器做全窗口特效时就在这个坐标转换上栽过跟头后来老老实实转了mapFromGlobal。2. 核心细节粒子结构、物理模型与颜色设计2.1 先定义粒子结构体别小看这个简单类烟花粒子的数据成员并不复杂但设计是否合理直接决定后面的代码好不好写。我用一个最朴素的Particle结构体QPointF pos当前位置用浮点坐标避免整数坐标导致粒子运动有“卡顿感”QPointF vel当前速度向量单位是像素/秒QColor color粒子颜色后续透明度会随寿命变化float life剩余寿命单位是秒float maxLife总寿命用于计算透明度比例float size绘制半径bool alive存活标记用于回收为什么位置和速度都用浮点因为粒子每帧的位移可能只有零点几像素如果存在整数坐标里大量粒子的运动会变成离散的跳变看上去就不流畅了。而颜色直接存 QColor 是为了后面画图方便QPainter 拿 QColor 就能设置画笔和画刷不用临时做格式转换。写结构体时最好给成员初始化比如写成bool alive true;而不是只声明不赋初值。因为如果某个分支漏了初始化读到一个随机的alive值粒子要么显示不出来要么显示一个死粒子占着内存。这类问题调试时非常恶心有时候表现得不稳定偶尔崩一次多是结构体字段没初始化导致的。2.2 物理模型重力、阻力与初速度的计算逻辑烟花粒子炸开后视觉上要有“爆炸扩散、随后下落”的层次感。实现这个效果只需要给每个粒子施加一个向下的重力加速度再给一个阻尼系数让粒子的速度随时间慢慢衰减。参数我试出来一组比较舒服的默认值可以直接抄参数取值作用初始速度范围120 ~ 420 像素/秒决定爆炸扩散半径重力加速度200 像素/秒²控制粒子下落快慢阻尼系数0.98/帧等效 0.98^60 ≈ 0.30/秒模拟空气阻力让粒子轨迹有“减速”感粒子寿命1.2 ~ 2.0 秒随机控制烟花存续时间初速度的随机分布有讲究。最简单的是在 0~360 度上均匀取角度速度大小在固定范围内均匀随机这样炸出来是一个均匀的圆形。但为了更像真实烟花我加了一点扰动速度大小偏向中间值而不是纯均匀分布这样边缘少一点中心多一点的粒子分布更自然。实现上可以用正态分布近似或者干脆在均匀随机的基础上做两次采样的平均值效果差不多。阻尼的计算需要注意帧率差异。如果直接把速度乘以一个固定系数比如vel * 0.98f那么看似每帧衰减一点其实 60 帧每秒和 30 帧每秒的衰减速度差了整整一倍。正确做法是用帧间隔dt换算成时间无关的衰减比如vel * pow(0.98f, dt * 60.0f)这样无论机器跑 30 帧还是 144 帧粒子的视觉轨迹都保持一致。初次做粒子效果的人最容易忽略这一点在低帧率下看不出问题但换到高刷屏上就会发现烟花“膨胀”了原因就在这里。2.3 颜色设计从 HSV 取暖色避免脏色颜色是烟花观感的核心之一。直接用QColor::fromRgb随机生成 RGB很容易混出灰褐色、暗绿色这类看起来“脏脏”的颜色效果像低配版电脑屏保。更好的办法是固定一个色相区间只在饱和度和明度上做变化。我用的配色思路是以金色和暖色为主色相取[40, 60]区间金色系同时偶尔加入[0, 20]的红色系做点缀饱和度固定取 180~255明度取 255。这样整场烟花是暖色基调散射到深色背景上时对比鲜明。如果你想要彩色烟花可以把色相区间放宽到整个色轮但每次爆炸只用其中一段相邻区间比如这一炮是蓝紫色系下一炮是粉红色系而不是让一炮里面七色俱全——真实烟花一炮的颜色往往是一致的这样反而更耐看。透明度的衰减公式也值得记一下粒子绘制时透明度用alpha 255 * (life / maxLife)线性衰减。但真实烟花在炸开的一瞬间最亮然后快速衰减所以我加了点非线性处理在寿命前 10% 保持全亮之后按二次曲线加速变暗观感上更接近“噗”地一亮然后散去的效果。这个细节不调也问题不大但调完后整场烟花的高级感高了一个档次。3. 实操实现事件、绘制与定时器三件套3.1 核心类骨架与事件处理整个效果我只需要两个类粒子结构体Particle和主控件类FireworksWidget。控件类继承QWidget重写三个函数paintEvent、mousePressEvent外加一个自己实现的step更新粒子状态。构造函数里启动一个QTimer每个 16 毫秒触发一次但具体步长用QElapsedTimer测量实际流逝时间避免定时器漂移。鼠标点击事件处理很短void FireworksWidget::mousePressEvent(QMouseEvent* event) { if (event-button() Qt::LeftButton) { launchExplosion(event-pos()); } QWidget::mousePressEvent(event); }为什么会调用基类的mousePressEvent因为我的窗口没有其他需要处理的鼠标逻辑调用一下是为了遵守事件处理的基本规范避免某些情况下事件被吞掉。如果你用的是事件过滤器就不存在这个问题。顺便说一个热词里经常搜到的事情Qt 怎么模拟鼠标点击事件。如果你想把烟花做成自动演示不一定要真的模拟鼠标点击直接在程序里调用launchExplosion(QPointF(x, y))和动手点击走的是同一条路径效果完全一样。这比用QApplication::sendEvent去伪造一个QMouseEvent简单得多也少踩很多坑因为伪造的事件还有坐标系、全局坐标、接受状态等一堆细节要处理。模拟事件要慎重能直接调业务函数就别先造假事件。3.2 粒子发射与更新逻辑发射逻辑要分两批一批是爆炸大粒子从点击点向四周炸开另一批是延迟生成的小火花粒子用于模拟烟花炸开后二次产生的拖尾和闪烁。大粒子在点击瞬间入队小火花粒子我设计了一个延迟队列记录它们的出生点和剩余延迟时间帧更新时判断延迟时间是否归零归零后再生成一批小粒子。这个“二次爆炸”效果让烟花看起来更丰富是纯扩散粒子版本没有的层次。void FireworksWidget::step(float dt) { // 更新大粒子 for (auto p : m_particles) { p.vel.y GRAVITY * dt; p.vel * std::pow(DRAG_PER_FRAME, dt * 60.0f); p.pos p.vel * dt; p.life - dt; if (p.life 0.0f) p.alive false; } // 延迟生成火花粒子 for (auto item : m_pendingSparks) { item.delay - dt; if (item.delay 0.0f) { spawnSparks(item.center); item.alive false; } } // 清理死亡粒子 m_particles.erase( std::remove_if(m_particles.begin(), m_particles.end(), [](const Particle p) { return !p.alive; }), m_particles.end()); m_pendingSparks.erase( std::remove_if(m_pendingSparks.begin(), m_pendingSparks.end(), [](const PendingSpark p) { return !p.alive; }), m_pendingSparks.end()); }清理容器这里我特意用了std::remove_if配合erase而不是遍历时erase单个元素。原因很简单遍历时删除元素会让迭代器失效轻则漏删粒子重则直接崩溃。用两段式的 remove-erase 是一劳永逸的写法也顺便避开了“越过终点删除导致野指针”这类经典事故。QTimer 的驱动方式也试过坑。最开始我用timer.setInterval(16)然后在timeout里直接调step(0.016)看起来逻辑没问题但实际上定时器的回调并不是严格 16 毫秒一次窗口拖动、系统负载升高时会产生漂移。粒子运动用固定步长算会导致画面时快时慢。正确做法是用QElapsedTimer在每次回调时测量真实间隔再用这个真实间隔作为dt传给step这样闪烁和顿挫都消失了物理表现和真实时间挂钩。3.3 paintEvent 的绘制技巧半透明背景与混合模式绘制代码是烟花效果的门面里面有三个值得一提的技巧半透明背景形成拖尾、混合模式让粒子互相叠光、抗锯齿让粒子边缘平滑。void FireworksWidget::paintEvent(QPaintEvent*) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // 半透明填充实现拖尾效果 painter.fillRect(rect(), QColor(0, 0, 0, 60)); // 粒子叠加发光 painter.setCompositionMode(QPainter::CompositionMode_Plus); for (const auto p : m_particles) { QColor c p.color; c.setAlphaF(std::clamp(p.life / p.maxLife, 0.0f, 1.0f)); painter.setPen(Qt::NoPen); painter.setBrush(c); painter.drawEllipse(p.pos, p.size, p.size); } for (const auto p : m_sparks) { // 小火花绘制成短线条比圆点更有流星感 painter.setPen(QPen(p.color.withAlpha(200), 1.0)); painter.drawLine(p.pos, p.pos - p.vel * 0.03); } }第一行fillRect(rect(), QColor(0, 0, 0, 60))是拖尾效果的关键每次重绘前不是把画布完全清成黑色而是叠上一层透明度为 60 的半透明黑之前的画面会残留在背景里逐渐变暗。这就像相机长曝光粒子的旧轨迹形成快速衰减的余晖。如果你改成完全不透明的 fillRect粒子会画一帧清一帧看起来干净但少了一层“光晕”拖尾的效果完全消失。混合模式CompositionMode_Plus值得展开说一下。这个模式的含义是当前绘制的像素值和背景像素值相加在粒子的交叉区域会产生变亮的效果。粒子数量多时中心区域会出现一个自然的光晕亮点非常接近真实烟花炸开时的过曝感。如果不设置这个模式默认的 SourceOver 模式下粒子只是互相覆盖颜色混在一起容易发灰。注意设置了混合模式之后drawEllipse绘制出的颜色会变亮甚至偏白这是正常现象不要当成 bug 去调整透明度调半天。抗锯齿必须打开。不打开的话圆点粒子边缘全是锯齿尤其粒子小的时候看起来像一堆马赛克。QPainter::Antialiasing对drawEllipse和drawLine都有效几乎不消耗什么性能属于必开项。关于paintEvent还有一个细节内部不要做粒子状态更新。我第一次写的时候图省事把step逻辑塞进了paintEvent结果窗口只要一触发重绘粒子就会跳一帧又因为step里面可能调用了update()形成了“重绘-更新-再重绘”的循环窗口一直处于高占用状态。职责分离是这里的铁律paintEvent只做绘制粒子状态更新放到定时器回调里。3.4 快速连点、窗口缩放与高DPI的适配快速连点时粒子容器会在短时间内新增大量粒子这个过程有两个风险一是容器频繁扩容导致的性能抖动二是粒子数量超出合理范围。我在构造函数里给m_particles.reserve(2000)预分配空间避免插入时反复malloc同时在发射函数里判断粒子总数超过上限比如 3000就丢弃新粒子的生成保证极端情况下的流畅度。窗口缩放和高 DPI 是另一个隐形的坑。默认情况下 Qt Widgets 程序在高 DPI 屏幕上会进行坐标缩放但QPainter内部也会应用缩放如果你没有正确设置devicePixelRatio画出来的烟花可能出现位置偏移、粒子大小异常的情况。在支持高 DPI 的配置下建议在paintEvent开头调用painter.setDevicePixelRatio(devicePixelRatioF())再结合 Qt6 或 Qt5.14 以上版本默认开启的高 DPI 缩放粒子的大小和位置才能在各种屏幕上都保持一致。如果你用的是传统写法没有显式处理 DPI在某些设备上会看到烟花位置比鼠标点偏了半个身位就是这个原因。4. 常见问题与避坑实录从崩溃到优化4.1 粒子卡死或闪烁多半是重绘策略不对我用update()触发重绘而不是repaint()。这两个函数的区别是初学者最容易搞混的update()会把绘制请求合并到下一次事件循环处理连续调用多次也只会重绘一次repaint()是立即强制执行绘制如果粒子数量较多一次step后马上调repaint()会让绘制和状态更新耦合在一个紧密循环里界面其他事件根本插不进去表现为窗口拖动时卡顿、粒子闪烁不均。所有主动重绘需求都用update()这是能显著提升流畅度的一个小改动。闪烁还有一个原因是窗口默认没有开启WA_OpaquePaintEvent。这个属性的意思是告诉 Qt 你的paintEvent会覆盖整个窗口的所有像素不需要先做填充背景的准备工作。我的paintEvent第一行就用半透明黑色填充了整个rect()相当于自己管理了背景所以可以安全地开启这个属性减少一次底层背景清除闪烁问题也能缓解。4.2 窗口关闭后定时器还在跑崩溃的经典来源第一次做完这个效果我遇到过一个印象深刻的崩溃程序正常使用没问题但关闭窗口的一瞬间偶发崩溃。排查后发现是QTimer的锅。我在控件析构函数里没有主动停止定时器而定时器的timeout信号连接到step槽函数窗口销毁后信号仍可能触发一次访问到已经销毁的粒子容器于是读到野指针崩溃。解决办法其实很简单在析构函数里加m_timer.stop();甚至更稳妥地disconnect掉信号。更保险的做法是给QTimer设置this为 parent让它在对象树销毁时自动停掉但手动 stop 仍然是必要的因为它能保证在析构顺序的早期就把回调给断掉。这个坑在 Qt 里太典型了尤其是这种“控件跑动画”的场景十个类似项目里至少有三四个会踩到。4.3 粒子数量爆炸导致内存上升排查思路参考快速连点加延迟火花粒子数量是爆发式增长的。如果回收机制有 bug比如alive标记没及时置为 false粒子的增涨速度会远比清理速度快表现在任务管理器里就是内存在几十秒内肉眼可见地上升。遇到这种情况最快的排查方式是在step函数末尾打印粒子总数qDebug() particles: m_particles.size() sparks: m_sparks.size();如果总数持续上涨不回落说明有某个分支没有正确标记死亡并从容器移除。我在做延迟火花的时候犯过这个错PendingSpark的delay被减成负数之后我判断条件写成了 0.0f时才生成火花但生成火花后忘记了把alive置为 false导致这一项在清理时被保留下一帧又生成一批火花粒子数量直接翻倍增长。调试信息定位到这个问题只花了几分钟但如果没有打印日志纯靠肉眼盯画面很难发现。4.4 性能优化数量级与实测数据参考我实测了一下性能单次点击生成 80 个大粒子和 120 个小火花粒子总粒子数约 200运行在普通办公本上step加paintEvent的总耗时在 2~3 毫秒左右完全无压力。即使同时叠加 10 次点击粒子总数 2000依然能稳定在 30 帧以上。如果目标是极致的粒子数量比如上万粒子那 QPainter 的逐个drawEllipse就成了瓶颈。替代方案是预先渲染一个粒子图片然后drawPixmap绘制减少复杂路径计算的开销更进一步可以用QOpenGLWidget配合批量绘制但那个复杂度就不是这个项目能涵盖的了。说实话对于普通交互反馈来说几百个粒子带来的收益上限已经很高了再多的粒子数量观众也分辨不出来。从工程角度讲与其追求上万粒子不如把精力花在粒子的颜色、二次火花、拖尾这些视觉层次上投入产出比更高。4.5 扩展方向文字烟花与全局点击特效做完基本效果后我还做了两个扩展可以给大家参考。一个是文字烟花用QPainterPath加载文字轮廓对路径采样出一圈坐标点每个点作为火花粒子的初始位置就能输出“点击鼠标炸出一行字”的效果。这个扩展的难点在于路径采样要均匀否则笔画的密度不均字会出现一段密一段疏的问题。另一个是全局点击特效把FireworksWidget做成透明无边框的全屏覆盖窗口用事件过滤器监听桌面鼠标点击然后向对应坐标发烟花。透明窗口要设置Qt::FramelessWindowHint和Qt::WA_TranslucentBackground并处理穿透点击的事件传递复杂度会略高一些但做出来是一个很抢眼的桌面小工具。弹窗动画是几个经典坑最集中的地方粒子回收、重绘策略、定时器生命周期、高 DPI 坐标一个不少。建议想动手的朋友先做“单帧绘制版”即点击后不启动定时器、只生成一批粒子并手动调一次update()确认画面正常后再接入定时器动画这样能把绘制问题和动画问题分开排查定位 bug 的效率会高很多。这个“先静态后动态”的习惯我后来在做所有动画类界面时都保持着非常省事。最后再分享一个个人心得做这种视觉效果的项目尽量用真实参数去调而不要靠肉眼硬猜。比如观察粒子速度漂移时在step里打印一个代表性粒子的速度和坐标跟手算的理论值对一下能快速发现阻尼系数或者坐标更新公式的错误。很多看起来“有点不对但说不上来哪不对”的动画问题根源都是数值计算上的细微偏差而数值问题用日志对比一眼就能定位。对这种图形特效项目来讲最不值钱的是写代码的时间最值钱的是定位问题的思路思路清晰了效果自然就出来了。