知識點:
-
window.getComputedStyle(box)
- 多屬性運動的屬性特點
- 共同點：總時間、時間間隔是相同的，自定義
- 不同的：起始位置（通過程式方法自動擷取目前頁面最終顯示效果）和結束位置（自定義指定的）
- 函數的參數
- 參數1：元素對象，它要進行運動
- 參數2：結束位置，以對象資料方式傳遞
- 參數3：總時間
- 每個屬性的開始位置, 結束位置, 步長都不一樣, 是以這三個需要用對象表示
易錯點:
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>
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)