描述

增量時(shí)間是根據(jù)上一幀更新游戲以來經(jīng)過的時(shí)間，用于動態(tài)的更新游戲場景渲染。

基于時(shí)間的動畫

在早期游戲開發(fā)中，一些游戲的場景移動速度依賴于CPU的運(yùn)行速度，游戲場景將每幀在屏幕上移動一定數(shù)量的像素。如果CPU只能以每秒15幀（FPS）運(yùn)行游戲，并且游戲場景被代碼定義為每秒向左移動10個(gè)像素，則游戲場景將以每秒150個(gè)像素向左移動。但是，如果性能更好的處理器可以每秒60幀運(yùn)行游戲呢？游戲場景將以600像素移動！怎么能解決這個(gè)問題呢？

解決這個(gè)問題的關(guān)鍵是記錄自上一幀以來經(jīng)過的時(shí)間。這個(gè)時(shí)間通常叫做增量時(shí)間（deltaTime）。只要我們拿到了增量時(shí)間，我們就可以通過使用下面的公式計(jì)算出我們的游戲場景應(yīng)該移動此幀的距離：

const distance = speed * deltaTime

以上三個(gè)變量：

• distance：移動當(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() {
 // 渲染更新
 }
}