Flash 创建最高效的全屏渐变色

对于我正在进行的一个项目，我试图创建一个Flash文件，该文件具有不断变化的渐变色，填充整个浏览器窗口。有关更好的解释，请参见以下链接：

不要担心移动的球，它们只是用来挑战电影的帧速率，最大帧速率为60。如果你看背景，你可以看到我指的渐变效果

我目前正在使用的创建渐变动画的方法是Flash时间轴上的一个简单的形状中间层，它在具有不同渐变颜色的形状之间形成中间层。使用这种技术，我肯定没有达到我想要的性能

所以，这是一个冗长的问题，人们认为在获得更好的性能的同时，创建这种颜色变换渐变的更好方法是什么？一些例子可能是通过位图数据或使用PixelBender，但我对这些技术不够精通，不知道哪种技术可以让我获得最佳性能。任何帮助都将不胜感激

注意：下面的注释中有一个链接，指向上面发布的示例中使用的所有项目文件。

更新：

我已经发布了一个附加版本的示例，使用zkarcher的代码代替基于时间轴的渐变动画来比较每个示例的性能。应该注意的是，我的版本（v1）总是播放渐变，而基于代码的版本（v2）每次单击时只播放渐变动画5秒钟

作为一个新用户，我只允许每篇文章有一个链接，所以请原谅原始URL

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

对于那些对TweenLite/TweenMax使用zkarcher的渐变tweening代码版本感兴趣的人，请使用以下代码替换Tweener参考，并确保导入TweenMax ColorTransform插件：

//加载TweenMax类库 进口gs.*； 进口一般商品； 导入gs.插件。*； 激活（[ColorTransformPlugin]）； 吐温马克斯到( bmp，//对象到tween changeSpeed，//二者之间的持续时间 {colorTransform: { 红色倍增器：（o2.r-o1.r）/255.0， 绿色倍增器：（o2.g-o1.g）/255.0， 蓝色倍增器：（o2.b-o1.b）/255.0， 字母乘数：1， redOffset:o1.r， 绿偏移量：o1.g， 蓝偏移量：o1.b， 字母偏移量：0 }, ease:Quad.easeOut， } );

---

经过更多的研究，似乎唯一可以提供更好性能的技术就是使用PixelBender。我对PixelBender一无所知，但我将学习基本知识，看看我能想出什么。这是一种非常酷的创建渐变过渡的技术。谢谢你发帖。对于那些TweenLite用户，您可以使用我添加到原始问题中的更改使zkarcher的代码正常工作。不幸的是，正如双重示例所证明的，这种技术提供的性能几乎与我最初的时间轴动画方法完全相同。啊，我的技术没有提高帧速率，这真是一个遗憾。很抱歉我尽力了！ http://www.chrismalven.com/experiments/GradientTest/ http://www.chrismalven.com/experiments/GradientTest_v2/ // 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, } );

// 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...