如何使用Dart和网络以60fps的速度驱动动画循环？

Question

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

Answer 1

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

Dart一直在转向使用Future和Stream作为更多面向对象的方法来处理异步操作。基于回调（新的热度）requestAnimationFrame取代了基于回调的（旧的'被破坏的）animationFrame。

以下是一个示例：

import 'dart:html';

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

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

animationFrame的签名如下：

Future<num> animationFrame();

请注意animationFrame如何返回以num完成的Future，其中包含类似于window.performance.now()的“高性能计时器”。 num是现在和页面开始之间单调增加的增量。它具有微秒分辨率。

未来在浏览器关于绘制页面之前完成。更新您的世界状态，并在此未来完成时绘制所有内容。

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

顺便说一下，有一个名为game_loop的pub包，你可能觉得它很有用。