XAML 中的動畫Animations in XAML

動畫可以藉由新增移動和互動功能來增強您的應用程式。Animations can enhance your app by adding movement and interactivity. 透過使用 Windows 執行階段動畫庫的動畫,您可以將 Windows 的外觀和操作方式整合到您的 app 中。By using the animations from the Windows Runtime animation library, you can integrate the Windows look and feel into your app. 本主題提供動畫摘要以及每個典型案例使用的範例。This topic provides a summary of the animations and examples of typical scenarios where each is used.

提示

XAML 的 Windows 執行階段控制項包括特定類型的動畫,作為來自動畫庫的內建行為。The Windows Runtime controls for XAML include certain types of animations as built-in behaviors that come from an animation library. 在 app 中使用這些控制項,不需要自行進行程式設計,就可以取得動畫的外觀及操作。By using these controls in your app, you can get the animated look and feel without having to program it yourself.

Windows 執行階段動畫庫中的動畫有下列優點:Animations from the Windows Runtime animation library provide these benefits:

  • 動畫的指導方針保持一致的動作Motions that align to the Guidelines for animations
  • 在 UI 狀態之間進行快速且流暢的轉換,可以通知但不會打擾到使用者Fast, fluid transitions between UI states that inform but do not distract the user
  • 可在應用程式內向使用者指示轉換的視覺行為Visual behavior that indicates transitions within an app to the user

例如,當使用者將項目新增到清單時,新項目不會立即出現在清單中,新項目會以動畫方式就定位。For example, when the user adds an item to a list, instead of the new item instantly appearing in the list, the new item animates into place. 清單中的其他項目則會在短時間內,以動畫方式移至它們的新位置,以便將空間讓給新增的項目。The other items in the list animate to their new positions over a short period of time, making room for the added item. 對使用者而言,這裡的轉換行為會使控制項互動更為明顯。The transition behavior here makes the control interaction more apparent to the user.

Windows 10 版本 1607 針對實作動畫引進新的 ConnectedAnimationService API,元素會在瀏覽期間顯示在檢視之間的動畫。Windows 10, version 1607 introduces a new ConnectedAnimationService API for implementing animations where an element appears to animate between views during a navigation. 這個 API 的使用模式與其他動畫程式庫 API 不同。This API has a different usage pattern from the other animation library API's. ConnectedAnimationService 的用法涵蓋在參考頁面Usage of ConnectedAnimationService is covered in the reference page.

然而動畫庫無法為每種可能的狀況提供動畫。The animation library does not provide animations for every possible scenario. 在某些狀況下,您可能會希望以 XAML 建立自訂動畫。There are cases where you might wish to create a custom animation in XAML. 如需詳細資訊,請參閱腳本動畫For more info, see Storyboarded animations.

此外,針對諸如根據 ScrollViewer 捲動位置產生項目動畫效果的特定進階案例,開發人員可能會想要使用視覺層交互操作來實作自訂動畫。Additionally, for certain advanced scenarios like animating an item based on scroll position of a ScrollViewer, developers may wish to use Visual Layer interoperation to implement custom animations. 如需詳細資訊,請參閱視覺層See Visual Layer for more information.

動畫類型Types of animations

Windows 執行階段動畫系統與動畫庫的目標更為遠大,也就是讓控制項與 UI 的其他部分的行為都能有動畫效果。The Windows Runtime animation system and the animation library serve the larger goal of enabling controls and other parts of UI to have an animated behavior. 動畫有好幾種不同的類型。There are several distinct types of animations.

  • 主題轉換 會在 UI 中的某些條件變更時自動套用,其中涉及來自預先定義 WINDOWS 執行階段 XAML UI 類型的控制項或元素。Theme transitions are applied automatically when certain conditions change in the UI, involving controls or elements from the predefined Windows Runtime XAML UI types. 這些都稱為 主題轉換 ,因為動畫支援 Windows 外觀和操作,並定義當應用程式從某個互動模式變更為另一個互動模式時,針對特定 UI 案例的用途。These are termed theme transitions because the animations support the Windows look and feel, and define what all apps do for particular UI scenarios when they change from one interaction mode to another. 這些佈景主題轉換是動畫庫的一部分。The theme transitions are part of the animation library.
  • 主題動畫 是預先定義之 WINDOWS 執行階段 XAML UI 類型的一個或多個屬性的動畫。Theme animations are animations to one or more properties of predefined Windows Runtime XAML UI types. 佈景主題動畫與佈景主題轉換不同,因為佈景主題動畫會針對某個特定元素,並存在於某個控制項內的特定視覺狀態中,而佈景主題轉換則會指派給存在於視覺狀態外部控制項的屬性,而且會影響這些狀態之間的轉換。Theme animations differ from theme transitions because theme animations target one specific element and exist in specific visual states within a control, whereas the theme transitions are assigned to properties of the control that exist outside of the visual states and influence the transitions between those states. 許多 Windows 執行階段 XAML 控制項在屬於其控制項範本一部分的腳本內,都包含佈景主題動畫以及由視覺狀態觸發的動畫。Many of the Windows Runtime XAML controls include theme animations within storyboards that are part of their control template, with the animations triggered by visual states. 只要您沒有修改範本,您所擁有的這些內建佈景主題動畫就可供您 UI 中的控制項使用。So long as you're not modifying the templates, you'll have those built-in theme animations available for the controls in your UI. 不過,如果您取代了範本,則也將移除內建的控制項佈景主題動畫。However, if you do replace templates, then you'll be removing the built-in control theme animations too. 若要回復這些佈景主題動畫,您必須定義一個腳本,在控制項的這組視覺狀態內包含佈景主題動畫。To get them back, you must define a storyboard that includes theme animations within the control's set of visual states. 您也可以從不在視覺狀態內的腳本執行佈景主題動畫,並使用 Begin 方法啟動這些佈景主題動畫,但這比較少見。You can also run theme animations from storyboards that aren't within visual states and start them with the Begin method, but that's less common. 佈景主題動畫是動畫庫的一部分。Theme animations are part of the animation library.
  • 當控制項從其定義的其中一個視覺狀態轉換成另一個狀態時,就會套用視覺效果轉換Visual transitions are applied when a control transitions from one of its defined visual states to another state. 它們是您撰寫的自訂動畫,通常與您針對控制項撰寫的自訂範本以及該範本內的視覺狀態定義有關。These are custom animations that you write, and are typically related to the custom template you write for a control and the visual state definitions within that template. 這個動畫只會在狀態與狀態之間執行;執行時間通常很短,頂多只有幾秒鐘。The animation only runs during the time between states, and that's typically a short amount of time, a few seconds at most. 如需詳細資訊,請參閱視覺狀態的腳本動畫的 "VisualTransition" 區段For more info, see "VisualTransition" section of Storyboarded animations for visual states.
  • Storyboarded 動畫 會在一段時間內建立 Windows 執行階段相依性屬性值的動畫。Storyboarded animations animate the value of a Windows Runtime dependency property over time. 腳本可定義為視覺轉換的一部分,或是在執行階段由應用程式所觸發。Storyboards can be defined as part of a visual transition, or triggered at runtime by the application. 如需詳細資訊,請參閱腳本動畫For more info, see Storyboarded animations. 如需相依性屬性及其存在位置的詳細資訊,請參閱相依性屬性概觀For more info about dependency properties and where they exist, see Dependency properties overview.
  • 新的ConnectedAnimationService API 所提供的連接動畫可讓開發人員輕鬆地建立一個效果,讓專案在導覽期間顯示于視圖之間的動畫。Connected animations provided by the new ConnectedAnimationService API allow developers to easily create an effect where an element appears to animate between views during a navigation. Windows 10 版本 1607 起可以取得此 API。This API is available starting in Windows 10, version 1607. 如需詳細資訊,請參閱 ConnectedAnimationServiceSee ConnectedAnimationService for more information.

動畫庫中可用的動畫Animations available in the library

動畫庫提供下列動畫。The following animations are supplied in the animation library. 按一下動畫名稱,以深入了解動畫的主要使用狀況、定義動畫的方式,以及查看動畫的範例。Click on the name of an animation to learn more about their main usage scenarios, how to define them, and to see an example of the animation.

頁面轉換Page transition

使用頁面轉換在 App 中產生動畫瀏覽效果。Use page transitions to animate navigation within an app. 由於絕大部分的 App 皆使用某種類型的瀏覽,因此頁面轉化動畫是 App 最常使用的佈景主題動畫類型。Since almost all apps use some kind of navigation, page transition animations are the most common type of theme animation used by apps. 如需關於頁面轉換 API 的詳細資訊,請參閱 NavigationThemeTransitionSee NavigationThemeTransition for more information about the page transition APIs.

內容轉換和入場轉換Content transition and entrance transition

使用內容轉換動畫 (ContentThemeTransition),將內容片段或一組內容移入或移出目前的檢視。Use content transition animations (ContentThemeTransition) to move a piece or a set of content into or out of the current view. 例如,內容轉換動畫會顯示最初載入頁面時或變更頁面區段內容時,尚未準備顯示的內容。For example, the content transition animations show content that was not ready to display when the page was first loaded, or when the content changes on a section of a page.

EntranceThemeTransition 代表先載入頁面或大型 UI 區段時可套用至內容的動作。EntranceThemeTransition represents a motion that can apply to content when a page or large section of UI is first loaded. 因此在內容第一次出現時,可以提供與內容變更不同的回饋。Thus the first appearance of content can offer different feedback than a change to content does. EntranceThemeTransition 等同於具預設參數的 NavigationThemeTransition,但可在畫面之外使用。EntranceThemeTransition is equivalent to a NavigationThemeTransition with the default parameters, but may be used outside of a Frame.

淡入/淡出以及淡入與淡出Fade in/out, and crossfade

使用淡入動畫和淡出動畫來顯示或隱藏暫時性 UI 或控制項。Use fade in and fade out animations to show or hide transient UI or controls. 在 XAML 中,這些以 FadeInThemeAnimationFadeOutThemeAnimation 表示。In XAML these are represented as FadeInThemeAnimation and FadeOutThemeAnimation. 其中一個範例就是新控制項因為使用者互動而出現在應用程式列中。One example is in an app bar in which new controls can appear due to user interaction. 另一個範例則是經過一段時間未偵測到使用者輸入而淡出的暫時性捲軸或移動瀏覽指標。Another example is a transient scroll bar or panning indicator that is faded out after no user input has been detected for some amount of time. 應用程式也應該在預留位置項目隨著內容動態載入而轉換成最終項目時,使用淡入動畫。Apps should also use the fade in animation when they transition from a placeholder item to the final item as content loads dynamically.

使用淡入與淡出動畫,在項目狀態變更 (例如應用程式重新整理檢視的目前內容) 時順暢轉換。Use a crossfade animation to smooth the transition when an item's state is changing; for example, when the app refreshes the current contents of a view. XAML 動畫庫不提供專用的淡入與淡出動畫 (與 crossFade 不同),但是您可以使用具有重疊時間的 FadeInThemeAnimationFadeOutThemeAnimation 達到相同的結果。The XAML animation library does not supply a dedicated crossfade animation (no equivalent for crossFade), but you can achieve the same result using FadeInThemeAnimation and FadeOutThemeAnimation with overlapped timing.

指標向上/向下Pointer up/down

使用 PointerUpThemeAnimationPointerDownThemeAnimation 動畫,在順利點選或按一下磚時提供使用者回饋。Use the PointerUpThemeAnimation and PointerDownThemeAnimation animations to give the user feedback for a successful tap or click on a tile. 例如,在使用者按一下或點選磚時,播放指標向下動畫。For example, when a user clicks or taps down on a tile, the pointer down animation is played. 只要放開按一下或點選的動作,則播放指標向上動畫。Once the click or tap has been released, the pointer up animation is played.

調整位置Reposition

使用重新定位動畫 (RepositionThemeAnimationRepositionThemeTransition) 將元素移入新位置。Use the reposition animations (RepositionThemeAnimation or RepositionThemeTransition) to move an element into a new position. 例如,在項目控制項中移動標頭即可使用重新定位動畫。For example, moving the headers in an items control uses the reposition animation.

顯示/隱藏快顯Show/hide popup

當您在目前檢視頂端顯示和隱藏 Popup 或類似與內容相關的 UI 時,請使用 PopInThemeAnimationPopOutThemeAnimationUse the PopInThemeAnimation and PopOutThemeAnimation when you show and hide a Popup or similar contextual UI on top of the current view. 如果您要消失關閉快顯,PopupThemeTransition 是一個屬於實用的回饋的佈景主題轉換。PopupThemeTransition is a theme transition that's useful feedback if you want to light dismiss a popup.

顯示/隱藏邊緣 UIShow/hide edge UI

使用 EdgeUIThemeTransition 動畫,將以邊緣為基礎的小型 UI 滑入和滑出檢視。Use the EdgeUIThemeTransition animation to slide small, edge-based UI into and out of view. 例如,當您在螢幕頂端或螢幕底端顯示自訂應用程式列,或在螢幕頂端顯示錯誤及警告的 UI 表面時,就可以使用這些動畫。For example, use these animations when you show a custom app bar at the top or bottom of the screen or a UI surface for errors and warnings at the top of the screen.

使用 PaneThemeTransition 動畫顯示和隱藏窗格或面板。Use the PaneThemeTransition animation to show and hide a pane or panel. 這是供以邊緣為基礎的大型 UI 使用,例如自訂鍵盤或工作窗格。This is for large edge-based UI such as a custom keyboard or a task pane.

清單項目變更List item changes

當您在現有的清單中新增或刪除某個項目時,使用 AddDeleteThemeTransition 動畫新增動畫行為。Use the AddDeleteThemeTransition animation to add animated behavior when you add or delete an item in an existing list. 若要新增,轉換會先重新定位清單中的現有項目,為新項目挪出空間,然後再新增新項目。For add, the transition will first reposition existing items in the list to make space for the new items, and then add the new items. 若要刪除,轉換會從清單中移除項目,移除要刪除的項目之後,便會視需要重新定位剩餘的清單項目。For delete, the transition removes items from a list and, if necessary, repositions the remaining list items once the deleted items have been removed.

如果清單中的項目變更位置,您也可以套用個別的 ReorderThemeTransitionThere's also a separate ReorderThemeTransition that you apply if an item changes position in a list. 此動畫效果產生的方式與刪除某個項目,然後再以相關的刪除/新增動畫,將其新增在新位置的方式不同。This is animated differently than deleting an item and adding it in a new place with the associated delete/add animations.

請注意,這些動畫已包含於預設的 ListViewGridView 範本,因此您無須手動新增這些動畫 (若您已使用這些控制項)。Note that these animations are included in the default ListView and GridView templates so you do not need to manually add these animations if you are already using these controls.

拖放Drag/drop

使用拖曳動畫 (DragItemThemeAnimationDragOverThemeAnimation) 和放下動畫 (DropTargetItemThemeAnimation),在使用者拖曳或放下項目時提供視覺化回饋。Use the drag animations (DragItemThemeAnimation, DragOverThemeAnimation) and drop animation (DropTargetItemThemeAnimation) to give visual feedback when the user drags or drops an item.

作用時,這些動畫會為使用者示範清單可以在放下的項目周圍重新排列。When active, the animations show the user that the list can be rearranged around a dropped item. 這有助於使用者了解如果在目前的位置放下項目之後,該項目會放置在清單何處。It is helpful for users to know where the item will be placed in a list if it is dropped at the current location. 如果某個拖曳的項目可以放在清單中的兩個其他項目之間,且這兩個項目會讓開,這些動畫會提供視覺化回饋。The animations give visual feedback that an item being dragged can be dropped between two other items in the list and that those items will move out of the way.

使用動畫搭配自訂控制項Using animations with custom controls

下表摘要說明當您建立這些 Windows 執行階段控制項的自訂版本時,應該使用的動畫建議:The following table summarizes our recommendations for which animation you should use when you create a custom version of these Windows Runtime controls:

UI 類型UI type 建議的動畫Recommended animation
對話方塊Dialog box FadeInThemeAnimationFadeOutThemeAnimationFadeInThemeAnimation and FadeOutThemeAnimation
FlyoutFlyout PopInThemeAnimationPopOutThemeAnimationPopInThemeAnimation and PopOutThemeAnimation
工具提示Tooltip FadeInThemeAnimationFadeOutThemeAnimationFadeInThemeAnimation and FadeOutThemeAnimation
捷徑功能表Context menu PopInThemeAnimationPopOutThemeAnimationPopInThemeAnimation and PopOutThemeAnimation
命令列Command bar EdgeUIThemeTransitionEdgeUIThemeTransition
工作窗格或以邊緣為基礎的面板Task pane or edge-based panel PaneThemeTransitionPaneThemeTransition
任何 UI 容器的內容Contents of any UI container ContentThemeTransitionContentThemeTransition
用於控制項,或者沒有其他適用的動畫For controls or if no other animation applies FadeInThemeAnimationFadeOutThemeAnimationFadeInThemeAnimation and FadeOutThemeAnimation

 

轉換動畫範例Transition animation examples

在理想的情況下,app 會使用動畫來增強使用者介面,或使它變得更具吸引力且不會造成使用者的困擾。Ideally, your app uses animations to enhance the user interface or to make it more attractive without annoying your users. 若要達到這樣的效果,您可以將具動畫效果的轉換套用至 UI,如此一來,當項目進入或離開畫面,甚至是產生變更時,動畫都能將使用者的注意力轉移到變更上。One way you can do this is to apply animated transitions to UI so that when something enters or leaves the screen or otherwise changes, the animation draws the attention of the user to the change. 例如,您的按鈕可能會快速淡入或淡出檢視,而不只是出現或消失而已。For example, your buttons may rapidly fade in and out of view rather than just appear and disappear. 我們建立許多 API,可用來建立一致的建議或典型動畫轉換。We created a number of APIs that can be used to create recommended or typical animation transitions that are consistent. 下列範例顯示如何將動畫套用至按鈕,使其能夠迅速滑入檢視中。The example here shows how to apply an animation to a button so that it swiftly slides into view.

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

在此程式碼中,我們將 EntranceThemeTransition 物件新增至按鈕的轉換集合中。In this code, we add the EntranceThemeTransition object to the transition collection of the button. 現在,當按鈕首次呈現時,會迅速地滑入檢視中,而不只是出現而已。Now, when the button is first rendered, it swiftly slides into view rather than just appear. 您可以在動畫物件上設定一些屬性,以便調整物件滑入的距離及方向,但是我們真正要做的是針對特定狀態建立一個簡單的 API,也就是建立一個搶眼的進入方式。You can set a few properties on the animation object in order to adjust how far it slides and from what direction, but it's really meant to be a simple API for a specific scenario, that is, to make an eye-catching entrance.

您也可以在應用程式的樣式資源中定義轉換動畫佈景主題,以便套用一致的效果。You can also define transition animation themes in the style resources of your app, allowing you to apply the effect uniformly. 此範例與前一個範例相同,唯一的差異在於它是使用 Style 來套用:This example is equivalent to the previous one, only it is applied using a 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>

前一個範例是在個別控制項套用佈景主題轉換,但是如果您將佈景主題轉換套用至物件的容器,會更加有趣美觀。The previous examples apply a theme transition to an individual control, however, theme transitions are even more interesting when you apply them to a container of objects. 這樣做的話,容器中的所有子物件都會參與轉換。When you do this, all the child objects of the container take part in the transition. 在下列範例中,會將 EntranceThemeTransition 套用至矩形的 GridIn the following example, an EntranceThemeTransition is applied to a Grid of rectangles.

<!-- 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>

Grid 的子項矩形會以賞心悅目的方式逐一轉換至檢視中,而不像在將這個動畫個別套用至各個矩形時一次顯示所有子項矩形。The child rectangles of the Grid transition into view one after the other in a visually pleasing way rather than all at once as would be the case if you applied this animation to the rectangles individually.

以下是此動畫的示範:Here's a demonstration of this animation:

顯示子項矩形轉換到檢視的動畫

當一或多個容器的子物件變更位置時,這些子物件也會重新流動到新的位置。Child objects of a container can also re-flow when one or more of those children change position. 在下列範例中,我們會將 RepositionThemeTransition 套用至矩形的格線。In the following example, we apply a RepositionThemeTransition to a grid of rectangles. 當您移除其中一個矩形時,所有其他矩形都會重新流動到新的位置。When you remove one of the rectangles, all the other rectangles re-flow into their new position.

<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);
    }
}

您可以在單一物件或物件容器套用多個轉換動畫。You can apply multiple transition animations to a single object or object container. 例如,如果您想要讓一組矩形以動畫方式進入檢視,同時還要在它們變更位置時產生動畫效果,您可以套用 RepositionThemeTransitionEntranceThemeTransition,如下所示:For example, if you want the list of rectangles to animate into view and also animate when they change position, you can apply the RepositionThemeTransition and EntranceThemeTransition like this:

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

您可以使用數種轉場效果,透過新增、移除、重新排序等動作在 UI 元素上建立動畫。There are several transition effects to create animations on your UI elements as they are added, removed, reordered, and so on. 這些 API 的名稱都包含 "ThemeTransition":The names of these APIs all contain "ThemeTransition":

APIAPI 描述Description
NavigationThemeTransitionNavigationThemeTransition 針對畫面中的頁面瀏覽,提供 Windows 個人化動畫效果。Provides a Windows personality animation for page navigation in a Frame.
AddDeleteThemeTransitionAddDeleteThemeTransition 提供控制項新增或刪除子項或內容時的動畫轉換行為。Provides the animated transition behavior for when controls add or delete children or content. 通常控制項就是一個項目容器。Typically the control is an item container.
ContentThemeTransitionContentThemeTransition 提供控制項內容變更時的動畫轉換行為。Provides the animated transition behavior for when the content of a control is changing. 除了 AddDeleteThemeTransition 之外,您也可以套用此項目。You can apply this in addition to AddDeleteThemeTransition.
EdgeUIThemeTransitionEdgeUIThemeTransition 為 (小) 邊緣 UI 轉換提供動畫轉換行為。Provides the animated transition behavior for a (small) edge UI transition.
EntranceThemeTransitionEntranceThemeTransition 提供控制項首次出現時的動畫轉換行為。Provides the animated transition behavior for when controls first appear.
PaneThemeTransitionPaneThemeTransition 為面板 (大邊緣 UI) UI 轉換提供動畫轉換行為。Provides the animated transition behavior for a panel (large edge UI) UI transition.
PopupThemeTransitionPopupThemeTransition 提供控制項的彈入元件出現時套用的動畫轉換行為 (例如,物件類似工具提示的 UI)。Provides the animated transition behavior that applies to pop-in components of controls (for example, tooltip-like UI on an object) as they appear.
ReorderThemeTransitionReorderThemeTransition 提供清單檢視控制項項目變更順序時的動畫轉換行為。Provides the animated transition behavior for when list-view controls items change order. 通常會在拖放作業時產生這種情況。Typically this happens as a result of a drag-drop operation. 不同的控制項和佈景主題會具備不同的動畫特性。Different controls and themes can have varying characteristics for the animations.
RepositionThemeTransitionRepositionThemeTransition 提供控制項變更位置時的動畫轉換行為。Provides the animated transition behavior for when controls change position.

 

佈景主題動畫範例Theme animation examples

轉換動畫的套用方法很簡單。Transition animations are simple to apply. 不過,您可能想要對動畫效果的時間和順序進行更多的控制。But you may want to have a bit more control over the timing and order of your animation effects. 您可以使用佈景主題動畫來取得更多控制,同時仍能針對動畫的行為方式使用一致的佈景主題。You can use theme animations to enable more control while still using a consistent theme for how your animation behaves. 佈景主題動畫所需的標記也比自訂動畫的標記來得少。Theme animations also require less markup than custom animations. 我們將在這裡使用 FadeOutThemeAnimation,讓矩形淡出檢視。Here, we use the FadeOutThemeAnimation to make a rectangle fade out of view.

<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();
}

與轉換動畫不同,佈景主題動畫沒有自動執行的內建觸發程序 (轉換)。Unlike transition animations, a theme animation doesn't have a built-in trigger (the transition) that runs it automatically. 當您以 XAML 定義佈景主題動畫時,必須使用 Storyboard 以包含該佈景主題動畫。You must use a Storyboard to contain a theme animation when you define it in XAML. 您也可以變更動畫的預設行為。You can also change the default behavior of the animation. 例如,可藉由提高 FadeOutThemeAnimation 上的 Duration 時間值,使淡出的速度變慢。For example, you can slow down the fade-out by increasing the Duration time value on the FadeOutThemeAnimation.

注意   基於顯示基本動畫技術的目的,我們使用應用程式程式碼,藉由呼叫腳本的方法來啟動動畫。Note  For purposes of showing basic animation techniques, we're using app code to start the animation by calling methods of Storyboard. 您可以使用 BeginStopPauseResume Storyboard 方法,控制如何執行 Storyboard 動畫。You can control how the Storyboard animations run using the Begin, Stop, Pause, and Resume Storyboard methods. 不過,那通常不是您將動畫庫加入應用程式的方法。However, that's not typically how you include library animations in apps. 但是,您經常要將動畫庫整合到套用至控制項或元素的 XAML 樣式和範本中。Rather, you usually integrate the library animations into the XAML styles and templates applied to controls or elements. 了解範本和視覺狀態有一點複雜。Learning about templates and visual states is a little more involved. 但是我們的確涵蓋了您在視覺狀態中使用動畫庫的方式,做為視覺狀態的腳本動畫主題的一部分。But we do cover how you'd use library animations in visual states as part of the Storyboarded animations for visual states topic.

 

您可以在 UI 元素套用數個其他佈景主題動畫,以建立動畫效果。You can apply several other theme animations to your UI elements to create animation effects. 這些 API 的名稱都包含 "ThemeAnimation":The names of these API all contain "ThemeAnimation":

APIAPI 描述Description
DragItemThemeAnimationDragItemThemeAnimation 表示可套用至要拖曳之項目元素的預先設定動畫。Represents the preconfigured animation that applies to item elements being dragged.
DragOverThemeAnimationDragOverThemeAnimation 表示可套用至要拖曳之元素下方元素的預先設定動畫。Represents the preconfigured animation that applies to the elements underneath an element being dragged.
DropTargetItemThemeAnimationDropTargetItemThemeAnimation 可套用至可能之拖放目標元素的預先設定動畫。The preconfigured animation that applies to potential drop target elements.
FadeInThemeAnimationFadeInThemeAnimation 在控制項首次出現時套用的預先設定不透明動畫。The preconfigured opacity animation that applies to controls when they first appear.
FadeOutThemeAnimationFadeOutThemeAnimation 從 UI 移除或隱藏控制項時套用的預先設定不透明動畫。The preconfigured opacity animation that applies to controls when they are removed from UI or hidden.
PointerDownThemeAnimationPointerDownThemeAnimation 使用者點選或按一下項目或元素時的預先設定動畫。The preconfigured animation for user action that taps or clicks an item or element.
PointerUpThemeAnimationPointerUpThemeAnimation 使用者點選項目或元素然後動作釋放之後所執行的使用者動作預先設定動畫。The preconfigured animation for user action that runs after a user taps down on an item or element and the action is released.
PopInThemeAnimationPopInThemeAnimation 控制項的彈入元件出現時套用的預先設定動畫。The preconfigured animation that applies to pop-in components of controls as they appear. 此動畫結合了不透明和轉譯。This animation combines opacity and translation.
PopOutThemeAnimationPopOutThemeAnimation 控制項的彈入元件關閉或移除時套用的預先設定動畫。The preconfigured animation that applies to pop-in components of controls as they are closed or removed. 此動畫結合了不透明和轉譯。This animation combines opacity and translation.
RepositionThemeAnimationRepositionThemeAnimation 重新放置物件時套用的預先設定動畫。The preconfigured animation for an object as it is repositioned.
SplitCloseThemeAnimationSplitCloseThemeAnimation 隱藏目標 UI 的預先設定動畫,會使用 ComboBox 開啟與關閉樣式中的動畫。The preconfigured animation that conceals a target UI using an animation in the style of a ComboBox opening and closing.
SplitOpenThemeAnimationSplitOpenThemeAnimation 顯示目標 UI 的預先設定動畫,會使用 ComboBox 開啟與關閉樣式中的動畫。The preconfigured animation that reveals a target UI using an animation in the style of a ComboBox opening and closing.
DrillInThemeAnimationDrillInThemeAnimation 顯示使用者在邏輯階層中正向瀏覽時執行的預先設定動畫,例如從主要頁面瀏覽至詳細資料頁面。Represents a preconfigured animation that runs when a user navigates forward in a logical hierarchy, like from a master page to a detail page.
DrillOutThemeAnimationDrillOutThemeAnimation 顯示使用者在邏輯階層中反向瀏覽時執行的預先設定動畫,例如從詳細資料頁面瀏覽至主要頁面。Represents a preconfigured animation that runs when a user navigates backward in a logical hierarchy, like from a detail page to a master page.

 

建立自己的動畫Create your own animations

當佈景主題動畫無法滿足您的需求時,您可以建立自己的動畫。When theme animations are not enough for your needs, you can create your own animations. 您是透過設定一或多個物件屬性值的動畫效果,讓物件產生動畫效果。You animate objects by animating one or more of their property values. 例如,您可以讓矩形的寬度、RotateTransform 的角度或按鈕的色彩值產生動畫效果。For example, you can animate the width of a rectangle, the angle of a RotateTransform, or the color value of a button. 我們將這類型的自訂動畫術語定義為腳本動畫,用以區分 Windows 執行階段已經提供為預先設定之動畫類型的動畫庫。We term this type of custom animation a storyboarded animation, to distinguish it from the library animations that the Windows Runtime already provides as a preconfigured animation type. 對於腳本動畫,您要使用可以變更特定類型值 (例如可為 Double 建立動畫效果的 DoubleAnimation) 的動畫,並將該動畫放在 Storyboard 內以進行控制。For storyboarded animations, you use an animation that can change values of a particular type (for example DoubleAnimation to animate a Double) and put that animation within a Storyboard to control it.

您要製作動畫的屬性必須是相依性 屬性,才能進行動畫。In order to be animated, the property you are animating must be a dependency property. 如需相依性屬性的詳細資訊,請參閱相依性屬性概觀For more info about dependency properties, see Dependency properties overview. 如需建立自訂腳本動畫 (包括如何做為目標並加以控制) 的詳細資訊,請參閱腳本動畫For more info on creating custom storyboarded animations, including how to target and control them, see Storyboarded animations.

您以 XAML 定義控制項之視覺狀態的一個狀況是,您將定義自訂腳本動畫所在 XAML 中最大的應用程式 UI 定義區域。The biggest area of app UI definition in XAML where you'll define custom storyboarded animations is if you are defining visual states for controls in XAML. 這麼做的原因是,您要建立新的控制項類別,或是您要在其控制項範本中,為具有視覺狀態的現有控制項重新建立範本。You'll be doing this either because you are creating a new control class, or because you are re-templating an existing control that has visual states in its control template. 如需詳細資訊,請參閱視覺狀態的腳本動畫For more info, see Storyboarded animations for visual states.