WebflowにおけるAfter EffectsとLottieのまとめ

続行するには、 コマンド + A (macOSの場合) または コントロール + A (Windows の場合) すべてのコンテンツを強調表示します。その後、レイヤーの横にあるドロップダウン矢印をクリックして、すべてのエンティティを折りたたむことができます。この手順により、この図のパス配置が容易になります。

スター要素については、最初から開始するのではなく、構成した複製された軌道パスの 1 つ (例: 軌道パス 7) をブループリントとして使用することを検討してください。

星を形作る:

1. 最近複製したレイヤー（例：軌道パス7）を強調表示します。
2. タップ コマンド + C (macOSの場合) または コントロール + C (Windowsの場合)
3. を進めます コマンド + V (macOSの場合) または コントロール + V (Windowsの場合)
4. コピーしたレイヤーのドロップダウンを展開します
5. コピーした楕円レイヤー内の楕円パスのドロップダウンを展開します
6. 減らす サイズ 40まで
7. ラベル（例：軌道経路8）をクリックし、リターンキーを押します。
8. 次に、名前を指定します（例：Star）

塗りを少し変更しながら、同じストロークの色を維持する必要があります。

100% の不透明度を持つ白色を選択します。

惑星のデザインは、わずかな違いはあるものの、同様のパターンに従う必要があります。

惑星を定式化する:

1. 複製して挿入する スターレイr 
2. 複製したレイヤーをダビングする（例：Planet） 
3. で コンテンツ > 楕円パス 複製したレイヤーのサイズを調整します（例：40から15） 
4. で コンテンツ > 楕円パス コピーしたレイヤーの最初の位置入力（X軸）を操作して、 惑星 最初の軌道のストロークに一致する

最初の惑星をガイドラインとして使用して、さらに 6 つの惑星を生成します。

より多くの惑星を生成する:

1. 最後に複製された惑星を複製します。 
2. の中に コンテンツ 複製されたレイヤーの最初の位置入力（X軸）を調整して、 惑星 その後の軌道と一致する

リマインダー: より自然な外観にするために、各楕円を 100 ずつ縮小するのではなく、複製した楕円のサイズの違いを変えることを選択します。

適切な配置になったら、惑星の回転の調整に進みます。

惑星の回転を調整します。

1. 矢印をクリックして 惑星 設定にアクセスするためのレイヤー
2. 変換ドロップダウンで、ストップウォッチアイコンをクリックします。 回転 最初のキーフレームを確立する（フレーム0の位置合わせを確実にする）

1. タイムラインを最後まで滑らせる
2. 次に、ストップウォッチを横に動かします 回転 最後のキーフレーム（タイムラインの最後での位置合わせを確実にする）
3. 最後に、回転値を変更します。最初の入力は回転数を指定し、2番目の入力は回転内の角度を設定します。（例：1×70.0°は1回転に相当します） そして 70度）

注記: アニメーション スキームに合わせて、初期および最終の回転値をカスタマイズします。

他の 6 つの惑星の回転アニメーションを同期するには、上記の手順を繰り返します。すべての惑星にキーフレームと回転を追加したら、最初のフレームからスペース バーを使用してアニメーション シーケンスをプレビューします。

輸出

アニメーションが完成しました。これで、エクスポートする準備が整いました。

エクスポートするには、Bodymovinプラグイン（Bodymovin拡張機能のインストール方法を参照）を利用して、After Effectsの合成画像を統合JSONファイルに変換します。Bodymovin拡張機能がプリインストールされている場合は、After Effectsメニューの 窓、ナビゲート 拡張機能を選択し、 ボディムービン.

エクスポート処理を開始するには、コンポジションが選択されていることを確認し、エクスポートフォルダを指定して、 与える.

Webflowにアニメーションを組み込む

次に、エクスポートしたファイルをインポートします。

After Effects アニメーションを Webflow に統合します。

1. Webflow事業にアクセス デザイナー
2. を押す 資産 シンボル、またはコンソールのJをタップして 資産パネル
3. タップして アップロードボタン After Effectsアニメーションを選択するか、After Effects JSONファイルを 資産パネル
4. アニメーションをプロジェクトのキャンバスにドロップします

プレビュー切り替えシンボル (目のシンボル) をタップしてプロジェクトをプレビューすると、アニメーションが自動的に再生されることがわかります。その後、クリック時にアニメーションを開始するオンクリック トリガーを設定できます。

インタラクショントリガーを設定する

これがメインの部分です。クリック時のトリガーを設定します。トリガーとアニメーションについての理解を深めます。

トリガーを構成するには:

インタラクション シンボル、またはコンソールのHキーを押して インタラクション パネル

マウスクリック（タップ） 選択

1回目のクリックで ドロップダウン: ロッティー再生 代替