使用 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)使用 a 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)可能更容易。

Answer 2

我只是想做同样的事情。我的解决方案是补间形状对象上的自定义属性，然后在补间“更改”事件上调用更新方法。希望这有帮助，我对 createjs 很陌生，但到目前为止我真的很喜欢它！

var s = new createjs.Shape();
s.redOffset      = 157;
s.blueOffset     = 217;
s.greenOffset    = 229;

s.updateColor = function()
{
    var color = createjs.Graphics.getRGB( 
        parseInt(this.redOffset), 
        parseInt(this.greenOffset), 
        parseInt(this.blueOffset), 
        1);

    this.graphics.beginFill( color ).drawRect(0, 0, 300, 300);
}

createjs.Tween.get(this.background).to({ 
    redOffset   : 255,
    greenOffset : 255,
    blueOffset  : 255
},  3000).addEventListener('change', function()
{
    s.updateColor ();
});