如何使用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返回一个以a结尾的Future num,它包含一个类似于的"高性能计时器" window.performance.now().num从现在到页面开始时,这是一个单调递增的增量.它具有微秒分辨率.

在浏览器绘制页面之前,Future就完成了.更新您的世界状态,并在此未来完成时绘制所有内容.

如果希望动画或循环继续,则必须在每个帧上从animationFrame请求新的Future.在此示例中,gameLoop()寄存器将在下一个动画帧上得到通知.

BTW有一个名为game_loop的pub包,你可能觉得它很有用.