javascript - 动力学 : Sprite mouseenter stop

Question

我正在尝试使用 KineticJS 设置 Sprite 动画，当我将鼠标悬停在该 Sprite 上时，移动到另一个动画并停止它。

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

因此，如果有人知道该怎么做，并且可能有一个更好的文档网站!

谢谢你!

Answer 1

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

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