您的位置：首页 > Web前端 > HTML5

『HTML5梦幻之旅』 - 舞动色彩，Canvas下实现颜色动画

2015-02-04 20:46 591 查看

今天来学习下HTML5 Canvas颜色动画。什么是颜色动画呢？以我的理解就是以某种颜色过渡到另一种颜色。和这个效果有点类似：http://w3school.com.cn/tiy/t.asp?f=css3_animation1 上面的demo是用css3实现，而我们今天要用的是Canvas。Canvas并没有相关的API，所以要想实现这种效果，只有靠自己了。

从上面的例子可以看出，我们需要完成缓动动画和颜色变化这两个基本效果，再将这两个效果组合一下，就是我们要的结果了。

1，参考资料

值得高兴的是，lufylegend为我们提供了缓动类，可以完美地实现缓动动画。所以我们现在只需要实现颜色变化了。怎么变化颜色呢？纵观Canvas所有API，我发现像素操作也许能派上用场。恰巧，lufylegend在1.9.4和1.9.4以上的版本中提供了LColorTransform这个类，用于颜色值变幻。

以下是lufylegend API文档中LColorTransform用法：http://lufylegend.com/api/zh_CN/out/classes/LColorTransform.html

这个类可以配合LBitmapData的draw，colorTransform函数使用，这两个函数的用法可参考如下给出的地址。

draw：http://lufylegend.com/api/zh_CN/out/classes/LBitmapData.html#method_draw

colorTransform：http://lufylegend.com/api/zh_CN/out/classes/LBitmapData.html#method_colorTransform

另外，各位读者还需要了解LTweenLite：http://lufylegend.com/api/zh_CN/out/classes/LTweenLite.html

本次开发会使用draw函数和LTweenLite缓动类，请仔细阅读相关函数介绍，以便阅读下文时更轻松。

2，原理

实现颜色效果的原理其实很简单，就是通过缓动类作为驱动，不断改变颜色的RGB值。

在LColorTranform中，提供了redOffset，greenOffset，blueOffset这三个属性，分别用于像素处理时对R，G，B的调整。所以，在缓动类中，我们要缓动的属性就是这三个属性。然后在onUpdate中调用LBitmapData的draw函数对显示对象刷新。

3，代码展示

现在我先把代码展示一下：

[javascript]
view plaincopy print ?

<!DOCTYPE html>
<html>
<head>
    <title>Color Transform</title>
    <script type="text/javascript" src="./lufylegend-1.9.7.min.js"></script>

    <script type="text/javascript">

        LInit(50, "mylegend", 600, 400, main);

        function main () {

            var loader = new LLoader();

            loader.addEventListener(LEvent.COMPLETE,
function (e) {
                rectColorTransform();
                imageColorTransform(e.target);
            });
            loader.load("./yorhomwang.png")

        }

        function rectColorTransform () {

            var w = 200, h = 240;

            var rectLayer =
new LShape();
            rectLayer.graphics.drawRoundRect(0, "", [0, 0, w, h, 5],
true, "#000000");

            var bmpd = new LBitmapData(null, 0, 0, w, h);

            var bmp =
new LBitmap(bmpd);
            bmp.x = bmp.y = 20;
            addChild(bmp);

            var rect =
new LRectangle(0, 0, w, h);
            var ct = new LColorTransform(1, 1, 1, 1, 255, 0, 0, 0);

            startTween(bmpd, rectLayer, ct, rect);
        }

        function imageColorTransform(content) {

            var bmpd = new LBitmapData(null, 0, 0, content.width, content.height);

            var bmp =
new LBitmap(bmpd);
            bmp.x = 250;
            bmp.y = 20;
            addChild(bmp);

            var rect = new LRectangle(0, 0, bmpd.width, bmpd.height);

            var ct =
new LColorTransform(1, 1, 1, 1, 0, 0, 0, 0);

            startTween(bmpd, new LBitmap(new LBitmapData(content, 0, 0, rect.width, rect.height)), ct, rect);

        }

        function startTween (bmpd, layer, ct, rect) {

            var update =
function (o) {
                bmpd.draw(layer, null, o,
null, rect);
            };

            update(ct);

            LTweenLite.to(ct, 3, {
                blueOffset : 255,
                loop : true,

                onUpdate : update
            }).to(ct, 3, {
                redOffset : -255,
            }).to(ct, 3, {
                greenOffset : 255,
            }).to(ct, 3, {
                blueOffset : -255,
            }).to(ct, 3, {
                redOffset : 255,
            }).to(ct, 3, {
                greenOffset : -255,
            });
        }
    </script>
</head>
<body>
    <div id="mylegend"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Color Transform</title>
<script type="text/javascript" src="./lufylegend-1.9.7.min.js"></script>
<script type="text/javascript">
LInit(50, "mylegend", 600, 400, main);

function main () {
var loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE, function (e) {
rectColorTransform();
imageColorTransform(e.target);
});
loader.load("./yorhomwang.png")
}

function rectColorTransform () {
var w = 200, h = 240;

var rectLayer = new LShape();
rectLayer.graphics.drawRoundRect(0, "", [0, 0, w, h, 5], true, "#000000");

var bmpd = new LBitmapData(null, 0, 0, w, h);
var bmp = new LBitmap(bmpd);
bmp.x = bmp.y = 20;
addChild(bmp);

var rect = new LRectangle(0, 0, w, h);
var ct = new LColorTransform(1, 1, 1, 1, 255, 0, 0, 0);

startTween(bmpd, rectLayer, ct, rect);
}

function imageColorTransform(content) {
var bmpd = new LBitmapData(null, 0, 0, content.width, content.height);
var bmp = new LBitmap(bmpd);
bmp.x = 250;
bmp.y = 20;
addChild(bmp);

var rect = new LRectangle(0, 0, bmpd.width, bmpd.height);
var ct = new LColorTransform(1, 1, 1, 1, 0, 0, 0, 0);

startTween(bmpd, new LBitmap(new LBitmapData(content, 0, 0, rect.width, rect.height)), ct, rect);
}

function startTween (bmpd, layer, ct, rect) {
var update = function (o) {
bmpd.draw(layer, null, o, null, rect);
};

update(ct);

LTweenLite.to(ct, 3, {
blueOffset : 255,
loop : true,
onUpdate : update
}).to(ct, 3, {
redOffset : -255,
}).to(ct, 3, {
greenOffset : 255,
}).to(ct, 3, {
blueOffset : -255,
}).to(ct, 3, {
redOffset : 255,
}).to(ct, 3, {
greenOffset : -255,
});
}
</script>
</head>
<body>
<div id="mylegend"></div>
</body>
</html>

加上html代码，不足100行，可见，LColorTransform配合LTweenLite实现颜色动画还是很简单的。

运行上面的代码，得到如下效果：

测试地址：http://wyh.wjjsoft.com/demo/color_transform/

源代码已全部给出，大家直接复制粘贴吧～

由于用到了像素处理，所以在某些电脑上运行起来可能会很卡。但是在HTML5迅猛发展的时代里，相信Canvas渲染效率的大幅提升计日可待。

经测试，在Chrome里运行效果会比其他浏览器好得多。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航