javascript - 使用 Tweenjs 动画颜色

Question

我最近切换到 EaselJs 并想为圆圈的颜色设置动画。

到目前为止我得到的代码是这样的:

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(shape, { loop: true }).
    to({color:"#00FF00" }, 1000);

但这行不通。动画的正确属性是什么？

Answer 1

我认为不可能像那样为形状的颜色设置动画，毕竟你的形状的绘图可能包含许多不同的颜色，Tween 如何知道要修改哪些颜色？我能想到的正确方法有两种:

方法 1) 使用 createjs.ColorFilter，将其应用于您的形状，然后补间滤镜的属性:

var shape = new createjs.Shape();
//making the shape shape white, so we can work with the multiplyers of the filter
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 255, 255));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);
var filter = new createjs.ColorFilter(1,0,0,1); //green&blue = 0, only red and alpha stay
shape.filters = [filter];

var tween = createjs.Tween.get(filter, { loop: true }).
    to({redMultiplier:0, greenMultiplier:1 }, 1000);

我没有对此进行测试，所以...让我知道它有效。另请注意，只有在形状上调用 cache() 或 updateCache() 时才会应用/更新过滤器，因此您必须将其添加到滴答函数中。

方法 2) 或者您只是每帧重新绘制形状...但是 1) 可能更容易。