防止循環中kineticjs精靈動畫

我正在開發一個棋盤遊戲kineticjs，其中PICE在2個方面同時動畫：防止循環中kineticjs精靈動畫

1 - 有補間動畫的X和Y座標，從地點A到B 。我這樣做沒有問題，從用戶獲得輸入。

2 - 在一個精靈中，我們應該看到片斷正在擡起（幀0> 4），並在上一次動畫期間保持不變，最後它從4移動到8，並返回進入初始空閒狀態

enter image description here

到目前爲止，我有這樣的：

var animations = { 
    idle: [{x: 0, y: 0, width: 100, height: 100}], 
    up: [{x: 0, y: 0, width: 100, height: 100}, 
    {x: 100, y: 0, width: 100, height: 100}, 
    {x: 200, y: 0, width: 100, height: 100}, 
    {x: 300, y: 0, width: 100, height: 100}], 
    down: [{x: 400, y: 0, width: 100, height: 100}, 
    {x: 500, y: 0, width: 100, height: 100}, 
    {x: 600, y: 0, width: 100, height: 100}, 
    {x: 700, y: 0, width: 100, height: 100}] 
}; 

/* coordinates_js is an array of the possible x and y coordinates for the player. like this, the player is created in the first coordinate, the starting point 
     */ 
     var player = new Kinetic.Sprite({ 
       x: coordinates_js[0].x, 
       y: coordinates_js[0].y, 
       image: imageObj, 
       animation: 'idle', 
       animations: animations, 
       frameRate: 7, 
       index: 0, 
       scale: 0.4, 
       id: "player" 
      }); 
    imageObj.onload = function() { 

     var targetx = null; 
     var targety = null; 
     var targetIndex = null; 
     var playerIndex = 0; 


     document.getElementById('enviar').addEventListener('click', function() { 
     targetIndex = document.getElementById("targetIndex").value; 

     var destino = coordinates_js[targetIndex]; 

     var tween = new Kinetic.Tween({ 
      node: player, 
      x: destino.x, 
      y: destino.y, 
      rotation: 0, 
      duration: 5 
     }).play(); 

     console.log("x: " + destino.x + "y: " + destino.y) 

     playerIndex = targetIndex; 

     tween.play(); 


     player.setAnimation("up"); 
     player.afterFrame(3, function(){ 
      console.log("idle") 
      player.setAnimation("idle"); 
     }) 
     }, false); 

     playLayer.add(player); 
     stage.add(playLayer); 

     player.start(); 
    }

這裏的proble是，精靈動畫從1起爲4，轉入怠速;我一直堅持到補間結束。我可以有：

player.setAnimation("up"); 
player.afterFrame(3, function(){ 
    console.log("idle") 
    player.setAnimation("idle"); 
})

這提起了一塊，但不會讓它下降。那麼，我如何才能在flash gotoAndPlay（「up」）中啓動，並在補間gotoAndStop（「idle」）結束。

非常感謝大家

來源

2013-10-25 Luis Aguiar

你見過onFinish事件充斥着？

http://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-callback-with-kineticjs/

你可以做這樣的事情：

var tween = new Kinetic.Tween({ 
    node: player, 
    x: destino.x, 
    y: destino.y, 
    rotation: 0, 
    duration: 5, 
    onFinish: function() { 
    player.setAnimation("idle"); //When tween finishes, go back to "idle" animation 
    } 
}).play(); //Play the Tween 

player.setAnimation("up"); //Start the "up" animation for the sprite

來源

2013-10-29 14:24:11 projeqht

防止循環中kineticjs精靈動畫

回答

相關問題