在我們關於 Webflow 中的 After Effects 和 Lottie 的系列範圍內,我們使用 Bodymovin 插件在 After Effects 中設計了頁面載入過渡。本指南將引導您完成將其整合到我們的專案中的過程,以便它顯示在螢幕上,然後在頁面完成加載後消失。
本教學涵蓋的主題:
- 將 Lottie 過渡納入我們的項目
- 建立觸發器
- 將過渡配置為淡出
將 Lottie 過渡整合到我們的專案中
您必須從 After Effects 匯出 Lottie 過渡並將其上傳到您的 Webflow 專案。我們使用 Bodymovin 導出過渡。了解如何在我們綜合教程的步驟 3 和 4 中執行此操作。
若要找到並插入過渡,請點擊左側工具列中「資源」面板中的圖像圖標,然後將過渡拖曳到頁面頂部。
![64b9486b08852b7548f36cad_603426c4512daf7de5e50f11_page-loader-animation_1 .json 資源在資源面板上加以反白顯示。面板中還有其他五個資產。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36cad_603426c4512daf7de5e50f11_page-loader-animation_1.png)
若要循環過渡,請在 Lottie 動畫設定彈出視窗中啟用循環。
![64b9486b08852b7548f36c94_603426eec982c9ccfeb23a0a_page-loader-animation_2 樂蒂動畫設定面板顯示替換樂蒂序列按鈕、預覽視窗、預覽動畫按鈕、使用內建持續時間、循環和反向播放的複選框。它還顯示使用內建持續時間的輸入欄位。以下是渲染、SVG 和畫布的兩個選項。底部有一個顯示所有設定按鈕。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36c94_603426eec982c9ccfeb23a0a_page-loader-animation_2.png)
關閉設定窗口,然後在右側的“樣式”面板中,從“位置”旁邊的下拉列表中選擇“固定”。這將決定過渡在螢幕上的位置。
對於尺寸,指定 100% 作為寬度和高度。
![64b9486b08852b7548f36ca1_603428019bc5533de66ae382_page-loader-animation_3 樣式面板中的尺寸部分顯示寬度為 100%,高度為 100%。這些在面板上突出顯示。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36ca1_603428019bc5533de66ae382_page-loader-animation_3.png)
在「位置」中,為 z 索引(堆疊順序)分配一個較高的數字,例如 9999。
![64b9486b08852b7548f36c90_60342812b6e9ff706652cf8a_page-loader-animation_4 輸入了 9999 的 z-Index 輸入欄位在樣式面板的位置部分中突出顯示。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36c90_60342812b6e9ff706652cf8a_page-loader-animation_4.png)
如果您的過渡具有透明背景,您還可以添加背景顏色。
![64b9486b08852b7548f36cb1_60342872a313c30dfa2e4802_page-loader-animation_5 左邊的第一步選擇顏色按鈕以顯示顏色選擇器,右邊的第二步選擇您喜歡的背景顏色。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36cb1_60342872a313c30dfa2e4802_page-loader-animation_5.png)
偉大的!讓我們繼續配置觸發器以隱藏頁面載入完成時的轉換。
建立觸發器
在「互動」面板中,點擊頁面觸發器旁的加號,然後從下拉清單中選擇頁面載入。
![64b9486b08852b7548f36caa_6034289aab4fa03cb9c04bb4_頁面載入器動畫_6 第一步,點選左側頁面觸發器部分的加號。右側第二步,從下拉清單中選擇頁面載入選項。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36caa_6034289aab4fa03cb9c04bb4_page-loader-animation_6.png)
在頁面完成載入下方,從「動作」功能表中選擇「啟動動畫」。
![64b9486b08852b7548f36ca7_603428c544af050cccd02ab4_頁面載入器動畫_7 當頁面完成載入時,會開啟一個下拉式選單以供操作選擇。有 2 個選項,自訂動畫和啟動突出顯示的動畫。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36ca7_603428c544af050cccd02ab4_page-loader-animation_7.png)
要保持組織,請點擊定時動畫旁邊的加號並標記您的動畫(例如,頁面載入器)。
留在「互動」面板中進行下一步,我們將在頁面載入完成後確定過渡是否隱藏。
將過渡配置為消失
在「互動」面板中選擇「定時操作」旁的加號,然後從下拉清單中選擇「隱藏/顯示」。
![64b9486b08852b7548f36c9b_603428d8cdd999205ae66da5_page-loader-animation_8 第一步,在左側選擇「定時動畫」部分上的加號。步驟 2 在中間,選擇操作列上的加號。第 3 步,在操作下拉清單的「雜項」部分中選擇「隱藏/顯示」選項。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36c9b_603428d8cdd999205ae66da5_page-loader-animation_8.png)
在“隱藏/顯示”下方,將“顯示”設定配置為“無”。
![64b9486b08852b7548f36ca4_603429fcae93144d7e33f675_page-loader-animation_9 隱藏/顯示顯示 6 個顯示選項。無選項突出顯示。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36ca4_603429fcae93144d7e33f675_page-loader-animation_9.png)
在「定時操作」部分中,點擊時間軸中的 0.00 秒,然後從下拉清單中選擇「不透明度」。
![64b9486b08852b7548f36c8d_60820949222e0b39f8157e21_page-loader-animation_10 左側第一步,選擇 0.00 時間碼。右側第二步,從下拉清單中選擇不透明度操作。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36c8d_60820949222e0b39f8157e21_page-loader-animation_10.png)
將不透明度調整為 0,將持續時間調整為 1.5 秒,以逐漸淡出過渡。
![64b9486b08852b7548f36c9e_60342a29ffd1cc08a617a997_page-loader-animation_11 計時設定面板提供一個用於設定為初始狀態的單選按鈕、一個帶有延遲輸入欄位的開始下拉式選單、一個緩動持續時間以及兩個具有緩動下拉清單類型的設定。不透明度部分包含一個用於調整百分比的滑桿。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36c9e_60342a29ffd1cc08a617a997_page-loader-animation_11.png)
在「定時操作」部分中,在時間軸上的 1.5 秒處按 Lottie 動畫,並在「隱藏/顯示」中將「顯示」設定為「無」。
![64b9486b08852b7548f36c97_60342a39009a2f27015886a0_page-loader-animation_12 左側第一步驟選擇 1.50 時間碼處的動作,右側第二步選擇隱藏/顯示設定面板上的無顯示選項。](https://webflow-s3.tenten.co/2024/04/64b9486b08852b7548f36c97_60342a39009a2f27015886a0_page-loader-animation_12.png)
在預覽模式下檢查您的調整 - 微調您的設定並自訂過渡,以與您正在製作的頁面設計完美契合。
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日