1

kinetic.js アニメーションについて理解を深める必要があります。http://www.html5canvastutorials.com/kineticjs/html5-canvas-stop-animation-with-kineticjs/にあるチュートリアルを使用していました。コードをいじって、アニメーションで四角形を x 位置 100 に設定しました。私の質問は、四角形の動きをスムーズに移行するにはどうすればよいかということです。html5canvastutorials.com の kinetic.js アニメーションの説明に頭を悩ませることができませんでした。これが私のコードです。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 960,
    height: 480
});
var layer = new Kinetic.Layer();

var block = new Kinetic.Rect({
    x: 100,
    y: 465,
    width: 14,
    height: 14,
    stroke: 'black',
    strokeWidth: 1
});

layer.add(block);
stage.add(layer);

var moveLeft = new Kinetic.Animation(function(frame) {
    block.setX(1);
}, layer);

var moveRight = new Kinetic.Animation(function(frame) {
    block.setX(100);
}, layer);

document.addEventListener('keydown', function(e){
    switch(e.keyCode) {
        case 37:
            moveLeft.start();
            break;
        case 39:
            moveRight.start();
            break;
        default:
            moveLeft.stop();
            moveRight.stop();
            break;
    }
});

滑らかなアニメーションを作成する方法の例と、プロセスを繰り返す方法の優れた説明を教えてください。フレームタイミングがどのように機能するかわかりません。

4

2 に答える 2

0

単純なトゥイーンの場合、組み込みの Tween クラスを使用できます。次に例を示します。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

于 2013-05-22T04:16:37.420 に答える
0

この変更を確認する必要があると思います。

API は、新しい Tween クラスを変更します。古い Transition クラスは廃止されました。曲線に沿ったトゥイーンやタイムラインの構築などの高度なトゥイーンの場合、KineticJS はシームレスに統合される GreenSock アニメーション プラットフォームを推奨しています。

于 2013-05-17T23:49:09.667 に答える