如何使用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是如此簡單:)

乾杯。