嵌入After Effects和Lottie動畫

透過Webflow的After Effects和Lottie集成，您可以在設計中使用After Effects（AE）動畫，甚至可以用Lottie元素設置和Webflow的交互和動畫工具控制其播放。

1. 獲取JSON動畫文件

2. 將動畫添加到網站上

3. 用互動方式控制動畫

獲取Lottie JSON動畫文件

您可以將AE動畫以Lottie JSON文件的形式上傳至您的網站。 您可以透過以下方式獲得這些文件：

1. 用免費的AE bodymovin插件將AE動畫導出為JSON文件

2. 從Lottiefiles（或其他在線動畫庫）下載免費的JSON動畫文件

將動畫添加到網站

您可以使用JSON或Lottie動畫作為圖標、縮略圖、頁面背景、頁面加載器、自定義動畫光標等。

就像其他圖片文件一樣，您可以把您的JSON動畫文件上傳到資產面板上，然後直接把它們放到網頁上。

另外，您可以使用一個Lottie動畫元素（位於添加元素面板>媒體）作為動畫的占位符，直到上傳您的JSON文件。然後您可以選擇用資產面板中的Lottie序列來替換這個占位符。

指定動畫的播放方式

Lottie元素的設置允許您控制動畫在頁面上的播放方式。您可以覆蓋默認的持續時間，將動畫設置為無限期循環，或者將動畫設置為反向播放

下面是您可以為每個Lottie動畫元素設置的所有參數的列表：

• 替換Lottie序列（按鈕）--用資產面板中的另一個動畫或上傳一個新的動畫來替換該動畫

• 預覽動畫（按鈕）--在畫布上播放和預覽動畫

• 使用內置時長（複選框）--默認勾選，使用動畫的默認時長，取消勾選以覆蓋持續時間

• 使用內置時長（輸入字段 - 當複選框未被選中時出現）--默認情況下，它顯示動畫的內置時長。使用一個較小的值來使它變快，或使用一個較高的值來使它變慢

• 循環（複選框）--讓動畫無限期地播放

• 反向播放（複選框）--讓動畫反向播放

• 渲染模式（預設切換）--切換動畫的渲染模式。默認是SVG。SVG很適合向量動畫。Canvas適合於圖像序列中最常見的光柵化層。如果動畫在選定的模式下不能正確播放，請切換渲染器。

用互動控制動畫

借助Webflow交互和Lottie集成的力量，您可以對這些動畫的播放方式和時間有更多的控制。透過這些選項，您可以在用戶互動時播放和暫停動畫。

您可以設置觸發器來啟動動畫，選擇動畫的哪一部分來播放，以及在哪裡停止動畫播放。 有兩種方法可以用互動來控制Lottie動畫：

1. Lottie播放動畫

2. Lottie動作

這兩個選項只對Lottie動畫元素有效，所以需要在畫布上選擇Lottie動畫。

範例1. 點擊時播放動畫 默認情況下，所有的動畫都在頁面加載時播放。所以，當您滾動到這些動畫時，您不會看到它們的播放，除非將它們設定為循環播放。透過互動，您可以控制播放。

假設您想在用戶點擊的時候播放一個動畫：

1. 選擇畫布上的Lottie動畫元素

2. 在互動面板中添加一個鼠標點擊（tap）元素觸發器

3. 在操作選單中的On 1st click下選擇Lottie playback。您可以選擇延遲播放、反向播放或設置為循環播放

如果需要改變動畫的持續時間/速度，您可以通過元素設置面板中的Lottie元素設定來實現。Lottie動畫設置中的所有其他設置將被互動面板中的Lottie播放設置所覆蓋。

範例2. 當滾動進入和離開視圖時播放動畫 您也可以將我們在上例中使用的快速動作用於鼠標懸停和滾動進入視窗的互動。

在這個例子中，讓我們把動畫設置為進入視窗時播放：

1. 選擇Lottie動畫元素

2. 在互動面板中添加一個滾動進入視圖元素的觸發器

3. 在滾動進入視圖時創建一個動畫

4. 在操作選單中選擇Lottie播放，在第一次點擊時播放

5. 如果動畫播放過快，可以選擇設置一個偏移量

6. 在動作選單中選擇"On 2nd click"下的Lottie回放

7. 反向播放

8. 可以選擇設定一個偏移量

範例3. 在頁面加載時只播放動畫的一部分 對於某些互動類型，您可能需要創建一個自定義的動畫，並使用Lottie動作，它讓動畫的播放方式有更多的控制。 這個選項允許您為動畫設定自定義的開始和結束幀。而且像其他定時動作一樣，您可以應用緩和效果並設置一個自定義的持續時間。此外，您還可以添加其他動作來創建更複雜的動畫。

如果想調整開始或結束的幀：

1. 選擇Lottie動畫元素

2. 在互動面板中添加壹個頁面加載元素的觸發器

3. 在頁面開始加載時創建一個動畫

4. 添加一個Lottie動作

5. 可以選擇，如果想讓動畫從不同的幀開始，在Lottie設置下調整開始幀並將其設置為初始狀態

6. 添加另一個Lottie動作

7. 如果想讓動畫在不同的幀上停止，將結束幀設置為100%或更小

8. 調整持續時間以控制動畫播放的速度

提示 如果您想使用動畫的默認持續時間，在畫布上雙擊動畫，取消勾選持續時間複選框，使用出現的內置持續時間。