JS运动基础(三) 弹性运动

浏览数：19 / 时间：2015年06月09日

加减速运动
速度不断增加或减少
速度减小到负值，会向反方向运动

弹性运动
在目标点左边，加速；在目标点右边，减速
根据距离，计算加速度

带摩擦力的弹性运动
弹性运动+摩擦力

弹性:
速度 += (目标点 - 当前值)/系数; //6 , 7 , 8
速度 *= 摩擦系数; // 0.7 0.75
终止条件
距离足够近并且速度足够小

缓冲:
var 速度 = (目标点 - 当前值)/系数;
速度取整

 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:0;}
 8 #bg{ width:1px; height:500px; background:black; position:absolute; left:500px; top:0;}
 9 </style>
10 <script>
11 
12 //摩擦力 : F = fM
13 
14 window.onload = function(){
15     var oInput = document.getElementById(‘input1‘);
16     var oDiv = document.getElementById(‘div1‘);
17     
18     var timer = null;
19     var iSpeed = 0;
20     
21     oInput.onclick = function(){
22         startMove();
23     };
24     
25     function startMove(){
26         clearInterval(timer);
27         timer = setInterval(function(){
28             
29             /*if( oDiv.offsetLeft < 500 ){
30                 iSpeed += (500 - oDiv.offsetLeft)/50;
31             }
32             else{
33                 iSpeed -= (oDiv.offsetLeft - 500)/50;
34             }*/
35             
36             iSpeed += (500 - oDiv.offsetLeft)/6;
37             iSpeed *= 0.75;
38             
39             if( Math.abs(iSpeed)<=1 && Math.abs(500 - oDiv.offsetLeft)<=1 ){/*距离足够近 并且 速度足够小*/
40                 clearInterval(timer);
41                 oDiv.style.left = ‘500px‘;
42                 iSpeed = 0;
43             }
44             else{
45                 oDiv.style.left = oDiv.offsetLeft + iSpeed + ‘px‘;
46             }
47             
48             document.title = oDiv.style.left + ‘,‘ + iSpeed;
49             
50         },30);
51     }
52     
53 };
54 </script>
55 </head>
56 
57 <body>
58 <input type="button" value="开始运动" id="input1">
59 <div id="div1"></div>
60 <div id="bg"></div>
61 </body>
62 </html>