回收活動

您可以使用先前在網站其他部分產生的活動。當您希望使用相同的活動來處理重複佈局或具有相同結構的元件時，這非常有用。

Webflow 的活動中有 2 個主要控制項可協助重複使用活動：

1. 觸發配置- 此時，您可以選擇觸發器是否僅屬於特定元素（所選元素），或具有相同分類的所有元素
2. 行動目標 - 在這種情況下，您可以確定動畫中的動作是否會影響特定元素、一組元素或互動觸發器本身

重要的： 目前回收頁面Activity是不可行的。您需要為每個頁面指派頁面觸發器。不過，您可以指派動畫來定位元素的分類，以便您可以在每個頁面上回收它們。為此，請在第一頁建立頁面觸發器並偽造動畫。確保您的目標是分類而不是所選元素。隨後，導航到每個頁面，引入頁面觸發器並指定您之前製定的動畫。

在本教學中，我們將引導您完成 2 個可重複使用的動畫： 

1. 如何制定按鈕箭頭移動活動
2. 如何在視圖活動中建立捲動

如何開發按鈕箭頭移動活動

在本例中，您將了解如何在具有相同類別的所有按鈕上啟動相同的「箭頭移出」活動。您還將了解如何確保動畫僅影響網站訪客目前懸停的按鈕箭頭。

如何製作自訂按鈕

首先，您將首先製作一個包含文字和箭頭的自訂按鈕（即您隨後將套用動畫的按鈕）。您需要將箭頭圖像上傳到“資源”面板以在按鈕中使用。要塑造自訂按鈕的形狀：

1. 前往 插入面板 > 基本的
2. 放下一個 連結區塊 到 Webflow 畫布上
3. 導航 風格面板 > 風格選擇器 並為連結塊分配一個分類（例如，“按鈕框”）
4. 去 插入面板 > 版式
5. 添加一個 文字區塊 在連結區塊內
6. 繼續 風格面板 > 風格選擇器 並為文字區塊分配一個分類（例如“按鈕文字”）
7. 訪問 資產面板
8. 將箭頭圖像拖曳到連結區塊中
9. 導航 風格面板 > 風格選擇器 並為箭頭影像分配一個分類（例如“按鈕箭頭”）
10. 選擇連結區塊（即“按鈕框”）
11. 前往 風格面板 > 佈局 並設定 展示 到 彈性盒

現在您已經設計了按鈕！您可以包含邊距和填充、邊框、懸停狀態或任何其他樣式。您也可以複製該按鈕以進行後續測試，以確認您的活動已套用至所有按鈕。

專家建議： 將分類指派給自訂按鈕的元件（即連結區塊、文字區塊和箭頭影像）可讓您在擁有相同分類的其他元素上重複使用活動。例如，如果您希望回收自訂按鈕並使用相同的活動，這將非常有用。

如何開發自訂按鈕活動

現在，您可以建立按鈕箭頭移動活動，以便當網站訪客將滑鼠懸停在按鈕上時箭頭向右移動。要建立該活動，您將： 

1. 製作自訂按鈕活動觸發器
2. 建立動畫以在懸停時移動按鈕的箭頭
3. 建立動畫以在懸停時重置箭頭的位置
4. 將觸發器應用於具有相同分類的所有元素
5. 評估自訂按鈕

製作自訂按鈕活動觸發器

觸發器是當網站訪客與按鈕互動時啟動動畫的東西。在此場景中，您將設定滑鼠懸停觸發器，因此當網站訪客將滑鼠懸停在按鈕上時，就會出現動畫（即箭頭移動）。

1. 選擇連結區塊（例如“按鈕框”）
2. 訪問 活動面板
3. 點選“加” 旁邊的圖標 元素觸發
4. 選擇“滑鼠懸停”

建立動畫以在懸停時移動按鈕的箭頭

在此步驟中，您將在按鈕的箭頭上安排懸停動畫，以便當網站訪客將滑鼠懸停在按鈕上時，它會稍微向右移動。

1. 選擇連結框（即“按鈕框”）
2. 點擊旁邊的“選擇動畫” 行動 在裡面 懸停時 部分
3. 選擇下面的“開始動畫” 自訂動畫
4. 點選“加” 旁邊的圖標 定時動畫
5. 指定動畫的名稱（例如“箭頭移出”）
6. 選擇按鈕的箭頭（即“按鈕箭頭”）
7. 點選“加「 旁邊 行動
8. 選擇 移動 在下面 轉換
9. 在 x 軸上設定像素值（例如 6 px） 移動
10. 如果需要，調整緩動和持續時間
11. 選擇旁邊的“僅具有此分類的兒童” 班級
12. 輕敲 節省

重要的： 「僅具有此分類的子項」應用於參考觸發元素（即「按鈕框」連結區塊）及其套用了該分類的子項（即「按鈕箭頭」箭頭）。如果您不將動畫限制為影響“唯一的子項目”，則當網站訪客將滑鼠懸停在某個自訂按鈕上時，網站上的每個箭頭實例都會發生變化。

假定您已根據連結區塊的分類（即「按鈕框」）設定觸發器，並將動畫設定為僅影響具有箭頭分類的子項目（即「按鈕箭頭」），則該活動將影響該連結區塊的每個實例。

建立動畫以在懸停時重置箭頭的位置

現在，讓我們配置懸停。

1. 選擇連結區塊（例如“按鈕框”）
2. 導航至 互動面板
3. 選擇觸發元素為 滑鼠懸停
4. 點擊旁邊的“選擇動畫” 行動 在裡面 懸停時 部分
5. 選擇下面的“開始動畫” 自訂動畫
6. 選擇“的圖標三個披露點” 接近現有動畫（例如，“箭頭移出”）
7. 挑選 複製
8. 選擇“齒輪複製動畫附近的「圖標
9. 改變 動畫的名稱（例如，「箭頭向後移動」）
10. 選擇時間軸上箭頭的移動動畫
11. 下調整x軸為0px 移動
12. 點選 節省

將觸發器擴展到共享相同類別的所有元素

預設情況下，觸發器僅適用於選定的元素（例如，連結區塊），但是，為了獲得通用效果，請修改觸發器以覆寫具有相同類別的所有元素（例如，「按鈕方塊」），從而允許交互統一發生在該類別的所有實例上。這種方法可以在整個網站上複製自訂按鈕，從而確保這些重複項上的互動一致。

要將觸發器擴展到具有相同類別的所有元素：

1. 選擇連結區塊（即“按鈕框”）
2. 訪問 互動面板
3. 選擇 滑鼠懸停 元素觸發
4. 選擇 班級 在 觸發設定

交互現在將涵蓋共享該類別的所有元素（即“按鈕框”）。在畫布上複製自訂按鈕後，繼承相同類別的複製按鈕將呈現與原始自訂按鈕相同的箭頭移動互動。

測試自訂按鈕

透過將滑鼠懸停在自訂按鈕和任何重複按鈕上來驗證網站的功能，以確認互動無縫地應用於繼承該類別的所有按鈕。

創建滾動啟動交互

在建立可重複使用的滾動效果時，以觸發元素本身為目標是有利的。在這裡，我們將演示如何設計一種交互，使網站標題向右滑動並在滾動到視圖中時增加不透明度。

為了發展這種互動，您將：

1. 建立滾動到視圖觸發器
2. 將捲動製作成視圖動畫
3. 明確行動目標

建立滾動到視圖觸發器

要啟動交互，首先，在用於動畫的父元素（即 div 區塊）上設定「捲動到檢視」觸發器。

1. 選擇 div 區塊 - 例如，為 div 區塊分配一個「內容包裝器」類
2. 導航至 互動面板
3. 點擊“加” 旁邊的圖標 元素觸發
4. 選擇“捲動至視圖”

若要在具有相同類別的元素之間重複使用此交互，請在類別層級套用觸發器。選擇 班級 在下面 觸發設定 確保每當具有該類別的元素（例如“內容包裝器”）滾動到視圖中時動畫都會啟動。

將捲動製作成視圖動畫

捲動到視圖動畫包含兩個階段：

• 初始狀態 — 將元素定位到左側 50px 並將不透明度設為 0%
• 捲動到視圖中 state — 將元素轉換為 100% 不透明度並將其傳回 x 軸原點

首先定義 div 區塊的初始狀態，將其放置在左側 50px 處，不透明度為 0%，然後再捲動到視圖中：

1. 選擇 div 區塊（例如“內容包裝器”）
2. 訪問 互動面板
3. 選擇 捲動到視圖中 元素觸發
4. 點擊旁邊的“選擇動畫” 行動 在裡面 當捲動到視圖中時 部分
5. 選擇下面的“開始動畫” 自訂動畫
6. 選擇“加” 圖標附近 定時動畫
7. 為您的動畫指定名稱（例如“內容包裝動畫”）
8. 點擊“加” 圖標附近 行動
9. 選擇 移動 在下面 轉換
10. 在下方指定 x 軸的值（例如 -50px） 移動
11. 勾選「設定為初始狀態」下的 chekbox 定時
12. 點擊“加” 圖標附近 行動
13. 選擇 不透明度 在下面 風格
14. 設定 不透明度 到一個值（例如，0%）
15. 勾選「設定為初始狀態」下的 chekbox 定時

接下來，定義標題捲動到視圖中後的操作：

1. 點擊“加” 圖標附近 行動
2. 選擇 移動 在下面 轉換
3. 在下方指定 x 軸的值（例如 0px） 移動
4. 取消勾選「設定為初始狀態」下的 chekbox 定時
5. 點擊“加時間軸上您剛剛指定的操作旁邊的圖示（例如，「內容包裝器」0px 移動 action) — 這將確保操作發生的同時標題返回到 x 軸上的 0px。
6. 選擇 不透明度 之內 風格
7. 指定百分比值 不透明度 （例如，100%）
8. 按 節省

現在，有必要確保動畫僅影響觸發它的元素（例如，「內容包裝器」div 區塊）。

制定行動目標

配置操作目標以使操作影響互動觸發器：

1. 選擇 div 區塊（例如“內容包裝器”）
2. 導航 互動面板
3. 選擇 捲動到視圖中 元素觸發
4. 按 ”齒輪” 在先前設定的動畫旁邊（例如，“內容包裝動畫”）
5. 選擇動畫時間軸中的所有動作（按住 命令 （在 Mac 上）或 控制 （在 Windows 上）並按一下所有時間軸操作）
6. 選擇“交互觸發” 影響 落下
7. 打 節省

透過這樣做，操作將僅影響互動觸發器，而不影響您在建立動畫時最初選擇的特定元素。這種方法允許動畫的可重複使用性，以新互動的觸發元素取代動作的先前目標元素。