키네틱 스프라이트를 특정 지점으로 이동

Question

<script> 
     var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: 800, 
      height: 600 
     }); 

     var layer = new Kinetic.Layer(); 

     var image = new Image(); 
     var image2 = new Image(); 
     var newX = 500; 
     var animations = { 
     pos1: [{ 
      x: 32, 
      y: 32, 
      width: 32, 
      height: 32 
      }, 
      { 
      x: 64, 
      y: 32, 
      width: 32, 
      height: 32 
      }, 
      { 
      x: 96, 
      y: 32, 
      width: 32, 
      height: 32 
      },{ 
      x: 128, 
      y: 32, 
      width: 32, 
      height: 32 
      }, 
      { 
      x: 160, 
      y: 32, 
      width: 32, 
      height: 32 
      }, 
      { 
      x: 32, 
      y: 0, 
      width: 32, 
      height: 32 
      },], 



     }; 

     image.onload = function() { 

      var anim = new Kinetic.Sprite({ 
       x: 100, 
       y: 100, 
       image: image, 
       animation: 'pos1', 
       animations: animations, 
       frameRate: 10 
       }); 
      layer.add(anim); 

      stage.add(layer); 
      anim.start(); 

     }; 



    //image.src = 'myimgsrc'; 
</script> 

그러면 스프라이트 애니메이션이 시작됩니다. 그 애니메이션은 산책 애니메이션을 할 수 있고, 이제는 버튼이나 다른 것으로 한 지점에서 다른 지점으로 이동하려고합니다. 내 질문은 이제 어떻게 x = 100 ~ x = 700이고 애니메이션을 중단 하시겠습니까?

Answer 1

당신은 이동 transitionTo를 사용할 수 있습니다

anim.transitionTo({ 
    x : 200, 
    duration: 3 
}); 

당신이 이동 한 후 스프라이트 애니메이션을 중지해야하는 경우 :

setTimeout(function(){ 
    anim.stop(); 
},3000); 

예 : http://jsfiddle.net/lavrton/7C6Mn/