HTML5 canvas扑克牌花式洗牌动画

【实例截图】

【核心代码】

CARD.prototype = {
	WIDTH_RATIO : 1 / 12,
	HEIGHT_RATIO : 1 / 8,
	SCALE_RATIO : 4 / 5,
	
	init : function(){
		var index = this.column * this.renderer.ROW   this.row;
		this.width = Math.min(this.renderer.width, this.renderer.height) * this.WIDTH_RATIO;
		this.height = Math.min(this.renderer.width, this.renderer.height) * this.HEIGHT_RATIO;
		this.axis = [
			{x : this.renderer.width / 2, y : this.renderer.height / 2},
			{x : this.renderer.width / 4   this.renderer.width / 2 * (this.row % 2), y : this.renderer.height / 4   this.renderer.height / 2 * Math.floor(this.row / 2)},
			{x : this.width * 2, y : this.renderer.height / 8   this.height / 2   this.renderer.height / 4 * this.row},
			{x : this.width / 2   (this.renderer.width - this.width * 3 / 2) * this.column / this.renderer.COLUMN, y : this.renderer.height / 8   this.height / 2   this.renderer.height / 4 * this.row},
			{x : this.width / 2   (this.renderer.width - this.width * 2) * index / this.renderer.ROW / this.renderer.COLUMN, y : this.renderer.height / 2   this.height / 2},
			{x : this.width / 2   (this.renderer.width - this.width * 2) * index / this.renderer.ROW / this.renderer.COLUMN, y : this.height * 3 / 2   (this.renderer.height - this.height * 2) * (1 - Math.abs(1 - index / this.renderer.ROW / this.renderer.COLUMN * 2))},
			{x : this.renderer.width / 6   this.renderer.width / 3 * (this.column % 3), y : this.renderer.height / 10   this.height / 2   this.renderer.height / 4 * Math.floor(this.column / 3)},
			{x : this.renderer.width / 2, y : this.renderer.height / 2}
		];
		this.radian = [index / this.renderer.ROW / this.renderer.COLUMN, this.column / this.renderer.COLUMN, this.row / (this.renderer.ROW - 1)];
		this.scale = this.SCALE_RATIO * this.row / (this.renderer.ROW - 1);
		this.hue = this.radian[0] * 360 | 0;
	},
	controlStatus : function(context, status, rate){
		if(status == 0){
			this.x = this.axis[status].x;
	 		this.y = this.axis[status].y;
		}else{
			var next = (status == this.renderer.MAX_STATUS) ? 0 : status;
			this.x = this.axis[status - 1].x   (this.axis[next].x - this.axis[status - 1].x) * rate;
	 		this.y = this.axis[status - 1].y   (this.axis[next].y - this.axis[status - 1].y) * rate;
		}
		switch(status){
		case 0:
			context.rotate(this.radian[0] * Math.PI * 2 * rate);
			context.translate(0, -this.height);
			break;
		case 1:
			context.rotate(this.translateAngle(this.radian[0] * Math.PI * 2, this.radian[1] * Math.PI * 2, rate));
	 		context.translate(0, -this.height * (1 - rate));
	 		break;
	 	case 2:
		 	context.rotate(this.translateAngle(this.radian[1] * Math.PI * 2, Math.PI * 2, rate));
	 		break;
	 	case 6:
	 		context.rotate((this.radian[2] * Math.PI / 2 - Math.PI / 4) * rate);
	 		context.translate(-this.width / 2 * rate, 0);
	 		break;
	 	case 7:
	 		context.rotate(this.translateAngle(this.radian[2] * Math.PI / 2 - Math.PI / 4, this.radian[1] * Math.PI * 2, rate));
	 		context.scale(1 - this.scale * rate, 1 - this.scale * rate);
	 		context.translate(-this.width / 2, -this.height * 3 * rate);
	 		break;
	 	case 8:
	 		context.rotate(this.translateAngle(this.radian[1] * Math.PI * 2, this.radian[0] * Math.PI * 2, rate));
	 		context.scale(1 - this.scale * (1 - rate), 1 - this.scale * (1 - rate));
	 		context.translate(-this.width / 2 * (1 - rate), this.height * (2 * rate - 3));
	 	}
	},
	translateAngle : function(source, destination, rate){
		return source   (destination - source) * rate;
	},
	render : function(context, status, rate){
		context.save();
		context.translate(this.x, this.y);
		this.controlStatus(context, status, rate);
		context.lineWidth = this.width / 20;
		context.strokeStyle = 'hsl('   this.hue   ', 60%, 90%)';
		context.fillStyle = 'hsl('   this.hue   ', 60%, 60%)';
		context.fillRect(0, -this.height, this.width, this.height);
		context.strokeRect(0, -this.height, this.width, this.height);
		context.restore();
	}
};