js封装简单的动画函数【左右上下移动】

0.起步

让页面动起来是交互式页面的一般要求，势必使用css3的animation和js操作元素位置实现，但是css3不是所有的浏览器都支持我们就先使用js实现【好像css3动画确实简单许多，毕竟可以直接使用left，top属性】

1.原理

让元素动起来，也就是移动他的位置，那么怎么描述元素在页面上的位置

上图看到offsetLeft与top
我们可以使用
cates.getBoundingClientRect()获得一个数组

{
	bottom: 762.4000244140625//元素底边框到页面顶部距离 相当于 height+top
	height: 762.4000244140625
	left: 0
	right: 868 //元素右边框到页面左边距离 相当于width+left
	top: 0
	width: 868
	x: 0 //元素左上角点x坐标
	y: 0
}

当然还有两个方法获取位置

1. 元素.style.left 但是这个只能获取<div style="left:300px"></div>的left如果元素left卸载css文件中就无法获取，如果获取了返回300px 必须parseInt处理
2. 元素.offsetLeft/offsetTop 这个和数组的left、top一样只不过数组方式获取更为全面还有宽高

本次封装动画函数核心 就是获取当前元素的left top位置信息 使用定时器不断修改器left top达到移动元素目的

2.实现

参数列表:obj 移动对象,distance移动距离,time移动总耗时,direction移动方向[当前位置向 left\right\top\bottom])
就是自订元素向上下左右那边移动 移动多远 移动多少时间 所以很简单！

//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// 移动函数 move
// obj 移动对象,distance移动距离,time移动总耗时,direction移动方向[当前位置向 left\right\top\bottom])
function move (obj,distance,time,direction){

  var body = document.body;//用于居中的情况 不是所有的body都是默认占满全屏 那么下面赋值top一定会偏移需要减去body的偏移
  var bodyLeft = body.getBoundingClientRect().left;
  distance = Math.abs(distance);
  time = Math.abs(time);
  time = time==0?1:time;//time是0就运动1s
  
  //获取当前元素的left top
  var posArr = obj.getBoundingClientRect();
  obj.style.top = posArr.top+"px";
  obj.style.left = posArr.left-bodyLeft+"px";

  //将时间分为100份
  var aveSpeed = distance/time/100;
  var curTop = parseInt(obj.style.top);
  var curLeft = parseInt(obj.style.left);
  var old_Distance = distance;
  var oldCurTop = curTop;//最初元素top
  var oldCurLeft = curLeft;//最初元素left

  //对不同移动方向设置定时器
  if(direction=="right"){
    var timer = setInterval(function () {
      if(distance<=0){
        obj.style.left = (oldCurLeft+old_Distance+"px");//如果遇到除不尽的情况最后一把就直接到最终位置所以要存//最原始的位置和目标距离
        clearInterval(timer);
      }else{
        curLeft = parseInt(obj.style.left);
        obj.style.left = (curLeft+aveSpeed+"px");
        distance-=aveSpeed;
      }
    },10);
  }else if(direction=="top"){//向上
    var timer = setInterval(function () {
     
      if(distance<=0){
        obj.style.top = (oldCurTop-old_Distance+"px");
        clearInterval(timer);
      }else{
        curTop = parseInt(obj.style.top);
        obj.style.top = (curTop-aveSpeed+"px");
        distance-=aveSpeed;
      }
    },10);
  }else if(direction=="bottom"){//向下
    var timer = setInterval(function () {
      if(distance<=0){
        obj.style.top = (oldCurTop+old_Distance+"px");
        clearInterval(timer);
      }else{
        curTop = parseInt(obj.style.top);
        obj.style.top = (curTop+aveSpeed+"px");
        distance-=aveSpeed;
      }
    },10);
  }else{//默认向左
    var timer = setInterval(function () {
      if(distance<=0){
        obj.style.left = (oldCurLeft-old_Distance+"px");
        clearInterval(timer);
      }else{
        curLeft = parseInt(obj.style.left);
        obj.style.left = (curLeft-aveSpeed+"px");
        distance-=aveSpeed;
      }
    },10);
  }
}

下一步打算添加运动函数 linear/ease/ease-in/ease-out/ease-in-out

谢谢