插入 Lottie 動態圖形

在您的網站設計中利用 Lottie 動畫來增強互動並吸引用戶。然後，使用 Lottie 元素配置和參與來管理動畫的播放。

在本文中，您將發現：

1. 取得Lottie JSON和dotLottie動畫檔案的流程
2. 在您的網站上新增動畫
3. 修改動畫設定
4. 透過互動控制動畫的方法

取得Lottie JSON和dotLottie動畫檔案的方式

您可以將 Lottie 動畫以 Lottie JSON 或 dotLottie 檔案的形式上傳到您的網站。 

有兩種方法取得 Lottie JSON 檔案：

• 使用以下命令將 After Effect 動畫匯出為 JSON 文件 免費的 After Effects bodymovin 插件
• 從以下位置檢索 JSON 動畫文件 Lottiefiles.com （或其他線上動畫庫）

取得 dotLottie 檔案有 3 種替代方法：

• 使用以下命令將現有的 Lottie JSON 檔案轉換為 dotLottie JSON 到 dotLottie 轉換工具
• 使用 After Effects 直接匯出 dotLottie 文件 LottieFiles 插件
• 從以下位置下載預先建置的 dotLottie 文件 LottieFiles.com.

其他參考資料

• 了解如何在 After Effects 中為 Lottie 製作動畫
• 探索 Lottie 支援的 After Effects 功能
• 了解有關 Webflow 中的 After Effects 和 Lottie 的更多信息

將動畫融入您的網站

您可以使用 Lottie JSON 或 dotLottie 動畫作為符號、縮圖、頁面背景、頁面載入器、自訂動畫遊標等等。 

要將 Lottie JSON 和 dotLottie 檔案附加到「資源」面板：

1. 點擊 ”資產左側工具列中的「符號
2. 點選“雲” 上傳符號
3. 從您的電腦中選擇 1 個或多個文件

隨後，您可以將動畫整合到您的網站中。您可以將它們直接從資源面板拖放到畫布上，也可以利用 洛蒂動畫 成分。要使用 Lottie 動畫組件：

1. 導航 新增面板 > 媒體 部分
2. 放下 洛蒂動畫 組件到 Webflow 畫布上
3. 按 替換 Lottie 序列 在Lottie動畫組件設定中
4. 從以下位置選擇您的 Lottie JSON 或 dotLottie 文件 資產面板

修改動畫配置

Lottie 動畫元件設定控制網站頁面上動畫的行為。若要調整設置，請選擇 洛蒂動畫 組件並前往 元素設定面板 > 洛蒂動畫設定。然後，您可以調整動畫的設定：

• 內建持續時間 - 動畫運行的持續時間
• Looping — 動畫是否無限循環
• 反向播放－如果動畫反向播放
• 渲染 — SVG 或畫布

重要提示： 預設情況下，所有動畫都在頁面載入時執行。因此，造訪該頁面的人不會看到折疊下的動畫（頁面需要滾動的部分），除非您設定動畫循環或透過互動調節動畫的播放。

透過互動調節動畫

您可以透過互動來管理 Lottie 動畫，以修改動畫運作的方式和時間。互動使您能夠定義開始動畫的觸發器、選擇要播放的動畫的特定片段以及確定在何處停止動畫播放。 

Lottie 動畫可以存取兩種互動：

1. 這 洛蒂回放 卡通
2. 這 洛蒂 行動 

請記住，這些互動是 獨自 適用於 Lottie 動畫。

筆記： 如果您需要修改動畫的持續時間/速度，可以透過 洛蒂動畫設定 內的部分 元素設定面板。請注意，設定中 洛蒂動畫設定 部分可能會被覆蓋 洛蒂回放 設定中的 互動面板.

重要提示： 預設情況下，所有動畫都會在頁面載入時播放。因此，訪客不會觀察到折疊下方的動畫（需要滾動的部分），除非您將動畫配置為循環或透過互動控制動畫的播放。

圖 1：點擊時啟動動畫

透過交互，您可以設定使用者點擊時播放的動畫：

1. 點擊您的 洛蒂動畫 畫布上的組件
2. 訪問 互動面板
3. 打 ”加” 旁邊的圖標 元素觸發
4. 選擇“滑鼠點擊（點擊）”
5. 選擇旁邊的“選擇操作” 行動 在裡面 第一次點擊時 部分
6. 選擇“Lottie 播放” 整合

您也可以選擇 延遲 播放， 反向 動畫，或將動畫設定為 環形.

示範 2：滾動進出視圖時啟動動畫

您也可以選擇在動畫進入和退出畫面上的可視區域時觸發動畫：

1. 選擇你的 動畫 設計畫布上的插圖
2. 導航至 互動面板
3. 點選“加” 符號旁邊 元素觸發
4. 選擇“捲動至視圖”
5. 選擇旁邊的操作 行動 在裡面 當捲動到視圖中時 類別
6. 選擇下面的“動畫” 整合
7. 選擇旁邊的一個操作 行動 內 當滾動到視圖之外時 部分
8. 選擇“動畫重播” 整合
9. 啟用設定 反向 選項

自訂您的動畫 抵銷 或一個 延遲.

範例 3：在頁面載入期間開始一段動畫

利用 動畫 動作交互，用於精確控制動畫的行為。自訂開始幀和結束幀，實現緩動功能，並定義特定的持續時間。

若要調整動畫的開始或結束畫面：

1. 找到您的 動畫 設計畫布上的插圖
2. 打開 互動面板
3. 選擇“加” 旁邊的圖標 頁面觸發
4. 選擇“頁面載入”
5. 選擇鄰近的動作 行動 在裡面 當頁面開始載入時 部分
6. 選擇下面的“啟動動畫” 自訂動畫
7. 點選“加” 符號旁邊 定時動畫
8. 為您的動畫指定一個標題（例如，「載入時啟動動畫」）
9. 選擇“加「 旁邊 行動
10. 選擇“動畫” 整合
11. 調整下動畫幀 卡通 所需起始幀的部分
12. 在下方標記選項“設定為初始狀態” 定時
13. 點選“加「 旁邊 行動
14. 選擇下面的“動畫” 整合
15. 定義動畫幀 卡通 部分暫停在特定幀（例如，將其設為 100% 以播放直到結束幀）
16. 按 節省

根據需要調整動畫的持續時間、延遲或緩動效果。

小建議： 若要使用動畫的預設持續時間，請選擇 動畫 設計畫布上的插圖，導覽至 元素設定 > 洛蒂動畫設定 並啟用“使用內建持續時間”選項。