Lottieファイル

Lottie を使用して、カスタムのループアニメーションやワンタイムアニメーションを追加して、アプリをさらに魅力的にしましょう。これらのアニメーションは、確認メッセージ、ローディング画面、または祝福のポップアップなどを表示するのに最適です！

スキルレベル: 中級

開始前の準備

Lottie アカウントを作成し、ログインしていることを確認してください。
使用するすべてのプラットフォームで Lottie の機能がサポートされていることを確認してください。
この機能を実装するために有料の Adalo プランは必要ありません。

手順

1.) Adalo アプリ内で、左上隅にある大きなプラス記号をクリックします。

2.) 検索バーに "Marketplace" と入力し、Explore Marketplace をクリックします。

3.) リストから Lottie を見つけ、Install をクリックしてから Done をクリックします。

4.) コンポーネントリストに戻り、検索バーに Lottie と入力し、コンポーネントを目的の画面にドラッグアンドドロップします。

5.) 新しいブラウザタブでLottie のウェブサイトを開いて、追加するアニメーションを見つけます。また、コンポーネント設定内の Lottie ドロップダウンからもこのリンクを見つけることができます。

6.) 適切なアニメーションを見つけたら、それをクリックしてさらにオプションを開きます。

7.) このページから、アニメーションの速度、背景色、および（一部のアニメーションでは）アニメーション自体の色を編集できます。アニメーションが適切であれば、右上の Download ボタンをクリックし、Lottie JSON オプションを選択してアニメーションをダウンロードし、このガイドのステップ 11 に進んでください。

**ダウンロード前に: すべてのプラットフォームでの互換性を確認するために'Feature Support Checker'を使用してください。

8.) Edit Layer Colors ボタンをクリックして Lottie エディタに移動します。新しいブラウザタブが開き、背景色、アニメーション速度、アニメーションの色を編集できます。アニメーションの色が編集可能な場合、右側に色のパレットが表示されます。

9.) 色を編集するには、それをクリックするとカラーピッカーが表示されます。使用したい色を選択し、Update をクリックします。

11.) コンピューター上でダウンロードしたアニメーションを見つけます（おそらくダウンロードフォルダーに保存されています）。

PC では、ファイルをメモ帳で開くことができます（右クリックして開く > 別のプログラムを選択 > メモ帳 を選択）
Mac では、ファイルをテキストエディットで開くことができます（ファイルをダブルクリック）

12.) ファイル内のすべてのテキストをコピーし、Adalo の Lottie コンポーネントの LottieFiles JSON という入力欄に貼り付けます。 13.) コンポーネントの設定のAnimationセクションでは、アニメーションのループ、ビルダープレビューの切り替え、およびLottieコンポーネントにクリックアクションを追加することもできます。

2.) 検索バーに**"Marketplace"**と入力し、Explore Marketplaceをクリックします

3.) リストからLottieを見つけ、InstallをクリックしてからDoneをクリックします

4.) コンポーネントリストに戻り、検索バーにLottieと入力し、コンポーネントを目的の画面にドラッグアンドドロップします

5.) 新しいブラウザタブでLottieのウェブサイトを開いて、追加するアニメーションを見つけます。このリンクは、コンポーネント設定内のLottieドロップダウン内でも見つけることができます。

6.) 適切なアニメーションを見つけたら、それをクリックしてさらにオプションを開きます

7.) このページから、アニメーションの速度、背景色、および（一部のアニメーションでは）アニメーション自体の色を編集できます。アニメーションが適切であれば、右上のDownloadボタンをクリックし、Lottie JSONオプションを選択してアニメーションをダウンロードし、このガイドの11ステップに進んでください。

8.) Edit Layer ColorsボタンをクリックしてLottieエディタに移動します。新しいブラウザタブが開き、背景色、アニメーション速度、アニメーションの色を編集できます。アニメーションの色が編集可能な場合、右側に色のパレットが表示され、編集できます。

9.) 色を編集するには、それをクリックするとカラーピッカーが表示されます。使用したい色を選択し、Updateをクリックします

11.) コンピューター上でダウンロードしたアニメーションを見つけます（おそらくダウンロードフォルダーに保存されています）そしてテキストエディタで開きます：

PCでは、ファイルをメモ帳で開くことができます（右クリックして開く > 別のプログラムを選択 > メモ帳を選択）

Macでは、ファイルをTextEditで開くことができます（ファイルをダブルクリック）

13.) アニメーションセクションのコンポーネント設定で、アニメーションのループ、エディタープレビューの切り替え、およびLottieコンポーネントにクリックアクションを追加することもできます。また、黄色い境界ボックスのハンドルを調整してアニメーションのサイズや形状を変更することもできます。

例

これであなたのアプリには、ユーザー体験を豊かにするための素敵なアニメーションが追加されました！これらを確認画面、通知アイコン、または祝賀ポップアップなどに使用できます！

このチュートリアルのアプリのクローンリンクについては、こちらをクリックしてください。

もっと詳しく

あなた自身のLottieアニメーションを作成、アップロード、さらには無料で販売することができます。また、Adobe After Effectsを使用しても作成できます。
カスタムアニメーションが必要な場合は、ComplabなどのAdaloコンポーネントメーカーに連絡して作成してもらうことができます。また、コミュニティフォーラムで支援を求めることもできます。