ロッティーモーショングラフィックスを挿入

Lottie アニメーションを Web サイトのデザインに活用して、インタラクションを強化し、ユーザーを魅了します。次に、Lottie 要素の構成とエンゲージメントを使用して、アニメーションの再生を管理します。

この記事では、次の内容について説明します。

1. Lottie JSONとdotLottieアニメーションファイルを取得するプロセス
2. サイトにアニメーションを追加する
3. アニメーション設定の変更
4. インタラクションを通じてアニメーションを制御する方法

Lottie JSON と dotLottie アニメーションファイルを取得する方法

Lottie アニメーションを Lottie JSON または dotLottie ファイルの形式で Web サイトにアップロードすることができます。 

Lottie JSON ファイルを取得するには 2 つの方法があります。

• After EffectアニメーションをJSONファイルとしてエクスポートするには、 無料の After Effects bodymovin プラグイン
• JSONアニメーションファイルを取得する ロティファイルズ （または他のオンラインアニメーションライブラリ）

dotLottie ファイルを取得するには、次の 3 つの方法があります。

• 既存のLottie JSONファイルをdotLottieに変換するには、 JSON から dotLottie への変換ツール
• After EffectsからdotLottieファイルを直接エクスポートするには、 LottieFiles プラグイン
• ビルド済みのdotLottieファイルをダウンロードする ロティファイルズ.

追加参考文献

• After EffectsでLottieのアニメーションを作成する方法を学びましょう
• LottieがサポートするAfter Effectsの機能を調べる
• WebflowでAfter EffectsとLottieについて詳しく学ぶ

ウェブサイトにアニメーションを組み込む

Lottie JSON または dotLottie アニメーションを、シンボル、サムネイル、ページ背景、ページローダー、カスタマイズされたアニメーションカーソルなどとして利用できます。 

Lottie JSON および dotLottie ファイルを Assets パネルに追加するには:

1. クリック "資産左のツールバー内の「」記号
2. 「雲” アップロードシンボル
3. コンピューターから1つまたは複数のファイルを選択します

その後、アニメーションをウェブサイトに統合することができます。アセットパネルからキャンバスに直接ドラッグアンドドロップするか、 ロッティアニメーション コンポーネント。Lottie アニメーション コンポーネントを使用するには:

1. 案内する パネルを追加 > メディア セクション
2. 落とす ロッティアニメーション Webflowキャンバスにコンポーネントを配置
3. プレス ロッティーシーケンスを置き換える ロッティーアニメーションコンポーネント設定
4. Lottie JSONまたはdotLottieファイルを以下から選択してください。 アセットパネル

アニメーション設定の変更

Lottieアニメーションコンポーネント設定は、サイトページ上のアニメーションの動作を制御します。設定を微調整するには、 ロッティアニメーション コンポーネントとヘッド 要素設定パネル > ロッティーアニメーション設定アニメーションの設定を次のように調整できます。

• 組み込みの継続時間 - アニメーションが実行される継続時間
• ループ — アニメーションが無限に繰り返されるかどうか
• 逆再生 - アニメーションが逆再生される場合
• レンダリング — SVG またはキャンバス

トップチップ： デフォルトでは、すべてのアニメーションはページの読み込み時に実行されます。したがって、アニメーションをループするように設定したり、インタラクションによってアニメーションの再生を制御したりしない限り、ページを訪れたユーザーは、スクロールが必要なページのセクションの下のアニメーションを目にすることはありません。

インタラクションを通じてアニメーションを制御する

インタラクションを通じて Lottie アニメーションを管理し、アニメーションの実行方法とタイミングを変更できます。インタラクションを使用すると、アニメーションを開始するトリガーを定義したり、再生するアニメーションの特定のセグメントを選択したり、アニメーションの再生を停止する場所を決定したりできます。 

Lottie アニメーションでは、次の 2 つのインタラクションにアクセスできます。

1. の ロッティー再生 アニメーション
2. の ロッティ アクション 

これらのやり取りは 専ら Lottieアニメーションに適用可能です。

注記： アニメーションの持続時間や速度を変更する必要がある場合は、 ロッティーアニメーション設定 セクション内の 要素設定パネル設定に注意してください ロッティーアニメーション設定 セクションは、 ロッティー再生 設定で インタラクションパネル.

トップチップ： デフォルトでは、すべてのアニメーションはページの読み込み時に再生されます。そのため、アニメーションをループするように設定したり、インタラクションを使用してアニメーションの再生を制御したりしない限り、訪問者は折り返し部分の下 (スクロールが必要なセクション) のアニメーションを観察できません。

図1: クリックするとアニメーションを開始する

インタラクションを通じて、ユーザーがクリックしたときに再生されるアニメーションを設定できます。

1. クリックしてください ロッティアニメーション キャンバス上のコンポーネント
2. アクセス インタラクションパネル
3. ヒット "プラス”アイコンの隣に 要素トリガー
4. 「マウスクリック（タップ）」を選択
5. 「アクションを選択」を選択します アクション の中に 1回目のクリックで セクション
6. 「ロッティー再生」を選択してください 統合

また、次のオプションもあります 遅れ 再生、 逆行する アニメーションを設定するか、アニメーションを ループ.

デモンストレーション 2: 画面のスクロールインとスクロールアウト時にアニメーションを開始する

アニメーションが画面の表示領域に入ったときや画面から出たときにアニメーションをトリガーするオプションもあります。

1. 選択してください アニメ デザインキャンバス上のイラスト
2. に移動 インタラクションパネル
3. 「プラス” 記号の横 要素トリガー
4. 「スクロールして表示」を選択する
5. の横にあるアクションを選択してください アクション の中に スクロールして表示される category
6. 「アニメーション」を選択します 統合
7. 隣のアクションを選択してください アクション 以内 スクロールして表示されなくなったとき セクション
8. 「アニメーション再生」を選択 統合
9. アクティブ化する 逆行する オプション

アニメーションをカスタマイズするには オフセット または 遅れ.

例3: ページの読み込み中にアニメーションのセグメントを開始する

活用する アニメ アクションインタラクションにより、アニメーションの動作を正確に制御できます。開始フレームと終了フレームを調整し、イージング関数を実装し、特定の期間を定義します。

アニメーションの開始フレームまたは終了フレームを調整するには:

1. あなたの アニメ デザインキャンバス上のイラスト
2. 開く インタラクションパネル
3. を選択 "プラス”アイコンの横にある ページトリガー
4. 「ページ読み込み」を選択する
5. 隣接するアクションを選択する アクション の中に ページの読み込みが始まると セクション
6. 「アニメーションを開始」を選択します カスタムアニメーション
7. 「プラス”記号の横に 時間指定アニメーション
8. アニメーションにタイトルを割り当てます（例：「読み込み時にアニメーションを開始」）
9. を選択 "プラス" の隣に 行動
10. 「アニメーション」を選択してください 統合
11. 下のアニメーションフレームを調整します アニメーション 希望する開始フレームのセクション
12. 「初期状態として設定」オプションにチェックを入れます。 タイミング
13. 「プラス" の隣に 行動
14. 「アニメーション」を選択 統合
15. アニメーションフレームを定義する アニメーション 特定のフレームで停止するセクション（例えば、終了フレームまで再生するには 100% に設定する）
16. プレス 保存

必要に応じて、アニメーションの継続時間、遅延、またはイージング効果を調整します。

簡単なヒント： アニメーションのデフォルトの継続時間を使用するには、 アニメ デザインキャンバス上のイラストに移動するには、 要素設定 > ロッティーアニメーション設定 「組み込みの期間を使用する」オプションを有効にします。