Question

我想创建一个在多边形悬停时运行的补间。当鼠标进入多边形时，我得到了它的名字，我想为那个多边形运行动画。我想要填充填充物，想要从白色变得不透明。

var polly = layer.find('Polygon');

polly.on('mouseover', function() {
    var name=this.attrs.name;
    thiz=layer.find('.'+name);
    tween.play();
});


  var tween = new Kinetic.Tween({
   // node: Polygon,
    name: thiz,
    duration: 2,
    scaleX: 1.3,
    scaleY: 1.3,
    easing: Kinetic.Easings.Linear,
    fill: rgba(255,255,255,0)
  });

是这样的吗？

Answer 1

如果要将颜色从一种颜色补间到另一种颜色，可以通过分别补间每个r，g，b组件来实现：

演示：http://jsfiddle.net/m1erickson/zsPSW/

poly.hoverTween=new Kinetic.Tween({
    node: poly,
    duration: 0.50,
    scaleX: 1.3,
    scaleY: 1.3,
    easing: Kinetic.Easings.Linear,
    fillR: 255,
    fillG: 255,
    fillB: 255,
});

但是...

“透明”不是一种颜色，因此您无法从透明（非彩色）到白色补间。

作为一种解决方法......

对于每个poly：

创建一个小组。
添加仅具有不透明度为0.00（无笔划）的白色填充的多边形版本。
添加仅具有笔划的poly版本。

然后，您可以在鼠标悬停时将白色填充多边形的不透明度补间从0.00到1.00。

干杯！

是否可以为按名称选择的节点创建补间？

1 个答案: