Qt5官方demo解析集13——Qt Quick Particles Examples - Image Particles

本系列所有文章可以在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873

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

先唠下嗑，在上文CustomParticles中我们接触了强大的ShaderEffect，笔者对其产生了极大的兴趣，于是去找了找有没有更多相关的例程，于是就发现了一个QML Video Shader Effects Example，确实效果华丽，下面放个图，回头再看看这个demo~

这个demo可以处理图片、视频以及摄像头数据，算是非常强大的功能了。不过在手机上运行时布局似乎有些问题。

好了，不扯远了，这次的demo又回归了ImageParticle，相信大家都不陌生了。这个demo应该比上一个要轻松，我们来看看吧：

依旧是熟悉的选择框：

（1）All at once

这个例子演示了一群旋转的小熊。下面有一行话，“QML这么叼你敢信吗...”

确实是五彩缤纷哈，怎么来形成多彩的效果呢？可能你马上会想到ImageParticle中的colorVariation这个属性，将这个值设高不就能形成多彩的效果吗？确实不错，但是如果我们要求这个小熊只在几种颜色之间变化呢？例如橘红，红色，青色，绿色，和黄色？或者再多一点，连随机数取值也不好做？那么ImageParticle为我们提供了一个属性colorTable，这个属性使得我们可以在一个一维纹理中取出颜色值赋予图像。我们通过自定义一个合适的一维图像就可以决定小熊的颜色了。

这里我将colorVariation设置为1，可以看下对比效果：

可以看到颜色确实更加丰富，但由于本身的一维图像是带有透明度的，想要模仿原例的效果，我们还需要设置透明度：

这里将alpha设置为0.5：

好了，代码很简单，说了这么多，就不讲了哈。allatonce.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    color: "white"
    width: 640
    height: 480
    ParticleSystem {
        id: sys
    }

    ImageParticle {
        // ![0]
        sprites: [
            Sprite {
                name: "bear"
                source: "qrc:/images/bear_tiles.png"
                frameCount: 13
                frameDuration: 120
            }
        ]
        colorVariation: 0.5
        rotationVelocityVariation: 360
        colorTable: "qrc:/images/colortable.png"
        // ![0]
        system: sys
    }

    Friction {
        factor: 0.1
        system: sys
    }

    Emitter {
        system: sys
        anchors.centerIn: parent
        id: particles
        emitRate: 200
        lifeSpan: 6000
        velocity: AngleDirection {angleVariation: 360; magnitude: 80; magnitudeVariation: 40}
        size: 60
        endSize: 120
    }

    Text {
        x: 16
        y: 16
        text: "QML..."
        style: Text.Outline; styleColor: "#AAAAAA"
        font.pixelSize: 32
    }
    Text {
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.margins: 16
        text: "... can you be trusted with the power?"
        style: Text.Outline; styleColor: "#AAAAAA"
        font.pixelSize: width > 400 ? 32 : 16
    }
}

我将colortable的图贴在下面：

“ ”  < - 就在这里。它纵向只有一个像素，很窄。

（2）Colored

这个例子展示了两种星星的效果。

colored.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    width: 360
    height: 540
    color: "black"
    ParticleSystem {
        anchors.fill: parent
        ImageParticle {                                 // 背景星星
            groups: ["stars"]
            anchors.fill: parent
            source: "qrc:///particleresources/star.png"
        }
        Emitter {
            group: "stars"
            emitRate: 800
            lifeSpan: 2400
            size: 24
            sizeVariation: 8
            anchors.fill: parent                       // 布满父对象的背景星星
        }

        // ![0]
        ImageParticle {                               // 没有定义的group默认为""
            anchors.fill: parent
            source: "qrc:///particleresources/star.png"
            alpha: 0
            alphaVariation: 0.2                        // 多彩与透明效果
            colorVariation: 1.0
        }
        // ![0]

        Emitter {                                     // 默认发射group名为""的粒子
            anchors.centerIn: parent
            emitRate: 400
            lifeSpan: 2400
            size: 48
            sizeVariation: 8
            velocity: AngleDirection {angleVariation: 180; magnitude: 60} // 180的变化度，即是(-180,180)
        }

        Turbulence {                                    // 最后添加一些气流效果
            anchors.fill: parent
            strength: 2
        }
    }
}

（3）Color Table

从名字可以知道这里例子着重介绍了colorTable这个属性。

可以看到3个光束以类似∞的轨迹运行，colortable.qml:

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

    ParticleSystem { id: particles }

    ImageParticle {
        system: particles
        colorVariation: 0.5
        alpha: 0

        //! [0]
        source: "qrc:///particleresources/glowdot.png"
        colorTable: "qrc:/images/colortable.png"      // 这个与例子一相同
        sizeTable: "qrc:/images/colortable.png"      // 有意思的是，我们可以使用这个一维图像的透明度来决定粒子的尺寸，根据Manual所说，这个属性将在之后被移除，取而代之的是使用自定义的缓和曲线
        //! [0]
    }

    Emitter {
        system: particles
        emitRate: 500
        lifeSpan: 2000

        y: root.height / 2 + Math.sin(t * 2) * root.height * 0.3 // 定义了一个类似∞的轨迹，删掉t中的2，它将变成一个椭圆
        x: root.width / 2 + Math.cos(t) * root.width * 0.3
        property real t;

        NumberAnimation on t {
            from: 0; to: Math.PI * 2; duration: 10000; loops: Animation.Infinite
        }

        velocityFromMovement: 20

        velocity: PointDirection { xVariation: 5; yVariation: 5;}     // 有一定的四周消散能力
        acceleration: PointDirection { xVariation: 5; yVariation: 5;}

        size: 16
        //endSize: 8
        //sizeVariation: 8
    }
}

关于为什么会形成3个光束：这里的粒子实际上是按轨迹不断生成的，新的粒子产生，旧的粒子还未消散，形成了一条光束。而这些粒子随着生命周期的变化，其颜色、透明度以及尺寸都是与这个colortable一维图像相关的，这个图像我在上面贴出来了，其中间几段有很明显的透明区域，当粒子达到与之相对应的生命周期，我们也就看不到了，随着生命周期的推进，它们又以其他的颜色展现出来。

（4）Deformation

这一节主要介绍了ImageParticle的变形，主要是旋转以及伸缩。上面两排海星星在旋转，下面的海星星被压缩。

deformation.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    color: "goldenrod"
    width: 400
    height: 400
    ParticleSystem {id:sys}

    //! [spin]
    ImageParticle {
        system: sys
        groups: ["goingLeft", "goingRight"]
        source: "qrc:/images/starfish_4.png"
        rotation: 90                          // (顺时针)旋转90度
        rotationVelocity: 90                  // 旋转速度
        autoRotation: true                    // 定义该属性使粒子能根据运动轨迹自动旋转，这里是平移所以看不到效果
    }
    //! [spin]
    //! [deform]
    ImageParticle {
        system: sys
        groups: ["goingDown"]
        source: "qrc:/images/starfish_0.png"      // 换了一张图，这个星星不开心些
        rotation: 180                            // 旋转180度，倒过来了
        yVector: PointDirection { y: 0.5; yVariation: 0.25; xVariation: 0.25; } // yVector参数是一个矢量，也就是说我们不仅可以压缩这个图像，还能使它任意拉伸（想象我们拉住一个四边形的两个角任意拉扯的效果）。
    }
    //! [deform]

    Timer {
        running: true                       // 几个定时器用来发射粒子
        repeat: false
        interval: 100
        onTriggered: emitA.enabled = true;
    }
    Timer {
        running: true
        repeat: false
        interval: 4200
        onTriggered: emitB.enabled = true;
    }
    Timer {
        running: true
        repeat: false
        interval: 8400
        onTriggered: emitC.enabled = true;
    }

    Emitter {                                 //　发射器，如果不清楚可以参考前面的博文
        id: emitA
        x: 0
        y: 120
        system: sys
        enabled: false
        group: "goingRight"
        velocity: PointDirection { x: 100 }
        lifeSpan: 4000
        emitRate: 1
        size: 128
    }
    Emitter {
        id: emitB
        x: 400
        y: 240
        system: sys
        enabled: false
        group: "goingLeft"
        velocity: PointDirection { x: -100 }
        lifeSpan: 4000
        emitRate: 1
        size: 128
    }
    Emitter {
        id: emitC
        x: 0
        y: 360
        system: sys
        enabled: false
        group: "goingDown"
        velocity: PointDirection { x: 100 }
        lifeSpan: 4000
        emitRate: 1
        size: 128
    }
}

（5）Rotation

我们在上一节中就接触到了rotation，在那个里面rotation用来实现了图片的旋转动画，而这个例子则主要介绍了它的autoRotation - 自动转向。

先看看效果：

首先是一串从中下向四周发散的海星星，如果屏幕被点击，这些海星星将按其运行轨迹翻转，保证对每个轨迹而言都是正的。

rotation.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    color: "goldenrod"
    width: 1000
    height: 1000
    ParticleSystem {id: sys}
    ImageParticle {
        id: up
        system: sys
        source: "qrc:/images/starfish_2.png"
        autoRotation: true                  // 这个属性我们前面有谈，再形象一点的话，如果海星星做圆周运动，它的脚会始终指向圆心
        rotation: -90                       // 粒子在自动旋转后会再加上这个旋转量，那么就得到了图中海星星对每个运动方向都为正的效果
    }

    Emitter {
        anchors.centerIn: parent
        system: sys
        emitRate: 10
        size: 200
        lifeSpan: 10000
        velocity: AngleDirection {angleVariation: 360; magnitudeVariation: 100;}
    }

    MouseArea {
        anchors.fill: parent                      // 实现鼠标点击功能
        onClicked: {
            up.autoRotation = !up.autoRotation
            up.rotation = up.autoRotation ? -90 : 0
        }
    }
}

（6）Sharing

由名字我们就可以猜出一些端倪，这个例子向我们展示了如何在同一个或是同一类粒子中展示不同的ImageParticle的效果。同时，一个粒子中还能够包含多个ImageParticle中定义的属性。

由于原例中的文字是白色的，截图看不太清楚，我把它改成了蓝色。不过这并不影响，我们关注的是它的“小花”（粒子）。

可以看到小花在整个屏幕中都是偏白色，而在我们选中项的高亮中它显示为黑红色。并且它是随着进入的部分而部分变换，这在实际使用中相当常用。

另外还有些listView的操作与动画，但这就不是我们这一节重点啦~

sharing.qml:

// This example shows how to create your own highlight delegate for a ListView
// that uses a SpringAnimation to provide custom movement when the
// highlight bar is moved between items.

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    property real delegateHeight: 65
    width: 200; height: 300
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#EEEEFF" }
        GradientStop { position: 1.0; color: "lightblue" }
    }

    // Define a delegate component.  A component will be
    // instantiated for each visible item in the list.
    Component {                  // 我们需要为listView的每个可视项目创建一个组件，定义一个组件就类似定义了一个qml文件，这个文件名就是petDelegate.qml，Item是它的根目录。组件中定义的可视化对象不会被直接渲染，除非它被其他类型所加载。
        id: petDelegate          // 在Item外我们只能定义这个id名
        Item {                   // Item作为这个可视化组件的根目录
            id: wrapper
            width: 200; height: delegateHeight        
            z: 10
            Column {
                Text {color: "blue"; text: name; font.pixelSize: 18 }             // 按列排放的文字
                Text {color: "blue"; text: 'Type: ' + type; font.pixelSize: 14 }
                Text {color: "blue"; text: 'Age: ' + age; font.pixelSize: 14 }
            }
            MouseArea { anchors.fill: parent; onClicked: listView.currentIndex = index; } // 被点击则作为当前对象
            // indent the item if it is the current item
            states: State {
                name: "Current"                            // 设置一个当前状态
                when: wrapper.ListView.isCurrentItem
                PropertyChanges { target: wrapper; x: 20 }   // x缩进20
            }
            transitions: Transition {
                NumberAnimation { properties: "x"; duration: 200 } // 为这个缩进添加一个动画
            }
        }
    }

    // Define a highlight with customized movement between items.
    Component {                             // 将高亮显示框也定义为一个组件
        id: highlightBar                    
        Rectangle {                          // Rectangle作为根目录
            z: 0
            width: 200; height: delegateHeight
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#99FF99" }
                GradientStop { position: 1.0; color: "#88FF88" }
            }
            y: listView.currentItem.y;       // y坐标与当前项目坐标一致
            Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } } // 为 y 的改变添加一个弹簧动画
            //! [1]
            ImageParticle {                  // 高亮框内的ImageParticle
                anchors.fill: parent
                system: particles
                source: "qrc:/images/flower.png"
                color: "red"
                clip: true
                alpha: 1.0
            }
            //! [1]
        }
    }

    ListView {                                
        id: listView
        width: 200; height: parent.height

        model: petsModel                   // 指定模型
        delegate: petDelegate              // 指定委托对象
        focus: true

        // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem
        // to false so the highlight delegate can control how the highlight is moved.
        highlight: highlightBar            // 指定highlight委托对象
        highlightFollowsCurrentItem: false  // 由于我们要实现自定义的highlight动画，因此将该属性设置为false

        ParticleSystem { id: particles }    // ParticleSystem
        Emitter {                           // Emitter
            system: particles
            anchors.fill: parent
            emitRate: 0
            lifeSpan: 10000
            size: 24
            sizeVariation: 8
            velocity: AngleDirection { angleVariation: 360; magnitude: 3 }
            maximumEmitted: 10
            startTime: 5000                   // 这个属性我们之前接触过了，它使Emitter被加载使直接显示5秒后的效果
            Timer { running: true; interval: 10; onTriggered: parent.emitRate = 1; }
        }

        //! [0]
        ImageParticle {                      // 通用粒子，它覆盖了整个ListView，因此Emitter发射的粒子大部分通过它渲染
            anchors.fill: parent             // 但是当Emitter发射的粒子在高亮区域中时，它将转而使用highlight中的ImageParticle
            system: particles                // 因此粒子颜色与透明度都被改变了
            source: "qrc:/images/flower.png" // 但由于highlight中的ImageParticle中的rotation未被设置
            alpha: 0.1                       // 因此粒子将继续采用此处的rotationVariation: 180
            color: "white"                   // 这也就是ImageParticle中的属性共享
            rotationVariation: 180
            z: -1
        }
        //! [0]
    }

    ListModel {                              // 为ListView提供数据
        id: petsModel
        ListElement {
            name: "Polly"
            type: "Parrot"
            age: 12
            size: "Small"
        }
        ListElement {
            name: "Penny"
            type: "Turtle"
            age: 4
            size: "Small"
        }
        ListElement {
            name: "Warren"
            type: "Rabbit"
            age: 2
            size: "Small"
        }
        ListElement {
            name: "Spot"
            type: "Dog"
            age: 9
            size: "Medium"
        }
        ListElement {
            name: "Schrödinger"
            type: "Cat"
            age: 2
            size: "Medium"
        }
        ListElement {
            name: "Joey"
            type: "Kangaroo"
            age: 1
            size: "Medium"
        }
        ListElement {
            name: "Kimba"
            type: "Bunny"
            age: 65
            size: "Large"
        }
        ListElement {
            name: "Rover"
            type: "Dog"
            age: 5
            size: "Large"
        }
        ListElement {
            name: "Tiny"
            type: "Elephant"
            age: 15
            size: "Large"
        }
    }

}

（7）Sprites

sprites大家都不陌生了，我们在前面的程序中大量接触到了这个东西。使用它要比使用GIF节省多得多的性能，并且与粒子系统一同工作，能够创造动态性能相当高的应用程序。

可以看到下面有只会动的小熊，上方掉落的海星星也在不断变化着表情。当下落到小熊附近时，它们将变成萌萌哒的"惊喜"表情。

sprites.qml:

import QtQuick 2.0
import QtQuick.Particles 2.0

Rectangle {
    color: "lightsteelblue"
    width: 800
    height: 800
    id: root

    SpriteSequence {                                     // 该类型提供了一个机遇sprite的动画
        sprites: Sprite {
                name: "bear"
                source: "qrc:/images/bear_tiles.png"           // 图片贴在下方
                frameCount: 13
                frameDuration: 120
            }
        width: 250                                      // 定义小熊的位置与层次
        height: 250
        x: 20
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        z:4
    }

    ParticleSystem { id: sys }

    ImageParticle {
        anchors.fill: parent
        id: particles
        system: sys
        sprites: [Sprite {                               // 定义各种状态的海星星，并等概率相互转换
            name: "happy"
            source: "qrc:/images/starfish_1.png"
            frameCount: 1
            frameDuration: 260
            to: {"happy": 1, "silly": 1, "angry": 1}
        }, Sprite {
            name: "angry"
            source: "qrc:/images/starfish_0.png"
            frameCount: 1
            frameDuration: 260
            to: {"happy": 1, "silly": 1, "angry": 1}
        }, Sprite {
            name: "silly"
            source: "qrc:/images/starfish_2.png"
            frameCount: 1
            frameDuration: 260
            to: {"happy": 1, "silly": 1, "noticedbear": 0}
        }, Sprite {                                        // 在通常情况下，"noticedbear"状态无法达到
            name: "noticedbear"
            source: "qrc:/images/starfish_3.png"
            frameCount: 1
            frameDuration: 2600
        }]
    }

    Emitter {                                      // 海星星的发射器
        system: sys
        emitRate: 2
        lifeSpan: 10000
        velocity: AngleDirection {angle: 90; magnitude: 60; angleVariation: 5}
        acceleration: PointDirection { y: 10 }
        size: 160
        sizeVariation: 40
        width: parent.width
        height: 100
    }

    SpriteGoal {                             // 最后定义一个SpriteGoal使海星星在运动到矩形的左下部分时跳转到"noticedbear"状态
        system: sys
        width: root.width;
        height: root.height/2;
        y: root.height/2;
        goalState:"noticedbear"
    }
}

这里将小熊的sprite图贴下：