JS运动基础(二) 摩擦运动、缓冲运动

2024-04-27 14:23:23

字体：大中小

来源：转载

供稿：网友

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>

上一篇：JavaScript Patterns 3.2 Custom Constructor Functions

下一篇：简单的JS多物体的运动---运动和透明度的变化