QML开发：粒子模拟

原创于 2025-08-15 13:58:11 发布 · 1k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#qt

QML教程专栏收录该内容

10 篇文章

订阅专栏

文章目录

一、基本概念

粒子模拟的核心是粒子系统（ParticleSystem），它控制了共享时间线。一个场景下可以有多个粒子系统，每个都有自己独立的时间线。一个粒子使用发射器元素（Emitter）发射，使用粒子画笔（ParticlePainter）实现可视化，它可以是一张图片，一个QML项或者一个着色项（shader item）。一个发射器元素（Emitter）也提供向量来控制粒子方向。一个粒子被发送后就再也无法控制。粒子模型提供粒子控制器（Affector），它可以控制已发射粒子的参数。
在一个系统中，粒子可以使用粒子群元素（ParticleGroup）来共享移动时间。默认下，每个例子都属于空（“”）组。

粒子系统（ParticleSystem）- 管理发射器之间的共享时间线。
发射器（Emitter）- 向系统中发射逻辑粒子。
粒子画笔（ParticlePainter）- 实现粒子可视化。
方向（Direction）- 已发射粒子的向量空间。
粒子组（ParticleGroup）- 每个粒子是一个粒子组的成员。
粒子控制器（Affector）- 控制已发射粒子。

模块导入：

import QtQuick 2.12
import QtQuick.Particles 2.12

核心元素：

ParticleSystem：粒子系统的管理容器，所有粒子相关元素都要放在它里面
Emitter：粒子发射器，控制粒子产生的位置、方向、速率等
ImageParticle：粒子的外观（贴图、大小、颜色等）
TrailEmitter：尾迹发射器，让粒子留下拖尾效果
CustomParticle：自定义粒子外观（GLSL Shader）
Affector：粒子影响器（如重力、速度改变、碰撞等）

粒子工作流程：

ParticleSystem 提供粒子管理和生命周期控制。
Emitter 按一定速率生成粒子，并设定初速度、角度、寿命等。
ImageParticle 或 CustomParticle 决定粒子的外观。
Affector 修改粒子的运动或状态（重力、风等）。

二、简单模拟

基础示例 — 简单的烟花：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Particles 2.12

Window {
    visible: true
    width: 400
    height: 400
    color: "black"

    ParticleSystem {
        id: ps
        anchors.fill: parent
    }

    Emitter {
        system: ps
        anchors.centerIn: parent
        emitRate: 100              // 每秒发射粒子数
        lifeSpan: 2000             // 粒子寿命（毫秒）
        size: 8                    // 粒子初始大小
        velocity: AngleDirection { // 初速度方向
            angle: 0
            angleVariation: 360    // 全方向发射
            magnitude: 100         // 初速度大小
            magnitudeVariation: 50
        }
    }

    ImageParticle {
        system: ps
        source: "qrc:/particle.png" // 粒子贴图
        color: "yellow"
        entryEffect: ImageParticle.Scale
        fade: true
    }
}

说明：

emitRate 决定粒子密度。
lifeSpan 决定粒子多久消失。
velocity 决定粒子速度与方向。
ImageParticle 决定外观，并支持颜色渐变和淡出。

三、粒子参数

3.1 ParticleSystem（粒子系统容器）
ParticleSystem 是所有粒子的统一管理器，控制粒子的生命周期、更新频率等。

ParticleSystem {
    id: ps
    running: true  // 是否运行
}

在这里插入图片描述
3.2 Emitter（粒子发射器）
Emitter 决定粒子的产生方式、位置、速率、寿命等，是粒子系统的“生产车间”。

Emitter {
    system: ps
    emitRate: 100
    lifeSpan: 2000
    velocity: AngleDirection {
        angle: 0
        angleVariation: 360
        magnitude: 100
        magnitudeVariation: 50
    }
}

在这里插入图片描述
方向（Direction）类型：
AngleDirection：用角度和速度控制方向

velocity: AngleDirection {
    angle: 90                  // 向下
    angleVariation: 10         // ±10° 随机
    magnitude: 200             // 速度
    magnitudeVariation: 50
}

PointDirection：指定 XY 速度

velocity: PointDirection { x: 100; y: -50 }

TargetDirection：指向一个目标 Item

velocity: TargetDirection { targetX: 300; targetY: 300 }

3.3 ImageParticle（粒子外观）
决定粒子长什么样、颜色变化、透明度变化等。

ImageParticle {
    system: ps
    source: "particle.png"
    color: "yellow"
    colorVariation: 0.3
    fade: true
}

在这里插入图片描述
3.4 Affector（粒子影响器）
用来改变粒子轨迹、速度或其他状态，例如重力、风、随机漂移等。

常用影响器
Gravity：

Gravity {
    system: ps
    magnitude: 100
    angle: 90 // 向下
}

在这里插入图片描述
Wander：

Wander {
    system: ps
    pace: 100
    xVariance: 50
    yVariance: 50
}

在这里插入图片描述
Attractor（吸引器）：

Attractor {
    system: ps
    pointX: 200
    pointY: 200
    strength: 500
}

完整示例：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Particles 2.12

Window {
    visible: true
    width: 400
    height: 400
    color: "black"

    ParticleSystem {
        id: ps
        anchors.fill: parent
    }

    Emitter {
        system: ps
        emitRate: 80
        lifeSpan: 1500
        size: 8
        velocity: AngleDirection {
            angle: 0
            angleVariation: 360
            magnitude: 100
            magnitudeVariation: 30
        }
    }

    ImageParticle {
        system: ps
        source: "qrc:/particle.png"
        color: "yellow"
        colorVariation: 0.2
        fade: true
        rotationVelocity: 30
    }

    Gravity {
        system: ps
        magnitude: 100
        angle: 90
    }
}

四、粒子方向

在 QML 粒子系统（Qt Quick Particles）中，粒子方向（Direction）决定了粒子从发射器（Emitter）生成后运动的速度方向和分布方式。方向不仅可以是固定的，还可以是随机的、角度范围内的、甚至是跟随某个对象运动的。

4.1 基本作用
Direction 决定粒子运动的速度向量，速度的大小和方向都会影响粒子在场景中的轨迹。
它可以通过多种方式设置，例如：

固定方向（始终朝某个方向运动）
范围方向（在一定范围内随机方向）
角度 + 速度（在角度范围内发射）
受重力或速度变化影响

4.2 常用类型
在 QML 中，方向主要通过 Direction 相关类型定义，常见的有：

PointDirection：粒子沿某个固定向量（vx, vy）方向运动，可带有随机偏移。
AngleDirection：粒子沿指定角度（以度为单位）发射，可指定速度范围。
TargetDirection：粒子指向某个目标位置（如鼠标点或物体位置）。

PointDirection：

PointDirection {
    x: 100;    // 水平方向速度 (像素/秒)
    y: -50;    // 垂直方向速度
    xVariation: 20;  // x 方向速度的随机波动
    yVariation: 10;  // y 方向速度的随机波动
}

特点：适合直线运动粒子，比如雨滴、烟雾往上飘。

AngleDirection：

AngleDirection {
    angle: 90;         // 发射角度，0度向右，90度向下
    angleVariation: 20; // 角度的随机变化范围
    magnitude: 150;    // 速度大小（像素/秒）
    magnitudeVariation: 30; // 速度随机变化范围
}

特点：适合爆炸、喷射效果，可以通过角度范围制造散射。

TargetDirection：

TargetDirection {
    targetX: mouseArea.mouseX
    targetY: mouseArea.mouseY
    magnitude: 200
}

特点：让粒子朝某个点（如鼠标位置）运动，常用于跟踪效果。

结合 Emitter 使用示例：

import QtQuick 2.12
import QtQuick.Particles 2.12

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

    ParticleSystem { id: ps }

    Emitter {
        system: ps
        width: parent.width
        height: 10
        emitRate: 100
        lifeSpan: 2000
        size: 4
        sizeVariation: 2

        // 使用角度方向发射粒子
        velocity: AngleDirection {
            angle: 90
            angleVariation: 15
            magnitude: 100
            magnitudeVariation: 20
        }
    }

    ImageParticle {
        system: ps
        source: "qrc:/particle.png"
    }
}

效果：粒子从上方一条线往下发射，带有一定的角度变化，像雨点一样下落。

方向 + 加速度：
Direction 决定初速度，而 Acceleration（加速度）可以进一步控制粒子轨迹，比如重力、风力等。

Emitter {
    velocity: PointDirection { x: 0; y: -100 }
    acceleration: PointDirection { x: 0; y: 50 } // 模拟重力往下拉
}

4.3 QML 粒子方向示意图
在这里插入图片描述

五、粒子画笔

在 QML 粒子系统（Qt Quick Particles）中，粒子画笔（Particle Painter）是用来将粒子绘制到指定的 Canvas 或其他绘图表面上的一种工具，它的主要作用是让粒子在运行时用“画”的方式呈现，而不是使用单独的 ImageParticle 显示图片。

5.1 粒子画笔的核心元素
QML 中与粒子画笔相关的主要元素有：

ParticlePainter：所有粒子绘制器的基类，定义粒子如何渲染。
ImageParticle：用图片作为粒子的画笔，将粒子绘制成图片的形式。
CustomParticle：使用自定义的着色器（Shader）作为粒子画笔，可以实现特殊的渲染效果。
TrailParticle：用来绘制粒子移动时的轨迹效果。
LineParticle：用来将粒子绘制成线条状。

粒子画笔的使用流程：

创建粒子系统（ParticleSystem）
定义粒子发射器（Emitter 或 Burst）
选择绘制方式（ImageParticle、CustomParticle 等）
将绘制器与粒子系统关联（通过 system 属性）
运行粒子效果

5.2 基本示例：图片画笔粒子

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Particles 2.12

Window {
    visible: true
    width: 640
    height: 480
    color: "black"

    ParticleSystem {
        id: particleSystem
    }

    Emitter {
        system: particleSystem
        width: parent.width
        height: parent.height
        emitRate: 50
        lifeSpan: 2000
        velocity: AngleDirection {
            angle: 90       // 向下
            magnitude: 100  // 速度
        }
    }

    ImageParticle {
        system: particleSystem
        source: "star.png" // 粒子画笔图片
        alpha: 0.8
        rotation: 45
    }
}

解释：

ImageParticle 就是最常用的“画笔”，会将粒子绘制成星形。
velocity 设置粒子的运动方向和速度。
emitRate 表示每秒发射多少个粒子。

粒子画笔类型对比：
在这里插入图片描述
粒子画笔类型和效果对比示意图：

六、粒子控制

在 QML 中，粒子控制主要通过 Qt Quick Particles 模块实现，核心是 ParticleSystem 以及各种发射器（Emitter）、粒子控制器（ParticleController）和粒子渲染器（ParticlePainter）。粒子控制的作用是动态影响粒子的位置、速度、方向、寿命等属性，从而实现更灵活的粒子效果。

6.1 粒子控制的核心元素
在这里插入图片描述
6.2 基本使用流程
创建粒子系统：所有发射器、渲染器和控制器必须在一个 ParticleSystem 内部。

ParticleSystem {
    id: particleSystem
}

添加发射器：决定粒子的生成位置、速度、寿命等。

Emitter {
    system: particleSystem
    emitRate: 100
    lifeSpan: 3000
    velocity: AngleDirection { angle: 270; magnitude: 100 }
}

添加控制器：改变粒子运动轨迹。

Gravity {
    system: particleSystem
    acceleration: 50
    angle: 90 // 向下
}

添加渲染器：决定粒子外观。

ImageParticle {
    system: particleSystem
    source: "star.png"
}

6.3 控制器示例

import QtQuick 2.12
import QtQuick.Particles 2.12

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

    ParticleSystem {
        id: ps
    }

    Emitter {
        system: ps
        emitRate: 50
        lifeSpan: 3000
        width: parent.width
        height: 10
        velocity: AngleDirection { angle: 90; magnitude: 80 }
    }

    // 重力控制器
    Gravity {
        system: ps
        acceleration: 100
        angle: 90
    }

    // 随机扰动控制器
    Turbulence {
        system: ps
        strength: 50
        noiseScale: 20
    }

    ImageParticle {
        system: ps
        source: "star.png"
        size: 16
    }
}

上面例子中，粒子会从顶部向下掉落，同时受重力和随机扰动影响，呈现自然飘落效果。

QML 粒子控制类型与效果对比示意图：
在这里插入图片描述

七、粒子组

在 QML 中，粒子组（ParticleGroup）是 QtQuick.Particles 模块提供的一个元素，用来将发射的粒子进行逻辑分组，并且对不同分组的粒子施加不同的外观、运动或行为效果。这样你可以在同一个粒子系统中，让部分粒子有一种效果，另一部分粒子有另一种效果。

7.1 粒子组的作用

分类管理粒子：为不同的粒子分配不同的发射参数（颜色、速度、寿命等）。
便于控制行为：不同的组可以被单独作用，比如让一个组受重力影响，而另一个组不受。
增强表现力：可以轻松做出多种粒子效果的组合，比如雪花和雾气同时存在。

7.2 基本用法
ParticleGroup 通常作为 Emitter 或 ImageParticle 的一部分，通过 group 属性指定组名。

示例：不同组的粒子

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Particles 2.12

Window {
    width: 640
    height: 480
    visible: true

    ParticleSystem {
        id: psys
    }

    // 发射器 1：火花组
    Emitter {
        system: psys
        emitRate: 100
        lifeSpan: 800
        size: 8
        velocity: AngleDirection { angle: 0; magnitude: 100 }
        group: "spark"
    }

    // 发射器 2：烟雾组
    Emitter {
        system: psys
        emitRate: 50
        lifeSpan: 2000
        size: 20
        velocity: AngleDirection { angle: 90; magnitude: 40 }
        group: "smoke"
    }

    // 火花效果
    ImageParticle {
        system: psys
        groups: ["spark"]
        source: "spark.png"
    }

    // 烟雾效果
    ImageParticle {
        system: psys
        groups: ["smoke"]
        source: "smoke.png"
        alpha: 0.6
    }
}

说明：

group：发射器定义粒子所属的组。
groups：渲染器（如 ImageParticle）指定渲染哪些组的粒子。
同一 ParticleSystem 中可以有多个 ParticleGroup，互不干扰。

7.3 常用属性

name：组的名字（group）
duration：粒子在该组中的持续时间
whenColliding：粒子碰撞时触发组切换
transitions：粒子组之间的状态切换规则
shape：粒子生成的形状（配合 Emitter）

7.4 高级用法：组切换
可以通过 GroupGoal 或 ParticleGroup 内的 duration 来让粒子自动从一个组切换到另一个组，实现比如火花变成烟雾的效果：

ParticleGroup {
    name: "spark"
    duration: 800
    to: "smoke" // 800ms 后切换到烟雾组
}