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

注:为了方便起见,本次开发用到了开源引擎lufylegend,官方地址如下:http://lufylegend.com/lufylegend

今天来学习下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,代码展示

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

<!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实现颜色动画还是很简单的。

运行上面的代码,得到如下效果:

『HTML5梦幻之旅』 - 舞动色彩,Canvas下实现颜色动画_第1张图片

『HTML5梦幻之旅』 - 舞动色彩,Canvas下实现颜色动画_第2张图片

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


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


注意:demo请在Chrome里运行!

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明:转自Yorhom's Game Box

http://blog.csdn.net/yorhomwang

欢迎继续关注我的博客

你可能感兴趣的:(JavaScript,html5,canvas,lufylegend,颜色动画)