动画函数的基本实现

1.预备知识

1. 只有通过定位我们才能实现动画的效果，我们要遵循“子绝父相”的基本思路来实现css
2. offsetLeft是获取元素相对带有定位的父元素的左边框的偏移量，而且是只能获取，不能改写，而且获取的数值是不带单位的
3. 要改写离定位父元素的左边框的偏移量，应该是通过重新对这个元素的style中的left进行赋值
4. 我们如果采用缓动效果让其缓慢停下，我们采用的是，步长公式=（目标值-现在的位置）/10，但是由此会带来一个问题是会出现小数的情况，我们做以下的规定，如果步长>0，向上取整；步长<0，向下取整
5. 如果同时开启多个定时器，我们需要清除掉之前的定时器，这个时候如果我们给其取名为timer，那么所有的定时器都是这个名字，不好区分，我们采用对象的属性来实现。

2.进行封装

IPO：
I：输入要运动的子元素的对象obj，以及到达的目标值target，还有一个回调函数名callback【这个回调函数可能不存在，因此在后期的时候需要做判断】

P:（1）清除定时器 （2）设置步长 （3）移动距离 （4）判断是否到达目标值 到达之后清除定时器 并且如果有回调函数就调用回调函数

O:无输出

function animate(obj, target, callback) {
  clearInterval(obj.timer)
  obj.timer = setInterval(function () {
    //获取步长
    var step = (target - obj.offsetLeft) / 10
    step > 0 ? Math.ceil(step) : Math.floor(step)
    if (obj.offsetLeft >= target) {
      clearInterval(obj.timer)
      if (callback) callback()
    }
    obj.style.left = obj.offsetLeft + step + 'px'
  }, 30)
}