动画对于前端来讲不是一个陌生的名次，简单的说就是一帧一帧的图片快速切换，切换的速度足够快速，
人的眼睛就看不出变化了。
前端中实现动画的方式有很多种，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); }