缓动动画以及回调函数的封装

最新推荐文章于 2022-03-30 23:21:10 发布

Maple...Leaf

最新推荐文章于 2022-03-30 23:21:10 发布

阅读量137

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45741441/article/details/105197665

版权

缓动动画以及回调函数的封装

作用：可以多次为一个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>

Maple...Leaf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
缓动动画以及回调函数的封装

缓动动画以及回调函数的封装作用：可以多次为一个div定义不同的动画属性例如（长、宽、高、透明度、层级性），并且定义多个动画函数。代码在css中添加一下代码div{ width:200px; height:200px; background-color:red; }<body><input type="button" id="btn" value="动画...
复制链接

扫一扫