function animate(obj, target) {clearInterval(obj.timer);//obj.timer = setInterval(function() {var timer = setInterval(function() {if (obj.offsetLeft >= target) {clearInterval(timer);}obj.style.left = obj.offsetLeft + 1 + 'px';}, 30);// 時(shí)間間隔，偏移距離可自行設(shè)置}//animate(obj,target);

緩動(dòng)效果

function animate(obj, target) {clearInterval(obj.timer);obj.timer = setInterval(function() {var step = (target - obj.offsetLeft) / 10;// 把我們步長(zhǎng)值改為整數(shù) 不要出現(xiàn)小數(shù)的問(wèn)題,//前進(jìn)往大取整Math.ceil，后退往小取整Math.floorstep = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft >= target) {// 停止動(dòng)畫(huà) 本質(zhì)是停止定時(shí)器clearInterval(timer);}obj.style.left = obj.offsetLeft + step + 'px';}, 30);}

總結(jié)

以上是生活随笔為你收集整理的简单动画函数封装及缓动效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。