1

我试图让玩家顺利地向 QML 中的目的地移动。我正在使用 aNumberAnimation为 x,y 位置变化设置动画。的NumberAnimation持续时间应该与玩家必须行进的距离成正比，这样玩家就可以以相同的速度移动，而不管他们离目的地有多远。

import QtQuick 1.1

Item {
    width: 720
    height: 720

    MouseArea {
        anchors.fill: parent
        onClicked: {
            var newXDest = mouse.x - player.width / 2;
            var newYDest = mouse.y - player.height / 2;
            var dist = player.distanceFrom(newXDest, newYDest);
            // Make duration proportional to distance.
            player.xMovementDuration = dist; // 1 msec per pixel
            player.yMovementDuration = dist; // 1 msec per pixel
            console.log("dist = " + dist);
            player.xDest = newXDest;
            player.yDest = newYDest;
        }
    }

    Rectangle {
        id: player
        x: xDest
        y: yDest
        width: 32
        height: 32
        color: "blue"
        property int xDest: 0
        property int yDest: 0
        property int xMovementDuration: 0
        property int yMovementDuration: 0

        function distanceFrom(x, y) {
            var xDist = x - player.x;
            var yDist = y - player.y;
            return Math.sqrt(xDist * xDist + yDist * yDist);
        }

        Behavior on x {
            NumberAnimation {
                duration: player.xMovementDuration
//                duration: 1000
            }
        }

        Behavior on y {
            NumberAnimation {
                duration: player.yMovementDuration
//                duration: 1000
            }
        }
    }

    Rectangle {
        x: player.xDest
        y: player.yDest
        width: player.width
        height: player.height
        color: "transparent"
        border.color: "red"
    }
}

我的问题可以通过运行上面的应用程序并执行以下步骤来证明：

  1. 单击屏幕的右下角。
  2. 立即单击屏幕的中心（或更靠近左上角）。

在第二次单击时（当矩形仍在移动时），矩形的数字动画似乎停止了（这是我想要的），但它假定了目的地的位置（不是我想要的）。相反，我希望动画停止并且矩形呈现它停止的位置，然后继续到新的目的地。

正确的行为 - 忽略移动速度变得不成比例 - 可以通过将两个NumberAnimation.durations 设置为 1000 来查看。

4

1 回答 1

2

我认为您正在寻找 SmoothedAnimation。只有两种类型的动画可以很好地处理动画完成之前目的地的变化。那就是 SmoothedAnimation 和 SpringAnimation。这两者都使用当前位置和速度来确定下一帧中的位置。其他动画类型沿预定曲线移动位置。

只需将 NumberAnimation 更改为 SmoothedAnimation 即可使您的示例对我来说看起来正确。

于 2012-08-08T01:09:04.623 回答