将点击时的下降动画与上升动画结合起来

Question

我正在尝试让移动的精灵从左上角落到左下角。该函数与 SequentialAnimation 组件配合使用正常。除此之外，当您单击（或触摸）窗口时，精灵应该上升一些像素，然后继续从那里落下。当我尝试这样做时，我似乎唯一能做的就是重置 y 坐标，让精灵一直向上移动到屏幕，然后继续从之前离开的位置而不是原来的位置。

以下是代码：

import QtQuick 2.0
import Ubuntu.Components 1.1

import "PelicanFunctions.js" as PelicanFunction

/*!
    \brief Flappy Bird like game
*/

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

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer.vitimiti.saltybird"

    /*
     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(100)
    height: units.gu(75)

    MouseArea {
        id: playArea
        objectName: "playArea"

        width: parent.width
        height: parent.height

        Image {
            id: pelicanSprite
            objectName: "pelicanSprite"

            x: units.gu(2)
            y: units.gu(2)
            width: units.gu(6)
            height: units.gu(6)
            source: "Pelican1.png"

            SequentialAnimation on source {
                id: flyAnimation
                objectName: "flyAnimation"

                loops: Animation.Infinite

                PropertyAnimation {
                    to: "Pelican1.png"
                }

                PropertyAnimation {
                    to: "Pelican2.png"
                }
            }

            SequentialAnimation on y {
                id: fallingBird
                objectName: "fallingBird"

                NumberAnimation {
                    from: y
                    to: playArea.height - pelicanSprite.height
                    duration: 5000
                }

                onRunningChanged: {
                    if (running !== true && pelicanSprite.y === playArea.height
                            - pelicanSprite.height)
                    {
                        flyAnimation.stop()
                        pelicanSprite.source = "Pelican_Death.png"
                    }
                }
            }

            SequentialAnimation on y {
                id: upBird
                objectName: "upBird"

                running: false

                NumberAnimation {
                    from: y
                    to: y + units.gu(9)
                    duration: 800
                }
            }
        }

        onClicked: {
            fallingBird.stop()
            upBird.start()
            fallingBird.start()
        }
    }
}

Answer 1

我用这个代码修复了它：

import QtQuick 2.0
import Ubuntu.Components 1.1

Page {
    id: gamePage
    objectName: "gamePage"

    title: i18n.tr("Salty Bird")
    width: parent.width
    height: parent.height

    Component.onCompleted: {
        header.visible = false
    }

    MouseArea {
        id: playArea
        objectName: "playArea"

        width: parent.width
        height: parent.height

        Image {
            id: pelicanSprite
            objectName: "pelicanSprite"

            x: root.margins
            y: root.margins
            width: units.gu(6)
            height: units.gu(6)
            source: "Pelican1.png"

            SequentialAnimation on source {
                id: flyAnimation
                objectName: "flyAnimation"

                loops: Animation.Infinite

                PropertyAnimation {
                    to: "Pelican1.png"
                }

                PropertyAnimation {
                    to: "Pelican2.png"
                }
            }

            SequentialAnimation on y {
                id: fallingBird
                objectName: "fallingBird"

                NumberAnimation {
                    from: pelicanSprite.y
                    to: playArea.height - pelicanSprite.height
                    duration: (playArea.height - pelicanSprite.y
                               - pelicanSprite.height) / 120 * 1000
                }

                onRunningChanged: {
                    if (running !== true && pelicanSprite.y === playArea.height
                            - pelicanSprite.height)
                    {
                        flyAnimation.stop()
                        pelicanSprite.source = "Pelican_Death.png"
                        playArea.enabled = false
                    }
                }
            }

            SequentialAnimation on y {
                id: upBird
                objectName: "upBird"

                running: false

                NumberAnimation {
                    from: pelicanSprite.y
                    to: pelicanSprite.y - units.gu(9)
                    duration: 200
                }

                onRunningChanged: {
                    if (running !== true)
                        fallingBird.start()
                }
            }
        }

        Image {
            id: menuImage
            objectName: "menuImage"

            x: playArea.width - pauseImage.width - width - root.margins
               - root.spacing
            y: root.margins
            width: units.gu(3)
            height: units.gu(3)

            source: "menu.svg"
        }

        Image {
            id: pauseImage
            objectName: "pauseImage"

            x: playArea.width - width - root.margins
            y: root.margins
            width: units.gu(3)
            height: units.gu(3)

            source: "pause.svg"

            MouseArea {
                id: pauseArea
                objectName: "pauseArea"

                width: parent.width
                height: parent.height

                onClicked: {
                    fallingBird.running === true ? fallingBird.stop() :
                                                   fallingBird.start()

                    flyAnimation.running === true ? flyAnimation.stop() :
                                                    flyAnimation.start()

                    flyAnimation.running === true ? playArea.enabled = true :
                                                    playArea.enabled = false

                    flyAnimation.running === true ?
                                pauseImage.source = "pause.svg" :
                                pauseImage.source = "start.svg"
                }
            }
        }

        onClicked: {
            if (pelicanSprite.y > (pelicanSprite.height + root.margins +
                                   root.spacing + pauseImage.height))
            {
                fallingBird.stop()
                upBird.start()
            }
        }
    }
}

现在还有一个可以工作的暂停按钮和一个不工作的菜单按钮。这个问题通过结合playArea的onClicked函数和upBird动画的onRunningChanged函数得到解决。除此之外，持续时间应该根据鹈鹕还剩下多少时间进行设置，这样无论你点击哪里，速度都是恒定的。否则，你点击得越接近终点，它就会跑得越慢，试图在5秒内跑一小段距离。

y 选项也从简单的 y 改为 pelicanSprite.y，以使其正常工作。