月薪80k大佬筆記，javascript之運動！網友：“完美”！
網友：少廢話上乾貨！小編：好嘞！
知識點很多，文章偏長，要看完哦！
導語：JavaScript 運動（緩衝運動，多物體運動 ,多物體多值運動+回撥機制）
勻速運動 （當需要物體做勻速運動直接呼叫statMove函式）
1 function startMove(dom,targetPosetion){ //dom : 運動物件，targetPosition : 到達目標位置
2 clearInterval(timer); // 防止定時器疊加，先清除定時器。
3 var speed = targetPosetion - dom.offsetLeft > 0 ? 7 : -7;
4 //斷物體到移動的目標位置的左邊還是右邊，左邊速度是正的，右邊速度是負的。
5 timer = setInterval(function(){ //設定定時器。變數timer要定義在函式外面。
6 if(Math.abs(targetPosetion - dom.offsetLeft ) < Math.abs(speed)){
7 clearInterval(timer);
8 //當目位置減去物體偏移量小於定時器移動的位置（因為在移動就超出了目標位置），清除定時器
9 dom.style.left = targetPosetion + "px";
10 //因為距離目標位置還有一小段距離，直接讓物體等於目標位置就行
11 }else{
12 dom.style.left = dom.offsetLeft + speed + "px";
13 }
14 },30);
15 }
緩衝運動（ 越接近目標，速度越慢）
緩運運動比直線運動視覺性更好，所以很常用
1 function startMove(dom, targetPosetion) {
2 clearInterval(timer);
3 var speed = null;
4 timer = setInterval(function () { //設定定時器。變數timer要定義在函式外面。
5 speed = (targetPosetion - dom.offsetLeft) /10;
6 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
7 if(dom.offsetLeft == targetPosetion){
8 clearInterval(timer);
9 }else{
10 dom.style.left = dom.offsetLeft + speed + "px";
11 }
12 }, 30)
13 }
5： 目標位置 - 物體偏移量（因為目標位置固定的，但是物體偏移量越來越大，所以會越來越慢）第10行的dom.offsetLeft和第5行負的dom.offsetLeft互相抵消掉了，dom.style.left直接等於目標位置（速度太大），所以要除以一個小數。
6：當目標位置 - 物體偏移量小於除數時，speed就等於小數了， 但是偏移量都是整數，就會自動的取捨值，例如：dom.style.left = 35.6px 實際會轉換成dom.style.left = 36px;所以只要有小數就向上取整（Math.ceil()），加上1。當是負值的時候就下取整（Math.floor()）.因為當speed是小數時，就會被取整。所以最後是一個畫素一個畫素加上去的，所以物體的偏移量正好等於目標位置時就清除定時器。
顏色漸變的緩衝運動
因為讓當前的顏色漸變需要讓當前的opacity增加或減少，獲取當前的透明度opacity可以用計算樣式window.getComputedStyle。
計算樣式只讀，返回的都是絕對值，沒有相對單位
1 function getStyle(dom,attr){
2 if(window.getComputedStyle){
3 return window.getComputedStyle(dom,null)[attr];
4 }
5 else{
6 return dom.currentStyle[attr]; //IE8不相容，IE獨有屬性currentStyle
7 }
8 }
讓物體透明度緩衝變化
1 startMove(div,25);
2 function startMove(dom, targetPosetion) {
3 clearInterval(timer);
4 var speed = null,current = null;
5 timer = setInterval(function () {
6 current = parseFloat(getStyle(div,'opacity')) * 100;
7 console.log(current);
8 speed = (targetPosetion - current) / 10;
9 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
10 if (current == targetPosetion) {
11 clearInterval(timer);
12 } else {
13 dom.style.opacity = (current + speed) / 100;
14 }
15 }, 30)
16 }
因為透明度的取值範圍是0-1，把緩衝範圍變大，呼叫函式時和獲取當前透明度值時擴大100倍，增大緩衝區間，當給opacity賦值的時候縮小100倍。
多物體運動
4個div，移入到那個div，寬度做緩衝運動移動到400；移除寬度變為100。
下面的程式碼。橙色的部分有timer變為dom自己的屬性dom.timer,
在上面定義timer的時候，定義的timer是在函式外面的，4個div共用一個timer定時器，
當移入一個div時，開啟一個定時器，移出div時，又把上一個定時器給清除了，重新開啟了一個定時器。
當從上一個div快速移入一個新的div時，還沒等回到100，開啟的那個新的div。就把上一個div給清除了。
所以解決這個問題，就是在每個div上都加一個定時器。
當清理定時器的時候也是清理自己的定時器，不會影響其他的，就在每個元素上加上timer屬性。
function startMove(dom, targetPosetion) {
clearInterval(dom.timer);
var speed = null;
dom.timer = setInterval(function () {
current = parseFloat(getStyle(dom, 'width')); //用計算樣式獲取當前寬度值。
speed = (targetPosetion - current) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
console.log(speed, current);
if (current == targetPosetion) {
clearInterval(dom.timer);
} else {
dom.style.width = current + speed + "px";
}
}, 30)
}
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
div[i].onmouseenter = function () {
startMove(this, 400)
}
div[i].onmouseleave = function(){
startMove(this,100);
}
}
多物體不同屬性運動
1 function startMove(dom , attr , target){
2 clearInterval(dom.timer);
3 dom.timer = setInterval(function(){
4 var current = null,speed = null;
5 if(attr == 'opacity'){
6 current = parseFloat(getStyle(dom,attr)) * 100;
7 }else{
8 current = parseFloat(getStyle(dom,attr));
9 }
10 speed = (target - current) / 10;
11 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
12 if(current == target){
13 clearInterval(dom.timer);
14 }
15 if(attr == 'opacity'){
16 dom.style.opacity = (current + speed) / 100;
17 }else{
18 dom.style[attr] = (current + speed) + "px";
19 }
20 },30)
21 }
22
23 var div = document.getElementsByTagName('div');
24 div[0].onmouseenter = function(){
25 startMove(this,'width',400);
26 };
27 div[1].onmouseenter = function(){
28 startMove(this,'height',400);
29 };
30 div[2].onmouseenter = function(){
31 startMove(this,'borderWidth',20);
32 };
33 div[3].onmouseenter = function(){
34 startMove(this,'opacity',50);
35 };
多物體多值運動 + 回撥機制
function startMove(dom, targetObj, callback) {
clearInterval(dom.timer);
dom.timer = setInterval(function () {
var stop = true;
var speed = null, current = null;
for (var prop in targetObj) {
if (prop == 'opacity') {
current = parseFloat(getStyle(dom, prop))*100;
} else {
current = parseFloat(getStyle(dom, prop));
}
speed = (targetObj[prop] - current) / 10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (prop == 'opacity') {
dom.style.opacity = (current + speed) / 100;
} else {
dom.style[prop] = (current + speed) + "px";
}
if (targetObj[prop] != current) {
stop = false;
}
}
if (stop == true) {
clearInterval(dom.timer);
typeof callback == 'function' && callback();
}
}, 30);
}
//讓多物體多值運動，由於多值就可以用物件來裝。
startMove(dom, targetObj, callback)接收3個引數，運動物件，想要改變的多值屬性物件，回撥函式
跟上面一樣一地步清除定時器，然後設定定時器，用for in 迴圈傳過來的物件屬性，
如果傳過來的是opacity 就要擴大100倍，不是就正常呼叫上面getStyle()方法，返回一個計算屬性。
設定一個鎖，每次定時器執行時定義一個變數stop = true 可以停止，
當for in 迴圈時，判斷如果有一個當前值不等於目標值的時候，就讓stop = false。不可以停止
for in 結束，stop == true 的時候就代表所有的值都到達目標值，這時候就可以清空定時器。這個運動過程結束，呼叫回撥函式
1 var divOne = document.getElementById('one');
2 var divTwo = document.getElementById('two');
3 divOne.onclick = function () {
4 startMove(this, { width: 400,height: 400,left: 200,top: 300,opacity: 50}, function () {
5 startMove(divTwo, { width: 400, height: 400, left: 200, top: 300, opacity: 50 }, function () {
6 alert(555);
7 })
8 })
9 }
最後，想學習web前端的小夥伴們！
對web前端感興趣的小夥伴也可以加 小編q 裙：
