大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > js模拟摩擦运动:速度逐渐变慢最后停止

js模拟摩擦运动:速度逐渐变慢最后停止

关键词:js模拟摩擦运动  阅读(1159) 赞(10)

[摘要]本文是对摩擦运动:的讲解,对学习JavaScript编程技术有所帮助,与大家分享。

摩擦运动:

逐渐变慢,最后停止


缓冲运动:

与摩擦力的区别:可以精确的停到指定目标点
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
Bug:速度取整
值取整:

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <style>
 #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;}
 </style>
 <script>
 //摩擦,减速 : 在运动过程中,速度越来越慢
 //愈接近目标点,速度就越小
 window.onload = function() {
     
     var oBtn = document.getElementById('btn');
     var oDiv = document.getElementById('div1');
     var iTimer = null;
     
     oBtn.onclick = function() {
         
         clearInterval(iTimer);
         var iSpeed = 0;
         
         iTimer = setInterval(function() {
             
             iSpeed = (500 - oDiv.offsetLeft) / 8;
             
             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
             
             console.log( oDiv.offsetLeft + ' : ' + iSpeed );
             
             if (oDiv.offsetLeft == 500) {
                 clearInterval(iTimer);
             } else {
                 oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
             }
             
         }, 30);
         
     }
     
 }
 </script>
 </head>
 
 <body>
     <input type="button" value="动起来" id="btn" />
     <div id="div1"></div>
 </body>
 </html>


相关评论