超详细，JavaScript动画组件实现

        动画对于前端来讲不是一个陌生的名次，简单的说就是一帧一帧的图片快速切换，切换的速度足够快速，

人的眼睛就看不出变化了。

        前端中实现动画的方式有很多种，JavaScript使用定时器可以实现，每隔多少秒重新绘制一下页面。

我们可以用setInterval方法来实现这一方式；HTML5的新特性和css3的新特性都同样支持实现动画，那么我们

先来看看如果用JavaScript来实现。

        先来看图片，逻辑和代码在下方。

逻辑如下：

一、建一个函数（不解释）

        1、建好之后肯定是要有参数的。第一个参数为obj，object是对象的意思，我们应该传递一个dom对象进来。第二个参数为target,代表我们需要来传递一个值来充当obj的目标位置。

        2、我们给传递进来的obj添加一个timer属性，他来保存一个方法setInterval，这个方法有两个参数，第一个用匿名函数来实现，第二个参数保存时间间隔（毫秒作为单位）【这里没有任何问题，固定用法】

        3、获得当前dom对象的offsetLeft，这里的offsetLeft指的是与上一级定位元素的左边距。以border为基准点。

        4、设置每一步的长度，这里为25。

        5、下面一行是一个三元运算符，step和-step。这里的意思是判断需要左移还是右移。当你的目标值在当值左侧，那就是current>target，就是-step。朝左边移动。

        6、之所以要进行下一步是因为每一步25，一步一步走过去，可能宽度不匹配。举例子，要让一个dom对象移动90px，每一步25，那么分别为0，25，50,  75，100;这样会导致移动90px失败。我们当然可以把step =30.这样子 0， 30， 60， 90。这样子美滋滋，但是既然叫做组件，那就意味着可以便捷的重复利用。所以我们来进行判断，当目标值与当前值得距离小于步长，我们就改变最后一步的距离，让它直接迈过去。

        7、一定要注意cleartInterval(obj.timer)；清除定时器，由于定时器一旦开启就会一直工作，虽然页面中我们看不出来变化，但是这样很多性能来处理没有必要的东西，我们应该有节流意识。

        8、设置属性obj.style.left这个表达式可以将css样式添加到行内样式中，为优先级最高的表达方式，保证可以渲染。

二、如何使用这个小“组件”。

        1、叫它组件有点浮夸，这个函数写到公共js文件里面，或者单独引入。使用时候，填写dom元素和目标target进去就可以了，左移右移无所谓的。

三、如何升级，让它功能更多。

        1、左右移动，已经实现。

        2、上下移动，将offsetLeft改为offsetTop即可。

        3、上下混着移动，按数学公式移动，这个需要花一点点时间改造，原理就是offsetLeft和offsetTop混合使用了。

四、注意事项，知识点。

        1、offsetLeft基于什么位置来确定值的。这个可以详细去查关于offsetLeft的资料，这里简单说一下，它是以自己的borderde左上角和自己的定位父级来测量的【定位父级，就是自己根据那个元素来定位的，不一定是html中写的父亲哦】可以用offsetParent来测试谁是定位父级。offsetParent  VS  parentNode   一个指的是定位父级，一个是亲生父级

/**
 * Created by lidy on 2018/6/5.
 */
function animate(obj,target){
    obj.timer = setInterval(function(){
        var current =obj.offsetLeft;
        var step = 25;
        step = current<target? step:-step;
//          每隔15毫秒，每步走25px,当最后一步不够25px的时候，
//          我们来进行一步到位的操作
        if(Math.abs(current-target)>=Math.abs(step)){
            current=current+step;
            obj.style.left =current+"px";
        }else{
//              相当于return
            clearInterval(obj.timer);
//              我们来进行一步到位的操作
             obj.style.left= target+"px";
        }
    },15);
}