学习笔记 - animate动画函数

92 阅读 0 评论 61 点赞

我是靠谱客的博主奋斗钥匙，最近开发中收集的这篇文章主要介绍学习笔记 - animate动画函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

动画原理：当前的样式+变化量

获得当前的样式

1 function getStyle(obj,attr) {
2         if(obj.currentStyle) { //ie
3             return obj.currentStyle[attr];
4         }else { //w3c
5             return window.getComputedStyle(obj,null)[attr];
6         }
7     }

动画函数（无opacity和z-index）

 1     function animate(obj,json){ //要做动画的对象，目标样式
 2         clearInterval(obj.timer); //清除定时器
 3         obj.timer = setInterval(function(){ //开启定时器
 4             var flag = true; //定时器开关
 5             for(var key in json){  //遍历json
 6                 var current = parseInt(getStyle(obj,key)) || 0;  //获取当前的属性值
 7                 var step = (json[key] - current) / 10;  //计算每个属性的变化量
 8                 step = step > 0 ? Math.ceil(step) : Math.floor(step); //根据正负取整
 9                 obj.style[key] = current + step + "px"; //赋值
10                 if(current != json[key]){//只要其中有一个属性不等于目标值，就不应该停止定时器
11                     flag = false;
12                 }
13             }
14             if(flag){  //  当flag为真时，停止定时器
15                 clearInterval(obj.timer);
16             }
17         },30);
18     }

动画函数（添加回调函数、opacity和z-index）

 1 function animate(obj,json,fn){
 2         clearInterval(obj.timer);
 3         obj.timer = setInterval(function(){
 4             var flag = true; 
 5             for(var key in json){
 6                 var current = 0;
 7                 if(key == "opacity"){ //如果目标属性中有透明度
 8                     current = Math.round(parseInt(getStyle(obj,key)*100)) || 0;//获得的opacity属性值要先乘以100
 9                 }else{
10                     current = parseInt(getStyle(obj,key)); 
11                 }
12                 var step = (json[key] - current) / 10;  //计算每个属性值的变化量
13                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
14                 if(key == "opacity"){//判断传入的json中有没有opacity
15                     if("opacity" in obj.style){//判断浏览器是否支持opacity
16                         obj.style.opacity = (current + step) / 100;//非ie
17                     }else{
18                         obj.style.filter = "alpha(opacity = "+(current + step)*10+")"; //ie 支持滤镜 filter : alpha(opacity = 50);
19                     }
20                 }else if(key == "zIndex"){ //判断是否有zIndex
21                     obj.style.zIndex = json[key];//直接变成目标值
22                 }
23                 else{
24                     obj.style[key] = current + step + "px";
25                 }
26                 if(current != json[key]){//只要其中有一个属性不等于目标值，就不应该停止定时器
27                     flag = false;
28                 }
29             }
30             if(flag){  //  当flag为真时，停止定时器
31                 clearInterval(obj.timer);
32                 if(fn){   //判断是否存在回调函数，如果存在，定时器停止时，执行回调函数
33                     fn(); //执行回调函数
34                 }
35             }
36         },30);
37     }