HTML5 CanvasのリニアアニメーションをKineticJSを使用して作成します。

私はHTML5のキャンバスベースのミニゲームを開発しており、リニアアニメーションを整理することはできません。

私はキャンバスに「ターゲット」オブジェクトを追加するためにこのコードを使用しています:

var target = new Kinetic.Shape(function(){
    var context = this.getContext();
    context.drawImage(images.target, x, y, 2*radius, 2*radius);
    context.beginPath();
    context.rect(x, y, 2*radius, 2*radius);
    context.closePath();
});
gameLayer.add(target);

このコードを試して、線形アニメーションでこのオブジェクトをアニメーション化する必要があります:

var mx = x;
setInterval(function(){
   mx -= 1;
   target.setPosition(mx, y);
   gameLayer.draw();
}, 500);

しかし、それは動作しませんでした!なにが問題ですか?

1

2 答え

私はなぜそれが動作しないのか分からないが、私は次のようにする方法を見つけた:

var mx = x;
var my = target.y;
target.transitionTo({
   x: mx,
   y: my,
   rotation: 0,
   scale: {x: 1, y: 1},
   duration: 1, //time to transition in second
});

You can see more details at: http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

2
追加された

彼らはアニメーション機能を持っています。だからあなたはできる

var myAnimationName = new Kinetic.Animation(function (frame) {
    console.log(frame.time);
    target.setX(target.getX() + 1);
    if (target.getX() < somePosition) {
        target.setX(somePosition);
        this.stop();
    }
}, layer);
myAnimationName.start();

必要に応じて frame.time も使用できます

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript