QML粒子系统-System（1）

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

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

前言

之前的一些关于QML粒子系统的文章里已经讲过很多相关内容了，隔了一个多月没有使用QML的粒子系统，自己都感觉有点生疏，因此本节来进行一下回顾。

粒子系统的使用方法

还是老三样：

• ParticleSystem粒子系统主体
• ImageParticle图形渲染器
• Emitter粒子发射器 本节没有用到影响器，使用的是动画和计时器来产生一些附加的效果。

ParticleSystem粒子系统主体部分

这一部分的代码非常简单，只需要进行实例化即可。将其id设置为sys，方便后面的图像渲染器和粒子发射器进行关联。

    ParticleSystem {
        id: sys
    }

ImageParticle图形渲染器部分

图像渲染器部分的代码对粒子显示的形状、颜色和透明度进行了设置。

    ImageParticle {
        system: sys//关联粒子系统主体
        source: "qrc:///particleresources/glowdot.png"//设置粒子为图片显示
        color: "white"//将粒子颜色渲染为白色
        colorVariation: 1.0//粒子颜色的变化范围为1
        alpha: 0.1//设置透明度为0.1
    }

Emitter粒子发射器部分

这一部分的代码写在Component组件中，这是因为之后会用到计时器来产生粒子的分散移动效果。具体显示效果可以看文章最后的效果展示。

与Component组件关联的是一个自定义的发射函数，描述的是粒子进行分散的位置和进行移动的位置。

    Component {
        id: emitterComp
        Emitter {
            id: container
            Emitter {
                id: emitMore
                system: sys
                emitRate: 128
                lifeSpan: 600
                size: 16
                endSize: 8
                velocity: AngleDirection {angleVariation:360; magnitude: 60}
            }

            property int life: 2600
            property real targetX: 0
            property real targetY: 0
            function go() {
                xAnim.start();
                yAnim.start();
                container.enabled = true
            }
            system: sys
            emitRate: 32
            lifeSpan: 600
            size: 24
            endSize: 8
            NumberAnimation on x {
                id: xAnim;
                to: targetX
                duration: life
                running: false
            }
            NumberAnimation on y {
                id: yAnim;
                to: targetY
                duration: life
                running: false
            }
            Timer {
                interval: life
                running: true
                onTriggered: container.destroy();
            }
        }
    }
    
    function customEmit(x,y) {
        //! [0]
        for (var i=0; i<8; i++) {
            var obj = emitterComp.createObject(root);
            obj.x = x
            obj.y = y
            obj.targetX = Math.random() * 240 - 120 + obj.x
            obj.targetY = Math.random() * 240 - 120 + obj.y
            obj.life = Math.round(Math.random() * 2400) + 200
            obj.emitRate = Math.round(Math.random() * 32) + 32
            obj.go();
        }
        //! [0]
    }

定时器的使用

当鼠标进行点击显示区域时，会触发发射器所在的组件产生移动并且形成分散效果。这里在定时器中输入的参数是随机数，这意味着分散后的粒子的运动轨迹是随机的。

    Timer {
        interval: 10000
        triggeredOnStart: true
        running: true
        repeat: true
        onTriggered: customEmit(Math.random() * 320, Math.random() * 480)
    }
    MouseArea {
        anchors.fill: parent
        onClicked: (mouse)=> customEmit(mouse.x, mouse.y);
    }

效果展示