如何使用TweenJS动画EaselJS渐变？

Question

我有一个梯度，像这样：

var graphic = new createjs.Graphics().beginLinearGradientFill(
    ["#000", "#fff", "#000"], 
    [0, 0.5, 1], 
    0, 0, 
    window.innerWidth, window.innerHeight 
).drawRect(0, 0, window.innerWidth, window.innerHeight); 
var shape = new createjs.Shape(graphic); 

我将如何动画梯度，使得它似乎被感动？ （即，如果这是CSS制作的，则background-position将缓慢改变）

Answer 1

不幸的是，画布渐变不像CSS那样简单。任何时候你都必须重建渐变命令。

我构建了一个快速演示，可以方便这个，虽然它需要最新的NEXT版本的TweenJS，它有一个伟大的ColorPlugin动画颜色停止。

http://jsfiddle.net/lannymcnie/uhqake7e/ 更新：更简单的方法http://jsfiddle.net/uhqake7e/2/

的关键部分：

var colors = ["#ff0000", "#0000ff"], 
    ratios = [0,1], 
    w = 120, h = 120, // Shape dimensions 
    x0 = 0, y0 = 0, x1 = 0, y1 = h; // Gradient dimensions 

// Create shape 

var shape = new createjs.Shape() 
     .set({color1: colors[0], color2: colors[1]}); // Set initial color values 
// Do the fill, and store the command for later 
var fillCommand = shape.graphics.beginLinearGradientFill(colors, ratios, x0, y0, x1, y1).command; 

更多关于命令，检查this article。

然后我们可以吐温的颜色值：

var tween = createjs.Tween.get(shape, {bounce:true, loop:true}) 
    .to({color1:"#00ff00", color2:"#ff00ff"}, 1000); 

最后，重建上变化的梯度： [更新：简单的方法]

tween.on("change", function(event) { 
    fillCommand.linearGradient([shape.color1, shape.color2], ratios, x0, y0, x1, y1); 
} 

类似的方法将使用补间颜色，并重新绘制形状的内容，但它会要求您存储所有说明。本示例更新用于Gradient的实际命令。

实在是太糟糕这有稍微令人费解，尤其是CSS是如此简单:)

干杯。