Javascript Kineticjs'；鼠标盖'；tween正在工作，但'；鼠标输出'；吐温不是

我目前正在尝试这样做，当你将鼠标移到三角形网格上时，三角形网格将展开并移动到“顶层”，但当你将鼠标移到三角形网格外时，三角形网格将缩小到原始大小并移回原始层。然而，目前只有鼠标悬停功能工作正常

以下是我正在使用的当前代码：

  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();

  });

下面是一个JSFIDLE：

只有在

tween.play（）之后才能使用
tween.reverse（）
。因此，您可以将缩放属性更改为原始值

不要在层间移动形状，而在层间移动形状。完成吐温后，可以移动形状

---

由于某种原因，当在JSFIDLE和实际生成的HTML文档之间传输javascript时，形状突然变得未定义，我不知道为什么。var的形状显然就在那里。