html5-canvas - KineticJS - Kinetic.Path setFill - 需要慢动画

Question

我有一张来自 Kinetic.Path 对象的图像，每个区域都可以通过鼠标单击填充 - setFill(...)。

是否可以用“慢动画”填充区域？就像那里 - http://goo.gl/0rgry。

谢谢你。

Answer 1

首先，你能做一个 jsfiddle 以便你的代码可以玩吗？这样可以得到更准确的结果。

其次，有一个答案，Transitions。

KineticJS 中的大多数东西都可以从一种配置转换到另一种配置。

  var path = new Kinetic.Path({fill: 'blue'});

然后：

  path.transitionTo({fill: 'red', duration: 2};

持续时间是控制速度的因素。我不知道颜色是如何过渡的，所以你应该在 kineticJS 网站上查找“shape tango”。