用css3和canvas實現的蜂窩動畫效果

近期工做時研究了一下css3動畫和js動畫。主要是工做中爲了加強頁面的趣味性，你們都有意無心的加入了很是多動畫效果。固然大部分都是css3動畫效果。可以gpu加速，這會下降移動端的性能需求。

今天主要說的是蜂窩效果。詳細效果你們等下可以執行源代碼。這裏就不放gif圖了。

css3的原理很是easy，就是經過更改background-size，由於css3中的background中可以設置repeat屬性，來使背景圖片在x,y方向平鋪。一開始先設置background-size:10%, 10%，（這個數值可以自由定義，但不介意設置過大，不然效果不明顯）, 最後更改backg-size：100%, 100%；這樣會使背景圖片充滿整個屏幕，哦。對了不要忘記設置background-position：50% 50%；不然你會感受怪怪的，設置background-position是爲了是背景圖片以中心點的位置來平鋪，而系統默認會已左上角來平鋪。

而後經過設置animation動畫來調用動畫就可以實現這樣的效果了

<pre name="code" class="html">.honey {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: url(2.jpg) repeat;
			background-size: 30% 30%;
			background-position: center center;
			-webkit-animation: honeycomb 3s 1 linear;
		}
		
		@-webkit-keyframes honeycomb {
			0% {
				background-size: 10% 10%;
			}
			100% {
				background-size: 100% 100%;
			}
		}

使用css3來實現這樣的蜂窩式的動畫效果，原理簡單。並且效果很是完美，但是惟一一點的不完美在於可能會有一部分手機不兼容。並且經過在animation中改動background-size，這樣的行爲很是少。儘管不會引發瀏覽器的重排，但是也會引發瀏覽器的局部重繪。

至於使用canvas來實現嗎。這個純屬無聊，不建議你們使用這樣的方法。在這裏使用canvas來繪製。全然是屬於個人無聊之舉。只是如果你對canvas動畫有意向。可以留意如下的canvas實現方案。canvas繪製的原理很是easy。經過傳入width,height的百分比。來計算一共需要畫多少個矩形，以及每個矩形的中心點座標。我把這個代碼封裝成了一個模塊。你們可以一步一步的往下看，首先先定義一個對象honey對象吧

var Honey = function (options) {
		
		for (var i in options) {
			if (options.hasOwnProperty(i)) {
				this[i] = options[i];
			}
		}
		this.canvas = this.canvasId || document.getElementById(this.canvasId) || document.getElementById('#canvas');
		this.ctx = this.canvas.getContext('2d');
		this.canvasWidth = document.body.getBoundingClientRect().width;
		this.canvasHeight = document.body.getBoundingClientRect().height;

		this.canvas.width = this.canvasWidth;
		this.canvas.height = this.canvasHeight;

		this.stopped = true;
		this.width = options['width'] || 10;
		this.height = options['height'] || 10;
		this.dwidth = options['dwidth'] || 1;
		this.dheight = options['dheight'] || 1;
		this.img = options.img;
		/*if (!options.img) {
			console.log('沒有傳入圖片地址')；
		}*/
	};

如下在來定義這個對象中的一些屬性，canvas的繪製圖像默認是從左上角開始繪製，所以咱們需要本身寫一個方法來從中心點繪製，可以經過prototype來加入到屬性中

drawImage : function (x, y, w, h) {
			var width = w * this.canvasWidth / 100,
				height = h * this.canvasHeight / 100;

			var top = y - height / 2,
				left = x - width / 2;
			var self = this;
			// var img = self.img;
			// img.onload = function () {
				self.ctx.drawImage(self.img, left, top, width, height);
			// }
		},

這種方法很是easy吧。僅僅只是是簡單的偏移了一半的寬高。再調用canvas的默認繪製函數

接下來的方法是獲取所需要繪製矩形的中心點位置了，先看代碼：

		// 獲取所有顯示小圖片的中心點位置
		getPoints : function (width, height) {
			// var width = parseInt(w), height = parseInt(h);
			var numW = Math.ceil(100 / width), numH = Math.ceil(100 / height);
			var result = [];

			for (var i = -Math.ceil(numW * 0.5); i <= Math.ceil(numW * 0.5); i++) {
				var x = 50 + width * i;
				for (var j = -Math.ceil(numH * 0.5); j <= Math.ceil(numH * 0.5); j++) {
					var y = 50 + height * j;
					result.push({x: x * this.canvasWidth / 100, y: y * this.canvasHeight / 100});
				}
			}

			return result;
		},

事實上原來就是從canvas的中心點50, 50出發，numW, numH分別表示在水平方向和垂直方向所需要畫的矩形個數，這裏要注意使用Math.ceil向上取整。是爲了確保能夠撐滿整個canvas，而後x = 50 + width * i；表明在x方向上減去width的值，就等於中心點左邊第幾個x值，同理y方向上也同樣，最後函數返回一個包括所有座標點的數組。

接下來就是使用這個數組和上面提供的繪製方法，來一個一個的將所有圖片繪製出來。

完整的模塊源代碼例如如下：

define(function (require, exports, module) {

	var RAF = window.requestAnimationFrame ||
			  window.webkietRequestAnimationFrame ||
			  function (callback) {
			  	setTimeout(callback, 1000/ 60);
			  };

	var Honey = function (options) {
		
		for (var i in options) {
			if (options.hasOwnProperty(i)) {
				this[i] = options[i];
			}
		}
		this.canvas = this.canvasId || document.getElementById(this.canvasId) || document.getElementById('#canvas');
		this.ctx = this.canvas.getContext('2d');
		this.canvasWidth = document.body.getBoundingClientRect().width;
		this.canvasHeight = document.body.getBoundingClientRect().height;

		this.canvas.width = this.canvasWidth;
		this.canvas.height = this.canvasHeight;

		this.stopped = true;
		this.width = options['width'] || 10;
		this.height = options['height'] || 10;
		this.dwidth = options['dwidth'] || 1;
		this.dheight = options['dheight'] || 1;
		this.img = options.img;
		/*if (!options.img) {
			console.log('沒有傳入圖片地址')；
		}*/
	};

	Honey.prototype = {

		// 以中心點來繪圖
		drawImage : function (x, y, w, h) {
			var width = w * this.canvasWidth / 100,
				height = h * this.canvasHeight / 100;

			var top = y - height / 2,
				left = x - width / 2;
			var self = this;
			// var img = self.img;
			// img.onload = function () {
				self.ctx.drawImage(self.img, left, top, width, height);
			// }
		},

		// 獲取所有顯示小圖片的中心點位置
		getPoints : function (width, height) {
			// var width = parseInt(w), height = parseInt(h);
			var numW = Math.ceil(100 / width), numH = Math.ceil(100 / height);
			var result = [];

			for (var i = -Math.ceil(numW * 0.5); i <= Math.ceil(numW * 0.5); i++) {
				var x = 50 + width * i;
				for (var j = -Math.ceil(numH * 0.5); j <= Math.ceil(numH * 0.5); j++) {
					var y = 50 + height * j;
					result.push({x: x * this.canvasWidth / 100, y: y * this.canvasHeight / 100});
				}
			}

			return result;
		},

		init : function () {
			var width = this.width,
				height = this.height,
				dwidth = this.dwidth,
				dheight = this.dheight,
				loaded = false;;
			var self = this;
			var img = this.img;

			if (!img) {
				console.log('沒有傳入圖片地址');
				return;
			}
			if (typeof img == 'string') {
				var image = new Image();
				image.src = img;
				img = image;
				this.img = img;
			}

			tick();
			
			function tick () {
				if (!self.stopped) {
					width += dwidth;
					height += dheight;

					// 防止圖片過大縮放，本身主動設置中止標誌位
					if (width >= 100) {
						width = 100;
					}
					if (height >= 100) {
						height = 100;
					}
					if (width >= 100 && height >= 100) {
						self.stopped = true;
					}
					// 繪圖
					self.animate(width, height);
					RAF(function () {
						tick();
					})
				}
			}
		},

		animate : function (w, h) {
			var self = this;
			var points = self.getPoints(w, h);
			// console.log(points.length, w, h);
			self.clear();
			for (var i = 0, len = points.length; i < len; i++) {
				var point = points[i];
				// console.log(point.x, point.y , w * this.canvasWidth / 100, h * this.canvasHeight / 100);
				self.drawImage(point.x, point.y, w, h);
			}
		},

		clear : function () {
			this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
		}
	};

	return Honey;
})

這裏使用requestAnimatioFrame來循環調用，而不是常見的setTimeout，詳細緣由你們仍是Google吧。使用canvas來繪製會比較耗性能，不介意你們使用。但是假設是在寫canvas動畫時，你們可以考慮加入這麼一個動畫效果。