一、javascript的匀速运动
关于物体的javascript匀速运动要点分析：
1.物体关于运动的时候，我们要打开定时器
2.打开定时器的时候我们记得要在停止的时候关闭定时器，同时应该注意的是一开始加载的时候，我们也应该关闭定时器，避免多次重复的加载，导致的加速运动。
3.并且速度初始化为0
实施方法：
判断物体的偏移是否小于目标值（判断运动的速度）
小于 可以继续运动 大于向右运动
2。先判断什么地方停下来？
判断条件：物理的偏移量小于7就是不能超过速度的值时
直接让它对齐
<!doctype html><html><head><meta charset="utf-8"><title>JavaScript匀速运动</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}</style><script>window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); };};var timer = null;function startMove(obj, iTarget){ clearInterval(timer); timer = setInterval(function(){ var iSpeed = 0; if(obj.offsetLeft < iTarget) { iSpeed = 7; } else { iSpeed = -7; } if( Math.abs( obj.offsetLeft - iTarget ) < 7 ) { clearInterval(timer); obj.style.left = iTarget + 'px'; } else { obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30);}</script></head><body><button id="btn1">移动</button><div id="div1"></div><!--span为一条线--><span></span></body></html>
二、javascript变速运动
要点分析：
1.如何做到变加速运动？利用目标值与偏差值（obj.offsetLeft）的差去除以一个定值，因为偏差值（obj.offsetLeft）会随着时间的改变而改变，从而达到一个变速的目的
2.判断速度大于0 向上取整 小于0向下取整
<!doctype html><html><head><meta charset="utf-8"><title>缓冲运动</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}</style><script>window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); };};var timer = null;function startMove(obj, iTarget){ clearInterval(timer); timer = setInterval(function(){ var iSpeed = (iTarget - obj.offsetLeft)/8; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iTarget==obj.offsetLeft){ clearInterval(timer); }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30);}</script></head><body><input id="btn1" type="button" value="移动" /><div id="div1"></div><span></span></body></html>
三、javascript的弹性运动
1.开始做一个减速运动
2.在减速运动中添加一个摩擦运动
//做一个加速度减缓的变加速欲动 加速度 iSpeed += (iTarget - obj.offsetLeft)/5; //控制速度的减缓量 摩擦力 iSpeed *= 0.7; //向左移动的距离 left += iSpeed;
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}</style><script>window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); };};var iSpeed = 0;var left = 0;function startMove(obj, iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ //做一个加速度减缓的变加速欲动 加速度 iSpeed += (iTarget - obj.offsetLeft)/5; //控制速度的减缓量 摩擦力 iSpeed *= 0.7; //向左移动的距离 left += iSpeed; //速度小于1并且距离差小于1时停止并且将目标值赋予块 if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ clearInterval(obj.timer); obj.style.left = iTarget + 'px'; }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30);}</script></head><body><input id="btn1" type="button" value="运动" /><div id="div1"></div><div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div></body></html>
