web上实现起点到终点的抛物线轨迹运动

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_30379531

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量298

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/icestone/archive/2012/02/22/2361709.html

版权

需求：在web上实现一个div层按照投篮过程篮球运动轨迹运动。

在web上实现一个div层的移动很简单，只需要将该div的position设置为absolute后改变其top和left就可以改变此div层在页面的位置。
投篮过程篮球运动轨迹可以近似看成抛物线运动，此处的难点在于从起点到终点做抛物线轨迹的运动。

web使用的是坐标系的第一象限，其上点的坐标都为正数。抛物线的方程为

y = p * (x-a)²+ b

一条抛物线轨迹可以由3点唯一确定，现在我们已知起点和终点，再找出一点就可以画出一条抛物线。我们将抛物线的顶点设置在x轴上这样我们得到抛物线的方程为

y = p * (x-a)²

设起始点坐标为x₁，y₁终点坐标为x₂，y₂则有

y₁ = p * (x₁-a)²

y₂ = p * (x₂-a)²

假设x₁ > x₂ ，可计算出

p = ((sqrt( y₁) + sqrt( y₂)) / (x₁ - x₂) )²

a = x₁ - sqrt(y₁ / p)

这样通过给定的起始点和终点就可以得到p和a的值即得到抛物线方程的公式。

接下来通过设置点在x轴上做匀速运动，通过抛物线方程算出y值，再加上y方向的偏移量就得到了最终每一个点的x,y坐标。

具体代码如下：

 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 endX = 100;
10         var endY = 100;
11         var distance = 0;
12         var time = 40;
13         //当前坐标
14         var x,y;
15         //x,y方向的增量
16         var addX = 100;
17         var addY = 100;
18         //定时器
19         var inter;
20         //抛物线方程系数
21         var p, a;
22         
23         var p2 = function(x) {
24             return x*x;
25         }
26         var display = function() {
27             //设置内容
28             $("#ball").html("up" + index);
29             //计算移动的x值
30             x = startX - distance / time * index++;
31             //计算抛物线系数p,a
32             p = p2 ( (Math.sqrt(startY) + Math.sqrt(endY)) / (startX - endX) );
33             a = startX - Math.sqrt(startY / p);
34             //已知x，根据抛物线方程计算出y
35             y = p * p2(x - a);
36             //加上偏移量后更改坐标
37             $("#ball").css({
38                 top: y + addY,
39                 left: x + addX
40             });
41             //到终点时停止定时任务
42             if (index == 41) {
43                 window.clearInterval(inter);
44             }
45         }
46         $(document).ready(function () {
47             //设置初始内容及坐标
48             $("#ball").html("ball");
49             $("#ball").css({
50                 position: 'absolute',
51                 left: startX,
52                 top: startY
53             });
54             //计算起始点与终点之间x轴的平行距离，便于做x轴的平行移动
55             distance = startX - endX;
56             //设置定时任务，每隔25毫秒移动一次
57             inter = setInterval("display();",25);  
58         });
59     </script>
60 </head>
61 <body>
62     <div id='ball'></div>
63 </body>
64 </html>

转载于:https://www.cnblogs.com/icestone/archive/2012/02/22/2361709.html

weixin_30379531

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web上实现起点到终点的抛物线轨迹运动

需求：在web上实现一个div层按照投篮过程篮球运动轨迹运动。在web上实现一个div层的移动很简单，只需要将该div的position设置为absolute后改变其top和left就可以改变此div层在页面的位置。投篮过程篮球运动轨迹可以近似看成抛物线运动，此处的难点在于从起点到终点做抛物线轨迹的运动。web使用的是坐标系的第一象限，其上点的坐标都为正数。抛物线的方程为y = p *...
复制链接

扫一扫