web上实现起点到终点的抛物线轨迹运动——补充
上一篇实现了起点到终点的抛物线运动，终点坐标为x2，y2
由于我们需要的是画一条漂亮的弧线为了简化计算可以将终点设置为0，y2。
抛物线的方程为
y = p * (x-a)2
设起始点坐标为x1，y1终点坐标为0，y2则有
y1 = p * (x1-a)2
y2 = p * a2
可简化出公式
p = ((sqrt( y1) + sqrt( y2)) / x1 )2
a = sqrt(y1 / p)
根据公式可以得到x y值，从而画出抛物线，可以通过addX，addY调整抛物线的位置
代码如下:
1 <html>
2 <head>
3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
4 <script type="text/javascript">
5 var index = 0;
6 //起点和终点坐标
7 var startX = 400;
8 var startY = 400;
9 var endY = 100;
10 var distance = 0;
11 var time = 40;
12 //当前坐标
13 var x,y;
14 //x,y方向的增量
15 var addX = 100;
16 var addY = 100;
17 //定时器
18 var inter;
19 //抛物线方程系数
20 var p, a;
21
22 var p2 = function(x) {
23 return x*x;
24 }
25 var display = function() {
26 //设置内容
27 $("#ball").html("up" + index);
28 //计算移动的x值
29 x = startX - distance / time * index++;
30 //计算抛物线系数p,a
31 p = p2 ( (Math.sqrt(startY) + Math.sqrt(endY)) / startX );
32 a = Math.sqrt(endY / p);
33 //已知x，根据抛物线方程计算出y
34 y = p * p2(x - a);
35 //加上偏移量后更改坐标
36 $("#ball").css({
37 top: y + addY,
38 left: x + addX
39 });
40 //到终点时停止定时任务
41 if (index == 41) {
42 window.clearInterval(inter);
43 }
44 }
45 $(document).ready(function () {
46 //设置初始内容及坐标
47 $("#ball").html("ball");
48 $("#ball").css({
49 position: 'absolute',
50 left: startX,
51 top: startY
52 });
53 //计算起始点与终点之间x轴的平行距离，便于做x轴的平行移动
54 distance = startX;
55 //设置定时任务，每隔25毫秒移动一次
56 inter = setInterval("display();",25);
57 });
58 </script>
59 </head>
60 <body>
61 <div id='ball'></div>
62 </body>
63 </html>
