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的動作。

參考資料:
參考書目:

沒有留言:

張貼留言