はじめに
David Serrano Canales氏が投稿した記事を読みました。
The dark side of Flutter: 4 inconveniences that every Flutter developer should know
Flutterの暗黒面 : Flutterの開発者が知っておくべき4つの不便さ。
その1つ
Janky animations at app start
(アプリ起動時のジャンキーアニメーション)
が個人的に最も興味深かったです。
内容は、
The issue is a noticeable delay the first time the application runs an animation, such as opening a dropdown menu, or transitioning between two screens.
(この問題は、ドロップダウンメニューを開いたり、2画面間を遷移したりするようなアニメーションをアプリケーションが初めて実行する際に、顕著な遅延が発生するものです。)
というもの。
これは自分も気になっていた問題でした。
画面遷移した際、不自然さがあるんですよね。
(左) 実際の画面遷移 (右) 期待する画面遷移
この問題について、公式も問題視しているらしく、
その改善方法を提示していました。
本記事では、この改善方法について記載します。
画面遷移アニメーションの不自然さを改善する方法
If the animations on your mobile app appear to be janky, but only on the first run, you can warm up the shader captured in the Skia Shader Language (SkSL) for a significant improvement.
モバイルアプリのアニメーションが、初回実行時だけジャンキーに見える場合、Skia Shader Language（SkSL）でキャプチャしたシェーダーをウォームアップすることで、大幅に改善することができます。
SkSLウォームアップの使用方法
As of release 1.20, Flutter provides command line tools for app developers to collect shaders that might be needed for end-users in the SkSL (Skia Shader Language) format. The SkSL shaders can then be packaged into the app, and get warmed up (pre-compiled) when an end-user first opens the app, thereby reducing the compilation jank in later animations. Use the following instructions to collect and package the SkSL shaders:
リリース1.20以降、Flutterはアプリ開発者向けに、エンドユーザーにとって必要と思われるシェーダーをSkSL (Skia Shader Language) フォーマットで収集するコマンドラインツールを提供します。
SkSLシェーダーはアプリにパッケージされ、エンドユーザーが最初にアプリを開いたときにウォームアップ（事前コンパイル）されるため、後のアニメーションでコンパイルの手間を減らすことができます。
SkSL シェーダを収集し、パッケージ化するには、次の手順を使用します。
SkSLでシェーダーをキャプチャするため、-cache-skslをONにしてアプリを実行
flutter run --cache-sksl
(※) 以前に同じアプリを --cache-sksl なしで実行したことがある場合は、 --purge-persistent-cache フラグが必要な場合があります。
flutter run --cache-sksl --purge-persistent-cache
このフラグは、SkSL シェーダのキャプチャを妨害する可能性のある、SkSL 以外の古いシェーダキャッシュを削除します。
また、SkSL シェーダをパージするので、最初の --cache-sksl の実行時のみ使用します。
SkSLのウォームアップをONにして、アプリをBuild
Android
flutter build apk --bundle-sksl-path flutter_01.sksl.json
or
flutter build appbundle --bundle-sksl-path flutter_01.sksl.json
iOS
flutter build ios --bundle-sksl-path flutter_01.sksl.json
(※) test_driver/app.dartのようなドライバーテスト用にビルドする場合は、-target=test_driver/app.dartも必ず指定してください
例: flutter build ios --bundle-sksl-path flutter_01.sksl.json --target=test_driver/app.dart
おわりに
フラグを設定するだけで、簡単に改善できるみたいです。
自分の方では未検証のため、なにか誤りorこうした方が良い等あれば指摘下さい。
では。