原因和行動

如何在特定斷點處提示動畫

如果您希望在某些斷點處啟動動畫，您可以驗證您希望動畫發生的斷點。預設情況下，動畫會在所有斷點（桌面及更高版本、平板電腦、手機橫向和手機縱向）上觸發。

例如，如果您希望滑鼠點擊互動僅發生在桌面和斷點之上，這可能會很有用。在這種情況下，訪客將能夠用滑鼠啟動互動。

如何在具有相同類別的所有元素上啟動動畫

如果您選擇在共享相同類別的所有元素上開始動畫，則可以在一個元素與該類別上實現交互，然後將其應用於整個類別。

若要在具有該類別的所有元素上建立動畫：

1. 在元素上設定動畫
2. 繼續 觸發設定 並選擇 班級
3. 從以下位置選擇您想要套用動畫的類 班級 落下

了解有關重用互動的更多資訊。 

附加動畫配置

滾動偏移

對於許多頁面捲動觸發器（例如，「捲動到檢視中」、「在檢視中捲動時（連續）」等），您可以選擇設定 抵銷。這會推遲互動的啟動，直到達到頁面的特定滾動百分比 - 滾動偏移量越大，訪客在互動開始之前滾動的時間就越長。

延遲

您有能力定義動畫 延遲，導致動畫僅在指定的時間延遲過後才發生。

平滑

您也可以修改 平滑化 一個動畫的。平滑決定了動畫響應滑鼠移動的速度。

如何配置動畫

若要根據剛剛設定的觸發器配置動畫，您可以生成 自訂動畫 或選擇預先存在的動畫（例如，淡入淡出、收縮、果凍等）。

如何設定預先存在的動畫

現有的動畫包括 出現和消失 和 強調 在設計器中預先配置的動畫。可以選擇這些作為單獨構建動畫的每個組件的更快替代方案。

筆記： 預先存在的動畫只能為元素觸發器建立，而不能為頁面觸發器建立。

要配置預先存在的動畫：

1. 發起一個 元素觸發 （例如，滑鼠懸停、滾動到視圖中等）
2. 展開 行動 從開始操作部分的下拉清單（例如，如果您選擇滑鼠懸停元素觸發器，您將揭開 行動 從下拉式選單中 懸停時 部分）
3. 選擇下列任一操作 出現和消失 category 或 強調 類別

隨後，您可以自訂方向和延遲 出現和消失 動畫，或方向 強調 動畫。

如何配置自訂動畫

配置自訂動畫：

1. 建立一個 元素觸發 （例如，滑鼠懸停、捲動到視圖中等）或 頁面觸發 （例如，頁面載入、頁面捲動等）
2. 揭開面紗 行動 初始操作部分的下拉清單（例如，如果您選擇滑鼠懸停元素觸發器，您將公開 行動 從下拉式選單中 懸停時 部分）
3. 點擊下面的“啟動動畫” 自訂動畫
4. 點擊 ”加」 毗鄰 定時動畫
5. 姓名 互動面板頂部的動畫
6. 按 ”加” 在右邊 行動
7. 選擇一個 全域變數、變換, 風格， 或者 各種各樣的 下拉式選單中的動畫

接下來，您將微調動畫的時間 動畫時間軸.

如何操作動畫時間軸

無論您是建立新動畫還是修改現有動畫，您都可以在動畫時間軸中使用關鍵影格來為各種元素設定動畫。

要將動作附加到動畫時間軸，請先導航到 動畫時間軸。隨後，您可以透過以下兩種方法之一新增操作：

• 點選“加” 時間軸頂部的圖標
• 點擊 ”加” 圖示在時間軸內的現有操作之前、之中、之中或之後插入內聯操作

插畫

例如，讓我們為「頁面滾動時」頁面觸發器建構一個動畫。當您向下捲動頁面時，您可以使英雄部分文字水平移動並降低不透明度。動畫時間軸中的綠色播放頭指示頁面的目前位置 (0% – 100%)。

定時動畫經常使用其他觸發器（毫秒、秒等），但此實例使用百分比來表示頁面目前的滾動位置。這裡，0%表示頁面頂部的捲動位置，100%表示頁面底部的捲動位置。 

現在，您可以在頁面上的不同點整合各種操作。例如，您可以在 0% 滾動位置包含 4 個過程：

• 文字背景 — Shift 0px
• 文字背景 — 透明度 100%（完全可見）
• 文字前景 — Shift 0px
• 文本前景 — 透明度 100%

這些步驟將文字背景和文字前景定位在 0px（無移動），並將其透明度設為 100%（完全可見）。當訪客到達頁面頂部時，文字背景和前景將完全可見並保留在原來的位置。

您也可以在100%捲動位置引入4種方法：

• 文本背景 — 平移 900px
• 文字背景 — 透明度 0%（完全透明）
• 文本前景 — 平移 900px
• 文本前景 — 透明度 0%

在本例中，每個元素在任意方向上移動 900px，透明度設定為 0%。讓我們回顧一下滾動動畫的最終操作：

這些步驟將文字背景和文字前景的位置調整為 900 像素（雙向移動 900 像素）並將其透明度設為 0%（完全透明）。當訪客到達頁面底部時，文字背景和前景將完全透明，並從原始位置向頁面右側或左側移動 900 像素。

專家提示： 有兩種用於在動畫時間軸上選擇多個動作的技術。要選擇多個 連續的 操作，按住 轉移 並選擇這些操作。要選擇多個， 非連續的 動作，按 命令 （在 Mac 上）或 控制 （在 Windows 上）並選擇操作。

關於行動目標

預設情況下，新增至動畫時間軸的每個動作都會影響所選元素。但是，您可以透過以下兩種方式之一修改操作的焦點：

• 替換受操作影響的目標元素
• 確定該操作是否僅影響所選元素、共用相同 category 的所有元素或互動觸發器本身

修改目標元素

若要修改受操作影響的元素：

1. 右鍵單擊動畫時間軸中的動作
2. 點選 改變目標
3. 在畫布上選擇不同的元素以套用操作

重要的： 動畫時間軸內的任何修改都會影響啟動動畫序列的所有互動。

決定操作如何影響單一元素、元素的 category 或互動觸發器

建立操作後，您可以選擇該操作是否會影響：

• 僅有的 所選元素
• 所有元素與所選元素共享相同的 category
• 交互觸發本身

僅針對所選元素

所選元素是您形成的任何動畫動作的標準目標。任何影響所選元素的操作都會 穩定 影響那個精確的元素。因此，如果您重新利用具有影響所選元素的操作的動畫，則無論觸發元素如何，該操作都會一致地影響該元素。

以與所選元素相同的 category 為目標的所有元素

您可能還希望將目標定位為 類別 所選元素的。這將導致動畫動作影響與所選元素共享相同 category 的所有元素。

當您希望在頁面載入時並行移動多個元素時，此選擇非常有用。要實現此目的，請將相同的 category 指派給所有元素，並使用組合類別將它們移至頁面上的不同位置。隨後，您可以在基礎 category 上使用相同的動畫動作，允許每個元素以類似的方式移動，但初始位置不同。

您也可以將受影響的元素限制為僅共用相同 category 作為互動觸發器的子元素、兄弟姐妹或父元素。

定位與所選元素共享相同 category 的兒童、兄弟姐妹或父母

您可以透過指定哪些類別是觸發器元素的子級、同級級或父級來定義哪些類別會受操作影響。

此選項可能非常有用，例如當您希望按鈕元素內的所有箭頭共用相同的 category 以在懸停時設定動畫時。如果您將動畫動作整合到具有相同 category 的所有元素，則將滑鼠懸停在 1 個按鈕上時，您將觀察到該頁面上每個按鈕內的所有箭頭都會有動畫。要將動畫動作限制為當時懸停在其上的按鈕，請訪問 影響 選單並選擇“類別”。隨後，選擇 類別 從下拉式選單中選擇「僅限兒童使用此 category」。

當您想要設定動畫的元素是觸發元素的同級元素（例如下拉式選單或彈出模式）時，「僅具有此類的同級元素」選項非常有用。同樣，當受動畫影響的元素是觸發元素的父元素時，您可以使用「僅具有此 category 的父元素」替代方案。

筆記： 在形成基於類別的動畫之前，請確保將 category 歸因於您的元素。 “category”選項無法用於套用於不包含特定類別的元素的操作。

針對交互觸發因素的策略

您也可以建立以下業務： 獨特地 影響 互動觸發。隨後，對於重複使用動畫的任何後續交互，動畫將用新交互的觸發元素替換先前的目標元素。這有助於將相同的動畫快速應用到任何元素，而無需創建新的動畫。

評論： 僅當對互動的觸發元素執行操作時，才能存取「交互觸發」選項。因此，頁面觸發器提示的動畫中不提供此選擇。

修改活動動畫

您可以透過導覽至「互動」面板並選擇動畫以顯示其配置來修改現有動畫。因此，將滑鼠懸停在動畫標題上並點擊設定圖示“齒輪」位於動畫標題的右側。此操作將公開該特定動畫的動畫時間軸。

替代來源

• 擴展您關於採用互動的知識
• 深入研究插值、緩動和平滑
• 了解設定連續動畫的過程，該動畫會在滾動時水平移動和淡入淡出元素

消除和丟棄未使用的觸發器和動畫

擦除觸發器和動畫的過程

從「互動」面板中，可以消除觸發器或動畫。透過這樣做，觸發器或動畫將不再連結到其特定的目標元素或頁面操作。若要消除觸發器或動畫：

1. 繼續前往 互動面板
2. 將滑鼠懸停在要刪除的動畫或觸發器上
3. 選擇“垃圾” 觸發器名稱旁邊的圖標

評論： 當您從「互動」面板中刪除觸發器時，先前連接到該觸發器的動畫不會被刪除。它只是將動畫與特定觸發器分開。隨後，您在配置新觸發器時仍然可以使用動畫。

從網站中消除觸發器和動畫的流程

如果刪除了動畫，或從「互動」面板中刪除了缺少連接動畫的觸發器，則不會從您的操作中完全消除該觸發器或動畫。 地點。這是因為可以在替代元素或頁面觸發器上重複使用先前建立的動畫。儘管如此，您可能會考慮清理未使用的觸發器或動畫，以增強網站最佳化並提高效能。 

在清除未使用的互動時，您可能無法選擇要消除哪些觸發器，但您可以決定保留或丟棄哪些動畫。在未使用的互動的清理過程中，所有未使用的觸發器都會被刪除。

提示： 只有當動畫未連結到元素或頁面觸發器時，才可以選擇完全刪除（清理）動畫。首先，從「互動」面板中的任何元素或頁面觸發器中刪除動畫，然後繼續從網站中刪除動畫。

若要清除未使用的觸發器和動畫：

1. 訪問 互動面板
2. 按 清理 位於面板頂部
3. 確定您打算丟棄/保留的動畫
4. 點選 刪除