Question

我尝试使用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

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

谢谢！

Answer 1

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

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

动力学：雪碧鼠标中止

1 个答案: