《QmlBook》笔记（14）：粒子系统示例

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window
{
    visible: true
    width: 1000;
    height: 800

    Rectangle
    {
        id: root;
        anchors.fill: parent
        color: "#1f1f1f"

        ParticleSystem //粒子系统
        {
            id: particles
        }

        Emitter //发射器 向系统发射粒子 定义了发射区域和发射粒子的基础属性
        {
            id: emitter
            y:400
//            width: 900;
//            height: 700
            width: 1;//将发射器的宽度和高度都设置为1px，意味着所有粒子都会从相同位置发射，也就具有相同的轨迹起点。
            height: 1
            system: particles
            emitRate: 10// 发射器每秒发射10个粒子
            lifeSpan: 9000//每个粒子的生命周期是9000毫秒 默认为1000毫秒
            lifeSpanVariation: 500//一个已发射粒子的生命周期变化是500毫秒
            size: 16// 一个粒子开始的大小是16个像素
            endSize: 32//生命周期结束时的大小是32个像素

            //速度 可以不设置
//            velocity:
//            AngleDirection //角度方向
//            {
//                //粒子的发射将会使用指定的角度属性。角度值在0到360度之间，0度代表指向右边
//                angle: 0//粒子的移动方向指向0度 即向右移动
//                angleVariation: 15//粒子的角度变化在+/-15度之间
//                magnitude: 100//粒子每秒钟移动100像素
//                magnitudeVariation: 50//粒子每秒钟移动像素在+/-50像素之间
//            }

//            velocity: //使用点方向作为速度
//            PointDirection
//            {
//                x: 100
//                y: 0
//                xVariation: 0
//                yVariation: 100/6
//            }

            velocity:
            TargetDirection //目标方向作为速度 粒子都流向这个目标位置
            {
                targetX: 100
                targetY: 0
                targetVariation: 100/6
                magnitude: 100
            }

            //加速度是每个粒子加速度矢量（大小 方向）
//            acceleration:
//            AngleDirection
//            {
//                //设置这两个值可使粒子的运动轨迹是个弧形
//                angle: 90
//                magnitude: 25
//            }
            /*
            用来显示发射器的几何形状。这个可视化展示了粒子在发射器矩形框内发射，
            但是渲染效果不被限制在发射器的矩形框内。渲染位置依赖于粒子的寿命和方向。
            */
        }

//        ItemParticle //粒子项 粒子项可以将QML元素项作为粒子发射
//        {
//            system: particles
//            delegate: Rectangle
//            {
//                id: rect
//                width: 10
//                height: 10
//                color: "red"
//                radius: 10
//            }
//        }

        //也可以不使用粒子项而使用粒子画笔
        ImageParticle
        {
            source: "qrc:/img/star.png"
            system: particles
            color: '#FFD700'//粒子使用金色来进行初始化
            colorVariation: 0.2//不同的粒子颜色变化范围为+/- 20%
            rotation: 15//粒子初始角度
            rotationVariation: 45//不同的粒子在+/-45度之间变化
            rotationVelocity: 15//每个例子会不断的以每秒15度旋转
            rotationVelocityVariation: 15//每个粒子的旋转速度在+/-15度之间变化
            entryEffect: ImageParticle.Scale//粒子产生时的效果：缩放
        }
    }
}

粒子影响器

粒子由发射器发射。一旦粒子发射出来，发射器的任务就已经完成，不会再对粒子有任何影响。如果需要影响已经发射出的粒子，需要使用影响器（affector）。影响器有很多种类：

• Age：改变粒子的生命周期，一般用于提前结束粒子的生命周期
• Attractor：将粒子吸引到一个指定的点
• Friction：按比例降低粒子的当前速度
• Gravity：添加一个有一定角度的加速度
• Turbulence：为粒子增加一个图像噪音
• Wander：随机改变粒子轨迹
• GroupGoal：改变粒子组的状态
• SpriteGoal：改变精灵粒子的状态

Age影响器

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window
{
    visible: true
    width: 1000;
    height: 800

    Rectangle
    {
        id: root;
        anchors.fill: parent
        color: "#1f1f1f"

        ParticleSystem //粒子系统
        {
            id: particles
        }

        Emitter //发射器 向系统发射粒子 定义了发射区域和发射粒子的基础属性
        {
            id: emitter
            y:400
//            width: 900;
//            height: 700
            width: 1;//将发射器的宽度和高度都设置为1px，意味着所有粒子都会从相同位置发射，也就具有相同的轨迹起点。
            height: 1
            system: particles
            emitRate: 10// 发射器每秒发射10个粒子
            lifeSpan: 9000//每个粒子的生命周期是9000毫秒 默认为1000毫秒
            lifeSpanVariation: 500//一个已发射粒子的生命周期变化是500毫秒
            size: 16// 一个粒子开始的大小是16个像素
            endSize: 32//生命周期结束时的大小是32个像素

            //速度 可以不设置
//            velocity:
//            AngleDirection //角度方向
//            {
//                //粒子的发射将会使用指定的角度属性。角度值在0到360度之间，0度代表指向右边
//                angle: 0//粒子的移动方向指向0度 即向右移动
//                angleVariation: 15//粒子的角度变化在+/-15度之间
//                magnitude: 100//粒子每秒钟移动100像素
//                magnitudeVariation: 50//粒子每秒钟移动像素在+/-50像素之间
//            }

//            velocity: //使用点方向作为速度
//            PointDirection
//            {
//                x: 100
//                y: 0
//                xVariation: 0
//                yVariation: 100/6
//            }

            velocity:
            TargetDirection //目标方向作为速度 粒子都流向这个目标位置
            {
                targetX: 100
                targetY: 0
                targetVariation: 100/6
                magnitude: 100
            }

            //加速度是每个粒子加速度矢量（大小 方向）
//            acceleration:
//            AngleDirection
//            {
//                //设置这两个值可使粒子的运动轨迹是个弧形
//                angle: 90
//                magnitude: 25
//            }
            /*
            用来显示发射器的几何形状。这个可视化展示了粒子在发射器矩形框内发射，
            但是渲染效果不被限制在发射器的矩形框内。渲染位置依赖于粒子的寿命和方向。
            */
        }

//        ItemParticle //粒子项 粒子项可以将QML元素项作为粒子发射
//        {
//            system: particles
//            delegate: Rectangle
//            {
//                id: rect
//                width: 10
//                height: 10
//                color: "red"
//                radius: 10
//            }
//        }

        //也可以不使用粒子项而使用粒子画笔
        ImageParticle
        {
            source: "qrc:/img/star.png"
            system: particles
            color: '#FFD700'//粒子使用金色来进行初始化
            colorVariation: 0.2//不同的粒子颜色变化范围为+/- 20%
            rotation: 15//粒子初始角度
            rotationVariation: 45//不同的粒子在+/-45度之间变化
            rotationVelocity: 15//每个例子会不断的以每秒15度旋转
            rotationVelocityVariation: 15//每个粒子的旋转速度在+/-15度之间变化
            entryEffect: ImageParticle.Scale//粒子产生时的效果：缩放
        }
    }

    Age
    {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 140;
        height: 620
        x:200
        system: particles
        advancePosition: true
        lifeLeft: 1500
        once: true
        Rectangle
        {
            //这里设置的粒子寿命是9000ms 当粒子经过这个区域时粒子的寿命变成1500ms
            //advancePosition设置为true则粒子会出现在根据预期当粒子寿命为1500ms时应出现的位置
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }
}

Attractor影响器

将粒子吸引到使用 pointX 和 pointY 定位的指定点，该点的坐标相对于 Attractor。strength属性指定吸引的强度。

    Attractor
    {
       anchors.horizontalCenter: parent.horizontalCenter
       width: 140;
       height: 620
       x:200
       system: particles
       pointX: 0
       pointY: 0
       strength: 1.0
       Rectangle
       {
           anchors.fill: parent
           color: 'transparent'
           border.color: 'green'
           border.width: 2
           opacity: 0.8
       }
    }

Friction控制器

会按照一定比例降低粒子的速度。粒子会按照factor为 0.8 的比例降低粒子的速度，直到降低到 25 像素/秒：

    Friction
    {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 140;
        height: 620
        x:200
        system: particles
        factor : 0.8
        threshold: 25
        Rectangle
        {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }

Gravity影响器

为粒子添加一个加速度，所有进入到影响器范围内的粒子都会添加一个加速度。

    Gravity
    {
        width: 140;
        height: 620
        x:200
        system: particles
        magnitude: 50
        angle: 90
        Rectangle
        {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }

Turbulence影响器

为每个粒子添加一个力向量。每个粒子所获得的随机力向量都是随机的，strength 属性定义了作用到粒子上面的向量有多强。一旦进入到影响器的范围内，粒子就像发疯一样到处乱穿，而不是原本按照从左向右的方向保持一个大致的轨迹。

    Turbulence
    {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 340;
        height: 620
        x:200
        system: particles
        strength: 100
        Rectangle
        {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }

Wander影响器

• affectedParameter 属性指定Wander可以控制哪一个属性（速度、位置或者加速度等）
• pace 属性指定每秒该属性变化的最大值
• xVariance 和 yVariance 指定粒子轨迹 x 和 y 坐标的浮动区间

下面例子中，影响器作用于粒子轨迹的位置属性，轨迹位置会以每秒 200 次的频率，在 x 方向上随机震动：

    Wander
    {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 340;
        height: 620
        x:200
        system: particles
        affectedParameter: Wander.Position
        pace: 200
//        yVariance: 240
        xVariance: 500
        Rectangle
        {
            anchors.fill: parent
            color: 'transparent'
            border.color: 'green'
            border.width: 2
            opacity: 0.8
        }
    }