防止循环中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精灵动画

回答

相关问题