ウェブフローのAfter EffectsとLottieの統合により、After Effects（AE）のアニメーションをデザインに使用でき、Lottieの要素設定とウェブフローのインタラクションとアニメーションツールでその再生を制御することも可能です。

このレッスンでは

1. JSONアニメーションファイルを取得する
2. Webサイトにアニメーションを追加する
3. インタラクションでアニメーションを制御する

について説明しています。

1.Lottie JSONアニメーションファイルの取得

AEアニメーションは、Lottie JSONファイルの形でサイトにアップロードすることができます。これらのファイルは、以下のいずれかの方法で取得できます。

AE bodymovinプラグインを使用して、AEアニメーションをJSONファイルとしてエクスポートする。

Lottiefiles(または他のオンラインアニメーションライブラリ)から無料のJSONアニメーションファイルをダウンロードする。

2.Webサイトにアニメーションを追加する

JSONやLottieのアニメーションを、アイコンやサムネイル、ページの背景、ページローダー、カスタムアニメーションカーソルなどに使用することができます。

他の画像ファイルと同様に、JSONアニメーションファイルをプロジェクトのAssetsパネルにアップロードし、そこから直接ページにドロップすることができます。

また、JSONファイルをアップロードするまでの間、Lottie animation要素（Add elements panel > Mediaにあります）をアニメーションのプレースホルダとして使用することもできます。その後、このプレースホルダーを資産パネルからLottieのシーケンスに置き換えることができます。

3.アニメーションの再生方法を指定する

Lottie要素の設定により、ページ上でのアニメーションの再生方法を制御できます。デフォルトの再生時間を上書きしたり、アニメーションを無期限にループさせたり、アニメーションを逆再生させたりすることができます。

以下は、各Lottieアニメーション要素に設定できるすべてのパラメータのリストです。

• Replace Lottie sequence (button) – Asset panelから、または新しいアニメーションをアップロードすることで、アニメーションを置き換えます。
• Preview Animation (button) – キャンバス上でアニメーションを再生し、プレビューします。
• Use built-in duration (checkbox) – デフォルトでチェックされており、アニメーションのデフォルトのデュレーションを使用します。上書きするために、チェックを外します。
• 内蔵のデュレーションを使用する（入力フィールド – チェックボックスがチェックされていない時に表示される） – デフォルトで、アニメーションの内蔵デュレーションを表示する。より速くするには、より小さい値を使用し、遅くするには、より大きい値を使用します。
• ループ（チェックボックス）- アニメーションを無期限に再生します。
• 逆再生 (チェックボックス) – アニメーションを逆再生します。
• Render mode (preset toggles) – アニメーションのレンダリングモードを切り替えます。デフォルトはSVGです。SVGはベクターアニメーションに最適です。キャンバスは、イメージシーケンスで最も一般的なラスタライズされたレイヤーに適しています。選択したモードでアニメーションが正しく再生されない場合は、レンダラを切り替えてください。

キャンバスモードでは、必ずしも図形が正しく描画されない場合があり、スケーリングの動作が変化することがありますのでご注意ください。また、レンダラーによってサポートするアニメーション AE 機能が異なります。

インタラクションでアニメーションをコントロール

ウェブフローのインタラクション機能とLottieの統合により、アニメーションの再生方法と再生時間をより自由にコントロールできるようになりました。これらのオプションを使用すると、ユーザーとのインタラクションに応じてアニメーションを再生したり一時停止したりできます。

アニメーションを開始するトリガーを設定し、アニメーションのどの部分を再生するか、そしてアニメーションの再生をどこで停止するかを選択できます。Lottieのアニメーションをインタラクションで制御するには、2つの方法があります。

• Lottieの再生アニメーション
• Lottie のアクション

これらのオプションはどちらも Lottie animation 要素でのみ利用可能です。つまり、これらにアクセスするには、キャンバス上で Lottie アニメーションを選択する必要があります。

例1. クリック時にアニメーションを再生する

デフォルトでは、すべてのアニメーションはページが読み込まれたときに再生されます。そのため、ループするように設定していない限り、折り返し地点より下にあるアニメーションがスクロールして再生されることはありません。インタラクションを使えば、再生をコントロールすることができます。

ユーザーがクリックしたときにアニメーションを再生したいとします。

1. キャンバス上でLottieアニメーション要素を選択します。
2. インタラクションパネルで、マウスクリック（タップ）要素のトリガーを追加します。
3. アクションメニューの「On 1st click」で「Lottie playback」を選択します。オプションで、再生を遅らせる、逆再生する、ループさせるなどの設定が可能です。

これで完了です。

アニメーションの時間や速度を変更する必要がある場合は、要素設定パネルのLottie要素の設定から行うことができます。Lottieアニメーション設定の他の設定は、相互作用パネルのLottie再生設定によって上書きされます。

例2. ビューにスクロールしたときと、ビューから出たときにアニメーションを再生する

上記の例で使用したクイックアクションは、マウスホバーやビューへのスクロールのインタラクションにも使用できます。

この例では、ビューポートに入ったときに再生されるアニメーションを設定しましょう。

1. アニメーション要素「Lottie」を選択する
2. インタラクションパネルに、Scroll into view要素のトリガーを追加する。
3. when scrolled into view “の下にアニメーションを作成します。
4. アクションメニューのOn 1st clickからLottie playbackを選択します。
5. オプションで、アニメーションが早く再生される場合のオフセットを設定します。
6. アクションメニューのOn 2nd clickでLottie playbackを選択します。
7. 逆再生
8. オプションで、オフセットを設定します。

例3．ページロード時にアニメーションの一部分のみを再生する

いくつかのインタラクションタイプでは、カスタムアニメーションを作成し、アニメーションの再生方法をより詳細に制御できるLottieアクションを使用する必要があるかもしれません。このオプションでは、アニメーションの開始フレームと終了フレームを自由に設定することができます。また、他の時間指定アクションと同様に、イージングエフェクトを適用したり、持続時間を設定したりすることができます。また、他のアクションを追加することで、より複雑なアニメーションを作成することができます。

開始フレームや終了フレームを調整したい場合。

1. Lottieアニメーション要素を選択する
2. インタラクションパネルに、ページロード要素のトリガーを追加します。
3. ページのロード開始時にアニメーションを作成する
4. Lottieのアクションを追加する
5. アニメーションを別のフレームで開始したい場合は、Lottieの設定で開始フレームを調整し、それを初期状態として設定します。
6. Lottieのアクションをもう一つ追加します。
7. 別のフレームでアニメーションを停止させたい場合は、終了フレームを100%以下に設定します。
8. アニメーションの再生速度を調整するために、期間を調整します。

プロからのアドバイス: アニメーションのデフォルトの継続時間を使用したい場合は、キャンバス上でアニメーションをダブルクリックし、継続時間チェックボックスをオフにして、表示される組み込みの継続時間を使用します。