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

本系列所有文章可以在这里查看http://blog.csdn.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
        }
    }
}

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