1

アニメーションの実行中に長方形の座標を取得しようとしています。ここでアニメーションのコードとタイプを確認できます: http://jsfiddle.net/2UZM3/

ご覧のとおり、アニメーションの最後に座標が出力されます。長方形が移動している間、座標を永久に更新したい。

ご協力ありがとうございました！

PS: ソース コードは元々ここからのものです: http://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-easing-functions-with-kineticjs/

4

1 に答える 1

0

stage.onFrameアイテムの座標を出力するハンドラーを追加できます。stageユーザーがボタンをクリックしてアニメーションを開始したときに を開始しstage、メソッドのコールバックtransitionToが実行されたときに を停止します。

window.onload = function() {
    var stage = new Kinetic.Stage({
        container: "container",
        width: 500,
        height: 200
    });
    var layer = new Kinetic.Layer();
    var greenBox = new Kinetic.Rect({
        x: 100,
        y: stage.getHeight() / 2,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
    });


    layer.add(greenBox);
    stage.add(layer);

    stage.onFrame(function(frame) {
        // Update print coordinates on each frame of animation loop
        jQuery("#coordinates").text(Math.round(greenBox.getX()) + "," + Math.round(greenBox.getY()));      
    });

    jQuery("#StartAnim").click(function() {

        // Start the timer running
        stage.start();

        greenBox.transitionTo({
            x: 300,
            duration: 1,
            easing: 'ease-in-out',
            callback: function() {
                // Stop the stage loop
                stage.stop();
            }
        });

    });
};

ここでフィドルを更新しました。

于 2012-08-09T00:41:16.863 に答える