javascript - 如何在kinetic.js中跟踪动画帧数？

Question

这是我的代码:

var playerTimerGroup = new Kinetic.Group({
  x:420,
  y:350
});

var animations = {
    idle: [{
      x: 408,
      y: 1420,
      width: 55,
      height: 55
    }, {
      x: 463,
      y: 1420,
      width: 55,
      height: 55
    }, {
      x: 518,
      y: 1420,
      width: 55,
      height: 55
    }, {
      x: 573,
      y: 1420,
      width: 55,
      height: 55
    }, {
      x: 628,
      y: 1420,
      width: 55,
      height: 55
    }]
  };

  var timer = new Kinetic.Sprite({
      x: 0,
      y: 0,
      image: SpriteImaage,
      animation: 'idle',
      animations: animations,
      frameRate: 7,
      index: 0
    });

  playerTimerGroup.add(timer);
  layer.add(playerTimerGroup);
  stage.add(self.layer);
  timer.start();

在这里我想显示一个文本(秒)，它每帧都在变化。如何实现这一目标？

(我的意思是，当第一个动画开始时，我想显示 1，第二个动画开始时，我想显示 2，依此类推......直到最后一个动画。)

我尝试过这个:

  _.each(animations.idle, function(value, index){
      timer.afterFrame(index, function(){
        console.log(index);
      });
  });

但这仅针对最后一个索引运行..有什么方法可以为每个索引绑定(bind)timer.afterFrame或为每个索引调用timer.afterFrame？

Answer 1

var playerTimerGroup = new Kinetic.Group({
  x: 420,
  y: 350
});

var animations = {
  idle: [{
    x: 408,
    y: 1420,
    width: 55,
    height: 55
  }, {
    x: 463,
    y: 1420,
    width: 55,
    height: 55
  }, {
    x: 518,
    y: 1420,
    width: 55,
    height: 55
  }, {
    x: 573,
    y: 1420,
    width: 55,
    height: 55
  }, {
    x: 628,
    y: 1420,
    width: 55,
    height: 55
  }]
};

var timer = new Kinetic.Sprite({
  x: 0,
  y: 0,
  image: SpriteImaage,
  animation: 'idle',
  animations: animations,
  frameRate: 1,
  index: 0
});

在这里创建一个文本对象，它每秒都会改变:

var timerText = new Kinetic.Text({
  x: 15,
  y: 15,
  text: '20',
  fontSize: 25,
  fontFamily: 'Calibri',
  fill: 'white'
});

i = 1;

time = 0;

在这里创建一个动画对象，它将每秒更改文本:

var timerTextAnimation = new Kinetic.Animation(function(frame) {
  timerText.setText(i);
  if (frame.time - time >= 1000) {
    i++;
    time = frame.time;
  }
}, layer);

timerTextAnimation.start();

playerTimerGroup.add(timer);
playerTimerGroup.add(timerText);
layer.add(playerTimerGroup);
stage.add(self.layer);
timer.start();

在这里停止所有动画:

timer.afterFrame(animations.idle.length - 1, function() {
  timer.stop();
  timerTextAnimation.stop();
});

这对我有用。希望它也能帮助其他人。