obj是将要运动的对象,json是运动完成时的位移结果。
封装要点:
1.定时器开关flag的定义要放在for in结构的外面,否则,每遍历一次,都会定义一个 新的flag
2.if(current != json[attr]) { flag = false; }要放到遍历的里面,因为定时器每运行一次,都要判断一下是否到达终点
3.if(flag == false) {clearInterval(obj.timer)}放到遍历结构的外面,当所有的位移都达到json给的数值的时候,才关闭定时器。否则,只有一个json[attr]达到位移终点时,定时器就会关闭,此时,可能别的位移还没有到达json数据给的终点。
function animate(obj,json){
clearInterval(obj.timer);
var flag = true;
obj.timer = setInterval(function (){
for (var attr in json) {
// var current = parseInt(getCss(obj,attribute))
// getCss(obj,attr)中的attr是从json中获取到的,因此不能用attribution了
var current = parseInt(getCss(obj,attr));
var step = (json[attr] - current) /10;
step = step >0 ? Math.ceil(step) : Math.floor(step);
// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;
obj.style[attr] = current + step + 'px' ;
if(current != json[attr]) {
flag = false;
}
}
},30);
if(flag == false) {clearInterval(obj.timer)}
}
案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
opacity: 0.3;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var box = document.getElementById("box");
btn200.onclick = function() {
animate(box,{top: 300,height:200,width : 600});
}
btn400.onclick = function() {
animate(box,{top: 100,height:500,width : 300});
}
function animate(obj,json){
clearInterval(obj.timer);
var flag = true;
obj.timer = setInterval(function (){
for (var attr in json) {
// var current = parseInt(getCss(obj,attribute))
// getCss(obj,attr)中的attr是从json中获取到的,因此不能用attribution了
var current = parseInt(getCss(obj,attr));
var step = (json[attr] - current) /10;
step = step >0 ? Math.ceil(step) : Math.floor(step);
// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;
obj.style[attr] = current + step + 'px' ;
if(current != json[attr]) {
flag = false;
}
}
},30);
if(flag == false) {clearInterval(obj.timer)}
}
function getCss(obj,attribute) {
if(obj.currentStyle) {
return obj.currentStyle[attribute];}else {
return window.getComputedStyle(obj,null)[attribute];}
}
</script>