Qt Quick 粒子系统详解

Qt Quick 粒子系统详解

Qt Quick 粒子系统是用于创建动态视觉特效（如爆炸、火焰、烟雾等）的模块，基于 QML 声明式语法实现高性能粒子渲染。其核心原理是通过发射器生成粒子，由影响器修改粒子行为，最终通过绘制器渲染到场景中。粒子系统主要由四大核心组件构成：

• ParticleSystem - 管理所有粒子
• 渲染器 - 控制粒子如何显示
• 发射器 - 控制粒子如何产生
• 影响器 - 控制粒子行为变化

一、核心组件

1. 粒子系统 (ParticleSystem)
   管理全局粒子组，协调所有组件的时间线。每个粒子系统独立运行，需显式声明：

   ParticleSystem {id: sysrunning: true // 控制启停
   }
   

2. 发射器 (Emitter)
   定义粒子生成规则：

   • 位置：emitRate（每秒粒子数）、lifeSpan（生命周期）
   • 运动：velocity（初始速度）、acceleration（加速度）
   • 方向：angle（发射角度）、angleVariation（角度随机性）
     示例：

   Emitter {system: sysemitRate: 100lifeSpan: 2000 // 单位毫秒velocity: AngleDirection { angle: 45; magnitude: 150 }
   }
   

3. 绘制器 (ParticlePainter)
   控制粒子可视化形态：

   • ImageParticle：纹理贴图

     ImageParticle {source: "particle.png"color: "#FF5733"alpha: 0.8
     }
     

   • ItemParticle：使用 QML 组件作为粒子
   • CustomParticle：自定义 GLSL 着色器

4. 影响器 (Affector)
   动态修改粒子属性：

   Gravity {system: sysmagnitude: 500    // 重力强度angle: 90         // 向下
   }
   

   其他影响器包括：

   • Friction（摩擦力）
   • Attractor（吸引/排斥）
   • Turbulence（湍流）

---

二、粒子运动数学模型

粒子行为遵循牛顿力学：

1. 速度更新（含加速度影响）：
   $$\vec{v}(t)=\overrightarrow{v_0}+\vec{a}\cdot t$$
2. 位移计算：
   $$\vec{s}(t)=\overrightarrow{s_0}+\overrightarrow{v_0}\cdot t+\frac{1}{2}\vec{a}\cdot t^2$$
   其中：
   • $\overrightarrow{v_0}$ 为初始速度
   • $\vec{a}$ 为加速度（如重力）
   • $t$ 为粒子存活时间

---

三、基本粒子系统结构

import QtQuick 2.15
import QtQuick.Particles 2.15Item {width: 400height: 400// 1. 粒子系统（必须）ParticleSystem {id: particleSystem}// 2. 发射器Emitter {system: particleSystem// 发射器配置...}// 3. 渲染器ImageParticle {system: particleSystem// 渲染器配置...}// 4. 影响器（可选）Wander {system: particleSystem// 影响器配置...}
}

四、完整示例

1、火焰效果

ParticleSystem {id: fireSystem
}Emitter {id: fireEmittersystem: fireSystemanchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCenterwidth: 40; height: 40emitRate: 100       // 每秒发射粒子数lifeSpan: 2000      // 粒子生命周期(ms)size: 24           // 粒子大小sizeVariation: 8    // 大小变化范围velocity: AngleDirection {angle: 270      // 向上发射angleVariation: 45magnitude: 120  // 速度}acceleration: PointDirection {y: -40          // 向上加速度}
}ImageParticle {system: fireSystemsource: "qrc:/particle.png"color: "#ffa000"colorVariation: 0.4alpha: 0.1
}

2、雪花飘落效果

ParticleSystem {id: snowSystem
}Emitter {system: snowSystemanchors.top: parent.topwidth: parent.widthheight: 1emitRate: 20lifeSpan: 10000size: 16sizeVariation: 8velocity: AngleDirection {angle: 90angleVariation: 30magnitude: 50}acceleration: PointDirection {y: 20xVariation: 10}
}ImageParticle {system: snowSystemsource: "qrc:/snowflake.png"color: "white"alpha: 0.8rotationVariation: 180rotationVelocity: 30entryEffect: ImageParticle.Scale
}

3、烟花爆炸效果

ParticleSystem {id: fireworks
}Emitter {id: rocketEmittersystem: fireworksemitRate: 0.5       // 每2秒发射一个火箭lifeSpan: 2000size: 8velocity: AngleDirection {angle: 270magnitude: 300}onEmitParticles: {explosionEmitter.burst(100, rocketEmitter.particleX(particle), rocketEmitter.particleY(particle))}
}Emitter {id: explosionEmittersystem: fireworksenabled: false      // 手动触发lifeSpan: 1200lifeSpanVariation: 400size: 16sizeVariation: 8velocity: AngleDirection {angle: 0angleVariation: 360magnitude: 150magnitudeVariation: 50}acceleration: PointDirection {y: 80}
}ImageParticle {system: fireworkssource: "qrc:/sparkle.png"colorVariation: 0.6alpha: 0.6rotationVariation: 180
}

---

五、性能优化技巧

1. 粒子数量控制：

   • 优先降低 emitRate 而非 lifeSpan
   • 使用 ParticleGroup 分组管理

2. 渲染优化：

   • 纹理尺寸 ≤ 64x64 像素
   • 避免透明通道过度混合

3. 动态启停：

   Emitter {enabled: animation.running // 随动画启停
   }
   

4. 使用简单粒子图像：

   ImageParticle {source: "qrc:/simple_circle.png"  // 小尺寸简单图形
   }
   

5. 适时暂停系统：

   ParticleSystem {id: sysrunning: visible  // 不可见时暂停
   }
   

注意：粒子系统默认使用 OpenGL 渲染后端，需确保环境支持 QSG_RENDERER_DEBUG=1 可输出场景图调试信息。

六、实例展示

import QtQuick
import QtQuick.Particles
import QtQuick.ControlsWindow {width: 800height: 600visible: truetitle: qsTr("Hello World")color: "black"ParticleSystem {id: snowSystem}Emitter {system: snowSystemanchors.top: parent.topwidth: parent.widthheight: 1emitRate: 20lifeSpan: 10000size: 16sizeVariation: 8velocity: AngleDirection {angle: 90angleVariation: 30magnitude: 50}acceleration: PointDirection {y: 20xVariation: 10}}ImageParticle {system: snowSystemsource: "qrc:/image/image/snowpng.png"color: "white"alpha: 0.8rotationVariation: 180rotationVelocity: 30entryEffect: ImageParticle.Scale}}