JS运动效果的碰壁运动之投掷碰壁
投掷碰壁：如果一个物体向空中投掷出去，会呈现一个抛物线的效果，最终经过与地面碰撞多次后停止
投掷碰撞效果是x轴和y轴的合效果。x轴做匀速运动，当物体碰到地面后，x轴速度发生损耗；y轴做匀加速运动，当物体碰到地面后，y轴速度同样发生损耗
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="test" style="height: 50px;width: 50px;background:lightblue;position:absolute;top:200px;left:20px;border-radius:50%;"></div> <button id="btn1">开始运动</button> <button id="btn2">还原</button> <script> document.onmousedown = function(){ return false; } btn1.onclick = function(){ collisionMove({ obj:test }) } btn2.onclick = function(){ history.go(); } function getCSS(obj,style){ if(window.getComputedStyle){ return getComputedStyle(obj)[style]; } return obj.currentStyle[style]; } function collisionMove(json){ var obj = json.obj; var fn = json.fn; //声明y轴的当前值 var curY = parseFloat(getCSS(obj,'top')); //声明offset高 var offsetHeight = obj.offsetHeight; //声明元素活动区域高 var activeHeight = json.activeHeight; //元素获取区域宽高默认值为可视区域高 activeHeight = Number(activeHeight) || document.documentElement.clientHeight; //声明x、y轴的步长值 var stepY = -50; var stepX = 10; //声明top、left样式值 var top; var left; //声明减速系数 var k = 0.8; //声明碰撞次数 var i = 0; //清除定时器 if(obj.timer){return;} //开启定时器 obj.timer = setInterval(function(){ //获取x、y轴的当前值 curX = parseFloat(getCSS(obj,'left')); curY = parseFloat(getCSS(obj,'top')); //更新步长值stepY stepY+= 5; //更新top、left值 top = curY + stepY; left = curX + stepX; //下侧碰壁前一刻，步长大于剩余距离，且元素向下运动时 if(top > activeHeight - offsetHeight){ top = activeHeight - offsetHeight; } obj.style.top = top + 'px'; obj.style.left = left + 'px'; //下侧碰撞瞬间，改变运动方向，并产生速度损耗 if(top == activeHeight - offsetHeight){ //若碰撞10次后，则停止运动 i++; if(i== 10){ clearInterval(obj.timer) obj.timer = 0; fn && fn.call(obj); } //速度损耗 stepY = -stepY * k; stepX = stepX * k; } },20); } </script> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知