原聲js做動畫判斷是否到達目標值導致的突兀問題

2022-03-06 16:03:49 字數 615 閱讀 2666

如題,什麼意思呢?

$('#box').animate()

這時寫好的動畫函式animate用法

上面起始值是200,步長13,目標值是200+400=600,那麼每次我都運動13,那麼他只運動到590然後再運動到603然後判斷並重新賦值到600,突兀吧?先看看我是怎麼判斷到達終點的

if((step>0&&target<=parseint(getstyle(element,attr)))||(step<0&&target>=parseint(getstyle(element,attr))))else

這個step只需要傳遞正值,函式會自動賦值正還是負,如果step>0這是正方向移動並且目標值<=現在的值那麼停止動畫並賦新的值,所以導致突兀

再看看改進的

//改了以後:又簡潔又好用啊

if(math.abs(target-parseint(getstyle(element,attr)))<=math.abs(step))else

只需要判斷math.abs(目標值減現在的值)是否小於等於math.abs(step)如果成立則停止 這樣當我運動到590時,會進入這個判斷然後下乙個動作就是600,就不那麼生硬啦!

css動畫是否會被js阻塞

下面舉乙個margin left移動的動畫下,啟動js阻塞動畫的效能圖表 上圖在執行kill方法之後明顯可以看到動畫停滯了2s後才繼續。然後再看看使用了transform作為動畫的元素 walkabout new school keyframes slide transform 50 to 下圖是執...

js判斷是否含有中文

第一種 exfcode 1functionischinese temp 2 第二種 exfcode 01functionischn str 02else 第三種 exfcode 01functionfuncchina 02else 第四種 exfcode 1functionischina s 2el...

js 判斷檔案是否存在

判斷客戶端檔案時,可以用 var fso,s filespec filespec c path myfile.txt fso new activexobject scripting.filesystemobject if fso.fileexists filespec s 檔案存在.else s 檔...