动力学：精灵鼠标进入停止答案

【问题标题】：Kinetic : Sprite mouseenter stop动力学：精灵鼠标进入停止
【发布时间】：2014-05-12 08:38:27
【问题描述】：

我正在尝试使用 KineticJS 设置一个精灵动画，当我悬停这个精灵时，移动到另一个动画并停止它。

var stage = new Kinetic.Stage({
    container: 'container',
    width: 600,
    height: 600
});

var layer = new Kinetic.Layer();

var animations = {
  close: [
    0, 0, 127, 70,
    127, 0, 127, 70,
    254, 0, 127, 70,
    381, 0, 127, 70,
    508, 0, 127, 70,
    635, 0, 127, 70,
    0, 70, 127, 70,
    127, 70, 127, 70,
    254, 70, 127, 70,
    381, 70, 127, 70,
    508, 70, 127, 70,
    635, 70, 127, 70
  ],
  closed: [
    635, 70, 127, 70
  ],
  openclose: [
    0, 0, 127, 70,
    127, 0, 127, 70,
    254, 0, 127, 70,
    381, 0, 127, 70,
    508, 0, 127, 70,
    635, 0, 127, 70,
    0, 70, 127, 70,
    127, 70, 127, 70,
    254, 70, 127, 70,
    381, 70, 127, 70,
    508, 70, 127, 70,
    635, 70, 127, 70,
    635, 70, 127, 70,
    508, 70, 127, 70,
    381, 70, 127, 70,
    254, 70, 127, 70,
    127, 70, 127, 70,
    0, 70, 127, 70,
    635, 0, 127, 70,
    508, 0, 127, 70,
    381, 0, 127, 70,
    254, 0, 127, 70,
    127, 0, 127, 70,
    0, 0, 127, 70
  ]
}

var imageObj = new Image();
imageObj.onload = function() {
  var eye = new Kinetic.Sprite({
    x: 250,
    y: 250,
    image: imageObj,
    animation: 'openclose',
    animations: animations,
    frameRate: 12
  });

  layer.add(eye);

  stage.add(layer);

  eye.start();

  eye.on('mouseenter', function(){

    this.animation('close').afterFrame(11, function() {
      this.animation('closed').stop();
    });

  });

};

imageObj.src = 'http://localhost/canvas/eye/sprite.png';

我尝试使用函数afterFrame，在这里找到Kinetic.js [How can I stop one sprite] 但是好像这个功能已经结束了，不知道改用什么了。这里也没有线索：http://kineticjs.com/docs/Kinetic.Sprite.html

所以如果有人知道该怎么做，也许有一个更好的文档网站！

谢谢！

【问题讨论】：

标签： javascript canvas kineticjs

【解决方案1】：

sprite.on('frameIndexChange', function(evt) {
    if( evt.newVal === 11 ){
        // stop
    }
});

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-sprite-tutorial/

【讨论】：