はじめに
株式会社Sally 所属エンジニアの @wellPicker です。
弊社では、スマホやパソコンでマダミスを遊べるアプリであるウズや、マダミス情報・予約管理サイトマダミス.jp、マダミス開発ツールウズスタジオを開発しています。
マダミスについてはこちらをご覧ください。
本題
Flutterでリッチなアニメーションを実現する際、多くのエンジニアが最初に検討するのが Lottie だと思います。
After Effects（AE）などで作成したアニメーションをJSON形式で書き出し、モバイルアプリ上で軽量に再生できる非常に強力なツールです。
しかし、いざデザイナーさんから受け取ったLottieファイルを組み込んでみると、**「プレビューでは動いているのに、Flutterアプリ上では表示が崩れる・あるいは表示すらされない」**という問題に直面することがあります。
一般的には「Lottieはマルチプラットフォーム対応」と言われていますが、実はFlutterにおけるLottieの実装状況は、本家（Android/iOS/Web）の対応状況とは必ずしも一致しません。
今回は、FlutterでLottieを扱う際に、特に注意すべき非対応・制限属性について、GitHubのIssue等の参照を交えて解説します。
LottieとFlutterパッケージの関係
FlutterでLottieを扱うためのデファクトスタンダードは、lottie パッケージです。他に dotlottie_flutter などのパッケージも存在しますが、知名度を考慮してこの記事では lottie に絞った話をします。
このパッケージは、Airbnbが提供している Lottie-Androidを純粋なDartコードに移植したもの です。
そのため、基本的にはAndroid版Lottieの制限を強く受けます。公式の説明でも、「Lottie-Androidと同じ制限がある」と説明されています。しかし、OSネイティブの描画エンジン（C++等）ではなくDartの CustomPainter で描画しているため、ネイティブ版では解決済みの機能が未実装だったり、特有のバグを抱えていたりするのが現状です。
実装時に注意すべき「非対応属性」
「公式ドキュメントで対応と書いてあるから大丈夫」と過信すると、プロジェクト後半で手戻りが発生します。特に以下の属性には注意が必要です。
1. トラックマット (Track Mattes)
現状：実質的に非対応（非常に不安定）
最もハマりやすいポイントです。
After Effects 2023で導入された新しいトラックマット方式はもちろん、従来の方式であってもFlutter上では正しくクリッピングされないことが多々あります。実際に使用する場合、マスクが効かずに全体が表示されてしまったり、逆に何も表示されなくなったりします。
GitHub Issue #166にて報告されていますが、執筆時点では特に進展はありませんでした。
2. 3D属性 (3D Layers)
現状：完全非対応
Lottieは本質的に2D描画エンジンであり、Z軸を伴う3D的な回転や配置は解釈できません。これはパッケージのREADMEにもある通り、本家Lottieのモバイルランタイム共通の制約です。
本家Lottieの制約はAirbnb公式から確認できます。
どうしても3D風にしたい場合は、スケール(X, Y)の調整などで「疑似3D」として扱うしかありません。
3. レイヤー効果 (Layer Effects)
現状：原則非対応
ガウスぼかしやドロップシャドウなど、AEの「エフェクト」パネルから追加する項目は、実行時の計算負荷が非常に高く、モバイルOSの描画性能を著しく低下させるため、サポートされていません。
GitHub Issue #126にて、作者のxvrh氏が「Layer effects（ぼかし等）をサポートしていない」と明言しています。
制限事項
上記の内容を踏まえて、例えばデザイナーさんにLottieを作成してもらう場合に、あらかじめ下記の内容を伝えておくとよりスムーズに開発しやすくなりそうです。
| AE機能 | 判断 | 推奨される代替案 |
|---|---|---|
| トラックマット | ❌ | 「Masks（パスによるマスク）」を使用する |
| 3Dレイヤー / Z軸 | ❌ | X, Y軸のスケール変化による「疑似3D」 |
| レイヤーエフェクト（ぼかしなど） | ❌ | ぼかしたシェイプを背後に置く |
また、トラックマットが使用できないことで、例えばグラデーションなども難しい可能性があります。
まとめ
今回は、FlutterでLottieを導入する際に直面しがちな「非対応属性」の罠と、その具体的な根拠について解説しました。
「Lottieなら何でも動く」という前提で制作を進めてしまうと、実装フェーズで「仕様変更」や「作り直し」という悲劇が起きてしまいます。
Lottieを使用する場合はなるべく高度な機能の使用を避け単純なものにするなど、工夫が必要そうです。
これからLottieを導入される方は、ぜひ今回の制限リストを参考にしてみてください！
Discussion