使用KineticJS的HTML5 Canvas上的線性動畫。如何製作？

Question

我正在開發一個基於HTML5 canvas的迷你遊戲，我似乎無法組織線性動畫。

我使用這個代碼添加一個「目標」對象到畫布：

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

但是，它沒有工作！哪裏不對？

Answer 1

我不知道爲什麼它不工作，但我發現這樣做的方式：

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

你可以看到更多的細節：http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

Answer 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如果需要