我試圖添加時間到我的精靈動畫與Kineticjs

Question

我想設置一個持續時間在我的動畫I.E.我想讓它移動1.5秒，但是，它仍然會立即進行轉換。

的Javascript

var shift1 = new Image(); 
shift1.onload = function(){ 
    var firstShift = new Kinetic.Sprite({ 
     x: 600, 
     y: 221, 
     scaleX: 0.45, 
     scaleY: 0.47, 
     image: shift1, 
     animation: 'pos1', 
     animations: { 
      pos1: [1, 1, 89, 220], 
      pos2: [105, 1, 100, 220] 
     }, 
     frameRate: 5, 
     frameIndex: 0 
    }); 
    image_layer.add(firstShift); 
    firstShift.start(); 
    document.getElementById('play').addEventListener('click', function(){ 
     firstShift.animation('pos2').setY(198).frameRate(1).start(); 
    }); 
}; 
shift1.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'; 

HTML

<div id="controls"> 
    <input type="button" id="play" value="Play"> 
    <input type="button" id="pause" value="Pause"> 
    <input type="button" id="reset" value="Stop"> 
    <input type="button" id="reverse" value="< < <"> 
    <input type="button" id="seek" value="> > >"> 
</div> 

Answer 1

其實我想通了和我將要發佈我的回答爲別人誰也可能會遇到這樣的問題。

var shift1 = new Image(); 
shift1.onload = function(){ 
    var firstShift = new Kinetic.Sprite({ 
     x: 600, 
     y: 221, 
     scaleX: 0.45, 
     scaleY: 0.47, 
     image: shift1, 
     animation: 'pos1', 
     animations: { 
      pos1: [1, 1, 89, 220], 
      pos2: [105, 1, 100, 220] 
     }, 
}); 
image_layer.add(firstShift); 
document.getElementById('play').addEventListener('click', function(){ 
    firstShift.animation('pos1').start(); 
    tween = new Kinetic.Tween({ 
     node: firstShift, 
     duration: 1, 
     onFinish: function(){ 
      firstShift.animation('pos2'); 
     } 
    }); 
tween.play(); 
}; 
shift1.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';