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

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
        }
    }

}

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()
                        }
                    }
                }
            }
        }
    }
}

     

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