自由落体运动 弹跳的小球

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自由落体2</title>
    <style>
        body{
            position: relative;
        }
        .ball{
            position: absolute;
            top:0;
            width:50px;
            height:50px;
            background-color: #00b3ee;
            border-radius:50px;
        }
    </style>
</head>
<body>
<div class="ball"></div>
<script>var freeDrop=function(obj){
        var init_pos=obj.direction=='Y'?obj.ele.offsetTop:obj.ele.offseetLeft;
        var initTar=init_pos+obj.target; //具体设定位移
        var init_speed=obj.init_speed;
        var ele=obj.ele;
        var acc=obj.acceleration; //加速度
        var time=0;  //初试时间
        var distance; //位移
        var cur_speed=init_speed; //当前速度
        var rebound_speed; //反弹速度
        var rebound_pos=ele.offsetTop; //每次反弹最高处的位置
        var isclear=false;
        var is_first=true;
        var time_add=0.5; //自增值过大会有残影
        function setPos(pos){
            if(obj.direction=='Y'){
                ele.style.top=pos+"px";
            }else{
                ele.style.left=pos+'px';
            }
        };
        var timer=setInterval(function () {
            if(cur_speed>=0){
                //元素的初始位置加上运动位移
                distance=rebound_pos+cur_speed*time+0.5*acc*Math.pow(time,2);
                setPos(distance);
                time+=time_add;
                if(distance>=initTar) {
                    setPos(initTar);
                    //是否第一次下落
                    init_speed=is_first?init_speed:0;
                    cur_speed=-(acc*time+init_speed);
                    is_first=false;
                    console.log("碰壁前的速度"+cur_speed);
                    time=0;
                };
            }else{
                //碰壁时的动能损失
                if(time==0){
//                    cur_speed*=obj.reduction;
//                    cur_speed=-Math.floor(-cur_speed);
                    cur_speed+=obj.reduction; //这时候的速度是负值
                    console.log("碰壁后的速度"+cur_speed);
                };
                //反弹的最高点位置是临界位置减去反弹最大位移
                distance=initTar-(-cur_speed*time-0.5*acc*Math.pow(time,2));
                //到达最大位置时取消定时器
                setPos(distance);
                time+=time_add;

                //如果设置加速度过大,那么由于time每次加1 就会造成反弹速度会大于或者等于
                //下降时的最大速度,与需求效果相反,这时候的处理是
                // 1。if(acc*(time+acc)>=Math.floor(-cur_speed)){
                //2.减小time自增值
                if(acc*time>=Math.floor(-cur_speed)){
                    if(Math.abs(distance-initTar)<=1){
                        clearInterval(timer);
                    }
                    time=0;
                    cur_speed=0;
                    rebound_pos=ele.offsetTop;
                }
            }
        },obj.quality_effect);
    };
    freeDrop({
        ele:document.getElementsByClassName("ball")[0],//设置碰撞物体
        target:300,//从开始位置到结束位置的距离
        init_speed:10,
        direction:"Y",
        quality_effect:10,//通过这个参数设置体验质量变化效果
        acceleration:2,//加速度
        reduction:2, //碰撞损失
    });

</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 自由落体运动 弹跳的小球

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

发表评论 0