Qt Quick 的粒子系统提供了一种在 QML 中创建动态视觉效果的方式，可以用来实现火焰、烟雾、雪花、爆炸等各种粒子效果。

相关阅读

• https://doc.qt.io/qt-6/qml-qtquick-particles-particlesystem.html
• https://doc.qt.io/qt-6/qml-qtquick-particles-emitter.html

---

基本组成

Qt Quick 粒子系统主要由以下几个核心组件构成：

1. ParticleSystem - 粒子系统容器，管理所有粒子
2. Emitter - 粒子发射器，控制粒子的产生
3. ParticlePainter - 粒子绘制器，决定粒子的外观
4. Affector - 粒子影响器，改变粒子的行为

核心组件

ParticleSystem

粒子系统的根元素，协调所有粒子组件的运行。

常用属性：

• running: 控制粒子系统是否运行 (默认为true)
• paused: 暂停粒子系统
• empty: 当没有活动粒子时为true

Emitter

定义粒子的发射位置、速率、初始属性等。

常用属性：

• emitRate: 每秒发射的粒子数
• lifeSpan: 粒子生命周期(毫秒)
• size: 粒子大小
• velocity: 初始速度 (使用方向类型)
• acceleration: 加速度 (使用方向类型)
• shape: 发射区域形状

速度方向类型：

• PointDirection: 点方向 (x,y,z分量)
• AngleDirection: 角度方向 (角度和大小)
• TargetDirection: 目标方向 (指向目标点)

---

示例1：雪花飘落效果

完整代码展示

import QtQuick
import QtQuick.Particles

Rectangle {
    width: 400
    height: 400
    color: "black"

    ParticleSystem {
        id: snowSystem
        anchors.fill: parent

        ImageParticle {
            source: "qrc:/images/snowflake.png"
            color: "#FFFFFF"
            alpha: 0.8
            alphaVariation: 0.2
            rotationVariation: 180
        }

        Emitter {
            system: snowSystem
            width: parent.width
            height: 1
            anchors.top: parent.top

            emitRate: 30
            lifeSpan: 4000
            size: 16
            sizeVariation: 8
            velocity: AngleDirection {
                angle: 90
                angleVariation: 15
                magnitude: 50
                magnitudeVariation: 20
            }
            acceleration: PointDirection {
                y: 20
                xVariation: 10
            }
        }

        Wander {
            system: snowSystem
            xVariance: 30
            pace: 100
        }
    }
}

运行效果

代码说明

定义粒子的外观和特性：

ImageParticle {
    source: "qrc:/images/snowflake.png"
    color: "#FFFFFF"
    alpha: 0.8
    alphaVariation: 0.2
    rotationVariation: 180
}

• ImageParticle：粒子的视觉效果使用图像。
• source：指定雪花图像的路径。
• color：粒子的颜色为白色。
• alpha：基础不透明度为0.8。
• alphaVariation：允许不透明度在一定范围内随机变化，最大变化为0.2。
• rotationVariation：粒子旋转角度可在±180度内随机变化，增加雪花飘落的随机性和自然感。

设置粒子发射参数：

Emitter {
    system: snowSystem
    width: parent.width
    height: 1
    anchors.top: parent.top

    emitRate: 30
    lifeSpan: 4000
    size: 16
    sizeVariation: 8
    velocity: AngleDirection {
        angle: 90
        angleVariation: 15
        magnitude: 50
        magnitudeVariation: 20
    }
    acceleration: PointDirection {
        y: 20
        xVariation: 10
    }
}

其中：

• emitRate：每秒发射30个粒子。
• lifeSpan：每个粒子的生命周期为4000毫秒（4秒）。
• size：粒子的基础大小为16。
• sizeVariation：允许粒子大小在±8范围内变化。
• velocity：粒子的速度由AngleDirection定义：
• angle：基础方向为90度（向下）。
• angleVariation：允许方向随机变化±15度。
• magnitude：基础速度大小为50。
• magnitudeVariation：速度大小可在±20范围内变化。
• acceleration：粒子的加速度由PointDirection定义：（y：向下加速度为20，xVariation：水平方向有一定随机性）

添加粒子飘动效果：

Wander {
    system: snowSystem
    xVariance: 30
    pace: 100
}

• Wander：使粒子在运动时产生飘动。
• xVariance：横向偏移量为30，增加飘动范围。
• pace：飘动速度为100。

---

示例2：爆炸效果

完整代码示例

import QtQuick
import QtQuick.Particles

Rectangle {
    width: 400
    height: 400
    color: "black"

    ParticleSystem {
        id: explosionSystem
        anchors.fill: parent

        ImageParticle {
            source: "qrc:/images/star.png"
            color: "#FFFF00"
            colorVariation: 0.5
            alpha: 0.8
            alphaVariation: 0.2
        }

        Emitter {
            id: explosionEmitter
            system: explosionSystem
            x: 200
            y: 200
            emitRate: 1000
            lifeSpan: 1000
            size: 24
            sizeVariation: 8
            endSize: 4
            velocity: AngleDirection {
                angle: 0
                angleVariation: 360
                magnitude: 200
                magnitudeVariation: 50
            }
            acceleration: PointDirection {
                y: 50
            }

            // 只发射一次
            onEmitParticles: explosionEmitter.enabled = false
        }

        Timer {
            interval: 3000
            running: true
            repeat: true
            onTriggered: {
                explosionEmitter.enabled = true
                explosionEmitter.burst(500)
            }
        }
    }
}

运行效果

代码说明

设置粒子的运动特性：

velocity: AngleDirection {
    angle: 0
    angleVariation: 360
    magnitude: 200
    magnitudeVariation: 50
}
acceleration: PointDirection {
    y: 50
}

在Emitter中使用AngleDirection定义粒子的速度：

• angle: 0 表示初始方向为水平向右。
• angleVariation: 360 允许粒子向任意方向发射。
• magnitude: 200 表示基础速度大小。
• magnitudeVariation: 50 允许速度大小有一定变化。

最后使用PointDirection定义粒子的加速度，沿垂直方向向下（y: 50）。

---

下载链接

GitCode 粒子系统示例