前端动画之自由落体落体运动

自由落体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,

});

推荐阅读更多精彩内容