自由落体2
body{
position:relative;
}
.ball{
position:absolute;
top:0;
width:50px;
height:50px;
background-color:#00b3ee;
border-radius:50px;
}
varball=document.getElementsByClassName('ball')[0];
varfreeDrop=function(obj){
varinit_pos=obj.direction=='Y'?obj.ele.offsetTop:obj.ele.offseetLeft;
varinitTar=init_pos+obj.target;//具体设定位移
varinit_speed=obj.init_speed;
varele=obj.ele;
varacc=obj.acceleration;//加速度
vartime=0;//初试时间
vardistance;//位移
varcur_speed=init_speed;//当前速度
varrebound_speed;//反弹速度
varrebound_pos=ele.offsetTop;//每次反弹最高处的位置
varisclear=false;
varis_first=true;
vartime_add=0.5;//自增值过大会有残影
functionsetPos(pos){
if(obj.direction=='Y'){
ele.style.top=pos+"px";
}else{
ele.style.left=pos+'px';
}
};
vartimer=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,//加速度
duration:3000,//3000ms
reduction:2,//碰撞损失
//或者设置碰撞次数
bump_times:3,
});
网友评论