XAML 中的動畫

  • 發行項

動畫可以藉由新增動作和互動功能來增強您的應用程式。 透過使用 Windows 執行時間動畫庫中的動畫，您可以將 Windows 外觀整合到您的應用程式中。 本主題提供動畫摘要以及使用每種動畫的典型場景範例。

提示

XAML 的 Windows 執行時間控制項包含某些類型的動畫作為來自動畫庫的內建行為。 透過在應用程式中使用這些控制項，您無需自行編程即可獲得動畫外觀和感覺。

Windows 運行時動畫庫中的動畫具有以下優點：

  • 符合動畫指導方針的動作
  • UI 狀態之間快速、流暢的轉換可通知使用者但不會分散使用者的注意力
  • 向使用者指示應用程式內轉換的視覺行為

例如，當使用者將項目新增至清單時，新項目不會立即出現在清單中，而是動畫到位。 清單中的其他項目會在短時間內移動到新位置，為新增的項目騰出空間。 這裡的轉換行為使控制互動對使用者來說更加明顯。

Windows 10 版本 1607 引入了新的 ConnectedAnimationService API，用於實現動畫，其中元素在導航期間在檢視之間呈現動畫效果。 該 API 的使用模式與其他動畫庫 API 不同。 參考頁中介紹了 ConnectedAnimationService 的用法。

動畫庫不會針對每個可能的案例提供動畫。 在某些情況下，您可能想要在 XAML 中建立自訂動畫。 如需詳細資訊，請參閱分鏡腳本動畫。

此外，對於某些進階場景，例如根據 ScrollViewer 的滾動位置對專案進行動畫處理，開發人員可能希望使用視覺層互通來實現自訂動畫。 關於詳細資訊，請參閱視覺層。

動畫類型

Windows 執行時間動畫系統和動畫庫服務於使控制項和 UI 的其他部分具有動畫行為的更大目標。 有數種不同的動畫類型。

  • 當 UI 中的某些條件變更時，會自動套用主題轉換，涉及預先定義的 Windows 執行時間 XAML UI 類型中的控制項或元素。 這些稱為主題轉換，因為動畫支援 Windows 的外觀和風格，並在從某個互動模式變更為另一個互動模式時，定義所有應用程式對特定 UI 案例執行的動作。 主題轉換是動畫庫的一部分。
  • 主題動畫是一或多個預先定義 Windows 執行階段 XAML UI 類型的屬性的動畫。 主題動畫與主題轉換不同，因為主題動畫以一個特定元素為目標，並存在於控制項內的特定視覺狀態中，而主題轉換則分配給存在於視覺狀態之外的控制項屬性，並影響這些狀態之間的轉換。 許多 Windows 執行時期 XAML 控制項在故事板中包含主題動畫，這些動畫是其控制項範本的一部分，並且動畫由視覺狀態觸發。 只要您不修改模板，您的 UI 中的控制項就可以使用這些內建主題動畫。 但是，如果您確實替換了模板，那麼您也將刪除內建的控制主題動畫。 要恢復它們，您必須定義一個分鏡，其中包含控制項的視覺狀態集中的主題動畫。 您也可以從不在視覺狀態內的故事板運行主題動畫，並使用 Begin 方法啟動它們，但這種情況不太常見。 主題動畫是動畫庫的一部分。
  • 當控制項從其定義的視覺狀態之一轉換到另一種狀態時，將套用視覺轉換。 這些是您編寫的自訂動畫，通常與您為控制項編寫的自訂範本以及該範本中的視覺狀態定義相關。 動畫僅在狀態之間的時間內運行，並且通常很短，最多幾秒鐘。 有關詳細資訊，請參閱視覺狀態分鏡動畫的「視覺過渡」部分。
  • 分鏡動畫會以動畫顯示一段時間 Windows 執行階段相依性屬性的值。 分鏡可以定義為視覺轉換的一部分，或由應用程式在運行時觸發。 如需詳細資訊，請參閱分鏡腳本動畫。 有關依賴項屬性及其存在位置的詳細資訊，請參閱依賴項屬性概述。
  • 新的 ConnectedAnimationService API 提供的連接動畫允許開發人員輕鬆創建一種效果，其中元素在導航期間在視圖之間呈現動畫效果。 Windows 10 版本 1607 起可以取得此 API。 如需詳細資訊，請參閱 ConnectedAnimationService。

連結庫中可用的動畫

動畫庫中提供下列動畫。 點擊動畫名稱以了解有關其主要使用場景、如何定義它們的更多資訊，並查看動畫範例。

頁面轉換

使用頁面轉換在應用程式內以動畫顯示導覽。 由於幾乎所有應用程式都使用某種導覽，頁面轉換動畫是應用程式最常使用的主題動畫類型。 如需頁面轉換 API 的詳細資訊，請參閱 NavigationThemeTransition。

內容轉換和進入轉換

使用內容轉換動畫 (ContentThemeTransition) 將片段或一組內容移入或移出目前的檢視。 例如，內容轉換動畫會顯示在頁面第一次載入時尚未準備好顯示的內容，或當頁面區段的內容變更時。

EntranceThemeTransition 代表當第一次載入頁面或大型 UI 區段時，可以套用至內容的動作。 因此，內容的第一個外觀可以提供與內容變更不同的意見反應。 EntranceThemeTransition 相當於具有預設參數的 NavigationThemeTransition，但可以在 Frame 外部使用。

淡入/淡出，並交叉柵欄

使用淡入和淡出動畫來顯示或隱藏暫時性 UI 或控制項。 在 XAML 中，這些會以 FadeInThemeAnimation 和 FadeOutThemeAnimation 表示。 其中一個範例是在應用程式列中，新的控制項可能會因為使用者互動而出現。 另一個範例是瞬態捲軸或平移指示器，在一段時間內未偵測到使用者輸入後，它們會淡出。 當內容動態載入時，應用程式也應該在從佔位符項目過渡到最終項目時使用動畫淡入淡出。

使用交叉柵欄動畫，在專案的狀態變更時平滑轉換;例如，當應用程式重新整理檢視的目前內容時。 XAML 動畫庫不提供專用的交叉淡入淡出動畫 (沒有與 crossFade 等效的動畫)，但您可以使用具有重疊計時的 FadeInThemeAnimation 和 FadeOutThemeAnimation 來實現相同的結果。

指標向上/向下

使用 PointerUpThemeAnimation 和 PointerDownThemeAnimation 動畫，為使用者提供成功點選或按兩下磚的意見反應。 例如，當使用者按兩下或點選磚時，就會播放指標向下動畫。 一旦放開按兩下或點選之後，就會播放指標向上動畫。

重新置放

使用重新定位動畫 (RepositionThemeAnimation 或 RepositionThemeTransition) 將元素移至新位置。 例如，移動專案控制項中的標頭會使用重新定位動畫。

顯示/隱藏快顯

當您在目前檢視上方顯示及隱藏 Popup 或類似的內容 UI 時，請使用 PopInThemeAnimation 和 PopOutThemeAnimation。 PopupThemeTransition 是一種主題轉換，如果您想要關閉快顯，這個轉換會很有用。

顯示/隱藏邊緣 UI

使用 EdgeUIThemeTransition 動畫，將小型、邊緣型 UI 投影入和移出檢視。 例如，當您在畫面頂端或底部顯示自訂應用程式行，或 UI 表面顯示畫面頂端的錯誤和警告時，請使用這些動畫。

使用 PaneThemeTransition 動畫來顯示和隱藏窗格或面板。 這是針對大型邊緣型 UI，例如自訂鍵盤或工作窗格。

清單項目變更

當您在現有清單中新增或刪除專案時，請使用 AddDeleteThemeTransition 動畫來新增動畫行為。 對於新增，轉換將首先重新定位清單中的現有項目，為新項目騰出空間，然後新增項目。 對於刪除，轉換會從清單中刪除項目，並根據需要在刪除的項目被刪除後重新定位剩餘的清單項目。

如果專案變更清單中的位置，您也會套用個別的 ReorderThemeTransition。 這個動畫效果與刪除專案的方式不同，並使用相關聯的刪除/新增動畫將其新增至新位置。

請注意，這些動畫包含在預設的 ListView 和 GridView 範本中，因此如果您已經使用這些控制件，就不需要手動新增這些動畫。

拖放

使用拖曳動畫 (DragItemThemeAnimation、 DragOverThemeAnimation) 和拖放動畫 （DropTargetItemThemeAnimation) 在使用者拖放專案時提供視覺回饋。

使用中時，動畫會向使用者顯示清單可以在卸除的項目周圍重新排列。 當使用者在目前位置卸除專案時，知道專案將放在清單中的位置會很有説明。 動畫會提供視覺回饋，指出拖曳的項目可以在清單中的另外兩個項目之間卸除，而且這些專案會移出方向。

搭配自訂控制項使用動畫

下表摘要說明當您建立這些 Windows 執行階段控制項的自訂版本時，應該使用哪些動畫的建議：

UI 類型 建議的動畫
對話方塊 FadeInThemeAnimation 和 FadeOutThemeAnimation
飛出視窗 PopInThemeAnimation 和 PopOutThemeAnimation
工具提示 FadeInThemeAnimation 和 FadeOutThemeAnimation
內容功能表 PopInThemeAnimation 和 PopOutThemeAnimation
命令列 EdgeUIThemeTransition
工作窗格或邊緣型面板 PaneThemeTransition
任何 UI 容器的內容 ContentThemeTransition
針對控制項，或如果沒有其他動畫套用 FadeInThemeAnimation 和 FadeOutThemeAnimation

 

轉換動畫範例

在理想情況下，您的應用程式會使用動畫來增強使用者介面，或使其更具吸引力，而不會惹惱使用者。 其中一種方式是將動畫轉換套用至 UI，以便在某個專案進入或離開畫面或其他變更時，動畫會吸引使用者對變更的注意。 例如，您的按鈕可能會快速淡入和淡出檢視，而不只是顯示和消失。 我們建立了一些 API，可用來建立一致的建議或一般動畫轉換。 這裡的範例示範如何將動畫套用至按鈕，使其迅速滑入檢視。

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button>

在此程式代碼中，我們會將 EntranceThemeTransition 物件新增至按鈕的轉換集合。 現在，當按鈕第一次轉譯時，它會迅速滑入檢視，而不只是顯示。 您可以在動畫對象上設定一些屬性，以調整其投影片和方向的距離，但對於特定案例來說，這實際上是一個簡單的 API，也就是要讓一個引人注目的入口。

您也可以在應用程式的樣式資源中定義轉換動畫主題，讓您能夠統一套用效果。 此範例相當於上一個範例，只會使用 Style 來套用：

<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

上述範例會將主題轉換套用至個別控制項，不過，當您將主題轉換套用至物件的容器時，主題轉換會更加有趣。 當您這樣做時，容器的所有子物件都會參與轉換。 在下列範例中，EntranceThemeTransition 會套用至矩形網格線。

<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

網格的子矩形會以可視化方式逐一轉換成檢視，如果您將這個動畫個別套用至矩形，則不會一次轉換成檢視。

以下是此動畫的示範：

Animation showing child rectangle transitioning into view

當其中一或多個子系變更位置時，容器的子物件也可以重新流動。 在下列範例中，我們會將 RepositionThemeTransition 套用至矩形的網格線。 當您移除其中一個矩形時，所有其他矩形都會重新流入其新位置。

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {    
        rectangleItems.Items.RemoveAt(0);
    }                         
}

// .h
private:
void RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

//.cpp
void BlankPage::RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    if (rectangleItems->Items->Size > 0)
    {    
        rectangleItems->Items->RemoveAt(0);
    }
}

您可以將多個轉換動畫套用至單一物件或物件容器。 例如，如果您想要讓矩形清單在檢視中產生動畫效果，並在變更位置時產生動畫效果，您可以套用 RepositionThemeTransition 和 EntranceThemeTransition，如下所示：

...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...

在 UI 元素上新增、移除、重新排序等動作時，有數個轉換效果可建立動畫。 這些 API 的名稱全都包含「ThemeTransition」：

API 描述
NavigationThemeTransition 提供 Frame 中頁面瀏覽的 Windows 個性動畫。
AddDeleteThemeTransition 提供控制項新增或刪除子系或內容時的動畫轉換行為。 控制項通常是專案容器。
ContentThemeTransition 提供控制項內容變更時的動畫轉換行為。 除了 AddDeleteThemeTransition 之外，您還可以套用此專案。
EdgeUIThemeTransition 提供 (小型) 邊緣 UI 轉換的動畫轉換行為。
EntranceThemeTransition 提供控制項第一次出現時的動畫轉換行為。
PaneThemeTransition 提供面板 (大型邊緣 UI) UI 轉換的動畫轉換行為。
PopupThemeTransition 提供動畫轉換行為，可在控制項出現時套用至控制項的快顯元件 (例如，對象上類似工具提示的 UI)。
ReorderThemeTransition 提供清單檢視控制項專案變更順序時的動畫轉換行為。 這通常是因為拖放作業所造成。 不同的控制項和主題可以有不同的動畫特性。
RepositionThemeTransition 提供控制項變更位置時的動畫轉換行為。

 

主題動畫範例

轉換動畫很容易套用。 但是，您可能想要對動畫效果的時機和順序有更多的控制權。 您可以使用主題動畫來啟用更多控制項，同時仍使用一致的主題來表示動畫的行為。 主題動畫也需要比自訂動畫少的標記。 在這裡，我們使用 FadeOutThemeAnimation 使矩形淡出檢視。

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub

//.h
void Rectangle_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);

//.cpp
void BlankPage::Rectangle_Tapped(Object^ sender, PointerRoutedEventArgs^ e)
{
    myStoryboard->Begin();
}

不同於轉換動畫，主題動畫沒有自動執行的內建觸發程式 (轉換)。 當您在 XAML 中定義主題動畫時，必須使用 Storyboard 來包含主題動畫。 您也可以更改動畫的預設行為。 例如，您可以藉由增加FadeOutThemeAnimation 上的 Duration 時間值來減緩淡出的速度。

注意 為了顯示基本動畫技術，我們會使用應用程式程式代碼呼叫 Storyboard 方法來啟動動畫。 您可以使用 Begin、Stop、Pause 和 ResumeStoryboard 方法來控制 Storyboard 動畫的運作方式。 不過，這通常不是您在應用程式中包含連結庫動畫的方式。 相反地，您通常會將連結庫動畫整合到套用至控制項或元素的 XAML 樣式和範本中。 了解範本和視覺狀態稍微相關一點。 但我們確實介紹了如何在視覺狀態中使用庫動畫，作為視覺狀態分鏡動畫主題的一部分。

 

您可以將數個其他主題動畫套用至 UI 元素，以建立動畫效果。 這些 API 的名稱全都包含「ThemeAnimation」：

API 描述
DragItemThemeAnimation 表示套用至要拖曳之項目專案的預先設定動畫。
DragOverThemeAnimation 表示套用至所拖曳專案底下元素的預先設定動畫。
DropTargetItemThemeAnimation 適用於潛在置放目標元素的預先設定動畫。
FadeInThemeAnimation 首次出現時應用於控制項的預先配置不透明度動畫。
FadeOutThemeAnimation 從 UI 或隱藏控制項移除時，套用至控制項的預先設定不透明度動畫。
PointerDownThemeAnimation 點選或按下專案或專案之用戶動作的預先設定動畫。
PointerUpThemeAnimation 使用者動作的預先設定動畫，會在用戶點選專案或專案之後執行，並釋放動作。
PopInThemeAnimation 套用至控制項快顯元件的預先設定動畫，其出現時會套用至控制項的快顯元件。 此動畫結合了不透明度和翻譯。
PopOutThemeAnimation 套用至控制項快顯元件的預先設定動畫，因為控制項已關閉或移除。 此動畫結合了不透明度和翻譯。
RepositionThemeAnimation 物件重新定位時預先設定的動畫。
SplitCloseThemeAnimation 使用 ComboBox 開啟和關閉樣式的動畫隱藏目標 UI 的預先配置動畫。
SplitOpenThemeAnimation 使用 ComboBox 開啟和關閉樣式的動畫隱藏目標 UI 的預先配置動畫。
DrillInThemeAnimation 表示當使用者在邏輯層次結構中向前導航 (例如從清單頁面到詳細資訊頁面) 時執行的預先配置動畫。
DrillOutThemeAnimation 表示當使用者在邏輯層次結構中向後導航 (例如從詳細資料頁面到清單頁面) 時執行的預先配置動畫。

 

建立您自己的動畫

當主題動畫不足以滿足您的需求時，您可以建立自己的動畫。 您可以透過動畫顯示一或多個物件的屬性值來建立動畫效果。 例如，您可以為矩形的寬度、RotateTransform 的角度或按鈕的顏色值設定動畫。 我們將這種類型的自訂動畫稱為分鏡腳本動畫，以區別 Windows 執行階段 已提供做為預先設定動畫類型的連結庫動畫。 針對分鏡腳本動畫，您可以使用可以變更特定類型值的動畫（例如 DoubleAnimation 來建立 Double 動畫)，並將該動畫放在 Storyboard 腳本中以控制。

若要產生動畫效果，您要建立動畫效果的屬性必須是相依性屬性。 關於依賴項屬性的詳細資訊，請參閱依賴項屬性概述。 有關建立自訂分鏡動畫的更多資訊，包括如何定位和控制它們，請參閱分鏡動畫。

XAML 中應用程式 UI 定義的最大區域，您可以在其中定義自訂分鏡腳本動畫，如果您要在 XAML 中定義控制元件的視覺狀態。 因為您正在建立新的控制項類別，或是重新範本化現有的控制項，而該控制項在控制項範本中具有視覺狀態，因此您將執行此動作。 如需詳細資訊，請參閱視覺狀態的分鏡腳本動畫。