前端ABC<!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 » 自由落体运动 弹跳的小球