描述
增量時(shí)間是根據(jù)上一幀更新游戲以來經(jīng)過的時(shí)間袱瓮，用于動(dòng)態(tài)的更新游戲場(chǎng)景渲染筛谚。
基于時(shí)間的動(dòng)畫
在早期游戲開發(fā)中族操，一些游戲的場(chǎng)景移動(dòng)速度依賴于CPU的運(yùn)行速度鸠窗，游戲場(chǎng)景將每幀在屏幕上移動(dòng)一定數(shù)量的像素妓羊。如果CPU只能以每秒15幀（FPS）運(yùn)行游戲，并且游戲場(chǎng)景被代碼定義為每秒向左移動(dòng)10個(gè)像素稍计，則游戲場(chǎng)景將以每秒150個(gè)像素向左移動(dòng)躁绸。但是，如果性能更好的處理器可以每秒60幀運(yùn)行游戲呢臣嚣？游戲場(chǎng)景將以600像素移動(dòng)净刮！怎么能解決這個(gè)問題呢？
解決這個(gè)問題的關(guān)鍵是記錄自上一幀以來經(jīng)過的時(shí)間硅则。這個(gè)時(shí)間通常叫做增量時(shí)間（deltaTime）淹父。只要我們拿到了增量時(shí)間，我們就可以通過使用下面的公式計(jì)算出我們的游戲場(chǎng)景應(yīng)該移動(dòng)此幀的距離：
const distance = speed * deltaTime
以上三個(gè)變量：
- distance：移動(dòng)當(dāng)前幀的像素?cái)?shù)
- speed：每秒像素的速度
- deltaTime：上一幀以來經(jīng)過的時(shí)間
示例：
const APP.core = {
frame() {
APP.core.setDelta()
APP.core.update()
APP.core.render()
APP.core.animationFrame = window.requestAnimationFrame(APP.core.frame)
},
setDelta() {
APP.core.now = Date.now()
APP.core.delta = (APP.core.now - APP.core.lastTime ) / 1000 // 上一幀以來經(jīng)過的秒數(shù)
APP.core.lastTime = APP.core.now
},
update() {
// 更新值
// var distance = 100 * APP.core.delta
// APP.thing.x += distance
},
render() {
// 渲染更新
}
}
