概要

Lottieウィジェットでは、Lottie JSONファイルを使用して、動的レイアウトシャウトアウトに軽量でスケーラブルなアニメーションを追加できます。 Lottieアニメーションは、迅速に読み込み、ピクセル化なしでスケールし、パフォーマンスに影響を与えることなくビジュアルエンゲージメントを高めるのに役立ちます。

この記事では、シャウトアウトにロティアニメーションを追加し、編集し、再生設定を設定する方法を説明します。

使用方法

Lottieアニメーションは、LottieFilesでホストされているJSONベースのファイルです。 ビジュアルデザイナーで、Lottieウィジェットを追加し、ホストされているJSONアニメーションにリンクします。その後、シャウトアウト内で直接レンダリングされます。

LottieFilesから生成されたJSONリンクのみがビジュアルデザイナーでサポートされます。

Lottieアニメーションを追加

シャウトアウトにLottieアニメーションを追加するには：

1. ビジュアルデザイナーで、サイドメニューの「+」アイコンを選択します。
2. 「ロッティ」を選択し、キャンバスにドラッグします。
3. 「アニメーションの変更」を選択し、LottieFilesを開きます。
   • LottieFilesアカウントがない場合は、無料で作成してください。
4. LottieFilesで、アニメーションを選択し、リンクを生成を選択します。
5. アップロード場所を選択して、プロジェクトにアニメーションを追加します。
6. 生成されたJSONアセットリンクをコピーします。
7. ビジュアルデザイナーの「URLを貼り付け」フィールドにJSONリンクを貼り付けます。

再生設定を構成します。

プロパティバッグからアニメーションの再生方法を制御できます。

再生オプションには、次のものがあります：

• ループで再生：オンにすると、ロッティアニメーションを継続的に再生できます。
• 再生速度：1x、1.5x、2xなど、再生速度を設定します。

リンクが追加された後に、ビジュアルデザイナーにアニメーションのプレビューが表示されます。

ロッティアニメーションでシャウトアウトを高めます。

ロッティアニメーションを編集します。

Lottieアニメーションを編集するには：

• Lottieエディタでアニメーションを開きます。

技術的なノート

• Lottieウィジェットは、ダイナミックビジュアルデザイナーでのみ利用できます。
• LottieFilesで生成されたJSONリンクのみがビジュアルデザイナーで機能します。

リソース

Lottie機能の詳細については、以下のリソースを参照してください：

• Lottieアニメーションとは何ですか？
• Lottie教育センター
• LottieのFAQ＆サポート