1.动画实现原理
核心原理：通过定时器 setInterval() 不断移动盒子位置
实现步骤：
1.获得盒子当前位置
2.让盒子在当前位置加上1个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器的条件（当盒子到达指定位置，就清除定时器）
5.注意此元素需要添加定位，才能使用 element.style.left
2.动画函数封装（提高效率）
函数需要传递2个参数，动画对象 和 移动到的距离
function animate( obj, target ){ } // obj 目标对象( div,span 实现动画效果的元素) target 目标距离
animate(div,500); //函数调用
3.给不同对象添加不同的定时器（优化）
问题1：
1.如果多个元素都使用动画函数，每次都要 var 声明定时器（变量声明只要有val 就会在内存中新开辟一个空间），浪费内存资源。
2.每次调用函数，声明的定时器名都是一个，这样会有歧义。
核心原理：
JS 是一门动态语言，可以很方便的给当前对象添加属性。
function animate( obj, target ){
// var timer = setInterval(function(){},100); // 把定时器给变量，多个会导致内存增加 不建议
obj.timer = setInterval(function(){},100); // 对象本来就存在内存中，给对象添加属性
}
问题2：
当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多定时器
解决方案：
让元素只要一个定时器执行，在定时器执行之前，先清除以前的定时器，只保留当前的一个定时器执行
function animate( obj,target ){
// 执行 定时器 前，先清除以前的定时器
clearInterval( obj.timer );
obj.timer = setInterval(function(){
obj.style.left = obj.offsetLeft + 1 + 'px' ;
},100);
}
4.缓动动画实现原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1.让盒子每次移动的距离慢慢变小，速度慢慢落下来
2.核心算法：步长 =（目标位置 - 现在的位置） / 10 做每次移动的距离 // 10 可以更改
3.停止的条件是：让当前盒子位置等于目标位置就停止定时器
4.注意步长值需要取整（如果是正值，则步长往大了取整 如果是负值，则步长往小了取整）
function animate( obj,target ){
clearInterval( obj.timer );
obj.timer = setInterval(function(){
var step =( target - obj.offsetLeft ) / 10; // 步长公式写在 定时器里面
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 把步长的值改为整数 不要出现小数问题
obj.style.left = obj.offsetLeft + step + 'px' ;
},30);
}
匀速动画 ：盒子当前的位置 + 固定的值
缓动动画： 盒子当前的位置 + 变化的值（目标值 - 现在的位置 ）/ 10
5.动画函数添加回调函数
回调函数写的位置：定时器结束的位置。
function animate( obj,target , callback ){ //callback 回调函数
obj.timer = setInterval(function(){
var step =( target - obj.offsetLeft ) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if( div.offsetLeft >= target ){
// 停止动画，本质是停止定时器
clearInterval（obj.timer）；
// 动画结束后，执行回调函数
if( callback ){
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px' ;
},30);
}
animate( div , 500 , function(){
// 在定时器结束后 执行的内容
})
6.总结
可以把动画函数写到一个js文件中，以后使用时，直接调用 animate 函数就可以