Qt移動應用開發（五）：場景切換

Qt移動應用開發（五）：場景切換

         上篇文章講到了怎樣用QtQuick實現絢麗的粒子特效。粒子特效的出現可以說給了開發者一個個性化界面開發的一個契機，之後可以創造出不少其它有趣的界面出來。並適配到Android、iOS等移動平臺上。從而讓你的程序變得更加有趣！

原創文章，反對未聲明的引用。

原博客地址：http://blog.csdn.net/gamesdev/article/details/34840415

         這一次我將介紹我在實際應用開發的時候是怎樣實現場景的切換的。

場景的切換問題是一個架構上的問題，有很是多的實現方式，而Qt Quick也提供了很是多有用的類，以便咱們進行場景的切換。在QML中。場景切換實質上就是將一個界面類隱藏。而另一個界面類顯示的方法。如下的代碼就是一個簡單的樣例：

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item
    {
        id: scene_1
        visible: true
        anchors.fill: parent
        Text
        {
            anchors.centerIn: parent
            textFormat: Text.RichText
            text: qsTr( "<h1><font color=red>這是第一個場景</color></h1>" )
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                scene_1.visible = false;
                scene_2.visible = true;
            }
        }

    }

    Item
    {
        id: scene_2
        visible: false
        anchors.fill: parent
        Text
        {
            anchors.centerIn: parent
            textFormat: Text.RichText
            text: qsTr( "<h1><font color=green>這是第二個場景</color></h1>" )
        }
	MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                scene_2.visible = false;
                scene_1.visible = true;
            }
        }
    }
}

程序的演示效果例如如下：

首先出現的是左邊的場景，當鼠標點擊窗口的時候，就會彈出右邊的場景。紅色的文字也會消失。

         這個樣例主要使用Item的visible屬性，將原有Item的visible設爲false，而後將需要出現的Item的visible設爲true就可以達到場景切換的目的了。

         一個場景瞬間切換也是很easy的，要想使用一些特效的話。就要充分發揮開發人員的思惟，讓界面變得豐富多彩！

如下是我使用上一篇博文談到的粒子系統來實現絢麗的場景切換特效：

如下是實現的代碼：

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Particles 2.0

ApplicationWindow
{
    visible: true
    width: 640
    height: 480
    title: qsTr( "測試場景切換" )

    Item
    {
        id: scene_1
        visible: true
        anchors.fill: parent
        Text
        {
            anchors.centerIn: parent
            textFormat: Text.RichText
            text: qsTr( "<h1><font color=red>這是第一個場景</color></h1>" )
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked: sceneTransition( scene_1, scene_2 )
        }
    }

    Item
    {
        id: scene_2
        visible: false
        anchors.fill: parent
        Text
        {
            anchors.centerIn: parent
            textFormat: Text.RichText
            text: qsTr( "<h1><font color=green>這是第二個場景</color></h1>" )
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked: sceneTransition( scene_2, scene_1 )
        }
    }

    ParticleSystem
    {
        anchors.centerIn: parent
        ImageParticle
        {
            source: "qrc:///circle.png"
            colorVariation: 0.75
        }

        Emitter
        {
            id: emitter
            enabled: false
            emitRate: 2000
            size: 32
            lifeSpan: 4000
            velocity: AngleDirection
            {
                magnitude: 200
                angleVariation: 360
            }

            Timer
            {
                id: emitterTimer
                running: emitter.enabled
                interval: 2000
                property var nextScene
                property var thisScene
                onTriggered:
                {
                    thisScene.visible = false;
                    nextScene.visible = true;
                    emitter.enabled = false;
                }
            }
        }
    }

    function sceneTransition( thisScene, nextScene )
    {
        emitterTimer.thisScene = thisScene;
        emitterTimer.nextScene = nextScene;
        emitter.enabled = true;
    }
}

在我製做的第一款獨立遊戲《吃藥了》中，我精心設計了一種有趣的場景切換的方式：首先用大約6000粒膠囊覆蓋主主場景。而後在後面一層設定對應層的visible，等到膠囊消失之後就呈現下一個場景了。

本文參加了CSDN博文大賽，請你們支持我，爲我投一票。