注：爲了方便起見，本次開發用到了開源引擎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實現顏色動畫還是很簡單的。

運行上面的代碼，得到如下效果：