Qt5官方demo分析集11——Qt Quick Particles Examples - Affectors

在这个系列中的所有文章都可以在这里查看http://blog.****.net/cloud_castle/article/category/2123873

接上文Qt5官方demo解析集10——Qt
Quick Particles Examples - Emitters

Affectors是Qt官方粒子系统demo中的第二个例程，它是在Emitters上的进一步扩展。我们将看到。通过使用Affectors，我们可以创造更加灵活的粒子显示以及交互行为。

首先还是看下介绍：This is a collection of small QML examples relating to using Affectors in the particle system. Each example is a small QML file emphasizing a particular type or feature.

非常简短，告诉我们这个demo依旧是由多个使用Affectors的小样例构成。执行后是相同的选择框：

一共同拥有10个样例，我们还是从第一个開始：

（1）Age

来看看<“杀掉”进入Affector的粒子>是个什么效果：进入图中矩形框的雪花都变小并逐渐消失了。

来看看这个小样例是怎么写的吧~ age.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    id: root
    width: 360
    height: 600
    color: "white"

    ParticleSystem { id: particles }

    ImageParticle {            // 这里向我们展示第二种图像粒子的设置
        system: particles
        sprites: Sprite {      // sprites属性用来定义一组帧图片来作为粒子。这样粒子能够像GIF一样拥有自己的动画
            name: "snow"
            source: "../../images/snowflake.png"  // 这是一张具有51帧的雪花图形
            frameCount: 51
            frameDuration: 40                     // 帧动画的基本设置
            frameDurationVariation: 8
        }
    }

    Emitter {
        system: particles
        emitRate: 20
        lifeSpan: 8000
        velocity: PointDirection { y:80; yVariation: 40; }  // 加速度下落
        acceleration: PointDirection { y: 4 }
        size: 36
        endSize: 12
        sizeVariation: 8
        width: parent.width
        height: 100
    }

    MouseArea {
        id: ma
        anchors.fill: parent
        hoverEnabled: true
    }

    Rectangle {                   // 这里使用Rectangle作为Age的父类，当然Age能够定义自己的坐标以及区域。可是增加Rectangle可视化效果更好
        color: "#803333AA"                        // 半透明的湛蓝色
        border.color: "black"
        x: ma.mouseX - 36                         // 这里用到属性绑定使得该矩形能够尾随鼠标的移动，并以鼠标为中心点
        y: ma.mouseY - 36
        width: 72
        height: 72
        //! [0]
        Age {                         // Age继承自Affector，事实上在上一篇Emitters中我们就接触了一个Affector:Turbulence。它能够提供一个气流的效果，而这里的Age则同意我们改变粒子的生命周期。
            anchors.fill: parent
            system: particles
            once: true                // 每一个粒子仅仅影响一次
            lifeLeft: 1200            // 粒子剩下的时间
            advancePosition: false    // 退化是否影响位置、速度、和加速度
        }
        //! [0]
    }
}

雪花图太长。截一部分好了：

（2）Attractor

这个小样例使用Affector中的Attractor(吸引者)向我们展示了怎样使用粒子系统模拟一个黑洞。

能够看到图中心有一个“黑洞”，靠近黑洞的粒子会被改变执行轨迹，太近的粒子会被吸进去。假设须要我们自己来写这样的速度改变的代码可能会相当繁琐。好在QtQuick给我们提供了Attractor这个Affector，来看看它怎么使用的~attractor.qml

import QtQuick 2.0
import QtQuick.Particles 2.0
Rectangle {
    id: root
    width: 360
    height: 540
    color: "black"
    Image {
        source: "qrc:/images/finalfrontier.png"
        anchors.centerIn:parent
    }
    ParticleSystem {
        id: particles
        anchors.fill: parent
        Emitter {                    // 星星发射器
            group: "stars"
            emitRate: 40
            lifeSpan: 4000
            enabled: true
            size: 30
            sizeVariation: 10
            velocity: PointDirection { x: 220; xVariation: 40 }
            height: parent.height  // height定义了发射发射区域的高度，否则粒子从（0,0）发出
        }
        Emitter {                    // 陨石发射器
            group: "roids"
            emitRate: 10
            lifeSpan: 4000
            enabled: true
            size: 30
            sizeVariation: 10
            velocity: PointDirection { x: 220; xVariation: 40 }
            height: parent.height
        }
        ImageParticle {              // 星星
            id: stars
            groups: ["stars"]
            source: "qrc:///particleresources/star.png"
            color: "white"
            colorVariation: 0.5
            alpha: 0
        }
        ImageParticle {              // 陨石
            id: roids
            groups: ["roids"]
            sprites: Sprite {      // 这里再次使用了帧动画，由于未定义frameDurationVariation。全部陨石的旋转速度都是同样的
                id: spinState
                name: "spinning"
                source: "qrc:/images/meteor.png"
                frameCount: 35
                frameDuration: 60
            }
        }
        ImageParticle {             // 飞船子弹
            id: shot
            groups: ["shot"]
            source: "qrc:///particleresources/star.png"
            color: "#0FF06600"
            colorVariation: 0.3
        }
        ImageParticle {             // 尾气
            id: engine
            groups: ["engine"]
            source: "qrc:///particleresources/fuzzydot.png"
            color: "orange"
            SequentialAnimation on color {        // 属性动画
                loops: Animation.Infinite
                ColorAnimation {
                    from: "red"
                    to: "cyan"
                    duration: 1000
                }
                ColorAnimation {
                    from: "cyan"
                    to: "red"
                    duration: 1000
                }
            }
            colorVariation: 0.2
        }
        //! [0]
        Attractor {                   // Affector家族中的一员，能够形成吸引其它粒子的效果
            id: gs; pointX: root.width/2; pointY: root.height/2; strength: 4000000;   // pointX,pointY是其作为目标点，同其它Affector一样。设置其x，y，height，weidth改变的是其影响区域
            affectedParameter: Attractor.Acceleration           // 设置为影响加速度
            proportionalToDistance: Attractor.InverseQuadratic       // 影响效果与距离的比例关系
        }
        //! [0]
        Age {                        // 在Attractor周围再安装一个Age。由于这里没有设置lifeLeft。粒子进入该区域变消失了
            x: gs.pointX - 8;        // Age的影响区域
            y: gs.pointY - 8;
            width: 16
            height: 16
        }
        Rectangle {                  // 用矩形画圆的方法
            color: "black"
            width: 8
            height: 8
            radius: 4
            x: gs.pointX - 4
            y: gs.pointY - 4
        }
        Image {                        // 飞行器
            source:"qrc:/images/rocket2.png"
            id: ship
            width: 45
            height: 22
            //Automatic movement
            SequentialAnimation on x {             // 属性动画，这里使用了弹线轨迹
                loops: -1
                NumberAnimation{to: root.width-45; easing.type: Easing.InOutQuad; duration: 2000}
                NumberAnimation{to: 0; easing.type: Easing.OutInQuad; duration: 6000}
            }
            SequentialAnimation on y {
                loops: -1
                NumberAnimation{to: root.height-22; easing.type: Easing.OutInQuad; duration: 6000}
                NumberAnimation{to: 0; easing.type: Easing.InOutQuad; duration: 2000}
            }
        }
        Emitter {                           // 尾气粒子
            group: "engine"
            emitRate: 200
            lifeSpan: 1000
            size: 10
            endSize: 4
            sizeVariation: 4
            velocity: PointDirection { x: -128; xVariation: 32 }
            height: ship.height
            y: ship.y
            x: ship.x
            width: 20
        }
        Emitter {                         // 子弹粒子
            group: "shot"
            emitRate: 32
            lifeSpan: 1000
            enabled: true
            size: 40
            velocity: PointDirection { x: 256; }
            x: ship.x + ship.width
            y: ship.y + ship.height/2
        }
    }
}

（3）Custom Affector

在这个样例中我们将了解到怎样实现一个自己定义的Affector，以及通过这个Affector实现落叶飘落的效果。

当Affector的子类都不能满足我们的需求的时候，这样的方式就显得尤为重要了。

直接上代码。因为我会调试这些代码因此其图片的路径被我改成了资源路径，希望没有影响到大家。customaffector.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0
Item {                         // 假设这个文件作为一个组件，Image作为根项目将使使用这个组件的人能够对其随意改动
    width: 360
    height: 600
    Image {                           // 因此不推荐将Image作为根文件夹，而是以Item作为替代，而嵌套Image
        source: "qrc:/images/backgroundLeaves.jpg"
        anchors.fill: parent
    }
    ParticleSystem {
        anchors.fill: parent
        Emitter {
            width: parent.width       // 粒子出现的点为(0,0)到(360,0)
            emitRate: 4
            lifeSpan: 14000
            size: 80
            velocity: PointDirection { y: 60 } // 初始速度
        }
        Wander {                      // 一个系统自带的Affector:Wander（漫步者），它能够用来提供随机的粒子轨迹，这样形成了左右晃动的叶子
            anchors.fill: parent
            anchors.bottomMargin: 100  // 与设置Affector的height相似，确定Wander的影响区域
            xVariance: 60              // x方向上的变化率
            pace: 60                   // 最大步长
        }
        //! [0]
        Affector {                     // 主要的Affector类不会改变粒子不论什么属性，但我们能够在合适的时候发出信号来做出对应的处理
            property real coefficient: 0.1   // 自己定义属性“同步系数”和“速度”
            property real velocity: 1.5
            width: parent.width
            height: parent.height - 100      // 底部100像素不再产生影响
            onAffectParticles: {      // 仅仅要有粒子被该Affector影响，这个handler就被触发。

通过它我们能够定义自己的Affector行为。相似onEmitterParticles，因为使用了javaScript数组以及计算。我们相同不推荐在包括大量粒子的系统中使用它。
              //Linear movement               // 这一段是在源代码中被凝视的，它提供了线性摇动的计算
//                if (particle.r == 0) {
//                    particle.r = Math.random() > 0.5 ? -1 : 1;
//                } else if (particle.r == 1) {
//                    particle.rotation += velocity * dt;    // 不知道这个dt是什么，仅仅知道是一个比較小的小数...
//                    if (particle.rotation >= maxAngle)
//                        particle.r = -1;
//                } else if (particle.r == -1) {
//                    particle.rotation -= velocity * dt;
//                    if (particle.rotation <= -1 * maxAngle)
//                        particle.r = 1;
//                }
                //Wobbly movement
                for (var i=0; i<particles.length; i++) {     // 这是一个摇摆算法，相对上面的代码而言更加精妙
                    var particle = particles[i];
                    if (particle.r == 0.0) {                 // 在QML中我们能够将參数定义与赋值放在一起
                        particle.r = Math.random() + 0.01;  // 将 0.01 定义为particle.r的最小值
                    }
                    particle.rotation += velocity * particle.r * dt;    // 随机的particle.r保证每片叶子的旋转角度都是随机的
                    particle.r -= particle.rotation * coefficient;      // 然后这里通过“同步系数”适当改变particle.r。系数越大。叶片晃动越剧烈。

依据QML属性绑定的原则，当particle.r被改变，particle.rotation随之改变。

正向的旋转角度使particle.r变小。导致particle.rotation变小。叶片方向旋转，反之亦然，得到晃动效果
                    if (particle.r == 0.0)                           // 假设为0给其一个改变量
                        particle.r -= particle.rotation * 0.000001;
                    particle.update = 1;
                }
            }
        }
        //! [0]
        //! [1]
        Affector {                   // 定义“地面”的摩擦减速效果
            x: -60
            width: parent.width + 120
            height: 100
            anchors.bottom: parent.bottom
            onAffectParticles: {
                for (var i=0; i<particles.length; i++) {
                    var particle = particles[i];
                    var pseudoRand = (Math.floor(particle.t*1327) % 10) + 1; // Math.floor取到一个整数，并对10取余。

叶子生命周期越长，这个数会越大。也就更easy被“减速”
                    var yslow = dt * pseudoRand * 0.5 + 1;
                    var xslow = dt * pseudoRand * 0.05 + 1;
                    if (particle.vy < 1)                 // 速度低于 1 则停止
                        particle.vy = 0;
                    else
                        particle.vy = (particle.vy / yslow);    // 否则除以摩擦系数
                    if (particle.vx < 1)
                        particle.vx = 0;
                    else
                        particle.vx = (particle.vx / xslow);
                    particle.update = true;
                }
            }
        }
        //! [1]
        ImageParticle {
            anchors.fill: parent
            id: particles
            sprites: [Sprite {                            // 将多个png赋予图像粒子的方法
                    source: "qrc:/images/realLeaf1.png"
                    frameCount: 1
                    frameDuration: 1                     // 相似“导入者”。其生命周期非常短，1ms后它将变成后面的图像
                    to: {"a":1, "b":1, "c":1, "d":1}     // 有1/4的概率变成"a"，1/4的概率变成"b"...后面相似
                }, Sprite {                              // 当该图像没有可转变的内容。它将反复播放自己
                    name: "a"
                    source: "qrc:/images/realLeaf1.png"
                    frameCount: 1                         // 我们的单帧静态图也就是仅有一帧的连续图
                    frameDuration: 10000
                },
                Sprite {
                    name: "b"
                    source: "qrc:/images/realLeaf2.png"
                    frameCount: 1
                    frameDuration: 10000
                },
                Sprite {
                    name: "c"
                    source: "qrc:/images/realLeaf3.png"
                    frameCount: 1
                    frameDuration: 10000
                },
                Sprite {
                    name: "d"
                    source: "qrc:/images/realLeaf4.png"
                    frameCount: 1
                    frameDuration: 10000
                }
            ]
            z:4                                                  // 在图像中的层次
        }
    }
}

（4）Friction

在上面的样例中我们看到了怎样使用代码来模拟一个摩擦效果，可是Qt Quick已经为我们提供了一个模拟摩擦效果的Affector。它就是Friction。

这个样例与上面的样例类似：

代码十分简练。

friction.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Item {
    width: 360
    height: 600

    Image {
        source: "qrc:/images/backgroundLeaves.jpg"
        anchors.fill: parent
    }
    ParticleSystem {
        anchors.fill: parent
        Emitter {
            width: parent.width
            emitRate: 4
            lifeSpan: 14000
            size: 80
            velocity: PointDirection { y: 160; yVariation: 80; xVariation: 20 }  // xVariation给了叶子水平方向上移动的能力。可是达不到wander的“摆动”效果
        }

        ImageParticle {               // 图像粒子同上
            anchors.fill: parent
            id: particles
            sprites: [Sprite {
                    source: "qrc:/images/realLeaf1.png"
                    frameCount: 1
                    frameDuration: 1
                    to: {"a":1, "b":1, "c":1, "d":1}
                }, Sprite {
                    name: "a"
                    source: "qrc:/images/realLeaf1.png"
                    frameCount: 1
                    frameDuration: 10000
                },
                Sprite {
                    name: "b"
                    source: "qrc:/images/realLeaf2.png"
                    frameCount: 1
                    frameDuration: 10000
                },
                Sprite {
                    name: "c"
                    source: "qrc:/images/realLeaf3.png"
                    frameCount: 1
                    frameDuration: 10000
                },
                Sprite {
                    name: "d"
                    source: "qrc:/images/realLeaf4.png"
                    frameCount: 1
                    frameDuration: 10000
                }
            ]

            width: 100
            height: 100
            x: 20
            y: 20
            z:4
        }

        //! [0]
        Friction {                  // Friction为粒子带来摩擦效果，我们能够设置一个阈值。使Friction仅仅影响速度大于该阈值的粒子。

该阈值默觉得0
            anchors.fill: parent
            anchors.margins: -40
            factor: 0.4          // 摩擦系数，值越大摩擦力越大
        }
        //! [0]
    }
}

（5）Gravity

类似的，除了摩擦力，我们另一个Affector用来模拟万有引力。

它展示了叶片向地面加速飘落的效果。

图中的绿色是"地面"，能够拖动它360度旋转。叶片始终向“地面”的中心加速下落。gravity.aml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Item {
    id: window
    width: 320; height: 480
    Rectangle {
        id: sky
        anchors.fill: parent          // 蓝色的背景覆盖了整个矩形范围
        gradient: Gradient {
            GradientStop {
                position: 0.0
                color: "DeepSkyBlue"
            }
            GradientStop {
                position: 1.0
                color: "SkyBlue"
            }
        }
    }

    Rectangle {                       // 由于在后面要实现“地面”的旋转。所以设置了较大的尺寸
        id: ground
        width: parent.height * 2
        height: parent.height
        y: parent.height/2
        x: parent.width/2 - parent.height
        transformOrigin: Item.Top          // 用来设置旋转和缩放的中心点
        rotation: 0
        gradient: Gradient {
            GradientStop { position: 0.0; color: "ForestGreen"; }
            GradientStop { position: 1.0; color: "white"; }
        }
    }

    MouseArea {
        anchors.fill: parent
        onPositionChanged: {         // 该信号在鼠标按下并移动位置时放出，假设不须要按下鼠标，可设置hoverEnabled为true
            var rot = Math.atan2(mouseY - window.height/2,mouseX - window.width/2) * 180/Math.PI; // 返回当前鼠标方向矢量与X 轴正方向的夹角
            ground.rotation = rot;           // 以该角度旋转
        }
    }

    ParticleSystem { id: sys }
    //! [0]
    Gravity {                  // 当使用Gravity时。要注意它对整个场景的吸引力都是同样的。假设角度和加速度恒定，最好直接在Emitter中设置
        system: sys            // 但在此例中假设直接设置Emitter，角度的计算会比較复杂
        magnitude: 32          // 强度
        angle: ground.rotation + 90  // 运动方向
    }
    //! [0]
    Emitter {
        system: sys
        anchors.centerIn: parent
        emitRate: 1
        lifeSpan: 10000
        size: 64
    }
    ImageParticle {
        anchors.fill: parent
        system: sys
        source: "qrc:/images/realLeaf1.png"
    }

}

（6）GroupGoal

在前面我们学习到我们能够设置ImageParticle的groups属性，从而让不同的Emitter发送不同的粒子。

更进一步。使用ParticleGroup和GroupGoal能够实现粒子在特定状态下的跳变。

能够看到，这些红色的小光点在经过蓝色火焰后被点燃成火苗。同一时候被鼠标滑过的也将被点燃。界面的右上角还有个数字用来记录被点燃的火苗数。

代码例如以下，groupgoal.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    id: root
    width: 360
    height: 600
    color: "black"

    property int score: 0               // 设置一个属性用来记录分数
    Text {
        color: "white"
        anchors.right: parent.right
        text: score
    }

    ParticleSystem {
        id: particles
        anchors.fill: parent
        // ![unlit]
        ParticleGroup {         // 这个元素有点相似状态机的概念，它将一种状态下的粒子群以打包的形式放在一起，然后通过name跳转
          name: "unlit"
            duration: 1000      // 1s后进入下一个状态
            to: {"lighting":1, "unlit":99}   // 设置百分之中的一个的光球能够自燃
            ImageParticle {
                source: "qrc:/images/particleA.png"  // 资源文件里的一个光点，有点相似经常使用的glowdot，可是更大一些
                colorVariation: 0.1
                color: "#2060160f"            // 光点的颜色为红褐色
            }
            GroupGoal {                     // 继承自Affector，提供特定条件满足下的状态跳转
                whenCollidingWith: ["lit"]  // 当碰撞到正在燃烧的火苗时
                goalState: "lighting"       // 跳转为"lighting"状态
                jump: true                  // 设置为立马跳转
            }
        }
        // ![unlit]
        // ![lighting]
        ParticleGroup {       // 一个过渡状态，正在被点亮的状态
            name: "lighting"
            duration: 100     // 0.1秒后跳转到"lit"
            to: {"lit":1}
        }
        // ![lighting]
        // ![lit]
        ParticleGroup {           // 被点亮状态
            name: "lit"
            duration: 10000       // 终态粒子的生命周期
            onEntered: score++;   // 分数加一
            TrailEmitter {          // 使用TrailEmitter构建尾部火焰
                id: fireballFlame
                group: "flame"      // 粒子"flame"是基于下方定义的ImageParticle

                emitRatePerParticle: 48   // 每一个lit后尾随48玫"火焰"
                lifeSpan: 200             // 生命周期与焰尾长度成正比
                emitWidth: 8
                emitHeight: 8

                size: 24
                sizeVariation: 8
                endSize: 4                // 尾部体积更小
            }

            TrailEmitter {               // 还有一个TrailEmitter用来构建烟雾
                id: fireballSmoke
                group: "smoke"            // smoke在下方定义
        // ![lit]

                emitRatePerParticle: 120
                lifeSpan: 2000            // 较长的生命周期用来进行自己的动画
                emitWidth: 16
                emitHeight: 16

                velocity: PointDirection {yVariation: 16; xVariation: 16}
                acceleration: PointDirection {y: -16}              // 烟雾首先向下运动，随之向上升腾

                size: 24
                sizeVariation: 8
                endSize: 8
            }
        }

        ImageParticle {               // 灰色烟雾粒子
            id: smoke
            anchors.fill: parent
            groups: ["smoke"]
            source: "qrc:///particleresources/glowdot.png"
            colorVariation: 0
            color: "#00111111"
        }
        ImageParticle {               // 蓝色闫焰苗粒子
            id: pilot
            anchors.fill: parent
            groups: ["pilot"]
            source: "qrc:///particleresources/glowdot.png"
            redVariation: 0.01
            blueVariation: 0.4        // 设置RGB中蓝色的变化率
            color: "#0010004f"
        }
        ImageParticle {               // 红色火焰粒子
            id: flame
            anchors.fill: parent
            groups: ["flame", "lit", "lighting"]
            source: "qrc:/images/particleA.png"
            colorVariation: 0.1
            color: "#00ff400f"
        }

        Emitter {                       // 用来发射易燃小球
            height: parent.height/2
            emitRate: 4
            lifeSpan: 4000//TODO: Infinite & kill zone  // demo中的凝视，TODO表示还要做的事。FIXME表示代码待改动，XXX表示有待商榷
            size: 24
            sizeVariation: 4
            velocity: PointDirection {x:120; xVariation: 80; yVariation: 50}
            acceleration: PointDirection {y:120}
            group: "unlit"
        }

        Emitter {                       // 用来构建焰苗
            id: flamer
            x: 100
            y: 300
            group: "pilot"
            emitRate: 80
            lifeSpan: 600
            size: 24
            sizeVariation: 2
            endSize: 0
            velocity: PointDirection { y:-100; yVariation: 4; xVariation: 4 }  // 粒子向上移动形成焰苗的升腾感
            // ![groupgoal-pilot]
            GroupGoal {
                groups: ["unlit"]        // 设置被影响的粒子群
                goalState: "lit"
                jump: true               // 直接跳转，否则默觉得过渡时间结束后再跳转
                system: particles
                x: -15
                y: -55
                height: 75
                width: 30
                shape: MaskShape {source: "qrc:/images/matchmask.png"}  // 这张图片是一个焰苗的图形。使用它能够使Affector影响一个非矩形区域
            }
            // ![groupgoal-pilot]
        }
        // ![groupgoal-ma]
        //Click to enflame
        GroupGoal {
            groups: ["unlit"]             // 设置其能够影响的粒子群
            goalState: "lighting"         // 目标状态
            jump: true
            enabled: ma.pressed           // 按下事件使能
            width: 18                     // 作用区域
            height: 18
            x: ma.mouseX - width/2
            y: ma.mouseY - height/2
        }
        // ![groupgoal-ma]
        MouseArea {
            id: ma
            anchors.fill: parent
        }
    }
}

（7）Move

这个样例展示了直接使用Affector影响粒子运动（位置、速度、加速度）的方法。

代码非常easy，我们大致看一下好了,move.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    width: 360
    height: 540
    color: "black"
    ParticleSystem {                                  // 第一束红色粒子
        anchors.fill: parent
        ImageParticle {
            groups: ["A"]
            anchors.fill: parent
            source: "qrc:///particleresources/star.png"
            color:"#FF1010"
            redVariation: 0.8                          // 形成"明红"到"暗红"的颜色差异
        }

        Emitter {
            group: "A"
            emitRate: 100
            lifeSpan: 2800
            size: 32
            sizeVariation: 8
            velocity: PointDirection{ x: 66; xVariation: 20 }
            width: 80                                      // 产生粒子的区域是(0,0)到(80,80)的矩形范围
            height: 80
        }

        //! [A]
        Affector {
            groups: ["A"]                                  // Affector作用于A
            x: 120                                         // 影响区域
            width: 80
            height: 80
            once: true
            position: PointDirection { x: 120; }            // x 添加120
        }
        //! [A]

        ImageParticle {                                     // 第二束绿色粒子
            groups: ["B"]
            anchors.fill: parent
            source: "qrc:///particleresources/star.png"
            color:"#10FF10"
            greenVariation: 0.8
        }

        Emitter {
            group: "B"
            emitRate: 100
            lifeSpan: 2800
            size: 32
            sizeVariation: 8
            velocity: PointDirection{ x: 240; xVariation: 60 }
            y: 260
            width: 10
            height: 10
        }

        //! [B]
        Affector {
            groups: ["B"]
            x: 120
            y: 240
            width: 80
            height: 80
            once: true
            velocity: AngleDirection { angleVariation:360; magnitude: 72 } // 角度变化范围和强度
        }
        //! [B]

        ImageParticle {                                      // 第三束蓝色粒子
            groups: ["C"]
            anchors.fill: parent
            source: "qrc:///particleresources/star.png"
            color:"#1010FF"
            blueVariation: 0.8
        }

        Emitter {
            group: "C"
            y: 400
            emitRate: 100
            lifeSpan: 2800
            size: 32
            sizeVariation: 8
            velocity: PointDirection{ x: 80; xVariation: 10 }
            acceleration: PointDirection { y: 10; x: 20; }
            width: 80
            height: 80
        }

        //! [C]
        Affector {
            groups: ["C"]
            x: 120
            y: 400
            width: 80
            height: 120
            once: true
            relative: false
            acceleration: PointDirection { y: -80; }         // 在y方向的加速度下降80
        }
        //! [C]

    }
}

（8）SpriteGoal

这个样例向我们展示了怎样对使用sprites的ImageParticle做特殊的处理。使其在我们想要它改变时进行状态的跳转。

如图是“星际迷航”中的飞船。它将撞毁其接触到的陨石。

spritegoal.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Item {
    id: root
    width: 360
    height: 540
    MouseArea {
        id: ma
        anchors.fill: parent
    }

    ParticleSystem { id: sys }
    Image {
        source: "qrc:/images/finalfrontier.png"  // 星际迷航
        transformOrigin: Item.Center             // 以中心点旋转,一共同拥有9个点可选,四个边角,四个边线中心,以及中心点
        anchors.centerIn: parent
        NumberAnimation on rotation {            // 背景缓慢旋转
            from: 0
            to: 360
            duration: 200000
            loops: Animation.Infinite
        }

    }
    ImageParticle {                              // 星星粒子
        system: sys
        groups: ["starfield"]
        source: "qrc:///particleresources/star.png"
        colorVariation: 0.3
        color: "white"
    }
    Emitter {
        id: starField
        system: sys
        group: "starfield"

        emitRate: 80
        lifeSpan: 2500

        anchors.centerIn: parent

        //acceleration: AngleDirection {angleVariation: 360; magnitude: 200}//Is this a better effect, more consistent velocity?

acceleration: PointDirection { xVariation: 200; yVariation: 200; } // 上面是源代码中的凝视，作者留给我们一个问题。这个从中心点向外散射的粒子。是使用AngleDirection还是PointDirection？笔者想了下。以第一行代码发射的话。所有粒子的速度都将是同样的。而第二行代码则具有更大的随机性。

以星星的散射而言。第二行代码更合理。

        size: 0
        endSize: 80
        sizeVariation: 10
    }
    Emitter {                       // 陨石的发射器
        system: sys
        group: "meteor"
        emitRate: 12
        lifeSpan: 5000
        acceleration: PointDirection { xVariation: 80; yVariation: 80; } // 与星星的发射相似
        size: 15
        endSize: 300               // 增大的endSize形成由远及进感
        anchors.centerIn: parent
     }
    ImageParticle {                       // 陨石粒子。由sprites的多帧图像构成
        system: sys
        groups: ["meteor"]
        sprites:[Sprite {
                id: spinState                    // 自旋陨石
                name: "spinning"
                source: "qrc:/images/meteor.png"
                frameCount: 35
                frameDuration: 40
                randomStart: true                  // 从任意的一帧開始
                to: {"explode":0, "spinning":1}       // 因为"explode"为0，因此spinning实际上是无限循环。"explode": 0能够不写。

但为了逻辑清楚，加上更好
            },Sprite {                             // 碎裂陨石
                name: "explode"
                source: "qrc:/images/_explo.png"
                frameCount: 22
                frameDuration: 40
                to: {"nullFrame":1}                // 去到一个空白图像
            },Sprite {//Not sure if this is needed, but seemed easiest // 作者称不确定这个空白图像是否须要。可是带上它似乎更好
                name: "nullFrame"
                source: "qrc:/images/nullRock.png"
                frameCount: 1
                frameDuration: 1000
            }
        ]
    }
    //! [0]
    SpriteGoal {                  // 这就是Affector中的SpriteGoal了
        groups: ["meteor"]        // 与groupGoal不同。GroupGoal影响的ParticleGroup，而SpriteGoal影响的是这里使用Sprites的粒子
        system: sys
        goalState: "explode"      // 目标状态
        jump: true                // 立马跳转
        anchors.fill: rocketShip  // 作用范围尾随飞船
        width: 60
        height: 60
    }
    //! [0]
    Image {                                  // 企业号飞船，因为要使飞船绕一个固定的中心点旋转。坐标与旋转的计算所有放在Image中比較麻烦，我们能够使用两个Item来进行逻辑上的圆周计算
        id: rocketShip
        source: "qrc:/images/rocket.png"
        anchors.centerIn: holder
        rotation: (circle.percent+0.25) * 360  // 随着所在圆周位置的不同对自身进行旋转。因为原图飞船是向上的，因此将其初始旋转90度
        z: 2
    }
    Item {                                     // 通过以下的圆心和连续变化的百分比，这个Item用来得到实际的坐标
        id: holder
        x: circle.x - Math.sin(circle.percent * 6.28316530714)*200  // 百分比乘以2π，200为半径
        y: circle.y + Math.cos(circle.percent * 6.28316530714)*200
        z: 1
    }

    Item {
        id: circle
        x: root.width / 1.2                    // 圆心的位置
        y: root.height / 1.7
        property real percent: 0               // 定义一个百分比属性

        SequentialAnimation on percent {       // 4秒的1到0循环
            id: circleAnim1
            loops: Animation.Infinite
            running: true
            NumberAnimation {
            duration: 4000
            from: 1
            to: 0
            }

        }
    }

    ImageParticle {                            // 飞船的尾气粒子
        z:0                                    // 其z值比飞船小。这样这些粒子不会覆盖在飞船上面
        system: sys
        groups: ["exhaust"]
        source: "qrc:///particleresources/fuzzydot.png"

        color: "orange"
        SequentialAnimation on color {
            loops: Animation.Infinite
            ColorAnimation {
                from: "red"
                to: "cyan"
                duration: 1000
            }
            ColorAnimation {
                from: "cyan"
                to: "red"
                duration: 1000
            }
        }

        colorVariation: 0.2
    }

    Emitter {                        // 喷气粒子发射器
        id: trailsNormal2
        system: sys
        group: "exhaust"

        emitRate: 300
        lifeSpan: 500

        y: holder.y
        x: holder.x

        velocity: PointDirection { xVariation: 40; yVariation: 40; }
        velocityFromMovement: 16

        acceleration: PointDirection { xVariation: 10; yVariation: 10; }

        size: 4
        sizeVariation: 4
    }
}

（9）Turbulence

在上篇博文的最后一个小样例——飞翔的火焰 中我们事实上已经接触到了Turbulence，它用来为粒子提供一个气流的效果。

在这个样例中我们能够更清晰地看到它的使用方法。

能够看到Turbulence为火苗和烟雾带来的效果：

Turbulence.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    width: 320
    height: 480
    color: "#222222"
    id: root
    Image {
        source: "qrc:/images/candle.png"                 // 一根空白的蜡烛
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: -60                        // 这张图以下有一段空白
        anchors.horizontalCenterOffset: 2                // 水平中心向右平移2个像素
    }
    ParticleSystem {
        anchors.fill: parent
        MouseArea {                                     // 点击后关闭/打开Turbulence效果
            anchors.fill: parent
            onClicked: turb.enabled = !turb.enabled
        }

        //! [0]
        Turbulence {
            id: turb
            enabled: true
            height: (parent.height / 2) - 4
            width: parent.width
            x: parent. width / 4
            anchors.fill: parent
            strength: 32                       // 能够为strength加入一个NumberAnimation，然后通过设置Easing，能够达到更逼近现实的气流效果
            NumberAnimation on strength{from: 16; to: 64; easing.type: Easing.InOutBounce; duration: 1800; loops: -1}
        }
        //! [0]

        ImageParticle {                         // 烟雾
            groups: ["smoke"]
            source: "qrc:///particleresources/glowdot.png"
            color: "#11111111"
            colorVariation: 0
        }
        ImageParticle {                         // 火苗
            groups: ["flame"]
            source: "qrc:///particleresources/glowdot.png"
            color: "#11ff400f"
            colorVariation: 0.1
        }
        Emitter {                               // 火苗粒子由窗体中心发出
            anchors.centerIn: parent
            group: "flame"

            emitRate: 120
            lifeSpan: 1200
            size: 20
            endSize: 10
            sizeVariation: 10
            acceleration: PointDirection { y: -40 }
            velocity: AngleDirection { angle: 270; magnitude: 20; angleVariation: 22; magnitudeVariation: 5 }
        }
        TrailEmitter {
            id: smoke1
            width: root.width
            height: root.height/2
            group: "smoke"
            follow: "flame"

            emitRatePerParticle: 1
            lifeSpan: 2400
            lifeSpanVariation: 400
            size: 16
            endSize: 8
            sizeVariation: 8
            acceleration: PointDirection { y: -40 }
            velocity: AngleDirection { angle: 270; magnitude: 40; angleVariation: 22; magnitudeVariation: 5 }
        }
        TrailEmitter {                                   // 第二个TrailEmitter用来在更高一点的地方释放出更浓郁的烟雾
            id: smoke2
            width: root.width
            height: root.height/2 - 20
            group: "smoke"
            follow: "flame"

            emitRatePerParticle: 4
            lifeSpan: 2400
            size: 36
            endSize: 24
            sizeVariation: 12
            acceleration: PointDirection { y: -40 }
            velocity: AngleDirection { angle: 270; magnitude: 40; angleVariation: 22; magnitudeVariation: 5 }
        }
    }
}

（10）Wander

相同我们在本文第三个小样例中已经接触过wander了。在那我们使用wander为落叶加入了摇摆的飘落效果。

在这个样例中我们将了解到，除了速度。wander还能够进一步作用于位置和加速度。

能够看到在飘落的雪花背景中，有三个button分别用来选择位置，速度，以及加速度。通过点击这些button，能够改变这些雪花在x方向上的不同运动效果。这些button是在还有一个Qml文件里定义的。代码比較简单，贴在以下，就不一句句介绍了。

GreyButton.qml:

import QtQuick 2.0

Item {
    id: container

    property string text: "Button"
    property string subText: ""
    signal clicked

    width: buttonLabel.width + 20; height: col.height + 12

    MouseArea {
        id: mouseArea;
        anchors.fill: parent;
        onClicked: container.clicked();
        onPressed: background.color = Qt.darker("lightgrey");
        onReleased: background.color="lightgrey";
    }

    Rectangle {
        id: background
        anchors.fill: parent
        color: "lightgrey"
        radius: 4
        border.width: 1
        border.color: Qt.darker(color)
    }

    Column {
        spacing: 2
        id: col
        x: 10
        y: 6
        Text {
            id: buttonLabel; text: container.text; color: "black"; font.pixelSize: 24
        }
        Text {
            id: buttonLabel2; text: container.subText; color: "black"; font.pixelSize: 12
        }
    }
}

wander.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    width: 360
    height: 540
    ParticleSystem { id: particles }
    ImageParticle {                                     // 雪花粒子
        system: particles
        sprites: Sprite {
            name: "snow"
            source: "../../images/snowflake.png"
            frameCount: 51
            frameDuration: 40
            frameDurationVariation: 8
        }
    }

    //! [0]
    Wander {                                            // wander
        id: wanderer
        system: particles
        anchors.fill: parent
        xVariance: 360/(wanderer.affectedParameter+1); // xVariance与pace必须都定义。因为未定义yVariance因此不会影响y方向的运动
        pace: 100*(wanderer.affectedParameter+1);     // 这里wanderer.affectedParameter实际等于0，不太懂这里的意思
    }
    //! [0]

    Emitter {
        system: particles
        emitRate: 20
        lifeSpan: 7000
        velocity: PointDirection { y:80; yVariation: 40; }
        acceleration: PointDirection { y: 4 }
        size: 20
        sizeVariation: 10
        width: parent.width
        height: 100
    }
    Row {                                             // 这里使用了一个布局器
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 4
        GreyButton {
            text:"dx/dt"
            onClicked: wanderer.affectedParameter = Wander.Position; // 点击改变Wander的影响属性
        }
        GreyButton {
            text:"dv/dt"
            onClicked: wanderer.affectedParameter = Wander.Velocity;
        }
        GreyButton {
            text:"da/dt"
            onClicked: wanderer.affectedParameter = Wander.Acceleration;
        }
    }
}

版权声明：本文博主原创文章，博客，未经同意不得转载。