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/ UPDATE：簡単なアプローチ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); 
} 

： を[簡単な方法に更新します]カラートゥイーンを使用して、シェイプの内容を再描画するだけですが、すべての指示を保存する必要があります。このサンプルは、グラデーションに使用される実際のコマンドを更新します。

CSSはとてもシンプル:)

乾杯で、特に以来、これはやや複雑に持ってあまりにも悪いです。