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

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

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

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

 

 

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


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

 

JS运动基础(三) 弹性运动
 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>
JS运动基础(三) 弹性运动

 

JS运动基础(三) 弹性运动,布布扣,bubuko.com

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

上一篇:JS运动基础(四) 碰撞运动


下一篇:[转]网络爬虫(一):抓取网页的含义和URL基本构成