畫面更新率,秒呈現的圖數,又稱為楨數。
- 現在電影FPS為24,電視常使用30FPS。
- 若是程式寫成的動畫需高於30FPS,若低於30FPS則會感覺不連貫感
- 電影與程式動畫之顯像原理不同,因此FPS需求不同。
電影呈像:
Display frame1
→
Display frame2
→
Display frame3
→
Display frame4
→
And So On ..
程式動畫呈像:
Render frame1
→
Display frame1
→
Render frame2
→
Display frame2
→
And So On ..
互動式動畫成像:
Get
initial
state
Render
frame
Apply
rules
Done?
→
yes
Display frame
↑______________________________| No
- 加入程式邏輯判斷,因此決定是否顯像,亦可加入邏輯與使用者互動。
Get
initial
state
→
Render
frame
→
Apply
rules
→
Done?
→
yes
Display frame
↑______________________________| No
程式動畫中FPS算法:
FPS若需要60
- 1s /60 Frame (每一frame 所需要的時間長度)
因此若是使用javascript程式來Render則:
function renderFrame(){
//繪製的程式碼
}
//繪製的程式碼
}
window.setInterval(drawFrame, 1000/60);
如此在javascript環境中就可以每1000/60秒繪製一個圖像。
note:因為setInterval所使用的時間單位是ms因此使用1000,因為1000ms=1s。
- int setInterval(function , time ms)。
- setInterval這個funciton會依設定的時間值來呼叫所傳入的function。
- setInterval被調用時會回傳一個timerId這個id是一個int,可用來給予 clearInterval API來做清除interval的動作。
參考資料:
參考書目: