属于自己的运动函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
//封装动画函数的目的就是为了以后简化操作
//封装一个函数 让他运动
//参数一 执行动画的元素
//参数二 目的地
//参数三 持续时间
//参数四 回调函数
function animate(ele, obj, duration, callback) {
//1.得到终点-起点=要移动的总距离
//起点
var start = {};
for (var i in obj) {
start[i] = parseInt(getComputedStyle(ele)[i]);
}
//要移动的总距离
var stepDistance = {};
for (var i in start) {
stepDistance[i] = obj[i] - start[i];
}
//动画的频率
let interval = 20;
//走的次数
let stepCount = duration / interval;
//一步走的距离
let oneDistance = {};
for (var i in stepDistance) {
oneDistance[i] = stepDistance[i] / stepCount;
}
// console.log(oneDistance);
var count = 0;
let timer = setInterval(function() {
count++;
for (var i in oneDistance) {
if (i.toLocaleLowerCase() == 'opacity') {
ele.style[i] = start[i] + oneDistance[i] * count
} else {
ele.style[i] = start[i] + oneDistance[i] * count + 'px'
}
// console.log(i);
}
if (count >= stepCount) {
clearInterval(timer);
callback && callback();
// console.log(callback);
}
}, interval)
}
animate(div, {
left: 200,
top: 200,
}, 500, function() {
div.style.opacity = '0'
})
//算法:1.移动的距离=终点的位置-起点的位置
// 2.走的次数=持续的时间/执行的频率
//3.每次走的距离=移动的距离/走的次数
//用定时器 把每次走的距离*执行的次数 就是当前的位置
</script>
</body>
</html>