圓周運(yùn)動(dòng)的原理
圓周運(yùn)動(dòng)1.PNG
如上圖所示慈参，其實(shí)圓周運(yùn)動(dòng)夷陋，就是通過運(yùn)動(dòng)的角度deg來求出物體在x軸和y軸上運(yùn)動(dòng)的偏移量饥臂，分別為radius*Math.cos(deg)和radius*Math.sin(deg)夺刑。
了解了上述原理之后愉棱，就可以開始寫一個(gè)隨機(jī)圓周運(yùn)動(dòng)的DEMO，效果圖如下
圓周運(yùn)動(dòng).PNG
基本的設(shè)計(jì)思路
*利用面向?qū)ο蟮乃枷雱?chuàng)建一個(gè)圓模型對(duì)象还蹲。
*再創(chuàng)建一個(gè)幀動(dòng)畫模型爹耗。
*創(chuàng)建實(shí)例耙考，執(zhí)行動(dòng)畫。
創(chuàng)建圓模型對(duì)象
將畫圓形的x,y坐標(biāo)潭兽、半徑倦始、初始角度、顏色山卦、寬度等要素鞋邑，封裝在圓模型這個(gè)對(duì)象的構(gòu)造函數(shù)里面，然后通過給原型添加方法账蓉，一個(gè)是draw畫圓形的方法和move圓形運(yùn)動(dòng)的方法枚碗，讓所有圓形的實(shí)例共享這些方法，還有自己相應(yīng)的屬性铸本，這里用到了肮雨，構(gòu)造函數(shù)模式和原型模式創(chuàng)建對(duì)象的方法思想。
var Square = function(x,y,radiu,option){
this.wid = canvas.width;
this.hei = canvas.height;
this.ctx = ctx;
this.x = x;
this.y = y;
this.radiu = radiu;
this.option = option;
this.radius = Math.random()*5 + 1;
this.angle = 0;//圓周運(yùn)動(dòng)的初始角度
};
Square.prototype = {
draw:function(){
this.ctx.beginPath();
this.ctx.strokeStyle = this.option.strokeStyle;
this.ctx.lineWidth = this.option.lineWidth;
this.ctx.arc(this.x,this.y,this.radiu,0,2*Math.PI,true);
this.ctx.stroke();
},
move:function(){
/*根據(jù)角度計(jì)算出x軸和y軸的偏移量*/
this.x += this.radius*Math.cos(this.angle*(Math.PI/180));
this.y += this.radius*Math.sin(this.angle*(Math.PI/180));
this.angle+=5;//角度每次遞增5個(gè)像素
this.draw();
}
};
創(chuàng)建幀動(dòng)畫對(duì)象
同樣的道理創(chuàng)建幀動(dòng)畫對(duì)象归敬，并且增加一個(gè)存放圓實(shí)例的數(shù)組酷含，每實(shí)例化一個(gè)圓形，就將它存到數(shù)組中汪茧，然后每次render渲染之前，都先把之前的畫布清除掉限番，然后執(zhí)行start方法循環(huán)地渲染畫布舱污，達(dá)到動(dòng)畫的效果。
var Far = function(){
this.width = canvas.width;
this.height = canvas.height;
this.ctx = ctx;
this.timer = null;
this.squares = [];//創(chuàng)建數(shù)組弥虐，用于存放圓實(shí)例
};
Far.prototype = {
//循環(huán)渲染
start : function(){
this.timer = setInterval((function(param){
return function(){param.render();}
})(this),30);
},
//渲染方法
render : function(){
/*將之前的畫布清除掉*/
this.ctx.clearRect(0,0,canvas.width,canvas.height);
/*遍歷每個(gè)圓實(shí)例扩灯，讓這些圓角度發(fā)生變化，從而讓運(yùn)動(dòng)軌跡發(fā)送變化*/
for(i in this.squares){
this.squares[i].move();
/*圓角度增加判斷*/
if(this.squares[i].angle>360){
this.squares[i].angle = 0;
}
}
}
};
最后創(chuàng)建實(shí)例完成動(dòng)畫效果
/*創(chuàng)建幀實(shí)例*/
var frame = new Far();
/*創(chuàng)建圓實(shí)例*/
for(var i=0;i<500;i++){
/*圓的所有屬性都是一定范圍內(nèi)的隨機(jī)數(shù)*/
var x = Math.random()*(canvas.width);
var y = Math.random()*(canvas.height);
var radiu = Math.random()*20;
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var a = Math.random();
var option = {
strokeStyle : 'rgba('+r+','+g+','+b+','+a+')',
lineWidth : Math.random()*10
};
//把圓實(shí)例放到幀模型的數(shù)組中
frame.squares[i] = new Square(x,y,radiu,option);
}
//開始渲染
frame.start();
