作為 After Effects 和 Webflow 中的 Lottie 系列的一部分，我們在 After Effects 中製作了 Lottie 動畫。在本指南中，我們將配置 Lottie 資源以在其可見時進行動畫處理。
我們將分四個階段來實現這個目標：
- 合併 Lottie 資產
- 建立滾動觸發器
- 設定動畫
1.合併Lottie資產
您必須從 After Effects 匯出 Lottie 動畫並將其上傳到您的 Webflow 專案。我們使用 Bodymovin 匯出動畫。在我們完整指南的步驟 3 和 4 中了解如何完成此操作。
對於此作業，您需要準備 3 個部分 - 請參閱我們的部分指南或 克隆項目.
若要找到並新增動畫，請選擇左側邊欄中「資源」面板中的圖像圖標，然後將動畫拖曳到中央部分。
出色的！現在，讓我們建立觸發器。
2. 設定基於滾動的觸發器
在添加觸發器之前，我們需要確保選擇動畫（而不是其他元素）。我們希望當我們滾動時出現這個動畫。從右側側邊欄的互動面板中，開啟元素觸發器選單並選擇在視圖中捲動時。
留在「互動」面板中，在我們的最終步驟中配置動畫。
3.設定動畫
讓我們透過引入動畫來實現這一點。在下面 滾動時， 挑選 播放滾動動畫 從“操作”功能表。在滾動動畫旁邊，點擊加號並從下拉式選單中選擇 Lottie 以包含我們的初始操作。
在滾動動作時間軸和下方的 Lottie 下選擇 100% 處的動畫，將其調整為 100%。
現在，動畫將從 0% 開始，並在滾動到視圖之外時達到 100%。
您可以啟用即時預覽模式或在預覽中評估您的工作，以便在滾動時觀察動畫進度。
Ewan Mak 的最新帖子 (看全部)
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日
EN 
ZH 
ZH_CN 
KO 
JA