Javascript的元素运动(二)

写在最前面

这篇的重点是处理一下曲线运动相关的知识，自己之前没有做过相关的研究，这里一边写一边总结。写的不好的话请见谅。
我个人见过觉得比较有实用价值的运动有三种：

1. 圆周运动
2. 抛物线运动
3. 贝塞尔曲线运动

所以暂时就研究这几种曲线运动，如果以后有比较值得研究的再补充一下。

圆周运动

先贴个图来找下感觉


很熟悉的感觉。。。大抵高三就是这一生智商巅峰了。。。
言归正传，找到这张图才想起原点不一定都是在(0,0)的位置。另外把圆的方程找到了，挺简单的：

        (x－a)²+(y－b)²=r²

其中(a,b)是圆心所在点。这里我们主要的需求是：已知半径,根据角度不同来计算当前角度下坐标
网上搜索一下，感谢google，这里是计算的公式：

设A(x,y)是所求点,(a,b)是圆心,r为半径，PI为圆周率,A为当前角度

    x = a + r * cos(A * PI/180) 
    y = b + r * sin(A * PI/180) 

这样一来其实就很好算了,这里就根据JavaScript来写个function来获取坐标：

/**
 * 获取圆的上一个点的坐标
 * @param  {[number]} a     [圆心横坐标]
 * @param  {[number]} b     [圆心纵坐标]
 * @param  {[number]} x     [圆上一点的横坐标]
 * @param  {[number]} y     [圆上一点的纵坐标]
 * @param  {[number]} r     [圆的半径]
 * @param  {[number]} angle [目标点所在角度]
 * @return {[object]}       [目标点的坐标]
 */
function getCoordinate(a,b,x,y,r,angle){
	var r = Math.sqrt((a-x)*(a-x) + (b-y)*(b-y))
	return {
		x : a + r * Math.cos(angle * Math.PI/180),
		y : b + r * Math.sin(angle * Math.PI/180) 
	}
}

这样一来基本就可以使用了，给出圆心坐标、圆上一点加上角度值就可以开始获取圆周运动中的点的坐标了。

我们现在来处理动画要素——计时器和贯穿运动的角度问题。
角度这个不能一直加下去，它需要可以从一个数(<=360)加到360，过了360又重置成1.因为可能有很多个计时器，所以需要一个计数器的构造函数，考虑到每个构造函数都有自己的角度，因此我们需要一个闭包来保存它。

function AngleFac(init){
	return (function(initNum){
		var angle = 1,
			initAngle = initNum;

		if(initAngle){
			angle = initAngle;
		}

		return {
			add:function(){
				angle = (angle==360)?1:angle+1;
			},
			get:function(){
				return angle;
			},
			set:function(a){
				if(a>360){
					console.log("最大只能设置360")
				}else{
					angle = a;
				}
			},
			reset:function(){
				if(initAngle){
					this.set(initAngle);
				}else{
					console.log("没有设置初始值！")
				}
			}
		}	
	})(init)
}

现在我们有一个功能相对完备的构造函数,可以读、写、设置和重置角度。

好吧，上个demo，超级简单的，然而很是简陋啊。。。我不折腾圆周了，实际上可以给出半径而不需要圆上一点的。

JS Bin on jsbin.com