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

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

Emitter的属性探究之二

前言

前面已经讲了Emitter发射器的很多东西了，包括一些属性和函数。发射器Emitter的属性还有一些没有讲到，没有讲到的属性为：

acceleration
maximumEmitted
group
velocity
velocityFromMovement 另外还有发射器Emitter的信号：
emitParticles 之后会一一讲解到这些属性和信号，本节来讲解velocity和acceleration属性。同时讲解这两个属性的原因是这两个属性有相同的值类型。
acceleration : StochasticDirection
velocity : StochasticDirection

StochasticDirection

StochasticDirection是发射粒子起始速度和起始加速度的值类型。这个值类型标记为随机方向，意思其实是可以选择自己想要的发射轨迹来使粒子运动。这个随机的方向在QML中的对应类型是Direction QML类型，包括：

AngleDirection
用于指定角度变化的方向。
CumulativeDirection
用于指定由其他方向组成的方向。
PointDirection
用于指定在x和y分量中变化的方向。
TargetDirection
用于指定指向目标点的方向。

AngleDirection在之前已经用过，可以用作环形发射。这次咱们来使用TargetDirection指定方向做出一个类似黑洞的效果。

TargetDirection

用于指定指向目标点的方向，下面是此类型的属性：

magnitude : real
大小
magnitudeVariation : real
大小变化量
proportionalMagnitude : bool
比例大小标志。
如果为真，则magnitude和magnitudeVariation的值应解释为源点和目标点之间距离的倍数，每秒。
如果为false(默认值)，则magnitude和magnitudeVariation的值将被解释为每秒像素数。
targetItem : Item
如果指定了，它将优先于targetX和targetY。目标点将是指定项目的中心。
targetVariation : real
目标变化值
targetX : real
目标x坐标值
targetY : real
目标y坐标值

实战

设计思路

本节使用的图片素材还是上节也用到的心形透明背景图片。使用两个发射器Emitter来构成本次的效果，一个发射器在心形边沿，一个发射器在心形覆盖的整个区域。

边沿发射器

        Emitter {
            anchors.fill: parent
            group: "edge"
            startTime: 2000
            emitRate: 2000
            lifeSpan: 2000
            size: 12
            sizeVariation: 2
            endSize: 24
            shape: MaskShape {
                source: "qrc:/mask.png"
            }
            velocity: TargetDirection {
                targetX: root.width/2
                targetY: root.height/2
                proportionalMagnitude: true
                magnitude: 0.1
                magnitudeVariation: 0.1
            }
            acceleration: TargetDirection {
                targetX: root.width/2
                targetY: root.height/2
                targetVariation: 200
                proportionalMagnitude: true
                magnitude: 0.1
                magnitudeVariation: 0.1
            }
        }

边沿发射器的发射的目标点为整个窗口的中心位置，发射速度大小为0.1，变化值也为0.1。比例标志位是开启状态。呈现的效果为粒子从边沿发射向中心聚集，但是速度很慢，根据粒子寿命长短来看，可能粒子不会完全移动到中心位置。

中心发射器

        Emitter {
            anchors.fill: parent
            group: "center"
            emitRate: 400
            lifeSpan: 2000
            size: 12
            sizeVariation: 2
            endSize: 0
            //! [0]
            shape: MaskShape {
                source: "qrc:/mask.png"
            }
            velocity: TargetDirection {
                targetX: root.width/2
                targetY: root.height/2
                proportionalMagnitude: true
                magnitude: 0.5
            }
            //! [0]
        }

中心发射器则为遮罩覆盖的整个区域，从边沿开始向中心位置发射粒子，速度较快。

完整代码

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Particles 2.2

Window {
    id: root
    width: 640
    height: 640
    visible: true
    title: qsTr("shape and direction")
    color: "black"

    ParticleSystem {
        id: particles
        anchors.fill: parent

        ImageParticle {
            groups: ["center","edge"]
            anchors.fill: parent
            source: "qrc:///particleresources/glowdot.png"
            colorVariation: 0.1
            color: "#F067B4"
        }

        Emitter {
            anchors.fill: parent
            group: "center"
            emitRate: 400
            lifeSpan: 2000
            size: 12
            sizeVariation: 2
            endSize: 0
            //! [0]
            shape: MaskShape {
                source: "qrc:/mask.png"
            }
            velocity: TargetDirection {
                targetX: root.width/2
                targetY: root.height/2
                proportionalMagnitude: true
                magnitude: 0.5
            }
            //! [0]
        }

        Emitter {
            anchors.fill: parent
            group: "edge"
            startTime: 2000
            emitRate: 2000
            lifeSpan: 2000
            size: 12
            sizeVariation: 2
            endSize: 24
            shape: MaskShape {
                source: "qrc:/mask.png"
            }
            velocity: TargetDirection {
                targetX: root.width/2
                targetY: root.height/2
                proportionalMagnitude: true
                magnitude: 0.1
                magnitudeVariation: 0.1
            }
            acceleration: TargetDirection {
                targetX: root.width/2
                targetY: root.height/2
                targetVariation: 200
                proportionalMagnitude: true
                magnitude: 0.1
                magnitudeVariation: 0.1
            }
        }
    }
}

QML粒子系统-Emitter(4)