QML粒子系统-System（2）

前言

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

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

粒子系统的老三样：

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

设计思路

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

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

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

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

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

代码展示

import QtQuickimport 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        }    }}



效果展示




作者：何名取
链接：https://juejin.cn/post/7110973849469976607
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。




原文始发于微信公众号（汇编语言）：QML粒子系统-System（2）