Qt移动应用开发（五）：场景切换

浏览数：29 / 时间：2015年06月11日

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就可以达到场景切换的目的了。

一个场景瞬间切换也是非常简单的，要想使用一些特效的话，就要充分发挥开发者的思维，让界面变得丰富多彩！下面是我使用上一篇博文谈到的粒子系统来实现绚丽的场景切换特效：

下面是实现的代码：

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，等到胶囊消失以后就呈现下一个场景了。