為 After Effects 設定 Bodymovin

Bodymovin 是一個開放、免費的擴充程序，可讓您將 After Effects 合成匯出為 JSON documents，以便嵌入網站並整合到應用程式中。讓我們深入研究一下 Bodymovin 擴展的初始化過程。

我們將透過四個簡單的步驟來完成此任務：

1. 獲取 Bodymovin 擴展
2. 確認 After Effects 設定
3. 生成動畫
4. 將動畫整合到網站中

1. 獲取 Bodymovin 擴展

造訪 Adobe Exchange 並下載免費的 Bodymovin 擴充功能。

注意：如果您有多個訂閱，請確保您登入正確的 Creative Cloud 帳戶，以便在後續步驟中輕鬆找到擴充功能。

2. 確認 After Effects 設定

啟動 After Effects 並在「視窗」>「擴充功能」選單中找到 Bodymovin。

如果 Bodymovin 不可見，請嘗試重新啟動 After Effects。

若要確保正確的檔案存取權限，請導覽至 After Effects > 首選項 > 腳本和表達式（在 Windows 上為編輯 > 首選項 > 腳本和表達式）。

定位 允許腳本寫入檔案和存取網絡 並確保它已啟用。 

3. 生成動畫

讓我們使用 Bodymovin 導出合成。

在 After Effects 中開啟動畫並存取「視窗」>「擴充功能」>「Bodymovin」以匯出動畫以及任何其他合成以進行渲染。 

注意：如果您的合成包含光柵化影像，請在「設定」選單中啟用壓縮。 

在點擊「渲染」匯出之前，檢查指定資料夾並儲存 JSON 檔案。

渲染過程完成後，您現在應該在指定資料夾中擁有一個 JSON 檔案。接下來，我們將動畫插入網站。 

4. 將動畫整合到網站中

對於此步驟，我們將使用 Webflow，但無論是手動編碼還是利用替代平台，該方法都保持一致。 

從左側面板的資源部分，將動畫拖曳到您的佈局上。 

就這樣！發布、匯出或預覽後，您的動畫應該會自動播放。 

如果您還沒有，請探索我們全面的 After Effects & Lottie in Webflow 課程。 

訪問 Airbnb 的 Lottie 網站 查看其目前支援的 After Effects 功能清單。