Question

对于我正在研究的项目，我正在尝试创建一个Flash文件，该文件具有不断变色的渐变，可填满整个浏览器窗口。有关更好的说明，请参阅以下链接：

GradientTest Example

不要担心移动的球，这些只是挑战电影的frameRate，最多为60.如果你看背景，你可以看到我所指的渐变效果。 / p>

我目前用于创建渐变动画的方法是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...

创建最有效的全屏色彩渐变渐变

1 个答案: