2012年9月20日 星期四

FSP 畫面更新率 與 動畫原理解說

FPS  (Frames Per Second )
畫面更新率，秒呈現的圖數，又稱為楨數。
  • 現在電影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


程式動畫中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的動作。

參考資料：
參考書目：
於

沒有留言:

張貼留言