原生javascript动画

在我们工作中，js动画用的最多的可能就是：网站的滚动banner图片和电商网站的分层。这些动画原理是左右或上下移动位置的改变，要完成这些改变，我们需要了解动画元素的三大位置系列：offset、scroll和client。

offset的内容

offset是指html中定位了的元素，相对于它同样定位了的父级元素才存在的。如果一层一层往上面找，父级元素都没有定位，则就直接找到body。offset返回的是数字（number），并且是只读的，相对而言的style.left/style.top 则返回的字符串（就是带有px单位的），可以进行修改。我们在做动画的时候，最多的就是将offsetLeft赋值给style.left，要注意将加上单位‘px'。

<script>
 obj.style.left = obj.offsetLeft + 'px';
</script

 首先我们来看看和offset有关的属性：offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent

offsetWidth/offsetHeight  获取元素宽高，包括width/height + 2*border + 2* padding

offsetLeft / offsetTop  获取元素相对于父元素的左/上距离，父元素必须是定位的。如果父元素没有定位，则直接相对于body元素

offsetParent  找到当前元素的定位父元素，没有则就是body元素

 scroll的内容

和scroll相关的属性都是在触发onscroll事件后才会存在的，所以和scroll相关的内容都是在document.onscroll里面。

scrollWidth / scrollHeight  滚动元素的宽/高  width / height + 2* padding

scrollTop / scrollLeft   滚动条移动的距离（也就是滚动后隐藏的部分）

window.scrollTo（x，y）移动滚动条到什么坐标，一般设置为想要的左右

 但是由于DTD的存在（html5后就没有DTD了）和IE浏览器的bug，使得scrollTop与scrollLeft存在了兼容性问题，最好是能封装一个函数解决兼容性问题。

<script>
    function scroll() {
  // 火狐、google、IE9+支持
  if (window.pageYOffset !== undefined) {
    return {
      top: window.pageYOffset,
      left: window.pageXOffset
    }
    // 存在DTD的情况，ie低版本支持
  } else if (document.compatMode == "CSS1comPat") {
    return {
      top: document.documentElement.scrollTop,
      left: document.documentElement.scrollLeft
    }
  } else {
    // 不存在DTD的情况，google支持
    return {
      top: document.body.scrollTop,
      left: document.bodyscrollLeft
    }
  }
}
</script>

 client的内容

client主要有clientX与clientY两个属性，是js事件event的属性，用来判断事件发生时，鼠标距离浏览器左上角的距离。一般做的动画是和鼠标事件相关的，电商的放大镜效果和鼠标跟随效果。

js常用的三种动画：闪动、匀速运动、缓动

闪动动画就是直接设置值，比如left = 100，width = 100 ， top = 100 ，height = 100等。这种动画就没有过渡效果，直接跳到目标状态。

<script>
  obj.onclick = function animate(){
     obj.style.left = 200 + 'px';
 }
</script>

 匀速运动是设置一个步长（step）后，然后在定时器里面改变状态，达到目标位置结束。

<script>
  function animate(){
    var timer = null;
    timer = setInterval(function(){
      var target = 400;
      var step = target > obj.offsetLeft ? 10 : -10;
      obj.style.left = obj.offsetLeft + step + 'px';
    },25);
    if(Math.abs(target - obj.offsetLeft) < Math.abs(step)){
      obj.style.left = target;
      clearInterval(timer); 
     }
  }
</script>

 缓动运动是设置一个会改变的步长（step），然后在定时器里面改变状态，知道步长变成0结束，但根据改变只会接近0而不会变成0，所以需要使用Math对象的ceil与floor方法。

<script>
  var timer = null;
  function animate(){
    timer = setInterval(function(){
      var target = 400;
      var step = target > obj.offsetLeft ? Math.ceil((target - obj.offsetLeft)/10) : Math.floor((target-obj.offsetLeft)/10);
       obj.style.left = obj.offsetLeft + step + 'px';
    },25);
    if(Math.abs(target - obj.offsetLeft) < Math.abs(step)){
        obj.style.left = target;
        clearInterval(timer);
      }
  }
</script>