缓动动画以及回调函数的封装
作用:可以多次为一个div定义不同的动画属性例如(长、宽、高、透明度、层级性),并且定义多个动画函数。
代码
在css中添加一下代码
div{
width:200px;
height:200px;
background-color:red;
}
<body>
<input type="button" id="btn" value="动画开始"/>
<div id="dv"></div>
<script>
//函数调用
document.getElementById("btn").onclick=function(){
var json1 = {"width":800,"height":400,"opacity":0.2};
animate(document.getElementById("dv"),json1,function(){
var var json2 = {"width":80,"height":40,"opacity":1};
animate(document.getElementById("dv"),json2);
});
};
//计算元素移动后的属性值
function getStyle(element,attr){
//判断浏览器是否支持getComputedStyle方法
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
function animate(element,json,fn){//element操作的对象,json属性以及属性值,fn函数
//清理定时器,确保程序中只有一个定时器
clearInterval(element.timeId);
element.timeId = setInterval(function(){
var flag = true;//假设全部动画都已经达到给定的目标
for(var attr in json){//遍历循环json格式数据中的值
if(attr=="opacity"){//判断属性值是否为opacity 如果是则获取元素的透明度到达指定的属性值
//left元素的当前opacity属性值并且放大100倍
var left = getStyle(element,attr)*100;
var target = json[attr]*100;//获取目标的属性值
var step = (target-left)/10;//获得移动的步长
step = step>0?Math.ceil(step):Math.floor(step);//判断步长是否大于0,如果大于0向上取整,否则向下取整
left+=step;//当前距离 = 当前距离加上步长
element.style[attr] = left/100;
}else if(attr=="zIndex"){
element.style[attr] = json[attr];
}else{
var left = parseInt(getStyle(element,attr));//获取当前位置
var target = json[attr];//获取目标位置
var step = (target-left)/10;
//判断步长是否大于0,如果大于0向上取整,否则向下取整
step = step>0?Math.ceil(step):Math.floor(step);
left += step;
//目标位置
element.style[attr] = left+"px";
}
//判断动画是否达到指定目标
if(left!=target){
flag = false;
}
}
if(flag){//如果到达位置就停止计数器
clearInterval(element.timeId);
if(fn){//判断是否有回调函数
fn();
}
}
},20)
}
</script>
</body>