抛物线运动

写这个原因一方面由于自己感兴趣,另一方面是因为有个朋友去JTS面试问到这个,朋友回答不会以后被鄙视了一番。。。

以前看到有人写抛物线,洋洋洒洒的写了好多字,看得有点头大,所以自己写了一个,代码更少,思路更清晰而且扩展性也强了。

不过这里还有待完善,聪明可爱的你,能看出来问题在哪儿吗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            position: relative;
        }
        .ball{
            width:20px;
            height:20px;
            background-color: #00b3ee;
            border-radius:20px;
            position: absolute;
            top:500px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="ball"></div>
    根据数学中的抛物线思想,x轴随着时间自增,y轴与x轴则有对应的抛物线关系,
    <script>
        function parabola (obj){
            obj.ele.style.left=obj.init_pos.x+"px";
            obj.ele.style.top=obj.init_pos.y+'px';
            var time=0;
            var x;
            var y;
            //注意这里的差值y是-obj.tar_pos.y+obj.init_pos.y,因为在这里的y轴坐标与数学中的y值坐标相反
            var b=(-obj.tar_pos.y+obj.init_pos.y+obj.radian*Math.pow((obj.tar_pos.x-obj.init_pos.x),2))/(obj.tar_pos.x-obj.init_pos.x);
            var is_arrive_x=false;
            var is_arrive_y=false;

            //开启定时器
            var timer=setInterval(function () {
                var space_num=(obj.tar_pos.x-obj.init_pos.x)>0?+obj.space_ratio:-obj.space_ratio;
                x=obj.init_pos.x+space_num*time
                y=-obj.radian*Math.pow(x-obj.init_pos.x,2)+b*(x-obj.init_pos.x);
                console.log("y===="+y);
                console.log("x===="+x);
                obj.ele.style.left=x+"px";
                obj.ele.style.top=obj.init_pos.y-y+'px';
                time+=0.1;
                //设置停止条件
                //实际运动点与目标点的差值
                var actual_Diff_x=x-obj.tar_pos.x;
                var actual_Diff_y=obj.init_pos.y-y-obj.tar_pos.y;

                //设置终点坐标
                function final(){
                    obj.ele.style.left = obj.tar_pos.x + "px";
                    obj.ele.style.top = obj.tar_pos.y + 'px';
                    clearInterval(timer);
                }
                if( Math.abs(actual_Diff_x)<=1&&!is_arrive_x){
                    is_arrive_x=true;
                }
                if( Math.abs(actual_Diff_y)<=1&&!is_arrive_y){
                    is_arrive_y=true;
                }
                //为了让最后到达的坐标值到达指定位置 需要设置此项
                if(is_arrive_x&&is_arrive_y){
                    final();
                }
            },obj.time)
        }
        parabola({
            ele:document.getElementsByClassName("ball")[0],
            time:5,
            space_ratio:10,//自增值系数,如果写的过大,最后停止时差值过大不容易控制,
            radian:0.001,//弧度,如果抛出弧度顶点过大则调小弧度即可
            init_pos:{  //初始位置
                x:0,
                y:500,
            },
            tar_pos:{  //目标位置
                x:500,
                y:20
            }
        });
    </script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 抛物线运动

赞 (0)
分享到:更多 ()

发表评论 0