用css3和canvas实现的蜂窝动画效果

最近工作时研究了一下css3动画和js动画，主要是工作中为了增强页面的趣味性，大家都有意无意的添加了很多动画效果，当然大部分都是css3动画效果，可以gpu加速，这会减少移动端的性能需求。

今天主要说的是蜂窝效果，具体效果大家等下可以运行源码，这里就不放gif图了。

css3的原理很简单，就是通过更改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%;
			}
		}

至于使用canvas来实现吗，这个纯属无聊，不建议大家使用这种方法，在这里使用canvas来绘制，完全是属于我的无聊之举，不过若是你对canvas动画有意向，可以留意下面的canvas实现方案。canvas绘制的原理很简单，通过传入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('没有传入图片地址')；
		}*/
	};

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;
		},

完整的模块源码如下：

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;
})