ParticleSystem 是 QML 中用于创建和管理粒子系统的组件，可以制作各种粒子效果如火焰、烟雾、爆炸等。
基本用法
qml
import QtQuick.Particles 2.15
ParticleSystem {
id: particleSystem
ImageParticle {
source: "particle.png"
color: "red"
alpha: 0.5
}
Emitter {
anchors.centerIn: parent
emitRate: 100
lifeSpan: 2000
size: 16
velocity: AngleDirection { angle: 0; angleVariation: 360; magnitude: 100 }
}
}主要属性
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
running |
bool | 是否运行 | true |
paused |
bool | 是否暂停 | false |
empty |
bool | 是否没有活动粒子 | 只读 |
particleStates |
list<string> | 可用粒子状态列表 | 只读 |
system |
ParticleSystem | 所属粒子系统 (用于分组) | null |
方法
| 方法 | 参数 | 描述 |
|---|---|---|
start() |
- | 启动粒子系统 |
stop() |
- | 停止粒子系统 |
pause() |
- | 暂停粒子系统 |
restart() |
- | 重新启动粒子系统 |
reset() |
- | 重置粒子系统 |
clear() |
- | 清除所有粒子 |
setState(stateName) |
string | 设置粒子状态 |
takeSnapshot() |
- | 返回当前粒子的快照 |
信号
| 信号 | 描述 |
|---|---|
started() |
系统启动时触发 |
stopped() |
系统停止时触发 |
paused() |
系统暂停时触发 |
emptied() |
系统变空时触发 |
核心组件
1. ImageParticle (粒子渲染)
qml
ImageParticle {
source: "particle.png"
color: "#FF0000"
alpha: 0.8
size: 16
sizeVariation: 4
}2. Emitter (粒子发射器)
qml
Emitter {
id: emitter
width: 10; height: 10
emitRate: 50
lifeSpan: 1000
size: 16
velocity: AngleDirection {
angle: 270
angleVariation: 45
magnitude: 100
}
}3. Affector (粒子影响器)
qml
Gravity {
anchors.fill: parent
magnitude: 100
angle: 90
}使用示例
1. 火焰效果
qml
ParticleSystem {
ImageParticle {
source: "particle.png"
color: "#FF6600"
colorVariation: 0.3
alpha: 0.5
}
Emitter {
emitRate: 100
lifeSpan: 1000
size: 24
sizeVariation: 8
velocity: AngleDirection {
angle: 270
angleVariation: 30
magnitude: 50
magnitudeVariation: 20
}
acceleration: PointDirection {
y: -50
xVariation: 10
}
}
}2. 爆炸效果
qml
ParticleSystem {
ImageParticle {
source: "sparkle.png"
colorVariation: 0.8
}
Emitter {
id: explosion
emitRate: 5000
lifeSpan: 500
size: 32
sizeVariation: 16
velocity: AngleDirection {
angleVariation: 360
magnitude: 200
magnitudeVariation: 100
}
enabled: false
}
Timer {
interval: 2000
running: true
onTriggered: explosion.burst(5000)
}
}完整示例
import QtQuick 2.15
import QtQuick.Particles 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
width: 800
height: 600
visible: true
title: "QML粒子系统完整示例"
color: "#222222"
// 主粒子系统
ParticleSystem {
id: particleSystem
running: true
// 1. 火焰粒子
ImageParticle {
id: flameParticle
groups: ["flame"]
source: "qrc:/particle.png"
color: "#FF9900"
colorVariation: 0.3
alpha: 0.6
size: 24
sizeVariation: 8
entryEffect: ImageParticle.Scale
}
Emitter {
id: flameEmitter
group: "flame"
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
width: 120
height: 40
emitRate: 150
lifeSpan: 1200
size: 28
sizeVariation: 10
velocity: AngleDirection {
angle: 270
angleVariation: 30
magnitude: 80
magnitudeVariation: 30
}
acceleration: PointDirection {
y: -40
xVariation: 20
}
}
// 2. 烟雾粒子
ImageParticle {
id: smokeParticle
groups: ["smoke"]
source: "qrc:/smoke.png"
color: "#AAAAAA"
alpha: 0.3
alphaVariation: 0.2
size: 60
sizeVariation: 30
entryEffect: ImageParticle.Fade
}
Emitter {
id: smokeEmitter
group: "smoke"
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
width: 120
height: 40
emitRate: 30
lifeSpan: 2000
size: 40
sizeVariation: 20
velocity: AngleDirection {
angle: 270
angleVariation: 15
magnitude: 40
magnitudeVariation: 10
}
acceleration: PointDirection {
y: -20
xVariation: 10
}
}
// 3. 爆炸粒子
ImageParticle {
id: explosionParticle
groups: ["explosion"]
source: "qrc:/sparkle.png"
color: "#FFFF00"
colorVariation: 0.8
alpha: 0.8
size: 16
sizeVariation: 8
}
Emitter {
id: explosionEmitter
group: "explosion"
emitRate: 0
lifeSpan: 800
size: 24
sizeVariation: 12
velocity: AngleDirection {
angleVariation: 360
magnitude: 300
magnitudeVariation: 150
}
enabled: false
}
// 4. 重力影响器
Gravity {
anchors.fill: parent
magnitude: 100
angle: 90
}
// 5. 粒子年龄影响器
Age {
anchors.fill: parent
advancePosition: true
lifeLeft: 1000
}
}
// 交互控制面板
Rectangle {
anchors.bottom: parent.bottom
width: parent.width
height: 120
color: "#40000000"
radius: 10
Column {
anchors.centerIn: parent
spacing: 10
Row {
spacing: 20
Button {
text: particleSystem.running ? "暂停系统" : "启动系统"
onClicked: particleSystem.running ? particleSystem.pause() : particleSystem.start()
}
Button {
text: "创建爆炸"
onClicked: {
explosionEmitter.burst(500);
explosionEmitter.x = Math.random() * (parent.parent.width - 100);
explosionEmitter.y = Math.random() * (parent.parent.height - 100);
}
}
Button {
text: "清除粒子"
onClicked: particleSystem.clear()
}
}
Row {
spacing: 20
Slider {
id: flameSlider
width: 200
from: 0
to: 300
value: 150
onValueChanged: flameEmitter.emitRate = value
}
Text {
text: "火焰密度: " + flameSlider.value.toFixed(0)
color: "white"
anchors.verticalCenter: parent.verticalCenter
}
}
Row {
spacing: 20
Slider {
id: smokeSlider
width: 200
from: 0
to: 100
value: 30
onValueChanged: smokeEmitter.emitRate = value
}
Text {
text: "烟雾密度: " + smokeSlider.value.toFixed(0)
color: "white"
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
// 状态指示器
Text {
anchors.top: parent.top
anchors.right: parent.right
anchors.margins: 10
text: "粒子数: " + particleSystem.particleCount
color: "white"
font.pixelSize: 16
}
}性能优化建议
合理设置 emitRate 和 lifeSpan 避免过多粒子
使用简单的粒子图像
当粒子不可见时暂停系统
复用粒子系统而不是创建新的
使用 GroupGoal 管理粒子状态
注意事项
需要导入 QtQuick.Particles 模块
粒子系统会消耗较多GPU资源
复杂的粒子效果可能需要组合多个发射器和影响器
在移动设备上要注意性能问题