如何在QML中利用Sprite来做我们需要的动画

在游戏中动画的设计非常中要。在QML中,它提供了丰富的animation,但是有时我们需要对图像进行变化,就像放电影一样。在今天的这篇文章中,我们将设计一个可以变化图像的动画。我们可以通过Qt所提供的Sprite功能来实现。

为了设计的方便,我们先设计一个我们自己的bear动画,这个动画的图像大小为: 2048x256。它刚好是8副图256x256

在我们的Sprite设计中,我们想按照上述图像显示的顺序依次显示每个图像,这样就可以形成一个可以连续变化的动画效果。

直接把我们的动画设计文件BearSprite贴出来:

BearSprite.qml

import QtQuick 2.0

Item  {
    width: 256
    height: 256

    SpriteSequence {
        id: fishSprite
        anchors.fill: parent
        interpolate: false
        goalSprite: ""

        Sprite {
            name: "first"
            source: "./gfx/Bear2.png"
            frameWidth: 256
            frameHeight: 256
            frameCount: 1
            frameDuration: 800
            frameDurationVariation: 400
            to: { "second" : 1 }
        }

        Sprite {
            name: "second"
            source: "./gfx/Bear2.png"
            frameCount: 1
            frameX: 256
            frameWidth: 256
            frameHeight: 256
            frameDuration: 800
            frameDurationVariation: 400
            to: { "third" : 1 }
        }

        Sprite {
            name: "third"
            source: "./gfx/Bear2.png"
            frameCount: 1
            frameX: 256*2
            frameWidth: 256
            frameHeight: 256
            frameDuration: 800
            frameDurationVariation: 400
            to: { "fourth" : 1 }
        }

        Sprite {
            name: "fourth"
            source: "./gfx/Bear2.png"
            frameCount: 1
            frameX: 256*3
            frameWidth: 256
            frameHeight: 256
            frameDuration: 800
            frameDurationVariation: 400
            to: { "fifth" : 1 }
        }

        Sprite {
            name: "fifth"
            source: "./gfx/Bear2.png"
            frameCount: 1
            frameX: 256*4
            frameWidth: 256
            frameHeight: 256
            frameDuration: 800
            frameDurationVariation: 400
            to: { "sixth" : 1 }
        }

        Sprite {
            name: "sixth"
            source: "./gfx/Bear2.png"
            frameCount: 1
            frameX: 256*5
            frameWidth: 256
            frameHeight: 256
            frameDuration: 800
            frameDurationVariation: 400
            to: { "seventh" : 1 }
        }

        Sprite {
            name: "seventh"
            source: "./gfx/Bear2.png"
            frameCount: 1
            frameX: 256*6
            frameWidth: 256
            frameHeight: 256
            frameDuration: 800
            frameDurationVariation: 400
            to: { "eighth" : 1 }
        }

        Sprite {
            name: "eighth"
            source: "./gfx/Bear2.png"
            frameCount: 1
            frameX: 256*7
            frameWidth: 256
            frameHeight: 256
            frameDuration: 800
            frameDurationVariation: 400
            to: { "first" : 1 }
        }

        Sprite { //WORKAROUND: This prevents the triggering of a rendering error which is currently under investigation.
            name: "dummy"
            source: "./gfx/Bear2.png"
            frameCount: 8
            frameWidth: 256
            frameHeight: 256
            frameX: 0
            frameDuration: 200
        }
    }

}

在上面的设计中,我们使用了一个SpriteSequence,里面放了一些我们所需要的Sprite。

        Sprite {
            name: "sixth"
            source: "./gfx/Bear2.png"
            frameCount: 1
            frameX: 256*5
            frameWidth: 256
            frameHeight: 256
            frameDuration: 800
            frameDurationVariation: 400
            to: { "seventh" : 1 }
        }

这里的每个Sprite的设计都几乎都差不多。每个Sprite都有一个自己的名字。这里注意frameX。它其实是在我们上面显示的图里的x坐标位置。比如256x5,表示的是滴5副图。另外,我们的frameHeight和frameWidth也是和原图的大小是一样的,虽然在实际的显示中这个大小可以在Main.qml中可以设置。

使用同样的方法,我们可以做一个FishSprite。

FishSprite.qml

import QtQuick 2.0
import QtMultimedia 5.0

Item {
    width: 64
    height: 64
    property real hp: 3

    SoundEffect {
        id: spawnSound
        source: "./audio/catch.wav"
        loops:SoundEffect.Infinite
    }

    SoundEffect {
        id: killedSound
        source: "./audio/catch-action.wav"
    }

    SpriteSequence {
        id: fishSprite
        anchors.fill: parent
        interpolate: false
        goalSprite: ""

        Sprite {
            name: "left"
            source: "./gfx/mob-idle.png"
            frameWidth: 64
            frameHeight: 64
            frameCount: 1
            frameDuration: 800
            frameDurationVariation: 400
            to: { "front" : 1 }
        }

        Sprite {
            name: "front"
            source: "./gfx/mob-idle.png"
            frameCount: 1
            frameX: 64
            frameWidth: 64
            frameHeight: 64
            frameDuration: 800
            frameDurationVariation: 400
            to: { "left" : 1, "right" : 1 }
        }

        Sprite {
            name: "right"
            source: "./gfx/mob-idle.png"
            frameCount: 1
            frameX: 128
            frameWidth: 64
            frameHeight: 64
            frameDuration: 800
            frameDurationVariation: 400
            to: { "front" : 1 }
        }

        Sprite { //WORKAROUND: This prevents the triggering of a rendering error which is currently under investigation.
            name: "dummy"
            source: "./gfx/melee-idle.png"
            frameCount: 8
            frameWidth: 64
            frameHeight: 64
            frameX: 0
            frameDuration: 200
        }

        NumberAnimation on x {
            id: fishSwim
            running: false
            property bool goingLeft: fishSprite.currentSprite == "right"
            to: goingLeft ? -360 : 360
            duration: 300
        }

        Component.onCompleted: {
            spawnSound.play()
        }
    }

    SpriteSequence {
        id: bubble
        width: 64
        height: 64
        scale: 0.4 + (0.2  * hp)
        interpolate: false
        goalSprite: ""

        Behavior on scale {
            NumberAnimation { duration: 150; easing.type: Easing.OutBack }
        }

        Sprite {
            name: "big"
            source: "./gfx/catch.png"
            frameCount: 1
            to: { "burst" : 0 }
        }

        Sprite {
            name: "burst"
            source: "./gfx/catch-action.png"
            frameCount: 3
            frameX: 64
            frameDuration: 200
        }

        Sprite { //WORKAROUND: This prevents the triggering of a rendering error which is currently under investigation.
            name: "dummy"
            source: "./gfx/melee-idle.png"
            frameCount: 8
            frameWidth: 64
            frameHeight: 64
            frameX: 0
            frameDuration: 200
        }
        SequentialAnimation on width {
            loops: Animation.Infinite
            NumberAnimation { from: width * 1; to: width * 1.1; duration: 800; easing.type: Easing.InOutQuad }
            NumberAnimation { from: width * 1.1; to: width * 1; duration: 1000; easing.type: Easing.InOutQuad }
        }
        SequentialAnimation on height {
            loops: Animation.Infinite
            NumberAnimation { from: height * 1; to: height * 1.15; duration: 1200; easing.type: Easing.InOutQuad }
            NumberAnimation { from: height * 1.15; to: height * 1; duration: 1000; easing.type: Easing.InOutQuad }
        }
    }
}

Main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "sprite.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(60)
    height: units.gu(85)

    Page {
        id: page
        title: i18n.tr("sprite")

        Column {
            anchors.fill: parent

            FishSprite {
                height: units.gu(30)
                width: units.gu(30)
            }

            BearSprite {
                id: bear
                height: units.gu(30)
                width: units.gu(30)

                NumberAnimation on x {
                    to: page.width
                    duration: 8*800

                    onRunningChanged: {
                        if ( running == false) {
                            bear.x = 0
                            start()
                        }
                    }
                }
            }
        }
    }
}

运行我们的QML应用:

     

项目的源码在: git clone https://gitcafe.com/ubuntu/sprite.git

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-08 13:41:26

如何在QML中利用Sprite来做我们需要的动画的相关文章

如何在Javascript中利用封装这个特性

对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性(名词)作为Class的Property把事物的动作(动词)作为Class的methods.在面向对象的语言中(C#等)都会有一些关键字来修饰类或者属性(Private,public,protect),这些关键词描述了访问的权限,不多做解释.泗阳县民用航空局 我们来看看Javascript的易变的特性

如何在QML中使用multitouch

在Qt QML中,它可以利用multitouch来做一些我们想做的事情.在今天的文章中,我们将介绍如何使用multitouch来做一些我们想做的事. 其实,在QML中利用多点触控是非常容易的一件事.我们下面直接来展示我们的例程来给大家讲解一下: import QtQuick 2.0 import Ubuntu.Components 1.1 /*! \brief MainView with a Label and Button elements. */ MainView { // objectNa

如何在android中利用Theme设置application 的所有listview的style?~

今天看VLC的源代码,发现一个很神奇的东西 所有listview的点击效果背景色都是橘黄色 花了点时间找了一下看看怎么实现的. 首先,定义一个<selector> like this: <selector> <item android:state_pressed="true"> <shape android:shape="rectangle"> <solid android:color="@color/

在QML中利用Javascript动态生成画面

在这篇文章中介绍如何使用Javascript来动态生产画面. 我们在先前的例子中"如何使用QML动态产生Component来完成我们的气球游戏 (2)"已经对动态生产QML做了一些描述.也许那个项目比较复制,现在我来用一些简单的例子来说明一下,这样更加直观.更多的说明可以参阅文章"Dynamic QML Object Creation from JavaScript". 1)创建我们的动态QML文件 这个文件将被用来被Javascript来动态生产.这是一个模版尽管

如何在Scope中利用keyword来使自己的Scope在聚合Scope中展示自己

在前面的文章"Scopes 关键词 (keyword)及departments探讨(英文视频)"中,我们已经对Scope中的keyword做了一些基本的介绍.但是我们没有相应的教程.在这篇文章中,我们将通过youku Scope来介绍如何使用keyword从而使得一个Scope在不同的聚合Scope中来得到不同的呈现. 如果大家对如何开发Scope还不是很熟的话,请参阅我的教程"在Ubuntu OS上创建一个dianping Scope (Qt JSON)".如果大

如何在QML中使用ListView并导航到其它页面中

我们知道ListView在QML应用中扮演非常重要的角色.看看我们的很多的应用都是在使用ListView.那么当我们点击ListView中的item并导航到另外一个页面呢?其实这样的方法有很多.在这篇文章中,我们来介绍其中的几种.开发者可以参照其中的设计,或自己想出更好的设计. 1)使用PageStack来完成 在我们的RssReader中的例子中,我们使用了PageStack来完成我们的导航.我们可以把我们的每个页面都做成我们的Page.当我们的页面被点击后,我们把新的Page压入栈中.在返回

如何在QML中使用camera API来拍照

在先前的例程中"如何使用Ubuntu手机平台中的照相机API来存储照片",我们已经展示了如何使用Item的属性来存储我们的照片.在这篇文章中,我们将使用Camera API来完成同样的功能. 我们来直接贴自己的代码: main.qml import QtQuick 2.0 import Ubuntu.Components 1.1 import QtMultimedia 5.0 /*! \brief MainView with a Label and Button elements. *

如何在QML中设计一个expandable ListView

在前面的文章"如何在QML中使用ListView并导航到其它页面中"中,我们已经介绍了各种在ListView中导航到其它页面的方法.在这篇文章中,我来介绍如何建立一个expandable的ListView.通过这样的方法,ListView可以不用导航到其它的页面中,但是它可以通过状态的控制占据整个页面,而得到显示. 首先我们可以使用Ubuntu SDK来创建一个最简单的"QML App with Simple UI (qmlproject)"项目.我们的Main.q

qml 中 使用 shader

使用绘制工具如Photoshop .Flash已经可以创建许多效果非常绚丽的图像.动画等. Qt/QML 的努力其实是在这些工具发展的后面, 因此很多效果在Qt中无法实现. 不得不佩服Qt小组的才智, 他们为了解决这个矛盾, 采取了让qt 5.x 跟opengl 紧密结合的方法, openGL是现代图形学的一个有力的编程工具,很多图形学的概念都已经在opengl中实现: 因此虽然实现一些特效虽然需要比较丰富的图形学知识, 但已经让以前很多的不可能变为可能. Qt 中可以有多种方法使用opengl