創建最高效的全屏色彩移位梯度

Question

對於我正在處理的項目，我試圖創建一個具有不斷變色梯度的Flash文件，填充整個瀏覽器窗口。爲了更好的說明，請參閱以下鏈接：

​​

不要擔心移動球，那些只是有挑戰影片的幀速率，如果你看它有一個最大的60在後臺你可以看到我所指的漸變效果。

我目前用來創建漸變動畫的方法是在Flash時間軸上的一個簡單形狀補間，該補間在不同漸變顏色的形狀之間進行補間。我絕對沒有達到我想要使用這種技術的性能。

因此，這是一個冗長的方式來問人們會認爲什麼是更好的方式來創建這樣一個顏色轉換梯度，同時獲得更好的性能？一些例子可能是通過bitmapData或使用PixelBender，但我對這些技術不夠熟悉，不知道哪個能夠讓我獲得最佳性能。任何幫助，將不勝感激！

注意：在下面的評論中是上面貼出的示例中使用的所有項目文件的鏈接。

更新：

我用我的地方基於時間軸的梯度動畫zkarcher的代碼來比較每個的性能張貼的例子的附加版本。應該注意的是，我的版本（v1）始終播放漸變，而基於代碼的版本（v2）每次單擊時只播放漸變動畫5秒。

作爲一個新用戶，我只允許每一個崗位鏈接，以便請原諒的原始網址

http://www.chrismalven.com/experiments/GradientTest/

http://www.chrismalven.com/experiments/GradientTest_v2/

對於那些有興趣使用的版本zkarcher的漸變補間代碼與TweenLite/TweenMax，用下面的代碼替換Tweener引用，並確保導入TweenMax ColorTransform插件以及：

 
// Load the TweenMax Class Libraries 
import gs.*; 
import gs.easing.*; 
import gs.plugins.*; 
TweenPlugin.activate([ColorTransformPlugin]); 

TweenMax.to(
    bmp, // Object to tween 
    changeSpeed, // Duration of the Tween 
    {colorTransform: 
     { 
     redMultiplier: (o2.r-o1.r)/255.0, 
     greenMultiplier: (o2.g-o1.g)/255.0, 
     blueMultiplier: (o2.b-o1.b)/255.0, 
     alphaMultiplier: 1, 
     redOffset: o1.r, 
     greenOffset: o1.g, 
     blueOffset: o1.b, 
     alphaOffset: 0 
     }, 
    ease:Quad.easeOut, 
    } 
); 

Answer 1

// Here's how I did it. I wrote & tested this in Flash CS4. 

// I rambled about this technique in my blog: 
// http://blog.zacharcher.com/2007/10/13/understanding-colormatrixfilter/ 
// The goal is to create a simple black-and-white gradient, then tween its ColorTransform, 
// rather than redraw a new gradient every frame. 

// I'm going to use Tweener as my tweening engine because I'm used to it. 
// Download from here: http://code.google.com/p/tweener/downloads/list 
import caurina.transitions.Tweener; 
import caurina.transitions.properties.ColorShortcuts; 
ColorShortcuts.init(); 

// First, create a Shape with a gradient fill. 
var shp:Shape = new Shape(); 
var mtx:Matrix = new Matrix(); // This matrix is needed for Shape.beginGradientFill() 
mtx.createGradientBox(stage.stageWidth, stage.stageHeight, Math.PI/2); 
with(shp.graphics) { 
    beginGradientFill(GradientType.LINEAR, [0x000000,0xffffff], [1,1], [0,255], mtx); 
    drawRect(0, 0, stage.stageWidth, stage.stageHeight); 
    endFill(); 
} 

// Draw the Shape inside some BitmapData. 
var bData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0x000000); 
bData.draw(shp); 

// Create a Bitmap to display the BitmapData, and add it to the stage. 
var bmp:Bitmap = new Bitmap(bData); 
addChild(bmp); 

// For testing purposes: Set up a mouse click listener. When the user clicks, tween to new colors. 
stage.addEventListener(MouseEvent.CLICK, onClick); 

function onClick(e:MouseEvent) :void { 
    // Choose two colors at random 
    var c1:int = 0xffffff * Math.random(); 
    var c2:int = 0xffffff * Math.random(); 
    trace("Now tweening to:", c1.toString(16), c2.toString(16)); 
    colorChange(c1, c2); 
} 

// This function supports tweening the gradient to ANY TWO COLORS. 
// If you just want to tint a gradient, then you can use less scary code, 
// but you didn't specify that ;) 
function colorChange(c1:uint, c2:uint) :void { 
    // Split the incoming color uint's into RGB values, ranging from 0..255 
    var o1:Object = { 
     r: (c1 & 0xff0000) >> 16, 
     g: (c1 & 0x00ff00) >> 8, 
     b: c1 & 0x0000ff 
    }; 
    var o2:Object = { 
     r: (c2 & 0xff0000) >> 16, 
     g: (c2 & 0x00ff00) >> 8, 
     b: c2 & 0x0000ff 
    }; 

    // Using these values, create our sweet ColorTransform. 
    // This will "map" the black and white pixels to the desired colors. 
    // The aforementioned blog post explains this math: 
    var ct:ColorTransform = new ColorTransform((o2.r-o1.r)/255.0, (o2.g-o1.g)/255.0, (o2.b-o1.b)/255.0, 1, o1.r, o1.g, o1.b, 0); 

    // Start the tween. 
    Tweener.addTween(bmp, {_colorTransform:ct, time:1.0, transition:"easeOutQuad"}); 
} 

// Hope this helps...