防止在 kineticjs sprite 动画中循环答案

【问题标题】：prevent looping in kineticjs sprite animation防止在 kineticjs sprite 动画中循环
【发布时间】：2013-11-04 15:56:03
【问题描述】：

我正在使用 kineticjs 开发一款棋盘游戏，其中一个图片以两种方式同时动画：

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

2 - 在 sprite 中，我们应该看到被抬起的部分（第 0 帧 > 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");
})

这会抬起一块，但不会让它掉下来。那么，我该怎么做呢？

非常感谢大家

【问题讨论】：

标签： javascript animation html5-canvas kineticjs

【解决方案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

【讨论】：