function animation(tag,target) { var timer = null; timer = setInterval(function() { var currentDistance = tag.offsetLeft, step = (target - currentDistance) / 5;// 通过目标距离与当前距离的差除以5便达到了我们需要的变速运动，因为step每次定制器执行都要改变，所以放入定时器内 step = step > 0 ? Math.ceil(step):Math.floor(step);// 这里如果将currentDistance定时器外面声明可以不用写，如果放在定时器内声明，因为offsetLeft取整的特性，要对step进行取整 if(Math.abs(currentDistance - target) > Math.abs(step)) { currentDistance += step; tag.style.left = currentDistance + 'px'; }else { tag.style.left = target + 'px' clearInterval(timer); timer = null; } },17)
好了，一个轮播图需要的最基本的缓动函数完成了~
这里补充一个比较完整的缓动函数：它的功能更全面一点，可以同时更改多样式。
function perfectAnimate(tag, obj, fn) {// 传三个参数，运动的盒子，对象（可以传多个属性），回调函数（在执行完后可以再执行自定义的功能） clearInterval(tag.timer);// 这里将定时器作为tag标签的属性保存，可以多次调用函数清除上一个定时器。 tag.timer = setInterval(function () { var flag = true; for (var k in obj) { // 因为并不是所有属性都带px单位，所以这里进行判断分别设置 if (k == 'opacity') { var currentDistance = getStyle(tag, k) * 100, target = obj[k] * 100, step = (target - currentDistance) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); currentDistance += step; tag.style[k] = currentDistance / 100; } else if (k == 'zIndex') { tag.style[k] = obj[k]; else { var currentDistance = parseInt(getStyle(tag, k)) || 0, target = obj[k], step = (target - currentDistance) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); currentDistance += step; tag.style[k] = currentDistance + 'px'; } if (target != currentDistance) { flag = false // 只要还有属性没有运动完成，就不会清楚定时器 } } if (flag) { clearInterval(tag.timer) fn && fn();// 所有定时器走完，这里执行回调函数，短路操作避免不传回调函数也不会报错。 } }, 17) }
// 获取样式的兼容函数，上面的缓动函数的依赖 function getStyle(tag, attr) { if (tag.currentStyle) { return tag.currentStyle[attr]; } else { return getComputedStyle(tag, null)[attr]; } }