料金プランを有効化して学習を始めましょう。

Lottieアニメーション

Lottieアニメーションをサイトに追加し、インタラクションを使用して再生を制御します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

Lottieアニメーションを使用して、サイトデザインをインタラクティブで魅力的にすることができます。その後、Lottie要素の設定とインタラクションを使用してアニメーションの再生を制御します。

この記事では、次のことを学びます：

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

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

Lottie JSONファイルを取得する方法は2つあります：

dotLottieファイルを取得する方法は3つあります：

ウェブサイトにアニメーションを追加する方法

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

Lottie JSONとdotLottieファイルをアセットパネルに追加するには：

  1. 左のツールバーでAssetsアイコンをクリックします
  2. cloudアップロードアイコンをクリックします
  3. コンピュータから1つまたは複数のファイルを選択します

その後、アニメーションをサイトに追加できます。アセットパネルから直接キャンバスにドラッグアンドドロップするか、Lottieアニメーション要素を使用できます。Lottieアニメーション要素を使用するには：

  1. Add panel > Media  セクションに移動します
  2. Lottie animation要素をWebflowキャンバスにドラッグします
  3. Lottieアニメーション要素の設定でReplace Lottie sequence をクリックします
  4. アセットパネルからLottie JSONまたはdotLottieファイルを選択します。

アニメーションの設定方法

Lottieアニメーション要素の設定によって、サイトのページ上でアニメーションが再生される方法を制御します。設定を調整するには、Lottieアニメーション要素を選択し、Element settings panel > Lottie animation settingsに移動します。その後、次のアニメーションの設定を調整できます：

  • Built-in duration — アニメーションが再生される時間の長さ
  • Loop — アニメーションが無限ループで再生されるかどうか
  • Play in reverse — アニメーションが逆再生されるかどうか
  • Render — SVGまたはキャンバス
プロのヒント: デフォルトでは、すべてのアニメーションはページが読み込まれる際に再生されます。つまり、ページの訪問者はアニメーションが画面外で再生されているのを見ることはありません（画面外の部分、つまり表示するためにスクロールする必要がある部分）。

インタラクションでアニメーションを制御する方法

インタラクションを使用して、Lottieアニメーションを制御してアニメーションの再生方法とタイミングを調整することができます。インタラクション を使用すると、アニメーションを開始するトリガーを設定し、アニメーションの一部を再生するかどうかを選択し、アニメーションの再生を停止する位置を選択することができます。

Lottieアニメーションには2つの利用可能なインタラクションがあります：

  1. Lottie playback アニメーション
  2. Lottie アクション

これらのインタラクションは、Lottieアニメーションにのみ適用されることに注意してください。

注意: アニメーションの持続時間/速度を調整する必要がある場合は、エレメント設定パネル の Lottieアニメーション設定 セクションを通じて行うことができます。ただし、Lottieアニメーション設定 セクションの設定は、インタラクションパネル の Lottie再生 設定によって上書きされることに注意してください。
プロのヒント: デフォルトでは、すべてのアニメーションはページが読み込まれる際に再生されます。つまり、ページの訪問者はアニメーションが画面外で再生されているのを見ることはありません（画面外の部分、つまり表示するためにスクロールする必要がある部分）。アニメーションをループさせるか、インタラクションでアニメーションの再生を制御しない限り、ページの訪問者は画面下部でアニメーションが再生されるのを見ることはありません。

例1：クリックでアニメーションを再生する

インタラクションを使用して、ユーザーがクリックした際にアニメーションが再生されるように設定できます：

  1. キャンバス上の Lottieアニメーション 要素を選択します
  2. Interactions panel に移動します
  3. Element trigger の隣にある「プラス」アイコンをクリックします
  4. 「Mouse click (tap)」を選択します
  5. On 1st click sセクションの Action の隣にある「Select an action」をクリックします
  6. integrationsン の下にある「Lottie playback」を選択します

再生を遅延させる、アニメーションを逆再生させる、アニメーションをループさせることもできます。

例2：アニメーションをビューポート内にスクロールインおよびスクロールアウトしたときに再生する

また、ビューポート内にアニメーションがスクロールインおよびスクロールアウトした際に再生されるようにアニメーションを設定することもできます：

  1. キャンバス上の Lottieアニメーション 要素を選択します
  2. Interactions panel に移動します
  3. エレメントトリガー の隣にある「プラス」アイコンをクリックします
  4. 「Scroll into view」を選択します
  5. When scrolled into view の アクション の隣にある「Select an action」をクリックします
  6. Integrations の下にある「Lottie再生」を選択します
  7. When scrolled out of view の アクション の隣にある「Select an action」をクリックします
  8. Integrations の下にある「Lottie再生」を選択します
  9. Reverse チェックボックスをオンにします

オフセットまたは遅延も設定することができます。

例3：ページ読み込み時にアニメーションの一部を再生する

アニメーションの再生方法をより細かく制御するために、Lottieアクションインタラクションを使用することができます。その後、カスタムな開始フレームと終了フレームを設定し、イージング効果を適用し、カスタムな期間を設定できます。

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

  1. キャンバス上の Lottieアニメーション 要素を選択します
  2. Interactions panel に移動します
  3. Page trigger の隣にある「プラス」アイコンをクリックします
  4. 「ページ読み込み」を選択します
  5. When page starts loading の アクション の隣にある「アクションを選択」をクリックします
  6. Custom animation の下にある「アニメーションを開始」を選択します
  7. Timed animations の隣にある「プラス」アイコンをクリックします
  8. アニメーションに名前を付けます（例：「ページ読み込みアニメーション」）
  9. Actions の隣にある「プラス」アイコンをクリックします
  10. Actions の下にある「Lottie」を選択します
  11. もしアニメーションを異なるフレームから開始させたい場合は、Lottieセクションの下の Lottieフレームを調整します
  12. Timing の下にある「初期状態として設定する」チェックボックスをオンにします
  13. Actions の隣にある「プラス」アイコンをクリックします
  14. Integrations の下にある「Lottie」を選択します
  15. アニメーションを特定のフレームで停止させたい場合（例：アニメーションを最後のフレームまで再生させたい場合は、100%に設定します）、Lottieセクションの下の Lottieフレームを設定します
  16. 保存 をクリックします

アニメーションの期間、遅延、またはイージングを調整することもできます。

Lottieアニメーションアクションの初期状態と最終状態は、アニメーションタイムラインに表示されます。初期状態は、合計アニメーションフレームの5％から開始し、最終状態は合計アニメーションフレームの100％で終了します（つまり、公開されたアニメーションは、元のアニメーションの全フレームの5％地点から再生が開始され、アニメーションの最終フレームで終了します）。

プロのヒント: アニメーションのデフォルトの期間を使用したい場合は、キャンバス上の Lottieアニメーション 要素を選択し、Element settings > Lottie animation settings に移動して、「Use built-in duration”」チェックボックスにチェックを入れてください。