function animate( element, json ,fn) {
//清除定时器
clearInterval(element.timeId)
element.timeId = setInterval(function () {
var flag = true;// 假设到达目标为止
for(var attr in json){
//获取元素的当前位置
var current = parseInt(getStyle(element, attr));// attr-->height 返回是 200px 化整
//目标的值
var target = json[attr];
//移动的步数
var step = (target - current) /10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current +"px";
//如果 有一个当前的位置 不等于 目标位置 , 让 flag 为false
if( current != target){
flag = false;
}
}
// 循环过后, 如果flag为true, 则证明都到达了目标位置, 则清除定时器
if(flag){
//清除定时器
clearInterval(element.timeId);
//所有的属性达到目标后才调用这个函数.
//如果用户传了fn, 则调用
if(fn){
fn();
}
}
//测试代码
console.log("目标位置:"+target+",当前位置:"+current+",每次移动的步数:"+step)
},20)
}
变速移动
最新推荐文章于 2019-05-12 18:26:00 发布