Создание наиболее эффективного полноэкранного цветного градиента

Question

Для проекта, над которым я работаю, я пытаюсь создать файл Flash с постоянно изменяющимся цветом градиентом, который заполняет все окно браузера. Для лучшего объяснения смотрите по следующей ссылке:

GradientTest Example

Не беспокойтесь о движущихся шаров, это только там, чтобы бросить вызов FrameRate фильма, который имеет максимум 60. Если вы смотрите на заднем плане вы можете увидеть эффект градиента, о котором я говорю.

Метод, который я сейчас использую для создания анимации градиента, представляет собой простую форму на временной шкале Flash, которая объединяется между фигурами с разными цветами градиента. Я определенно не достигаю производительности, я хочу использовать эту технику.

Так что это долгий способ расспросить, что люди думают, что это лучший способ создать такой градиент с изменением цвета при повышении производительности? Некоторые примеры могут быть с помощью bitmapData или с использованием PixelBender, но я недостаточно разбираюсь в этих методах, чтобы знать, что принесет мне лучшую производительность. Любая помощь будет оценена!

ПРИМЕЧАНИЕ: В приведенных ниже комментариях приведена ссылка на все файлы проекта, используемые в примере, опубликованном выше.

ОБНОВЛЕНИЕ:

Я разместил дополнительную версию примера использования кода zkarcher в месте моей временной шкалы на основе градиента анимации для сравнения производительности каждого. Следует отметить, что моя версия (v1) всегда играет градиент, тогда как версия на основе кода (v2) воспроизводит анимацию градиента в течение 5 секунд каждый раз, когда вы нажимаете.

Как новый пользователь я только позволил одну ссылку за пост так, пожалуйста, простите исходные адреса

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

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

Для тех, кто заинтересован в использовании версии zqarcher's gradient-tweening code с 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...