課程
/前端開(kāi)發(fā)
/JavaScript
/JS動(dòng)畫(huà)效果
為什么向右移動(dòng)時(shí)是向上取整,然后向左移動(dòng)是向下取整?
2016-02-17
源自:JS動(dòng)畫(huà)效果 3-1
正在回答
比如移動(dòng)到的目標(biāo)值是300px,通過(guò)300減去當(dāng)前的坐標(biāo)0,再除以20,結(jié)果是15,div以15的速度向右移動(dòng),這是第一次定時(shí)器執(zhí)行的結(jié)果。30毫秒后再執(zhí)行一次,目標(biāo)移動(dòng)到了15,通過(guò)300減去當(dāng)前坐標(biāo)15結(jié)果是285,285除以20結(jié)果的14.25,這樣一次次運(yùn)算下來(lái),速度越來(lái)越小,比如速度是15、14.25、12.73、7.2。。。。這樣的。
由于數(shù)值設(shè)置的原因,div移動(dòng)到一定px后,進(jìn)行相減再除20的運(yùn)算后會(huì)出現(xiàn)小數(shù),比如0.75,比如這時(shí)div移動(dòng)到了290,程序里寫(xiě)到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而瀏覽器是不允許出現(xiàn)小數(shù)的,會(huì)把0.75去掉,那么div的left就成了290,下次執(zhí)行時(shí)div的left是290,算出來(lái)速度還是0.75,瀏覽器又省略了小數(shù),結(jié)果就是div停在了290px,到不了目標(biāo)點(diǎn)300。
為了解決這個(gè)問(wèn)題,Math.ceil就派上用場(chǎng)了,它會(huì)把0.75向上取整為1,這樣div就又可以向右移動(dòng)1px了,這時(shí)里目標(biāo)點(diǎn)很近了,就以1的速度慢慢到達(dá)300,然后停止定時(shí)器。同理,向左移動(dòng),計(jì)算出來(lái)的速度會(huì)是負(fù)值比如-0.75,就用Math.floor把速度向下取整為-1,這樣,就避免了卡在某個(gè)像素點(diǎn)不動(dòng)的問(wèn)題。Math.floor還是ceil這些運(yùn)算的目的不是要把speed取到0,而是要讓瀏覽器可以繼續(xù)運(yùn)算下去,然后用我們的if條件判斷,等于itarget了就結(jié)束運(yùn)動(dòng)。
DOMOHAHA 提問(wèn)者
qq_風(fēng)_54
qq_風(fēng)_54 回復(fù) 慕容6759333
不是還是負(fù)的嗎?offsetLeft
因?yàn)橄蛴乙苿?dòng)offsetLeft為正值,如果向下取整就會(huì)大于目標(biāo)值,不符合條件,向左同理
舉報(bào)
通過(guò)本課程JS動(dòng)畫(huà)的學(xué)習(xí),從簡(jiǎn)單動(dòng)畫(huà)開(kāi)始,逐步深入各種動(dòng)畫(huà)框架封裝
2 回答向上取整和向下取整
2 回答speed向上取整和向下取整
1 回答為什么使用的時(shí)向上取整,得到的確實(shí)向下取整?
2 回答為什么speed大于0向上取整,小于0向下取整?
1 回答老師講的三元表達(dá)式判斷速度是向上取整還是向下取整的問(wèn)題?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢(xún)優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-02-22
比如移動(dòng)到的目標(biāo)值是300px,通過(guò)300減去當(dāng)前的坐標(biāo)0,再除以20,結(jié)果是15,div以15的速度向右移動(dòng),這是第一次定時(shí)器執(zhí)行的結(jié)果。30毫秒后再執(zhí)行一次,目標(biāo)移動(dòng)到了15,通過(guò)300減去當(dāng)前坐標(biāo)15結(jié)果是285,285除以20結(jié)果的14.25,這樣一次次運(yùn)算下來(lái),速度越來(lái)越小,比如速度是15、14.25、12.73、7.2。。。。這樣的。
由于數(shù)值設(shè)置的原因,div移動(dòng)到一定px后,進(jìn)行相減再除20的運(yùn)算后會(huì)出現(xiàn)小數(shù),比如0.75,比如這時(shí)div移動(dòng)到了290,程序里寫(xiě)到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而瀏覽器是不允許出現(xiàn)小數(shù)的,會(huì)把0.75去掉,那么div的left就成了290,下次執(zhí)行時(shí)div的left是290,算出來(lái)速度還是0.75,瀏覽器又省略了小數(shù),結(jié)果就是div停在了290px,到不了目標(biāo)點(diǎn)300。
為了解決這個(gè)問(wèn)題,Math.ceil就派上用場(chǎng)了,它會(huì)把0.75向上取整為1,這樣div就又可以向右移動(dòng)1px了,這時(shí)里目標(biāo)點(diǎn)很近了,就以1的速度慢慢到達(dá)300,然后停止定時(shí)器。
同理,向左移動(dòng),計(jì)算出來(lái)的速度會(huì)是負(fù)值比如-0.75,就用Math.floor把速度向下取整為-1,這樣,就避免了卡在某個(gè)像素點(diǎn)不動(dòng)的問(wèn)題。
Math.floor還是ceil這些運(yùn)算的目的不是要把speed取到0,而是要讓瀏覽器可以繼續(xù)運(yùn)算下去,然后用我們的if條件判斷,等于itarget了就結(jié)束運(yùn)動(dòng)。
2016-02-17
不是還是負(fù)的嗎?offsetLeft
2016-02-17
因?yàn)橄蛴乙苿?dòng)offsetLeft為正值,如果向下取整就會(huì)大于目標(biāo)值,不符合條件,向左同理