QML NumberAnimation.duration行为

Question

我试图让一个球员顺利地走向QML的目的地。我使用一个NumberAnimation动画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来观察。

Answer 1

我想你是在找SmoothedAnimation。在动画完成之前，只有两种类型的动画能够很好地处理目的地的变化。那是SmoothedAnimation和SpringAnimation。这两种方法都使用当前位置和速度来确定下一帧中的位置。其他动画类型沿预定曲线移动位置。

简单地将NumberAnimation更改为SmoothedAnimation使您的示例在我看来是正确的。