Language: HTML | XAML

在您的應用程式中使用動畫 (HTML)

Applies to Windows and Windows Phone

在 JavaScript 應用程式使用動畫,以提供與其他 Windows 應用程式一致且快速流暢的使用者經驗。動畫可提供 UI 狀態間的轉換效果,讓使用者感覺應用程式對輸入有所回應。動畫還可提供使用者有用的視覺提示,但不會干擾或妨礙應用程式操作。

若要下載示範本主題中討論的許多概念的範例,請參閱 HTML 動畫庫範例。這個主題的程式碼範例都是從這個範例摘錄的。

藍圖: 這個主題與其他主題的相關性?請參閱:

動畫來源

有些動畫內建於 Windows 控制項。使用這些控制項的時候,不需要撰寫其他程式碼即可使用它們的動畫效果。然而,您還是可以選擇使用動畫庫。使用動畫庫不但可以為應用程式建立自訂動畫,還能保留 Windows 設計的外觀及操作。

使用內建動畫

有些動畫是 Windows 自動提供的。

Windows 系統動畫

部分系統提供的動畫可套用到所有應用程式視窗。應用程式不需要明確執行任何動作,就能取得這些系統動畫。但是,有幾個重點您應該要注意,在此會討論這些重點。

應用程式啟動

應用程式啟動涉及兩個動畫。第一個動畫會顯示 [開始] 畫面選取選項到啟動顯示畫面出現之間的應用程式啟動。第二個動畫會淡出啟動顯示畫面,然後淡入應用程式背景。建議您的應用程式也執行自己的動畫,以便在啟動顯示畫面消失時顯示第一頁內容。

旋轉與調整大小的變更

當您的應用程式更新配置以回應大小或方向變更時,系統動畫可以讓轉換更順暢。

進入和結束螢幕小鍵盤

當應用程式的文字輸入控制項取得焦點時,會自動顯示螢幕小鍵盤。根據預設,您的應用程式會視需要自動捲動內容,讓輸入控制項位於畫面的可見範圍內。應用程式不需要執行任何特殊動作。

Windows 控制項和 HTML 控制項

下列控制項包含動畫。建議您盡可能採用這些控制項。

此外,使用通用 HTML 表單控制項 (如按鈕、核取方塊及下拉式功能表) 時,不需要提供動畫來回應使用者動作 (如按一下或暫留)。這些控制項不是已包含任何所需的動畫,就是不需要動畫,因為它們使用色彩變更或一些其他視覺指示器來提供使用者回應。

所有這些元素的樣式都會透過 WinJS CSS 和 Microsoft Visual Studio 專案範本中的 UI.js 檔案自動套用。

使用動畫庫

您可以使用動畫庫,將自訂動畫新增到您的應用程式。動畫庫是一套動畫,可體現 Windows 和 Windows Phone 中動作設計的特質。開發人員可以透過組成 WinJS.UI.Animation 命名空間的函式,在應用程式中使用這些動畫。如需動畫庫的詳細資訊 (包含每個動畫的視訊和指導方針),請參閱讓 UI 產生動畫效果

您必須在下列情況下提供自己的動畫:

  • 移動整個控制項
  • 變更應用程式內容
  • 在應用程式頁面間瀏覽

動畫庫提供的所有動畫都是使用 CSS 動畫和 CSS 轉場加以實作。動畫庫動畫會產生「不透明度」和「轉換」CSS 屬性的動畫效果。

使用動畫庫函式的元素和位移參數

許多動畫庫函式包含相同的參數,且使用方法也相同。

元素

許多動畫庫函式會將文件物件模型 (DOM) 元素當作動畫目標。這個參數可以下列方式表示:

  • 當作特殊值 "undefined",表示動畫沒有此目標
  • 當作單一物件
  • 當作元素的 JavaScript 陣列 (可能為空白)。
  • 當作 NodeList (例如,querySelectorAll 的結果)
  • 當作 HTMLCollection

位移

offset 參數是包含平移的元素動畫和轉換的一部分。這些動畫可以將元素從位移位置移到最後位置,或從目前位置移到位移位置。

部分動畫含有建議的位移,您可以透過傳送 nullundefined 做為位移引數或省略所有引數來使用。您應該盡可能使用這些預設位移,預設位移的好處如下:

  • 更好的動畫效能
  • 右到左應用程式的自動化鏡像
  • 設計人員建議的平移距離,在調整應用程式的大小時即會自動調整 (在適用的動畫中)

除非您有強制性的設計例外,否則這些動畫應該一律使用預設位移:

對於其他動畫庫動畫,可以根據您的特定 UI 使用應用程式特定的位移。下列所有函式都有預設位移,如果沒有提供特定位移就會使用這些預設位移,但是您通常會根據應用程式的設計指定位移。

您可以使用幾種形式提供 offset 參數:

  • 當作特殊值 "undefined",可以在呼叫中明確指定,或透過忽略參數值以隱含方式指定。undefined 值代表會使用動畫的預設位移。
  • 當作單一 JavaScript 物件,以下列形式表示:

    { top: string, left: string, rtlflip: true | false }

    例如:

    { top: "12px", left: "0px", rtlflip: true }

    物件必須有名稱為 top 和 left 的屬性,用來表示動畫開頭套用的位移。任何有效的 CSS 單位都可用來表示位移。位移以此形式套用到動畫使用的所有元素。

    rtlflip 參數會將值翻轉成右至左對齊。這會影響 left 參數並變更其符號。例如,10 px 會變成 -10px。這個參數是選擇性的,可以忽略。如果忽略,預設值為 false

  • 當作上方討論的 {top: ..., left: ..., rtlflip: ...} 物件的 JavaScript 陣列 (可能為空白)。在這種情況下,陣列中的每個物件會套用到動畫中的單一元素,順序如下:第一個物件套用到第一個元素、第二個物件套用到第二個元素,以此類推。如果元素的數量大於這個陣列中的物件數量,則陣列中最後一個元素會套用到所有剩餘的元素。唯一需要位移記錄陣列的動畫是 dragBetweenEnter。對於其他動畫,通常最好只傳送一個用於所有元素的位移記錄。

Promise 傳回值

所有動畫庫動畫的傳回值都是 Promise 物件。這個物件的 donethen 方法可以在動畫完成後用來追蹤。Promise 物件還提供 cancel 方法讓您取消正在執行的動畫。

動畫類型

動畫庫的動畫有三種類型:元素動畫、元素轉換或配置轉換。每種類型有不同的實作模式。

元素動畫

元素動畫的實作方式與 CSS 動畫相同。元素動畫不會變更元素的狀態;它們是目前狀態上的動畫。例如,showPanel 動畫是元素動畫,可從畫面邊緣滑入面板 (例如工作窗格)。showPanel 動畫會將面板平移從開發人員提供的位移位置移到元素的目前位置。

若要使用元素動畫,請設定元素的最終狀態。在下列範例中,myPanel 元素在顯示前已經位於最終位置,但使用者看不見。為了顯示面板,您的程式碼將面板元素的不透明度設成 1,然後觸發動畫。只要這些步驟在相同的函式中進行,不透明度的變更就會在動畫開始後才生效。面板會顯示在位移位置,然後產生動畫進入其實際位置。



                                                
myPanel.style.opacity = "1";
WinJS.UI.Animation.showPanel(myPanel, { top: "0px", left: "350px" });                                       
                                            

若要隱藏面板,只要反向操作即可。首先,您的程式碼必須呼叫 hidePanel,將面板從目前位置移動到位移位置。動畫完成後,程式碼會將不透明度設成 0 以隱藏元素。如果您沒有將不透明度變化涵蓋在其中,元素會在動畫結束後返回其原來的位置,且仍然可以在畫面上看見。



                                                
WinJS.UI.Animation.hidePanel(myPanel, { top: "0px", left: "350px" })
    .then(function () { myPanel.style.opacity = "0"; });                                       
                                            

下列是動畫庫提供的元素動畫:

函式說明
showEdgeUI 將以邊緣為基礎的 UI 滑入檢視。將目標元素的平移從位移位置移動到目前位置。
hideEdgeUI 將以邊緣為基礎的 UI 滑出檢視。將目標元素的平移從目前位置移動到位移位置。
showPanel 將以邊緣為基礎的大型面板滑入檢視。將目標元素的平移從位移位置移動到目前位置。
hidePanel 將以邊緣為基礎的大型面板滑出檢視。將目標元素的平移從目前位置移動到位移位置。
showPopup 在檢視頂端顯示與內容相關的 UI。將不透明度變更為 1,然後將平移從位移位置移動到目前位置。
hidePopup 隱藏內容相關的 UI。將不透明度變更為 0。
updateBadge 更新數字徽章。將不透明度變更為 1,然後將平移從位移位置移動到目前位置。

 

元素轉換

元素轉換的實作方式與 CSS 轉場相同。元素轉換透過將 CSS 屬性轉換成動畫定義的值來變更元素的狀態。

動畫庫中有許多元素轉換都是成對的動畫,表示要一起使用。一個動畫套用的狀態變更,會在成對的另一個動畫中以相反的方式操作。例如,fadeIn 動畫將元素的不透明度轉換成 1,而 fadeOut 動畫則會將元素不透明度轉換成 0。

動畫庫中的某些動畫會使用元素動畫和元素轉換組合。例如,enterContent 動畫將內容的不透明度轉換成 1,同時將平移從位移位置移動到目前位置。

這裡所列的動畫,是在動畫庫中使用元素轉換或同時使用元素轉換及元素動畫的動畫:

函式說明
fadeIn 顯示暫時性元素或控制項。將不透明度轉換為 1。
fadeOut 隱藏暫時性元素或控制項。將不透明度轉換為 0。
enterContent 讓單一元素或一組內容以動畫方式進入檢視。將不透明度轉換為 1,然後將平移從位移位置移動到目前位置。
exitContent 讓單一元素或一組內容以動畫方式離開檢視。將不透明度轉換為 0。
enterPage 讓頁面的完整內容以動畫方式進入檢視。將不透明度轉換為 1,然後將平移從位移位置移動到目前位置。
exitPage 讓頁面的完整內容以動畫方式離開檢視。將不透明度轉換為 0。
crossFade 重新整理內容區域。將連入內容的不透明度轉換成 1,並將連出內容的不透明度轉換成 0。
pointerDown 在使用者點選或按一下磚時顯示視覺化回饋。將比例轉換成較小的值。
pointerUp 在使用者點選或按一下磚後放開時顯示視覺化回饋。將比例還原為完整大小。
dragSourceStart 在使用者開始拖放操作時顯示視覺化回饋。將比例轉換成較大的值,然後降低不透明度。這個動畫也會將周圍 (受影響的) 元素的比例轉換成較小的值。
dragSourceEnd 在使用者放下拖曳的物件,完成拖放操作後顯示視覺化回饋。反向操作 dragSourceStart 執行的動畫。
dragBetweenEnter 顯示視覺化回饋,表示如果拖曳的物件放在其下方元素區域內,位於拖曳物件下方的元素將會移開。將受影響物件的轉換屬性轉換成位移。
dragBetweenLeave 顯示視覺化回饋,表示反向操作 dragBetweenEnter 執行的動畫,讓拖曳的物件離開拖放區。
swipeSelect 將磚轉換成撥動選取的狀態。將位移「選用」視覺的不透明度轉換成 1 時,將磚的不透明度轉換成 0。
swipeDeselect 將磚轉換成撥動取消選取的狀態。將原始磚的不透明度轉換成 1 時,將位移「選用」視覺的不透明度轉換成 0。
swipeReveal 在磚支援撥動互動時,提供視覺提示給使用者。將平移從目前位置轉換到位移位置。
turnstileBackwardIn 將元素順時針旋轉到頁面上。
turnstileBackwardOut 將元素順時針旋轉出頁面。
turnstileForwardIn 將元素逆時針旋轉到頁面上。
turnstileForwardOut 將元素逆時針旋轉出頁面。
slideDown 將元素滑出螢幕底部。
slideUp 將元素從螢幕底部向上滑入檢視。
slideLeftIn 將元素從螢幕左側滑入。
slideLeftOut 將元素從螢幕左側滑出。
slideRightIn 將元素從螢幕右側滑入。
slideRightOut 將元素從螢幕右側滑出。
continuumBackwardIn 縮小傳入頁面,同時縮放、旋轉和轉譯傳入項目。
continuumBackwardOut 頁面移除時,縮放、旋轉和轉譯傳出頁面。
continuumForwardIn 將項目帶到螢幕上,放大傳入頁面,同時縮放、旋轉和轉譯傳入項目。
continuumForwardOut 從螢幕上移除項目,縮小傳出頁面,同時縮放、旋轉和轉譯傳出項目。

 

配置轉換

動畫庫中的配置轉換動畫比元素動畫或元素轉換還要複雜。配置轉換動畫通常涉及多個元素,並會導致配置變更。然而,動畫函式無法做出該配置變更如何發生的假設。例如,在 reposition 動畫中,有一個元素從 A 點移到 B 點。有很多方法都可讓這種情況發生,例如變更元素的寬度、位移、邊界或邊框間距。

針對配置轉換,動畫庫提供一個建立函式,並且會傳回一個含 .execute() 方法的物件。這些動畫的呼叫模式為:

  1. 呼叫適當的建立動畫函式。這會收集目標元素的目前位置。
  2. 應用程式會以其選擇的任何方法來執行其配置變更。
  3. 應用程式會呼叫建立函式所傳回之物件上的 execute 方法來觸發動畫。這會收集目標元素的新位置,並以動畫方式將它們從原始位置移到新位置。
  4. execute 方法會傳回一個可用一般方式使用的 Promise 物件。

下列範例顯示新增到清單動畫,可以動畫的方式將項目插入清單頂端。呼叫 createAddToListAnimation 時,affectedItems 集合中傳送的所有元素位置都會加以記錄。這個集合包含新項目到達時,位置可能會受影響的所有元素。

呼叫 createAddToListAnimation 後,範例會將新項目插入清單頂端。在下列程式碼中,list 是包含清單項目的 div 元素。呼叫元素的 insertBefore 方法,會實際執行將 newItem 新增到清單頂端的動作。這個插入動作會讓清單中的所有其他項目變更位置。您可以自由選擇任何方式來變更 affectedItems 集合的位置。

最後,範例會呼叫 createAddToListAnimation 傳回之物件的 execute 方法,觸發動畫將新清單項目移到定點。



                                                
var addToList = WinJS.UI.Animation.createAddToListAnimation(newItem, affectedItems);
list.insertBefore(newItem, list.firstChild);
addToList.execute();
                                            

下列為動畫庫的配置轉換動畫建立函式:

函式說明
createExpandAnimation 顯示其他內嵌資訊。視需要移動其他內容騰出空間。
createCollapseAnimation 隱藏內嵌內容。視需要摺疊其他內容。
createRepositionAnimation 將元素移至新位置。
createAddToListAnimation 將項目新增至清單。
createDeleteFromListAnimation 從清單移除項目。
createAddToSearchListAnimation 篩選搜尋結果時,新增項目到清單。
createDeleteFromSearchListAnimation 篩選搜尋結果時,從清單移除項目。
createPeekAnimation 顯示磚的查看動畫。窺視磚的內容會在磚空間內上下捲動以顯示完整的資訊。

 

排程動畫

為了完成複雜的案例,通常需要在不同的 UI 部分執行不同的動畫。例如,刪除電子郵件時,您可能需要從清單移除刪除的電子郵件,然後顯示下一封電子郵件訊息。在大多數情況下,最好同時執行這兩個動畫,以減少整體花費的時間。下節將討論在這些案例中,您必須注意的問題。

中斷動畫

如果觸發相同 CSS 屬性上的其他動畫或轉場,元素上的動畫或轉換就會中斷。這種情況發生時,會依照 CSS3 規格,取消第一個動畫或轉換。CSS 轉場會平穩且流暢地中斷彼此。然而,在 CSS 動畫的情況下,它們會在元素上方顯示 CSS 屬性的轉換,但元素上的實際 CSS 屬性值則保持不變;突然中斷 CSS 動畫會跳回屬性的原始值,因此不建議這樣做。使用 CSS 動畫,通常最好等到第一個動畫結束,再開始第二個動畫。如需詳細資訊,請參閱等待動畫完成

案例結果
CSS 動畫中斷 CSS 動畫執行動畫效果的 CSS 屬性還原到其真實狀態,然後開始新的動畫。這樣可能會產生不舒服的視覺感覺。
CSS 動畫中斷轉場轉場會在其所在位置順利中斷,然後從目前值開始動畫,在新的結束值結束。
CSS 轉場中斷轉場轉場會在其所在位置順利中斷,然後從目前值開始轉換到新的結束值。
CSS 轉場中斷動畫執行動畫效果的 CSS 屬性還原到其真實狀態,然後開始新的轉場。這樣可能會產生不舒服的視覺感覺。

 

取消動畫

任何執行中的動畫庫動畫都可以透過動畫函式傳回之 Promise 物件的 cancel 方法加以取消。

等待動畫完成

若要在完成動畫後執行動作,將回呼函式傳送到動畫函式傳回之 Promise 物件的 donethen 方法。這在等待結束動畫完成以從 DOM 移除項目或鏈結多個動畫等情況下,非常有用。這裡顯示一個範例,回呼函式只會在淡入目標完成後,淡出目標。



                                                
WinJS.UI.Animation.fadeIn(target)
       .then(function () { WinJS.UI.Animation.fadeOut(target); });
                                            

建議您不要使用 JavaScript 計時器判斷動畫何時完成。這樣做很不可靠;計時器可能會在動畫完成前或完成後停止,而且時間會因硬體和 UI 執行緒上的其他處理程序而有不同。

啟用和停用動畫

  • Applies to Windows

Windows:所有動畫庫動畫都會停用以回應 [停用所有不需要的動畫] 系統設定,這個設定可以在 [控制台],[輕鬆存取] 項目下的 [讓電腦更容易使用] 中找到。選取這個設定後,對應用程式基本功能不必要的所有動畫都會關閉。這通常是指一些進行遊戲所需的遊戲動畫以外的所有動畫。使用 executeAnimationexecuteTransition 的動畫庫動畫及自訂動畫,會自動回應這個設定。如果建立自訂動畫,則您的程式碼必須明確接聽這個設定。

身為開發人員,您可以決定應用程式中所使用的動畫庫動畫是否要回應 WinJS.UI.enableAnimationsWinJS.UI.disableAnimations 函式。

最佳化動畫效能

透過動畫顯示應用程式的回應性

為了提供最佳的整體使用者經驗,應用程式必須要快速,並對使用者動作有最佳的回應性。如果使用正確,動畫會在適當的時間提供適當的使用者回應,協助讓您的應用程式回應性更佳。

回應使用者動作的動畫必須越快開始越好。這很重要,可以告知使用者他們的動作已經順利執行,而且目前已在執行作業回應動作。如果需要執行更多工作才能完成轉換 (例如載入新頁面),請在觸發使用者回應動畫後再執行這些工作。

使用獨立式動畫

JavaScript 應用程式動畫平台可讓某些動畫類型在獨立、硬體加速的系統執行緒 (與 UI 執行緒分開) 上執行。這種類型的動畫稱為「獨立式動畫」。在 UI 執行緒中執行的動畫稱為「相依式動畫」。因為獨立式動畫不需要與 UI 執行緒中發生的其他動作競爭,因此始終比相依式動畫順暢。

動畫庫中的所有動畫都可做為獨立式動畫執行,但是在應用程式實作中必須考慮一些問題才能這樣做。如需關於如何讓您的動畫函式呼叫符合資格能夠以獨立式動畫執行的詳細資訊,請參閱獨立組合:在 Internet Explorer 中呈現和組合

將一次執行的動畫元素數量降到最低

盡可能減少動畫中的個別元素數量。例如,不要將一個元素陣列傳送到動畫,而是只傳送父項元素,這樣動畫引擎將只需要建立單個動畫操作。

使用預設位移

對於包含位移參數的動畫庫動畫,盡可能使用預設位移。您不只會收到該動畫設計建議的平移,還可以提升效能,因為動畫可以使用預先計算的主要畫面。

預設的位移也會在由右到左的應用程式中自動進行鏡像處理,而且針對部分動畫,預設的位移會在調整應用程式大小時自動變更平移量,以便為範圍較窄的檢視狀態顯示適當的效果。

建立自訂動畫

您應該盡可能使用動畫庫動畫。然而,當您遇到獨特的案例,且沒有所需的內建動畫時,則可建立自訂動畫。

在 JavaScript 應用程式中有兩種方式可以實作自訂動畫:透過標準 CSS3 動畫和轉場,或者透過動畫庫 Helper 函式 executeAnimationexecuteTransition

使用標準 CSS3 動畫和轉場建立自訂動畫

CSS3 動畫和轉場提供彈性的選項,讓您可以使用各種 CSS 屬性建立動畫或轉場。如需詳細資訊,請參閱動畫轉場主題。

如果您選擇自行建立動畫,請注意下列幾點:

  • 部分 CSS 屬性的動畫或轉場無法以獨立式動畫的方式執行,而且可能會造成整個頁面重新繪製每個畫面。這可能會導致緩慢且不穩定的動畫,這將會是不好的使用者經驗。實作自訂動畫時避免使用這些屬性,以確保您的動畫可以獨立執行。
  • 自訂的 CSS3 動畫或轉場無法與動畫庫動畫並存於相同的元素上。

使用 executeAnimation 和 executeTranslation 建立自訂動畫

動畫庫會使用動畫庫函式 executeAnimationexecuteTransition 執行自己的動畫,您也可以在自訂動畫使用這些函式。這些函式執行的所有動畫和轉換都符合以獨立式動畫執行的資格,而且可以與任何也正在執行的原廠動畫庫動畫並存。executeAnimationexecuteTransition 函式傳回 Promise 物件,以便與其他動畫庫函式一致。

您可以在任何可展示動畫的 CSS 屬性中使用這兩個函式。然而,只有不透明度和轉換屬性可以獨立式動畫的方式執行。如果您的應用程式需要更奇特的動畫,例如遊戲內動畫,這些函式可能不適用於您的案例。

使用 executeAnimation 函式時,建議您指定動畫的主要畫面,以取得較佳的效能。



                                
@keyframes custom-opacity-in    { from { opacity: 0; } to { opacity: 1; } }
                            

下列範例顯示自訂動畫。



                                
function runCustomShowAnimation() {
    var showAnimation = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-opacity-in",
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            from: 0,
            to: 1
        }
    );
}
                            

下列範例顯示自訂轉換。



                                
function runCustomShowTransition() {
    var showTransition = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            to: 1
        }
    );
}
                            

結合自訂動畫和轉換

您可以結合動畫和轉換來建立自訂腳本。下列範例結合動畫和轉換來達成目標元素同時淡入和滑入的效果。兩個部分的腳本透過呼叫 executeAnimationexecuteTransition 分別觸發,但會同時開始。



                                
@keyframes custom-translate-in    { from { transform: translateY(50px); } to { transform: none; } }
                            



                                
function runCustomShowStoryboard() {
    var promise1 = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-translate-in",
            property: "transform",
            delay: 0,
            duration: 367,
            timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
            from: "translate(50px)", 
            to: "none"
        });
    var promise2 = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 167,
            timing: "linear",
            to: 1
        });
    return WinJS.Promise.join([promise1, promise2]);
}
                            

相關主題

讓 UI 產生動畫效果 (HTML)

 

 

顯示:
© 2014 Microsoft