QML粒子系统-Emitter(2)

309 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第 5 天,点击查看活动详情


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


Emitter的函数探究

前言

书接上文,前面已经介绍了Emitter发射器的属性、信号和函数,并且简单使用了其中的一些属性来实现桃心的效果。本节来讨论Emitter发射器的函数,并且利用这些函数实现不一样的效果。

Emitter类型函数

  • burst(int count, int x, int y)

立即从该发射器发射由计数指定的粒子数。粒子被发射,就像发射器被放置在(x, y),但所有其他属性都是相同的。

  • burst(int count)

立即从该发射器发射由计数指定的粒子数。

  • pulse(int duration)

如果发射器未启用,则在指定的持续时间内启用它(以毫秒为单位),然后将其关闭。

burst

从函数描述中可以知道,burst函数的功能是从发射器的位置立刻发射出一定数量的粒子。如果将粒子的发射方向设置为360°的环形,会看到使用burst函数后会发射一圈粒子,展示效果为一个圆圈。效果图如下:

image.png

pulse

从函数描述中也可以知道,pulse函数是让发射器在一段时间内发射粒子。如果将粒子的发射方向设置为360°的环形,会看到使用pulse函数后会发射一圈圈的粒子,叠加起来形成外面松散内部紧实的环带状。效果图如下:

image.png

实战

函数使用

burst

创建一个名为burstEmitter的发射器,发射方向为360°的圆形,这个发射器用来做burst函数的展示效果。

            Emitter {
                id: burstEmitter
                x: parent.width/2
                y: parent.height/3
                emitRate: 1000
                lifeSpan: 2000
                enabled: false
                velocity: AngleDirection{magnitude: 64; angleVariation: 360}
                size: 24
                sizeVariation: 8
                Text {
                    anchors.centerIn: parent
                    color: "white"
                    font.pixelSize: 18
                    text: "Burst"
                }
            }

pulse

创建一个名为pulseEmitter的发射器,发射方向为360°的圆形,这个发射器用来做pulse函数的展示效果。

            Emitter {
                id: pulseEmitter
                x: parent.width/2
                y: 2*parent.height/3
                emitRate: 1000
                lifeSpan: 2000
                enabled: false
                velocity: AngleDirection{magnitude: 64; angleVariation: 360}
                size: 24
                sizeVariation: 8
                Text {
                    anchors.centerIn: parent
                    color: "white"
                    font.pixelSize: 18
                    text: "Pulse"
                }
            }

定时器

设置一个定时器,间隔为3.5秒。burstEmitter发射器发射500粒子,pulseEmitter发射器启动0.5秒。两个发射器循环发射粒子。

        Timer {
            interval: 3500
            triggeredOnStart: true
            running: true
            repeat: true
            onTriggered: {
            //! [0]
                if (root.lastWasPulse) {
                    burstEmitter.burst(500);
                    root.lastWasPulse = false;
                } else {
                    pulseEmitter.pulse(500);
                    root.lastWasPulse = true;
                }
            //! [0]
            }
        }

完整代码

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Particles 2.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: root

        width: 640
        height: 480
        color: "black"
        property bool lastWasPulse: false
        Timer {
            interval: 3500
            triggeredOnStart: true
            running: true
            repeat: true
            onTriggered: {
            //! [0]
                if (root.lastWasPulse) {
                    burstEmitter.burst(500);
                    root.lastWasPulse = false;
                } else {
                    pulseEmitter.pulse(500);
                    root.lastWasPulse = true;
                }
            //! [0]
            }
        }
        ParticleSystem {
            id: particles
            anchors.fill: parent
            ImageParticle {
                source: "qrc:///particleresources/star.png"
                alpha: 0
                colorVariation: 0.6
            }

            Emitter {
                id: burstEmitter
                x: parent.width/2
                y: parent.height/3
                emitRate: 1000
                lifeSpan: 2000
                enabled: false
                velocity: AngleDirection{magnitude: 64; angleVariation: 360}
                size: 24
                sizeVariation: 8
                Text {
                    anchors.centerIn: parent
                    color: "white"
                    font.pixelSize: 18
                    text: "Burst"
                }
            }
            Emitter {
                id: pulseEmitter
                x: parent.width/2
                y: 2*parent.height/3
                emitRate: 1000
                lifeSpan: 2000
                enabled: false
                velocity: AngleDirection{magnitude: 64; angleVariation: 360}
                size: 24
                sizeVariation: 8
                Text {
                    anchors.centerIn: parent
                    color: "white"
                    font.pixelSize: 18
                    text: "Pulse"
                }
            }
        }
    }
}

运行效果

burst.gif