使用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

我不认为这是可能的动画的一个形状的颜色，毕竟你的形状的绘图可能包括许多不同的颜色，如何知道这些颜色中的哪些要修改？有两种我认为正确的方法：

方法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);

我没有测试这一点，so...let我知道这是可行的。还要注意，滤镜仅在对形状调用cache()或updateCache()时才会应用/更新，因此您必须将其添加到tick函数中。

方法2)或者你只需要重新绘制每个frame...but 的形状1)可能更容易。

Answer 2

我也只是想做同样的事情。我的解决方案是在shape对象上对自定义属性进行补间，然后在补间“change”事件上调用update方法。希望这对我有帮助，我对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 ();
});

Answer 3

非过滤器版本。

var colorObj = { r:255, g:0, b:0 };
var shape = new createjs.Shape();
var command = shape.graphics.beginFill(createjs.Graphics.getRGB(colorObj.r, colorObj.g, colorObj.b)).command;
shape.graphics.drawCircle(60, 60, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(colorObj, { loop: true }).to({ r:255, g:255, b:255 }, 1000);
tween.addEventListener( "change", function( event ) {
    command.style = createjs.Graphics.getRGB(Math.floor(colorObj.r), Math.floor(colorObj.g), Math.floor(colorObj.b));
});

beginFill(...).command对象能够更新。

小提琴

https://jsfiddle.net/MasatoMakino/uzLu19xw/