KineticJS 'MouseOver' Tweenが働いていますが、「マウスアウト」のTweenはそうではありません

Question

現在、マウスを覆っているときにグリッドのグリッドを拡大して「トップ」レイヤーに移動しようとしていますが、マウスアウト時に元のサイズに戻り、元のレイヤーに戻ります。そのうちの。しかし、今すぐマウスオーバー機能のみが正しく機能しています。

これは現在のコードIMが動作しています。

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

  var layer = new Kinetic.Layer();
  var secondLayer = new Kinetic.Layer();


var tri = new Kinetic.RegularPolygon({
    x: stage.width()/2,
    y: stage.height()/2,
    sides: 3,
    radius: 30,
    fill: '#111111',
    closed: true,
    shadowColor: '#5febff',
    shadowBlur: 5,
    shadowOpacity: 0.18,
});

  layer.add(tri);

  stage.add(layer);
  stage.add(secondLayer);

  // bind stage handlers
  layer.on('mouseover', function(evt) {
    var shape = evt.targetNode;
    shape.moveTo(secondLayer);
    stage.draw()
    var tween = new Kinetic.Tween({
    node: shape,
    duration: 0.05,
    scaleX: 1.5,
    scaleY: 1.5
    });
    tween.play()
  });

  secondLayer.on('mouseout', function(evt) {
    var shape = evt.targetNode;
    var tween = new Kinetic.Tween({
    node: shape,
    duration: 0.05,
    scaleX: 1.5,
    scaleY: 1.5
    });
    tween.reverse()
    shape.moveTo(layer);
    stage.draw();

  });

.

そしてここにはJSフィドルです： http://jsfiddle.net/y2c3z/1/

Answer 1

1. tween.reverse()の後にのみtween.play()を使用できます。そのため、スケール属性を元の値に変更するだけです。

2. トゥイーンの下にある形をしながら、層間に形を動かさないでください。Tweenが完了した後に形状を移動できます。

http://jsfiddle.net/y2c3z/3/