移動一個圖片點擊

Question

我有一個精靈，我試圖移動時，用戶點擊一個按鈕。舉例來說，這裏是原來的位置：

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] 
    } 
}); 

我試圖改變的唯一事情是y座標的頁面上，並使用第二個動畫地圖。這是我的條件和Click事件處理程序：

if(firstShift.animation() == 'pos2'){ 
    firstShift = new Kinetic.Sprite({ 
     x: 600, 
     y: 200 
    }); 
    play(); 
} 
isPaused = false; 

document.getElementById('play').addEventListener('click', function(){ 
    firstShift.transitionTo({ 
     y: 100, 
     duration: 3 
    }); 
}); 

HTML

<div id="schematic_background"></div> 
    <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

嘗試這個

的jsfiddle Demo

HTML

<div id="container"></div> 
<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> 

代碼

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 200 
    }); 
    var layer = new Kinetic.Layer(); 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
    var firstShift = new Kinetic.Sprite({ 
     x: 250, 
     y: 40, 

     image: imageObj, 
     animation: 'pos1', 
     animations: { 
     pos1: [ 
      2,2,32,32 
        ], 
     pos2: [ 
      // x, y, width, height (3 frames) 
      -2,-20,64,64, 

     ] 
     } 
    }); 


    layer.add(firstShift); 


    stage.add(layer); 

    // start sprite animation 
    firstShift .start(); 

    var frameCount = 0; 



    document.getElementById('play').addEventListener('click', function() { 
     firstShift .animation('pos2'); 
    }, false); 
    }; 
    imageObj.src = 'http://cdn.sstatic.net/stackoverflow/img/favicon.ico';