HTML5 캔버스의 선형 애니메이션은 KineticJS를 사용합니다. 만드는 방법은 무엇입니까?

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을 사용할 수 있습니다