将动力学精灵移动到特定点

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> 

启动一个Sprite动画。它是一个角色，能够做一个步行动画，现在我想让他从一个点到另一个可能用一个按钮或其他东西.. 我现在的问题是，我如何将这个精灵缓慢地移动从x = 100到 x = 700并停止动画？

Answer 1

可以使用transitionTo为移动：

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

如果需要移动后停止精灵动画：

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

例子：http://jsfiddle.net/lavrton/7C6Mn/