讓 UI 產生動畫效果 (HTML)

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

您可以使用 Windows 提供之動畫的動畫庫套件，將 Windows 8 的外觀及風格整合到您的 Windows 市集應用程式。本文提供動畫摘要以及由動畫庫處理的典型案例範例。

使用動畫庫的動畫有下列優點：

• 與 Windows 市集應用程式動畫原則保持一致的動作
• 在 UI 狀態之間進行快速且流暢的轉換，可以通知但不會打擾到使用者
• 更清晰的視覺效果，為使用者示範應用程式內的轉換

例如，當使用者將項目新增到清單時，新項目不會立即出現在清單中，新項目會以動畫方式就定位，清單中的其他項目則會以動畫方式移至它們的新位置，以便將空間讓給新增的項目。這樣使用者就能清楚看到動作，而這是立即轉換所無法達成的。

請注意，Windows 8 引進的控制項 (例如，ListView 控制項、FlipView 控制項、Flyout 控制項及 AppBar 控制項) 都會使用動畫庫的動畫。在應用程式中使用這些控制項，不需要自行進行任何程式設計，就可以取得 Windows 市集應用程式動畫的外觀及操作。

動畫庫無法為每種可能的狀況提供動畫，而且在某些狀況下，您可能會希望建立自訂動畫來呈現您的品牌。您應該審慎考慮何時脫離使用動畫庫中的動畫。只有在有充分理由的情況下才這樣做，例如特殊品牌行銷期間，或者動畫庫沒有適合特定狀況的動畫。

如需使用本主題中討論的 API 的範例程式碼，請參閱 HTML 動畫庫範例。

動畫庫中可用的動畫

動畫庫提供下列動畫。按一下動畫名稱，以深入了解動畫的主要使用狀況、執行動畫的函式，以及查看動畫的範例。

• 頁面轉換：讓頁面內容以動畫方式進入或離開檢視。
• 內容轉換：讓一個或一組內容以動畫方式進入或離開檢視。
• 淡入/淡出：顯示暫時性元素或控制項。
• 淡入與淡出：重新整理內容區域。
• 指標向上/向下：在點選或按一下磚時提供的視覺化回饋。
• 展開/摺疊：顯示其他內嵌資訊。
• 重新定位：將元素移至新位置。
• 顯示/隱藏快顯：在檢視頂端顯示與內容相關的 UI。
• 顯示/隱藏邊緣 UI：將以邊緣為基礎的 UI 滑入或滑出檢視。
• 顯示/隱藏面板：將以邊緣為基礎大型面板滑入或滑出檢視。
• 在清單中新增/刪除：在清單中新增或刪除項目。
• 在搜尋清單中新增/刪除：篩選搜尋結果時，在清單中新增或刪除項目。
• 查看：更新磚的內容。
• 徽章更新：更新數字徽章。
• 開始/結束拖曳或來回拖曳：在拖放操作期間提供視覺化回饋。
• 撥動提示：提示磚支援撥動互動。
• 撥動選取/取消選取：將磚轉換成撥動選取的狀態。

頁面轉換

頁面轉換可讓頁面內容以動畫方式進入或離開檢視。這包括在啟動顯示畫面後顯示應用程式的第一個頁面，以及在應用程式的頁面之間轉換。

下列視訊示範將內容頁面帶入檢視中的動畫：

下列視訊示範在兩頁內容之間轉換的動畫：

如需 UX 與使用指導方針的詳細資訊，請參閱頁面轉換動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• enterPage
• exitPage

內容轉換

使用內容轉換動畫，將內容片段或一組內容移入或移出目前的檢視。不要混淆內容轉換 (涉及頁面上的元素) 與頁面轉換 (轉換整個頁面)。例如，內容轉換動畫可用來顯示最初載入頁面時或變更頁面區段內容時，尚未準備顯示的內容。

下列視訊示範先移除現有內容再將新內容帶入檢視的動畫：

如需 UX 與使用指導方針的詳細資訊，請參閱內容轉換動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• enterContent
• exitContent

淡入/淡出

使用淡入動畫和淡出動畫來顯示或隱藏暫時性 UI 或控制項。其中一個範例就是新控制項因為使用者互動而出現在應用程式列中。另一個範例則是經過一段時間未偵測到使用者輸入而淡出的暫時性捲軸或移動瀏覽指標。應用程式也應該在預留位置項目隨著內容動態載入而轉換成最終項目時，使用淡入動畫。

下列視訊示範讓內容淡入檢視或淡出檢視的動畫。注意在螢幕底端淡入和淡出的捲軸：

如需 UX 與使用指導方針的詳細資訊，請參閱淡入/淡出動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• fadeIn
• fadeOut

淡入與淡出

使用淡入與淡出動畫，在項目狀態變更 (例如應用程式重新整理檢視的目前內容) 時順暢轉換。

下列視訊示範淡入與淡出動畫：

如需 UX 與使用指導方針的詳細資訊，請參閱淡入/淡出動畫的指導方針和檢查清單。

JavaScript：使用這個 API 即可執行此動畫：

• crossFade

指標向上/向下

使用指標向上動畫及指標向下動畫，在順利點選或按一下磚時提供使用者回饋。例如，在使用者按一下或點選磚時，播放指標向下動畫。只要使用者放開按一下或點選的動作，則播放指標向上動畫。

下列視訊示範指標向下和指標向上動畫：

如需 UX 與使用指導方針的詳細資訊，請參閱指標動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• pointerUp
• pointerDown

展開/摺疊

使用展開動畫，在檢視內容中新增額外空間以顯示其他內嵌資訊。例如，出現錯誤訊息時，檢視中的其他內容會移動以挪出空間。摺疊動畫會隱藏這項額外內容，顯示特定項目的較少詳細資訊。摺疊動畫通常是由使用者動作觸發。

下列視訊示範展開和摺疊動畫：

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• createExpandAnimation
• createCollapseAnimation

調整位置

使用重新定位動畫將元素移入新位置。例如，在全景檢視中移動標頭，就可以用到重新定位動畫。

下列視訊示範重新定位動畫：

如需 UX 與使用指導方針的詳細資訊，請參閱重新定位動畫的指導方針和檢查清單。

JavaScript：使用這個 API 即可執行此動畫：

• createRepositionAnimation

顯示/隱藏快顯 UI

使用顯示和隱藏快顯 UI 動畫，來顯示或隱藏目前檢視頂端與內容相關的 UI。例如，快顯 UI 可顯示元素中項目的更詳細資訊。在顯示自訂操作功能表或飛出視窗時，使用顯示快顯 UI 動畫及隱藏快顯 UI 動畫。

下列視訊示範顯示和隱藏快顯 UI 的動畫：

如需 UX 與使用指導方針的詳細資訊，請參閱快顯 UI 動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• showPopup
• hidePopup

顯示/隱藏邊緣 UI

使用顯示邊緣 UI 動畫及隱藏邊緣 UI 動畫，將以邊緣為基礎的小型 UI 滑入和滑出檢視。例如，當您在螢幕底端或螢幕頂端的錯誤及警告的 UI 表面中顯示自訂應用程式列時，就可以使用這些動畫。

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

如需 UX 與使用指導方針的詳細資訊，請參閱以邊緣為基礎之動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• showEdgeUI
• hideEdgeUI

顯示/隱藏面板

使用顯示面板動畫及隱藏面板動畫，來顯示和隱藏面板 (也就是以邊緣為基礎的大型 UI，例如自訂鍵盤或工作窗格)。請勿混淆這些動畫與顯示邊緣 UI 動畫及隱藏邊緣 UI 動畫；後者可與利用邊緣做為進入點與結束點的小型 UI 元素搭配使用。

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

如需 UX 與使用指導方針的詳細資訊，請參閱以邊緣為基礎之動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• showPanel
• hidePanel

在清單中新增/刪除

在現有的一維或二維清單中新增或刪除項目時，可以使用新增到清單動畫以及從清單中刪除動畫。新增到清單動畫會先重新定位清單中的現有項目，為新項目挪出空間，然後再新增新項目。從清單刪除動畫會從清單中移除項目；移除要刪除的項目之後，便會視需要重新定位剩餘的清單項目。

下列視訊示範從清單新增和移除項目的動畫：

如需 UX 與使用指導方針的詳細資訊，請參閱清單動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• createAddToListAnimation
• createDeleteFromListAnimation

在搜尋清單中新增/刪除

如果清單中的項目在搜尋期間快速變更，則可使用新增到搜尋清單動畫及從搜尋清單刪除動畫。請注意，搜尋清單動畫會比標準清單動畫的速度快。例如，當使用者輸入搜尋字詞，清單會即時篩選結果，而篩選出來的項目應該使用從搜尋清單刪除動畫。相反地，使用者可以搜尋某個字串，然後按下退格鍵移除一個字元。這會使項目新增回搜尋結果的清單，因此您應該使用新增到搜尋清單動畫進行這個動作。

下列視訊示範從搜尋清單新增和移除項目的動畫：

如需 UX 與使用指導方針的詳細資訊，請參閱清單動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• createAddToSearchListAnimation
• createDeleteFromSearchListAnimation

查看

使用查看動畫，在磚交替顯示圖片與文字但磚高度不足以同時顯示兩者時更新磚。也可以使用此動畫在磚上循環顯示一組圖片。

下列視訊示範查看動畫：

JavaScript：使用這個 API 即可執行此動畫：

• createPeekAnimation

徽章更新

使用徽章更新來更新可顯示數字的徽章。例如，顯示未讀電子郵件數目的郵件應用程式可以使用徽章更新動畫來更新此值。

下列視訊示範更新徽章的動畫：

JavaScript：使用這個 API 即可執行此動畫：

• updateBadge

拖曳開始/結束以及來回拖曳進入/離開

使用拖曳動畫，在使用者拖曳或放下項目時提供視覺化回饋。在使用者開始拖曳項目時使用拖曳開始動畫。在使用者放下項目時使用拖曳結束動畫。

您也可以選擇使用來回拖曳進入動畫及來回拖曳離開動畫，為使用者顯示清單可以圍繞著放下的項目重新排列。這有助於使用者了解如果在目前的位置放下項目之後，該項目會放置在清單何處。如果拖曳的項目可以放在清單中的兩個其他項目之間，且這兩個項目會讓開，則來回拖曳進入動畫及來回拖曳離開動畫都會提供視覺化回饋。

下列視訊示範與拖放作業相關的動畫：

如需 UX 與使用指導方針的詳細資訊，請參閱拖放動畫的指導方針和檢查清單。

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• dragSourceStart
• dragSourceEnd
• dragBetweenEnter
• dragBetweenLeave

撥動提示

使用撥動提示動畫來顯示磚支援撥動互動。使用者可以向下撥動以選取磚。如果使用者不知道是否可以撥動磚，磚上的按住不放手勢就會播放撥動提示動畫，建議使用者應該透過撥動來與磚互動。

下列視訊示範撥動動畫：

JavaScript：使用這個 API 即可執行此動畫：

• swipeReveal

撥動選取/取消選取

如果已經使用撥動互動選取項目，則可使用撥動選取動畫，來顯示磚已經轉換成選取狀態並讓磚回到靜止位置。如果使用撥動手勢取消選取已選取的磚，則可使用撥動取消選取動畫。

下列視訊示範撥動選取和取消選取動畫：

使用這些 API 即可在 JavaScript 程式碼中執行此動畫：

• swipeSelect
• swipeDeselect

使用動畫搭配自訂控制項

下表摘要說明當您建立這些系統控制項的自訂版本時，應該使用的動畫建議：

UI 類型	建議的動畫
對話方塊	fadeIn 和 fadeOut
飛出視窗	showPopup 和 hidePopup
工具提示	fadeIn 和 fadeOut
操作功能表	showPopup 和 hidePopup
命令列	showEdgeUI 和 hideEdgeUI
工作窗格或以邊緣為基礎的面板	showPanel 和 hidePanel
任何 UI 容器的內容	enterContent 和 exitContent
用於控制項，或者沒有其他適用的動畫	fadeIn 和 fadeOut

 

相關主題

HTML 動畫庫範例

HTML ListView 基本範例

WinJS.UI.Animation 命名空間