Question

I’m trying to make a player move smoothly towards a destination in QML. I’m using a NumberAnimation to animate the x,y position changes. The NumberAnimation‘s duration should be proportional to the distance the player has to travel, so that the player moves at the same speed regardless of how far away they are from their destination.

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

My problem can be demonstrated by running the application above and following these steps:

1. Click on the bottom right hand corner of the screen.
2. Immediately click in the centre (or closer towards the top left) of the screen.

On the second click (while the rectangle is still moving), it seems that the rectangle’s number animation is stopped (which is what I want) but it assumes the position of the destination (not what I want). Instead, I want the animation to stop and the rectangle to assume the position at which it was stopped, then to continue on to the new destination.

The correct behaviour – ignoring that the movement speed becomes disproportional – can be seen by setting both of the NumberAnimation.durations to 1000.

Answer 1

I think that you are looking for SmoothedAnimation. There are only two types of animation that deal nicely with the destination changing before the animation is completed. That is SmoothedAnimation and SpringAnimation. Both of these use the current position and velocity to determine the position in the next frame. Other animation types move the position along a predetermined curve.

Simply changing NumberAnimation to SmoothedAnimation makes your example look correct to me.