在您的 Webflow 網站中新增曲線背景

樣條線 是一款用於製作動態 3D 設定的軟體。樣條線連接可讓您將樣條線背景及其出現位置直接嵌入到 Webflow 中。您也可以透過 Webflow 的本機互動使 Webflow 中的樣條線實體栩栩如生。

透過本指南，您將了解：

1. 形成樣條背景的過程
2. 將 Spline 背景附加到 Webflow 網站的方法
3. 在 Webflow 中為樣條線背景設定動畫

建構和匯出樣條背景

最初，您必須 建立 Spline 中的背景。首先，請訪問 樣條線，建立一個帳戶，然後開始設計！參考 樣條線手冊 或教學影片以獲取有關設計的更多見解。

背景準備好後，您可以將其匯出：

1. 按 出口 在樣條曲線編輯器工具列中
2. 使用權 程式碼導出
3. 複製標題處的鏈接 概述 選項卡（連結將以“.splinecode”副檔名結尾）

將樣條曲線背景新增至您的 Webflow 網站

建立並匯出樣條背景後，您可以將背景插入 Webflow 網站。 Webflow 內建 樣條背景 元件，您可以像任何其他元素一樣對其進行自訂（例如，定位、大小調整等）。

要將樣條線背景嵌入到 Webflow 站點中：

1. 導航 新增面板 > 媒體 
2. 拖曳一個 樣條背景 組件到設計區域
3. 繼續 元素設定面板 > 樣條線背景設置
4. 將樣條曲線背景連結（即以「.splinecode」副檔名結尾的連結）插入到 網址 場地

在 Webflow 中為樣條線背景設定動畫

現在您的背景已無縫整合到您的 Webflow 網站中，您可以靈活地使用 Webflow 的固有互動功能為其設定動畫。

若要為樣條線背景中的物件設定動畫：

1. 選擇 樣條背景 在設計區
2. 訪問 互動面板
3. 選擇一個 元素觸發 或者 頁面觸發
4. 依照指南配置自訂動畫至第 6 步
5. 從“動作”下拉清單中選擇“樣條動畫”
6. 從以下位置選擇實體 樣條線 > 目的 落下 

隨後，您可以根據需要微調樣條背景。操縱動畫時間軸中物件的位置、旋轉和縮放（在所有 X、Y 和 Z 軸上）。您也可以自訂操作目標以確定受動畫影響的元素或觸發器。