KineticJSを使用したHTML5キャンバスでの線形アニメーション。作成方法

Question

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

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

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

しかし：私はこのコードをしようと、リニアアニメーションでこのオブジェクトをアニメーション化する必要が

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); 

それは動作しませんでした！なにが問題ですか？

Answer 1

それが動作しない理由を私は知らないが、私はのように行うための方法を発見した：彼らはアニメーション機能を持っているhttp://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

Answer 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 
}); 

。

を必要に応じて、だからあなたは

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を使用することができますすることができます