动画学习

// JavaScript Document
$(document).ready(function(){
	 canvas=$("#myCanvas");
	 ctx=canvas.get(0).getContext("2d");
	/************填满浏览器******************/
	 canvas.attr("width",$(window).get(0).innerWidth);
	 canvas.attr("height",$(window).get(0).innerHeight);
	 ctx.fillRect(0,0,canvas.width(),canvas.height());
	 playAnimate=true;/*动画控制变量*/
	 canvasWidth=canvas.width();
	 canvasHeight=canvas.height();
	
	var shape=function(x,y,radius,vX,vY,aX,aY){
				this.x=x;/*动画位置*/
				this.y=y;
				this.vX=vX;/*物体速度*/
				this.vY=vY;
				this.aX=aX;/*物体加速度*/
				this.aY=aY;
				//this.width=width;/*动画形状大小*/
				//this.height=height;
				this.radius=radius;/*圆周运动的半径*/
				this.angle=0;
				this.reverseX=false;/*判断碰到边界反弹*/
				this.reverseY=false;
			};
	  shapes=new Array();
	 /*为每个形状随机选取位置和大小*/
		for (var i=0;i<20;i++){
				var x=20+(Math.random()*(canvasWidth-40));
				var y=20+(Math.random()*(canvasHeight-40));
				var vX=Math.random()*4-2;
				var vY=Math.random()*4-2;
				//var aX=Math.random()*0.1-0.1;
				//var aY=Math.random()*0.1-0.1;
				var aY=0;
				var aX=0;
				var radius=5+Math.random()*10;
				shapes.push(new shape(x,y,radius,vX,vY,aX,aY));
			}
	 animate();
	 buttonControl();
	
	});
	/*控制动画是否启动*/
	function buttonControl(){
		    var startButton=$("#startAnimate");
	 		var stopButton=$("#stopAnimate");
	
			startButton.hide();
			startButton.click(function(){
			$(this).hide();
			stopButton.show();
			playAnimate=true;
			animate();
		});
		
	stopButton.click(function(){
			$(this).hide();
			startButton.show();
			playAnimate=false;
		});
		}
		
		
		
		
	/*动画实现*/
	function animate(){
		
		var shapesLength=shapes.length;
		ctx.clearRect(0,0,canvasWidth,canvasHeight);
		ctx.fillStyle="rgb(255,255,255)";
		for(var i=0;i<shapesLength;i++){
				var tmpShape=shapes[i];
				for(var j=i+1;j<shapesLength;j++){
					var tmpShapeA=shapes[j];
					var dX=tmpShapeA.x-tmpShape.x;
					var dY=tmpShapeA.y-tmpShape.y;
					var distance=Math.sqrt((dX*dX)+(dY*dY));
					/*碰撞后弹开物体*/
					if(distance<tmpShape.radius+tmpShapeA.radius)
					{
						var angle=Math.atan2(dY,dX);/*计算两个圆之间的角度 */     
						var sine=Math.sin(angle);
						var cosine=Math.cos(angle);
						/*碰撞检测实现
						  获取圆在旋转之后的位置和速度
						 */
						var x=0;
						var y=0;
						var xA=dX*cosine+dY*sine;
						var yA=dY*cosine-dX*sine;
						var vX=tmpShape.vX *cosine+tmpShape.vY*sine;
						var vY=tmpShape.vY *cosine-tmpShape.vX*sine;
						var vXa=tmpShapeA.vX *cosine+tmpShapeA.vY*sine;
						var vYa=tmpShapeA.vY *cosine-tmpShapeA.vX*sine;
						
						/*根据动量守恒改变碰撞后的速度*/
						var vTotal=vX-vXa;
						vX=((tmpShape.mass-tmpShapeA.mass)*vX+2*tmpShapeA.mass*vXa)/(tmpShape.mass+tmpShapeA.mass);
						vXa=vTotal+vX;

/*相互分离*/xA=x+(tmpShape.radius+tmpShapeA.radius);/*旋转回原来的位置*/tmpShape.x=tmpShape.x+(x*cosine-y*sine);tmpShape.y=tmpShape.y+(y*cosine+x*sine);tmpShapeA.x=tmpShape.x+(xA*cosine-yA*sine);tmpShapeA.y=tmpShape.y+(yA*cosine+xA*sine);tmpShape.vX=vX*cosine-vY*sine;tmpShape.vY=vY*cosine+vX*sine;tmpShapeA.vX=vXa*cosine-vYa*sine;tmpShapeA.vY=vYa*cosine+vXa*sine;};};/*添加速度*/tmpShape.x+=tmpShape.vX;tmpShape.y+=tmpShape.vY;/*限制速度的最大值*/if(Math.abs(tmpShape.vX)<5){tmpShape.vX+=tmpShape.aX;}if(Math.abs(tmpShape.vY)<5){tmpShape.vY+=tmpShape.aY;}/*添加摩擦力*//*if(Math.abs(tmpShape.vX)>0.5){tmpShape.vX*=0.9;}else{tmpShape.vX=0;}if(Math.abs(tmpShape.vY)>0.5){tmpShape.vY*=0.9;}else{tmpShape.vX=0;}*/ctx.beginPath();ctx.arc(tmpShape.x,tmpShape.y,tmpShape.radius,0,Math.PI*2,false);ctx.closePath();ctx.fill();/*判断是否碰撞到边界*/if(tmpShape.x-tmpShape.radius<0){tmpShape.x=tmpShape.radius;tmpShape.vX*=-1;tmpShape.aX*=-1;}else
 if(tmpShape.x+tmpShape.radius>canvasWidth){tmpShape.x=canvasWidth-tmpShape.radius;tmpShape.vX*=-1;tmpShape.aX*=-1;}if(tmpShape.y-tmpShape.radius<0){tmpShape.y=tmpShape.radius;tmpShape.vY*=-1;tmpShape.aY*=-1;}else if(tmpShape.y+tmpShape.radius>canvasHeight){tmpShape.y=canvasHeight-tmpShape.radius;tmpShape.vY*=-1;tmpShape.aY*=-1;}}if(playAnimate){setTimeout(animate,33);}}/**/

css:

@charset "utf-8";
/* CSS Document */

*{margin:0;
padding:0;
}

html,body{height:100%;
width:100%;
}
canvas{display:block;
}

#myCanvas{
	background:#001022;
	}
#myButton{
	bottom:20px;
	left:20px;
	position:absolute;
	}
#myButton button{
	padding:5px;
	}