《QmlBook》笔记（15）：粒子组实现烟花爆炸效果

Tracer.qml

import QtQuick 2.9
  
Item
{
	id: root
	anchors.fill: parent   
	anchors.margins: 1
	property color color: 'red'
	
    Rectangle
    {
		anchors.fill: parent
		color: 'transparent'
		border.color: root.color
        border.width: 2
        opacity: 0.8
	}
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window
{
    visible: true
    width: 640
    height: 480
    Rectangle
    {
        id: root
        anchors.fill: parent

        color: "#0F0F0F"
        property bool tracer: false

        ParticleSystem
        {
            id: particleSystem
        }

        //火箭喷射烟雾粒子
        ImageParticle
        {
            id: smokePainter
            system: particleSystem
            groups: ['smoke']
            source: "qrc:/assets/particle.png"
            alpha: 0.9
        }

        //粒子图片画笔画火箭粒子
        ImageParticle
        {
            id: rocketPainter
            system: particleSystem
            groups: ['rocket']//使用groups属性来定义粒子的归属。只需要定
                              //义一个名字，Qt Quick将会隐式的创建这个分组
            source: "qrc:/assets/rocket.png"
            entryEffect: ImageParticle.Fade
        }

        Emitter //火箭粒子发射器
        {
            id: rocketEmitter
            anchors.bottom: parent.bottom
            width: parent.width;
            height: 40
            system: particleSystem
            group: 'rocket'
            emitRate: 2
            maximumEmitted: 8
            lifeSpan: 4800
            lifeSpanVariation: 400
            size: 32
            velocity:
            AngleDirection
            {
                angle: 270;
                magnitude: 150;
                magnitudeVariation: 10
            }
            acceleration:
            AngleDirection //模拟重力 设置一个向下的加速度
            {
                angle: 90;
                magnitude: 50
            }
            Tracer
            {
                color: 'red';
                visible: root.tracer
            }
        }

        //跟踪发射器
        TrailEmitter
        {
            id: smokeEmitter
            system: particleSystem
            group: 'smoke'
            follow: 'rocket' //设置smoke组发射的粒子会跟在rocket发射的粒子后面
            size: 16
            sizeVariation: 8
            emitRatePerParticle: 16
            velocity:
            AngleDirection
            {
                angle: 90;
                magnitude: 100;
                angleVariation: 15
            }
            lifeSpan: 200
            Tracer
            {
                color: 'blue';
                visible: root.tracer
            }
        }

        //为火箭组的粒子设置一个抹茶控制器 让火箭到达一定位置后减速
        //由于向下加速度的持续作用 最终会使火箭往下掉
        Friction
        {
            groups: ['rocket']
            anchors.top: parent.top
            width: parent.width; height: 80
            system: particleSystem
            threshold: 5
            factor: 0.9
        }

        //模拟一些紊流
        Turbulence
        {
            groups: ['rocket']
            anchors.bottom: parent.bottom
            width: parent.width; height: 160
            system: particleSystem
            strength:25
            Tracer
            {
                color: 'green';
                visible: root.tracer
            }
        }

        //粒子画笔画烟花粒子
        ImageParticle
        {
            id: sparklePainter
            system: particleSystem
            groups: ['sparkle']
            color: 'red'
            colorVariation: 0.6
            source: "qrc:/assets/star.png"
            alpha: 0.5
        }

        //GroupGoal控制器 影响'rocket'粒子组
        GroupGoal
        {
            id: rocketChanger
            anchors.top: parent.top
            width: parent.width;
            height: 300
            system: particleSystem
            groups: ['rocket']
            goalState: 'explosion'//当火箭粒子进入GroupGoal控制器区域时 粒子组中的粒子变成什么样子
            jump: true//定义了粒子组的变化是立即变化而不是在某个时间段后变化
            Tracer
            {
                color: 'blue';
                visible: root.tracer
            }
        }

        ParticleGroup
        {
            name: 'explosion'
            system: particleSystem

            TrailEmitter //跟踪发射器
            {
                //跟随火箭粒子每秒发射200个火箭爆炸粒子。粒子的方向向上，并改变180度
                id: explosionEmitter
                anchors.fill: parent
                group: 'sparkle'
                follow: 'rocket'
                lifeSpan: 750
                emitRatePerParticle: 200
                size: 32
                velocity:
                AngleDirection
                {
                    angle: -90;
                    angleVariation: 180;
                    magnitude: 50
                }
            }

            //为了使烟花更加壮观， 我们也需要添加给我们的粒子组添加第二个轨迹发射器，
            //它向下发射锥形粒子：
            TrailEmitter
            {
                id: explosion2Emitter
                anchors.fill: parent
                group: 'sparkle'
                follow: 'rocket'
                lifeSpan: 250
                emitRatePerParticle: 100
                size: 32
                velocity: AngleDirection
                {
                    angle: 90;
                    angleVariation: 15;
                    magnitude: 400
                }
            }
        }
    }
}

效果： 

用到的图片：