0

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

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

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

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

非常感谢你们

4

1 回答 1

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
于 2013-10-29T14:24:11.333 回答