首页 > 代码库 > JS运动基础(二) 摩擦运动、缓冲运动
JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动:
逐渐变慢,最后停止
缓冲运动:
与摩擦力的区别:可以精确的停到指定目标点
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
Bug:速度取整
值取整:
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;} 8 </style> 9 <script> 10 //摩擦,减速 : 在运动过程中,速度越来越慢 11 //愈接近目标点,速度就越小 12 window.onload = function() { 13 14 var oBtn = document.getElementById(‘btn‘); 15 var oDiv = document.getElementById(‘div1‘); 16 var iTimer = null; 17 18 oBtn.onclick = function() { 19 20 clearInterval(iTimer); 21 var iSpeed = 0; 22 23 iTimer = setInterval(function() { 24 25 iSpeed = (500 - oDiv.offsetLeft) / 8; 26 27 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 28 29 console.log( oDiv.offsetLeft + ‘ : ‘ + iSpeed ); 30 31 if (oDiv.offsetLeft == 500) { 32 clearInterval(iTimer); 33 } else { 34 oDiv.style.left = oDiv.offsetLeft + iSpeed + ‘px‘; 35 } 36 37 }, 30); 38 39 } 40 41 } 42 </script> 43 </head> 44 45 <body> 46 <input type="button" value="动起来" id="btn" /> 47 <div id="div1"></div> 48 </body> 49 </html>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。