Линейная анимация на холсте HTML5 с использованием KineticJS.Как сделать?

Question

Я разрабатываю мини-игру на основе холста 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); 

Но, это не сработало! Что не так?

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 при необходимости