首页 > 代码库 > JS运动基础(二) 摩擦运动、缓冲运动

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

2024-07-06 08:37:21   229人阅读

摩擦运动：

逐渐变慢，最后停止


缓冲运动：

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

 


联系
我们