【 Flutter 】Flutter を 基礎 から 学習 ( パフォーマンスチューニング ) part269 フレームレート

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は パフォーマンスチューニング ( part269 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( アーキテクチャ ) part268 インテグレーションテスト

今回から、パフォーマンスチューニングについて学びます。

フレームレート

UIのパフォーマンスではフレームレートがとても大事な指標になります。

Adobeのサイトにフレームレートの解説がありました。

人間の目には、映画やビデオは録画された映像が長く続いて映っているように見えます。

しかし実際には、カメラはフレームと呼ばれる複数の画像を録画しているのです。こうしたフレームは、早い速度で再生されるので、流れるような映像となって目に映ります。

フレームレートとは、1秒間に多くのフレームがどれだけ速く現れるかを表す数値です。そのため、FPS(1秒間あたりのフレーム数)とも呼ばれるのです。

フレーム数が多いほど滑らかに見えるそうです。

なるほど。1秒間にフレーム(画像?)を以下に詰め込むかということでしょうか🤔

「1秒間の映像(動画)が何枚の画像で構成されているかを示すの単位」のことをfps(Frames per Second)という単位であらわすそうです。

本書の執筆時点(2019年)で主流の端末では60fpsだそうです。120fpsの端末も・・・という話もちらほら出ていたようです。

Flutteのドキュメントでは以下のようなガイドラインが示されています。

  • Flutterは、毎秒60フレーム(60fps)または、120Hz(1秒間のフレーム切り替え処理最大数)のデバイスでは120fsのパフォーマンスを提供することを目指しています。
  • 60fpsの場合、フレームを約16msごとにレンダリングする必要があります。
  • フレームがレンダリングに時間がかかるとフレームは欠落し、アニメーションは明らかにぎくしゃくします。

開発者は1フレーム16msに抑えることが目標です。

がんばります!

最後に

とはいうものの、どうやって抑えるのか具体的な方法は?

また計測方法は?(前章のプロファイリングでしょうか?)

今日はここまで!

参考

初心者向け動画のフレームレートとは | Adobe

フレームレート(fps)とは?動画別のおすすめ設定を解説|ビジネストレンド|キヤノン (canon.jp)