防止在kineticjs精灵动画中循环

Question

我正在开发一款带有kineticjs的棋盘游戏，其中两种方式同时激活一个pice：

1 - 使用补间x和y坐标进行动画处理，从a到b。我这样做没有问题，从用户那里得到了输入。

2 - 在精灵中，我们应该看到正在抬起的棋子（第0帧＆gt; 4），并且在上一个动画期间保持不动，并且在它结束时，它会从4到8动画，然后返回进入初始空闲状态

到目前为止，我有这个：

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

这里的问题是精灵动画从1到4播放并进入空闲状态;我知道它一直待到补间结束。我可以：

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

这抬起了一块，但不会让它掉下来。那么，我怎么能在flash gotoAndPlay（“up”）中启动，并在补间gotoAndStop（“idle”）的末尾。

非常感谢大家

Answer 1

您是否看过补间的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