QML粒子系统-System（1）

前言

之前的一些关于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);
    }
复制代码
效果展示




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




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