封装缓动动画

在做轮播图或者返回顶部功能之前，我们可能会用到动画以实现页面切换效果的流畅性，带来更好的用户体验。
下面贴一段封装好的缓动动画函数。

/**缓动动画封装
 * @param: obj:做动画的元素对象
 * @param: target:目标位置
 * @param: callback：回调函数，用于动画执行完毕以后运行
 */
function animate(obj, target, callback) {
			//清除之前存在的该对象定时器消除影响
            clearInterval(obj.timer);
            //给元素对象obj添加一个timer属性，这个timer属性的返回值是计时器
            obj.timer = setInterval(function() {
            	//定义step，即元素在10毫秒内运动的距离，类似于速度
                var step = (target - obj.offsetLeft) / 10;
                //这里定义step>0时元素向右移动，step<0时元素向左移动
                //由于获取step的公式是除法，必定能够获得小数，因此需要取整
                //元素向右快接近目标距离时，当step趋近于0+，向上取整保证最小移动距离是1px
                //元素向左快接近目标距离时，当step趋近于0-，向下取整保证最小移动距离是1px
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //动态设置obj.style.left实现元素的动态移动
                obj.style.left = obj.offsetLeft + step + 'px';
                //边界检测，因为元素最终精确到达目标距离，因此判断obj.offsetLeft 和target是否相等，若相等清除obj的计时器，同时调用存在的callback回调函数
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    callback && callback();
                }
            }, 10);
 }