封裝動畫函式
阿新 • • 發佈：2021-08-16
知識點:
-
window.getComputedStyle(box)可以獲取之前的樣式 -
多屬性運動的屬性特點
- 共同點：總時間、時間間隔是相同的，自定義
- 不同的：起始位置（通過程式方法自動獲取當前頁面最終顯示效果）和結束位置（自定義指定的）
- 函式的引數
- 引數1：元素物件，它要進行運動
- 引數2：結束位置，以物件資料方式傳遞
- 引數3：總時間
- 每個屬性的開始位置, 結束位置, 步長都不一樣, 所以這三個需要用物件表示
易錯點:
-
函式中元素屬性不能用打點了, 需要用
ele.syle[k] -
函式中給元素屬性賦值的時候要加單位, 除了不透明度
opacity -
物件的呼叫和遍歷
var obj = { left: 400, width: 300 };
for(var k in obj){
console.log(k); // left,width
console.log(obj[k]) // 400,300
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { position: absolute; top: 100px; left: 0; width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <input type="button" value="開始" id="start"> <input type="button" value="結束" id="end"> <div class="box" id="box"></div> <script> // 獲取元素 var start = document.getElementById("start"); var end = document.getElementById("end"); var box = document.getElementById("box"); // 共同點：總時間、時間間隔是相同的，自定義 // 不同的：起始位置（通過程式方法自動獲取當前頁面最終顯示效果）和結束位置（自定義指定的） // 函式引數 // 引數1：元素物件，它要進行運動 // 引數2：結束位置，以物件資料方式傳遞 // 引數3：總時間 // 自定義動畫函式 end = { left: 500, top: 500, width: 500, opacity: 0.3 }; // 呼叫函式 start.onclick = function () { animate(box, { left: 400, width: 300 }, 2000); }; function animate(ele, end, time) { var now = {}; //根據end中的屬性獲取需要的屬性, 最開始的now也就是起始位置的值 for (var k in end) { //parseFloat是為了獲得去掉單位的純數值 now[k] = parseFloat(window.getComputedStyle(ele)[k]); } var interval = 50; //總次數 maxcount = time / interval; //計數器 count = 0; // 物件中的每個屬性都有自己的步長，也可以放到一個步長物件中 var step = {}; for (var k in end) { step[k] = (end[k] - now[k]) / maxcount; } //定時器 var timer; timer = setInterval(function () { for (var k in end) { now[k] += step[k]; } count++; if (count >= maxcount) { //拉終停表 for (var k in end) { now[k] = end[k]; } clearInterval(timer); } // 賦值給對應元素物件屬性 for (var k in end) { if (k == 'opacity') { ele.style[k] = now[k]; } else { ele.style[k] = now[k] + "px"; } } }, interval) }; </script> </body> </html>