1

プレーヤーをQMLの目的地に向かってスムーズに移動させようとしています。NumberAnimationx、yの位置の変化をアニメーション化するためにaを使用しています。の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. 画面の中央（または左上に近づく）をすぐにクリックします。

2回目のクリック（長方形がまだ動いている間）で、長方形の番号アニメーションが停止しているように見えますが（これは私が望むものです）、目的地の位置を想定しています（私が望むものではありません）。代わりに、アニメーションを停止し、長方形が停止した位置を想定してから、新しい目的地に進むようにします。

NumberAnimation.duration両方のsを1000に設定すると、移動速度が不均衡になることを無視して、正しい動作を確認できます。

4

1 に答える 1

2

SmoothedAnimationをお探しだと思います。アニメーションが完了する前に目的地の変更にうまく対処できるアニメーションは2種類だけです。それがSmoothedAnimationとSpringAnimationです。これらは両方とも、現在の位置と速度を使用して、次のフレームの位置を決定します。他のアニメーションタイプは、所定の曲線に沿って位置を移動します。

NumberAnimationをSmoothedAnimationに変更するだけで、あなたの例は私には正しく見えます。

于 2012-08-08T01:09:04.623 に答える