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

標籤：qt5官方demo解析集   qml   qml粒子   qtquick   imageparticle   

本系列所有文章可以在這裡查看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.0import QtQuick.Particles 2.0Rectangle {    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.0import QtQuick.Particles 2.0Rectangle {    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.0import QtQuick.Particles 2.0Rectangle {    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    }}

（4）Rotation

待更新