Lottie
Lottieウィジェットは、Lottie JSONアニメーションファイルをベクターで再生するウィジェットです。
ローディングスピナー・アイコンモーション・イラストアニメーションなど、軽量なベクターアニメーションを画面に表示するときに使用します。
定義・役割
Lottieウィジェットは、Lottie JSONアニメーションを読み込み、指定した領域で再生します。ソースはアセット（アプリに含まれるファイル）・ファイル（端末のパス）・ネットワーク（URL）から選択でき、自動再生・繰り返し・逆再生・フレームレート・サイズ・合わせ方を設定できます。
- カテゴリー: Contents
- デフォルトのソース種別:
asset（アセット） - デフォルトの動作: 自動再生＋繰り返し
- デフォルトサイズ（SizedBox）: 幅
300、高さ150
機能
| 機能 | 説明 |
|---|---|
| ソースの選択 | アセット・ファイル・ネットワーク（URL）から、再生するLottie JSONソースを選択します。 |
| 再生制御 | 自動再生・繰り返し・逆再生の有無を設定します。 |
| フレームレート | 再生速度（fps）を指定します。空にすると、JSONファイルに含まれる値を自動的に使用します。 |
| サイズ・合わせ方 | 幅・高さと、指定した領域内での合わせ方（fit）・配置を設定します。 |
使い方
- 左のウィジェットパレットでContentsカテゴリーを開きます。
- Lottie項目をキャンバスにドラッグ&ドロップします。（既定のサンプルアニメーションが表示されます。）
- 右のプロパティパネルでソース種別（
src）を選択し、パスまたはURL（name）を入力します。 - 必要に応じて自動再生（
animate）・繰り返し（repeat）・逆再生（reverse）・フレームレート（frameRate）・サイズを調整します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
src | アニメーションソースの場所の種別 | asset | asset（アセット）、file（ファイル）、network（URL） |
name | 再生するLottie JSONのアセットパス・ファイルパス・ネットワークURL | 空 | 文字列 |
animate | 読み込んだあとに自動的に再生するかどうか | true | true / false |
frameRate | 再生フレームレート（fps）。空にするとJSONの値を自動的に使用 | 未設定 | 数値（最小1） |
repeat | 再生が終わったら繰り返すかどうか | true | true / false |
reverse | 逆方向に再生するかどうか | false | true / false |
Size | 表示サイズ - width・heightをまとめて指定するグループプロパティ | 未設定 | サイズ（幅・高さ、数値px） |
fit | 指定したサイズ領域内でアニメーションを合わせる方法 | 未設定 | fill, contain, cover, fitWidth, fitHeight, none, scaleDown |
alignment | 領域内での配置 | 未設定（中央） | アライメント値 |
注意・ヒント
ヒント
frameRateを空にしておくと、Lottie JSONファイルに保存されたフレームレートを自動的に使用します。ソースを変更すると、新しいファイルの値に自動的に更新されることがあります。
警告
ソースパス（name）が空の場合は、既定のサンプルアニメーションが代わりに表示されます。パス・URLが誤っている、またはファイルが見つからない場合はエラーメッセージが表示されます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、Lottie Widget Controlドキュメントで確認してください。