加减速运动
速度不断增加或减少
速度减小到负值，会向反方向运动
弹性运动
在目标点左边，加速；在目标点右边，减速
根据距离，计算加速度
带摩擦力的弹性运动
弹性运动+摩擦力
弹性:
速度 += (目标点 - 当前值)/系数; //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>