JS學習 基礎運動

2022-08-27 20:42:15 字數 4375 閱讀 2750

多個物體用同乙個函式時,函式裡定義的定時器應該要每個物體對應乙個定時器名稱,不然會導致未完成運動就被關閉了,因為定時器名稱一樣,而開啟定時器前會清除一下。

obj.timer
startmove(this, 'width', 200, 10);

startmove(this, 'height', 200, 10);

下面的運動會清除掉上面的定時器,因為定時器開啟前會先清除一下,所以這樣不行。應該通過json傳入資料,for in遍歷。

要所有值都到了目標點才能清除定時器

解決方案

var odiv1 = document.getelementbyid('div1');

odiv1.onclick = function() , 10); //////json

}function startmove(obj, json, ispeed) else

if (icur != itarget) else }}

//在for in迴圈外來看下,所有屬性是不是都到了目標點

if (ibtn)

}, 30);

}function css(obj, attr) else

}

越接近目標點,速度就越小

框架:

速度要在定時器裡定義

速度=(目標值-當前值)/縮放係數

速度取整(保證能達到目標點)

停下條件:到達目標點

基本框架和前面的運動一樣,只是速度ispeed的處理不一樣

json同樣可以傳入多值,都有緩衝效果,像多值同時運動一樣

function startmove(obj, json, fn)  else 

//不同的運動形式主要速度演算法不一樣,其他部分都差不多

ispeed = ( itarget - icur ) / 8;

//這裡除/乘小數/減都可以,主要處理是這裡,可以很好的控制停下的點

ispeed = ispeed > 0 ? math.ceil(ispeed) : math.floor(ispeed);

//向上取整和向下取整

//取整是因為offsetleft是js解發布來的,會四捨五入,當乘或除到ispeed小於0.5時就達到不了目標點

//看下表解釋

if (icur != itarget) else }}

if (ibtn)

}, 30);

}function css(obj, attr) else

}

offsetleft

ispeed

style.left

4950.625

495.625

4960.5

496.5

4970.375

497.375

4970.375

497.375

497.375後一直四捨五入,所以得出速度也一直是0.375,導致停在497.375的位置。

offsetleft是js解釋,是計算後的值,會四捨五入並不帶單位

style.left是css解釋,會認小數的

在用js去設定css樣式的時候:在同乙個**塊中,有些css樣式的設定的許可權(優先順序)要高於其他的樣式

解決方案:不放在同一**塊略略

略如果乙個頁面有幾十張,都是用src載入進去會導致開啟頁面慢,頁面未載入完成,js也沒有動作。

可以用陣列把所有位址存起來,只用乙個src,使用者點下一張時把src位址換一下。這個可以解決一次載入多個src的問題,但當使用者網路慢或者一張太大,會導致按下一張後要隔一定時間才載入出來。

最好方法應該是先把預載入

在頁面剛開啟的時候,我們去載入第一張,然後頁面載入完成以後,在使用者看的時間內,去載入後面的內容,那麼我們必須有個工具 ->image物件

new image()

var oimage = new image();
屬性:

onload: 當資源載入完成的時候觸發

onerror: 當資源載入失敗的時候觸發

var icur = 0;//記錄第幾張

function xunlei()

}}//當第0張載入完成後,開始載入第一張,一直到全部載入完成,

//載入完成以後的資源被儲存到了瀏覽器的快取資料夾裡面,當需要用這個url時,照常賦值給src,它會直接從緩衝檔案裡讀取

速度 +/-= 加速度

框架:

速度要是全域性變數

速度 += (目標點 - 當前值)/係數;

速度 *= 摩擦係數;

係數最適取值:6 7 8

摩擦係數最適取值:0.7 0.75

停下條件:速度足夠小,距離目標點足夠近

if( math.abs(速度)<=1 && math.abs(目標點 - 當前值offset)<=1 )
應用:彈性選單

和緩衝運動區別:

緩衝運動框架

速度要在定時器裡定義

速度=(目標值-當前值)/縮放係數

速度取整

停下條件:到達目標點

用兩行一樣的歌詞,疊在一起,上面一行是滾動的,下面行固定

當寬高出現負值時,非標準ie會報錯

解決方案:有可能出現負值的時候,先判斷是否 < 0 ,若是小於零則賦0;

碰撞運動: 首先找到碰撞的臨界點 , 再確定運動的方向 , 然後去改對應的速度(速度取反)

應用:浮動廣告

速度版的運動框架在老版本的瀏覽器中,切換到別的頁面時,定時器會變得緩慢,導致多個定時器時會時間不一致,在新版本的瀏覽器中已經修復了這個問題。

解決方案

window.onfocus = function();

//在切換頁面時停止定時器,切換回來時在開定時器

//方法不算很好,onfocus、onblur可能還有相容性問題

window.onblur = function();

這個問題在時間版運動框架中也有但是時間版中控制物件位置的t在切換回頁面時會馬上到時間了,所以位置也一瞬間從原來的位置跳到目標位置了;

與經典startmove的區別

優點:經典版同時移動兩個值的時候,如果兩個值移動的距離不一樣,會導致乙個快乙個慢的問題,時間版運動框架就沒有這個問題

乙個來自flash的運動演算法

jq中也在使用tween演算法

tween公式:4個引數

還有幾個運動有a,p的值,這是用來控制幅度之類的,不寫也可以,本身有預設值;

通過( new date() ).gettime()獲取當前時間

var starttime = now(); //放在定時器外,是2023年到現在的毫秒時間

var changetime = now();//放在定時器內

var t = d - math.max(0,starttime - changetime + d);

//d是持續時間

- changetime + d)得到d-0的時間段

// d - math.max(0,starttime - changetime + d)得到0到d的時間段

//通過上面的方法獲取到t的值

function now()

包含的運動有:

JS運動 運動基礎(緩衝運動)

1 手風琴效果 分析 2 基礎緩衝運動 接下來取整 原因 px為計算機識別的最小單位,1px無法再往下拆分。所以css如果取值200.5px,解析時計算機會自動將其改為200px 注意 這裡的數值並沒有四捨五入計算,200.9px最後依然是200px 速度不能是小數,需要取整,所以接下來進行取整 因...

運動基礎 學習筆記

執行效果 解決方案 新增if判斷條件,達到特定位置時關閉定時器 執行效果 1 不可行方案 修改定時器間隔為300ms 存在問題 物體運動卡頓 執行效果 2 解決方案 修改odiv.style.left odiv.offsetleft 10 px 中的 10 執行效果 原因 這裡雖然在offsetle...

js運動之緩衝運動

裡面核心就是讓他的速度與距離成為正比 距離大,速度大 距離小,速度小 距離 目標 原始 緩衝運動一定要取整 先來個例子 id div1 div type button value 緩衝運動 onclick startmove div1 style var timer null function st...