讓以邊緣為基礎的 UI 產生動畫效果 (HTML)

  • 發行項

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

使用以邊緣為基礎的 UI 動畫來顯示或隱藏從畫面邊緣出現的 UI。使用者或應用程式都可以將這種 UI 帶到檢視中。這些動畫主要用於自訂控制項；現有的控制項 (例如 AppBar) 有內建邊緣 UI 的動畫庫，您只要將這類控制項包含在您的 UI 中，就可以獲得動畫行為。

這個 UI 可以與應用程式重疊，或者成為主應用程式表面的一部分。如果 UI 是主應用程式表面的一部分，您可能需要重新調整應用程式其餘部分的大小，以便為新的 UI 出現時挪出空間。

以邊緣為基礎之元素的基本圖表

這組動畫包含下列 API：

以邊緣為基礎的元素有兩種類型，每種都有自己的一組動畫 API：邊緣 UI 和面板 UI。

下列視訊示範顯示和隱藏以邊緣為基礎的 UI 動畫：

下列視訊示範顯示和隱藏面板的動畫：

  • 如果您想要讓行為上類似 AppBar 或類似的自訂控制項產生動畫效果，請使用具有以邊緣為基礎的較小 UI 的邊緣 UI 動畫。您也可能想要為來自應用程式中動作的錯誤和警告定義一個 UI 表面/區域。如果您要解決該狀況，請確定您閱讀飛出視窗的指導方針；以邊緣為基礎的 UI 可能不適合您的狀況。
  • 在面板 UI 動畫使用通常較大且會覆蓋較多應用程式視窗的以邊緣為基礎的 UI (例如螢幕小鍵盤)。

顯示邊緣 UI 與面板 UI 之間大小差異的圖解

重要  Windows 提供的應用程式列控制項包含邊緣 UI 動畫。如果您使用該控制項，不需要自己提供這些動畫。

 

若要使用這些動畫，您必須知道：

  • 滑入或滑出的物件。

  • 物件滑動的距離 (位移)。這是 UI 內部邊緣與畫面邊緣之間的最終距離。

    稱為位移的度量單位說明

預設 Windows 執行階段控制項行為的以邊緣為基礎的動畫

包含邊緣 UI 的建議方式是新增 AppBar，這個屬性將自動為您套用所有適合的轉換和互動行為。如需詳細資訊，請參閱新增應用程式列。

飛出視窗物件 (Flyout、Menu 或 SettingsFlyout) 也包含內建動畫，但是它們不是真正的以邊緣為基礎的 UI。飛出視窗與使它們顯示的內容相關聯，不是與應用程式視窗的邊緣相關聯。您可以為從 AppBar 叫用的 UI 使用飛出視窗，但是它也不是純粹的邊緣 UI。如需詳細資訊，請參閱新增飛出視窗以及讓快顯 UI 產生動畫效果。

其他資源

如需示範使用以邊緣為基礎的 UI 動畫 API 的程式碼範例，請參閱 HTML 動畫庫範例。

如需使用這個動畫設計的最佳做法，請參閱以邊緣為基礎的 UI 動畫的指導方針和檢查清單。

相關主題

讓 UI 產生動畫效果

showEdgeUI

hideEdgeUI

showPanel

hidePanel