小动画函数封装

为了让元素在某个边界内运动，我们将代码封装以便下次使用；

目标：让网页中的元素从左到右边移动

前提条件：假定我们的大盒子的calss是box，我们的小盒子的class是smallbox；

步骤：

1.先要获取到元素（这里使用let）

let box_ = document.querySelector(".box");

let small_box_ = document.querySelector(".smallbox");

notice:注意，这里还可以写其他选择元素的方法；（ps：一切为了兼容）

2.获取到元素的属性值

let box_width = box_.clientWidth; //获取大盒子的width；

let small_box_left =  small_box_.setoffLeft;//获取到小盒子距离最近的祖先定位元素的距离

let small_box_width  = small_box_ .clientWidth;  //获取小盒子的width；

//根据实际问题来获取这些属性值,这个时候我们的小盒子的路程其实就是大盒子的宽度减去小盒子的宽度

let temp =   box_width  -  small_box_width  ;//设置变量保存小盒子的路程；

let speed = 5 ;//设置一个速度；

var left = _small_box.style.left;//获取小盒子的left值

var sum = 0 ;//用来存储运动的距离

3.设置定时器来让元素自动移动

//这里注意人眼对于的图像的接收是有一定的限度的，当图像的速度快到一秒24张的时候，图像的就是连贯的，所以这里取用1000/60

let timer = setInterval（function（）{

sum += speed ;//运动根据速度变化

if(sum >= temp){//如果sum的值大于temp那就说明小盒子已经超出大盒子

left = temp +  small_box_left +"px";//那就永远的将小盒子固定死

clearInterval(timer)；//清除定时器

}

left  = sum + small_box_left  +"px";//否则，小盒子继续移动

}，1000/60）；

//说明：这里的代码没有经过运行，可能会存在bug，所以可以用来理解思路，其实获取元素的left这些属性值还有很多，还有就是，让盒子移动的方法也很多，下面我们来封装一个函数；

/*
 *函数作用：获取元素属性值函数
 *函数名：getattr()
 *参数：element元素，attr属性名
 *返回值：元素属性值
 */
 function getattr(element,attr){
//获取元素的 属性值
 return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr];//三目运算符
 }

/*
 *函数作用：实现元素动画
 *函数名：animate()
 *参数：element元素，attr属性名，time时间，fn后续动画执行函数
 *返回值：无
 */
 function animate(element,option,time,fn){
 clearInterval(element.timer);//清除元素带着的定时器
 var start = {};//获取元素运动开始前的状态
 var range = {};//获取元素运动结束后的状态
 //获取过程
 for(let attr in option){ console.log(attr);
 // debugger;
 //获取元素运动开始前的状态
 start[attr] = parseFloat( getattr(element,attr));
 //计算元素结束时候的状态
 range[attr] = option[attr]-start[attr]; }
 // console.log(start);
 // console.log(range);
//元素运动前的时间
 var startTime = Date.now();
 //元素移动定时器
 element.timer = setInterval(function(){
 var currTime = Date.now();
//获取定时器每运动一次的时间
 var elapsed = currTime - startTime;
//获取时间差
 elapsed = Math.min(elapsed,time);
//为保证元素不跑出边界，取最小值
 // console.log(time);
 // console.log(elapsed);
 for(var attr in option){
 var res = elapsed*range[attr]/time + start[attr];
//存储计算所得的距离差值
 element.style[attr] = res + (attr === "opacity"?"":"px");
//改变元素的属性值,判断该属性是否是opacity
 }
 if(elapsed === time){//如果时间相等，则清除定时器
 clearInterval(element.timer);
 fn && fn();
 }
 },1000/60); }

相信这里的注释会让你看的懂，但是还是要说明：

这里实现的函数封装：

getattr（）：这个函数是为了获得元素的属性值，好多时候利用element.style无法获得，是因为外部的一些css代码没有办法获取到；所以这个时候就要用到window.getComputeStyle()这个window对象的方法，但是这个方法具有兼容性问题，也就是ie9以下的浏览器不支持，所以这个时候就要判断window对象是否含有这个对象

window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr]; //如果支持就使用 getComputedStyle 方法返回元素的属性值，否则就使用 element.currentStyle 返回元素的返回值

animate （）：这个函数最大的亮点就是将元素的属性放在对象里面进行操作

fn && fn();  //利用了短路运算符，来判断是否传入了后续的动画效果

注意：这里的函数不支持bg颜色的改变