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

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

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

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

 

 

弹性:
速度 += (目标点 - 当前值)/系数;  //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>

 

你可能感兴趣的:(js)