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来获取坐标:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* 获取圆的上一个点的坐标
* @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.因为可能有很多个计时器,所以需要一个计数器的构造函数,考虑到每个构造函数都有自己的角度,因此我们需要一个闭包来保存它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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