第一種思想：
實(shí)現(xiàn)一個(gè)勻速運(yùn)動(dòng)旦部，在指定時(shí)間內(nèi)完成動(dòng)畫: 計(jì)算出總距離/總時(shí)間，根據(jù)總距離和總時(shí)間求出對(duì)應(yīng)的步長(zhǎng)(每10ms走一步的話走多遠(yuǎn))。
var maxLeft = utils.win('clientWidth') - oBox.offsetWidth;
var duration = 2000;
var interval = 10;
var step = (maxLeft / duration) * interval;
var timer = window.setInterval(function () {
var curLeft = utils.css(oBox, 'left');
curLeft += step;
utils.css(oBox, 'left', curLeft);
if (curLeft >= maxLeft) {
clearInterval(timer);
return;
}
}, interval);
第二種思想：
實(shí)現(xiàn)一個(gè)勻速運(yùn)動(dòng): 在制定時(shí)間內(nèi)完成動(dòng)畫 -> 自己寫一個(gè)動(dòng)畫公式，根據(jù)當(dāng)前走的時(shí)間t窃款、總時(shí)間d、起始位置b牍氛、總距離c晨继，計(jì)算出當(dāng)前元素應(yīng)該在的位置，讓當(dāng)前的元素運(yùn)動(dòng)到這個(gè)位置即可搬俊。
function Linear(t, b, c, d) {
return c * t / d + b;
}
var oBox = document.getElementById('box');
var target = utils.win('clientWidth') - oBox.offsetWidth,
begin = utils.css(oBox, 'left'),
change = target - begin; // 總距離
var duration = 2000;
var time = 0;
// (time / duration) * change + begin; // 走了多遠(yuǎn)+開始位置=當(dāng)前位置
var timer = window.setInterval(function () {
time += 10;
if (time >= duration) {
utils.css(oBox, 'left', target);
clearInterval(timer);
return;
}
var curPosition = Linear(time, begin, change, duration);
utils.css(oBox, 'left', curPosition);
}, 10);
