我最近切换到 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);
但这不起作用。动画的正确属性是什么？
【问题讨论】：
标签： javascript html canvas tween easeljs
非过滤器版本。
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 对象可以更新。
小提琴
【讨论】：
修改填充指令可以改变颜色。这可能有助于制作动画。 我不知道这会产生什么影响，但这对我来说非常有效。 试试这个，
var circle = new createjs.Shape();
circle.graphics.f('#ffffff').s('#000000').ss(0.7).arc((30 * j),50,10, 0, Math.PI * 2, 1);
circle.number = j;
circle.addEventListener('click', function(e) {
var fillStyle = e.target.graphics._fillInstructions[0].params;
var currentFillStyle=fillStyle[1]+"";
for (var i = 0; i < circles.length; i++) {
var resetFillStyle = circles[i].graphics._fillInstructions[0].params;
resetFillStyle[1] = "#ffffff";
}
if (currentFillStyle == "#00B4EA") {
fillStyle[1] = "#FFFFFF";
} else {
fillStyle[1] = "#00B4EA";
}
stage.update();
})
希望这会有所帮助！
【讨论】：
我刚刚在这里阅读了另一种颜色动画选项：http://community.createjs.com/discussions/easeljs/4637-graphics-colour-animation
它利用了 createjs 注入方法。我从提供的代码示例中复制了相关代码，并进行了一些解释。
根据文档：
注入（回调，数据）： 提供一种将任意 Context2D（又名 Canvas）API 调用注入图形队列的方法。指定的回调函数将与其他绘图指令依次调用(...)
例如，您可以使用此方法更改本机 context2d 填充样式，以便我们可以更改easeljs 用于在画布上绘制的填充颜色。
这里我们告诉 createjs 我们自己的 setColor 函数（定义如下），因此这个函数会在每次重绘之前自动执行：
var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.inject(setColor, data)
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);
调用canvas原生fillStyle方法的setColor函数的定义：
function setColor(o) {
// sets the context2D's fillStyle to the current value of data.fill:
this.fillStyle = o.fill; // "this" will resolve to the canvas's Context2D.
}
以及改变填充值的刻度函数：
function tick(evt) {
count = (count+3)%360;
// update the value of the data object:
data.fill = createjs.Graphics.getHSL(count, 100, 50);
// redraw the stage:
stage.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 ();
});
【讨论】：
我认为不可能像这样对形状的颜色进行动画处理，毕竟绘制的形状可能包含许多不同的颜色，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) 可能更容易。
【讨论】：