Kinetic : Sprite mouseenter stop

Question

I'm trying, using KineticJS, to set a sprite animation and when I'm hover this sprite, to move to another animation and stop it.

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';

I tried to use function afterFrame, found here Kinetic.js [How can I stop one sprite] But it seemes that this function is over and I don't know what to use instead. No clue here too : http://kineticjs.com/docs/Kinetic.Sprite.html

So if someone know how to do and maybe have a better website for the doc !

Thanks you !

Answer 1

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

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