封装动画函数
知识点:
window.getComputedStyle(box)可以获取之前的样式
例如:
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
opacity: 0.5;
background-color: #0f0;
}
var box = document.getElementById("box");
// 补充 获取计算后样式的方法
console.dir(window.getComputedStyle(box));
console.log(window.getComputedStyle(box).width);
console.log(window.getComputedStyle(box).height);
console.log(window.getComputedStyle(box).backgroundColor);
console.log(window.getComputedStyle(box)["opacity"]);
- 多属性运动的属性特点
- 共同点：总时间、时间间隔是相同的，自定义
- 不同的：起始位置（通过程序方法自动获取当前页面最终显示效果）和结束位置（自定义指定的）
- 函数的参数
- 参数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>
