如何用Dart和網絡以60fps的速度驅動動畫循環？

Question

如何在Dart web應用程序中以60fps的速度驅動動畫循環或遊戲循環？

Answer 1

使用window.animationFrame，傳統的window.requestAnimationFrame未來的表弟。

Dart已經轉向使用Future和Stream作爲更多面向對象的方式來處理異步操作。基於未來的（新熱點）animationFrame代替基於回調的（舊'n已完成）​​。

這裏有一個例子：

import 'dart:html'; 

gameLoop(num delta) { 
    // do stuff 
    window.animationFrame.then(gameLoop); 
} 

void main() { 
    window.animationFrame.then(gameLoop); 
} 

的animationFrame簽名是這樣的：

Future<num> animationFrame(); 

注意如何animationFrame返回一個未來的一個num完成，其中包含了「高性能定時器「類似於window.performance.now()。 num是從現在開始到頁面開始的單調遞增的增量。它具有微秒的分辨率。

在瀏覽器關於繪製頁面之前，Future就完成了。更新你的世界的狀態，並繪製這個未來完成時的一切。

如果您希望動畫或循環繼續，您必須在每幀上從animationFrame請求新的Future。在這個例子中，gameLoop()寄存器在下一個動畫幀上被通知。

順便說一句，有一個酒吧包名爲game_loop，你可能會覺得有用。