QML粒子系统-System（2）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

📒博客首页：何名取 的个人主页 - 文章 - 掘金 (juejin.cn)
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
❤️期待一起交流！
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！

前言

昨天写了一篇回顾QML粒子系统使用方法的文章上了推荐，看来粒子系统系列的文章还是大有搞头的。因此本节接着上次的回顾给出一个不同的实例，这个实例演示了燃放烟花炮竹的效果。

本节除了使用粒子系统的老三样以外，还要使用到与粒子系统相关的ParticleGroup粒子组、TrailEmitter伴随发射器和Affector影响器。这几个组件在一个多月之前的文章中也讲到过，不过一般情况下用的不是太多，不像粒子系统的老三样一样必须用到。

粒子系统的老三样：

• ParticleSystem粒子系统主体
• ImageParticle图形渲染器
• Emitter粒子发射器

设计思路

本节的设计需要用到三个粒子组，分别是：

• fire粒子组。粒子发射后的最初形态，向着下一个形态splode变化。
• splode粒子组。粒子的爆炸形态，向着下一个形态dead变化。爆炸的粒子会伴随works粒子组。
• dead粒子组。粒子的消失形态，触发影响器后启动works发射器发射works粒子组。

用到了两个发射器，分别是：

• fire发射器。初始形态粒子的发射器
• works发射器。爆炸散开的粒子的发射器

用到了一个伴随发射器，伴随发射器指定与works发射器相关联。另外还用到了Timer定时器来进行在一定时间内随机地发射粒子。

代码展示

import QtQuick
import QtQuick.Particles

Rectangle {
    width: 360
    height: 600
    color: "black"
    ParticleSystem {
        anchors.fill: parent
        id: syssy
        //! [0]
        ParticleGroup {
            name: "fire"
            duration: 2000
            durationVariation: 2000
            to: {"splode":1}
        }
        //! [0]
        //! [1]
        ParticleGroup {
            name: "splode"
            duration: 400
            to: {"dead":1}
            TrailEmitter {
                group: "works"
                emitRatePerParticle: 100
                lifeSpan: 1000
                maximumEmitted: 1200
                size: 8
                velocity: AngleDirection {angle: 270; angleVariation: 45; magnitude: 20; magnitudeVariation: 20;}
                acceleration: PointDirection {y:100; yVariation: 20}
            }
        }
        //! [1]
        //! [2]
        ParticleGroup {
            name: "dead"
            duration: 1000
            Affector {
                once: true
                onAffected: (x, y)=> worksEmitter.burst(400,x,y)
            }
        }
        //! [2]

        Timer {
            interval: 6000
            running: true
            triggeredOnStart: true
            repeat: true
            onTriggered:startingEmitter.pulse(100);
        }
        Emitter {
            id: startingEmitter
            group: "fire"
            width: parent.width
            y: parent.height
            enabled: false
            emitRate: 80
            lifeSpan: 6000
            velocity: PointDirection {y:-100;}
            size: 32
        }

        Emitter {
            id: worksEmitter
            group: "works"
            enabled: false
            emitRate: 100
            lifeSpan: 1600
            maximumEmitted: 6400
            size: 8
            velocity: CumulativeDirection {
                PointDirection {y:-100}
                AngleDirection {angleVariation: 360; magnitudeVariation: 80;}
            }
            acceleration: PointDirection {y:100; yVariation: 20}
        }

        ImageParticle {
            groups: ["works", "fire", "splode"]
            source: "qrc:///particleresources/glowdot.png"
            entryEffect: ImageParticle.Scale
        }
    }
}

效果展示