dart - 如何使用 Dart 和 web 以 60fps 的速度驱动动画循环？

Question

如何在 Dart Web 应用程序中以 60fps 的速度驱动动画循环或游戏循环？

Answer 1

使用window.animationFrame，传统的基于未来的表亲window.requestAnimationFrame。

Dart 一直在转向使用Future和Stream作为更面向对象的方式来处理异步操作。基于回调的 (old 'n busted)requestAnimationFrame被基于 Future 的 (new hotness) 取代animationFrame。

这是一个示例：

import 'dart:html';

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

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

的签名animationFrame看起来像：

Future<num> animationFrame();

请注意如何animationFrame返回一个以 a 结尾的 Future num，它包含一个类似于 的“高性能计时器” window.performance.now()。num从现在到页面开始时，这是一个单调递增的增量。它具有微秒分辨率。

Future 在浏览器即将绘制页面之前完成。更新您的世界状态并在此 Future 完成时绘制所有内容。

如果您希望动画或循环继续，您必须在每一帧上从 animationFrame 请求一个新的 Future。在此示例中，gameLoop()注册以在下一个动画帧上得到通知。

顺便说一句，有一个名为game_loop的 pub 包，您可能会发现它很有用。