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