Language: HTML | XAML

快速入門:使用動畫庫讓 UI 產生動畫效果 (XAML)

Applies to Windows and Windows Phone

Windows 執行階段中的動畫可藉由增加移動和互動性來增強您的應用程式。 使用 Windows 執行階段動畫庫的動畫,可以將它們的外觀和操作方式整合到您的應用程式中。

附註  若要下載示範本主題中討論的許多概念的範例,請參閱 XAML 個人特質動畫範例

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

轉換動畫

在理想的情況下,應用程式會使用動畫來增強使用者介面,或使它變得更具吸引力且不會造成使用者的困擾。若要達到這樣的效果,您可以將具動畫效果的轉換套用至 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 套用至矩形的 Grid


<!-- 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 的矩形子項會以賞心悅目的方式一個接著一個逐一轉換至檢視中,而不會像在各個矩形個別套用這個動畫時一樣,一次顯示所有矩形子項。

以下是示範此動畫的影片:

|

當一或多個容器的子物件變更位置時,這些子物件也會重新流動到新的位置。在下列範例中,我們會將 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);
    }		  		  		  
}

這個影片會示範針對要移除的矩形執行的動畫:

|

您可以在單一物件或物件容器套用多個轉換動畫。例如,如果您想要讓一組矩形以動畫方式進入檢視,同時還要在它們變更位置時產生動畫效果,您可以套用 RepositionThemeTransitionEntranceThemeTransition,如下所示:



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

您可以使用數種轉場效果,透過新增、移除、重新排序等動作在 UI 元素上建立動畫。這些 API 的名稱都包含 "ThemeTransition":

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

與轉換動畫不同,佈景主題動畫沒有自動執行的內建觸發程序 (轉換)。當您以 XAML 定義佈景主題動畫時,必須使用 Storyboard 以包含該佈景主題動畫。您也可以變更動畫的預設行為。例如,可藉由提高 FadeOutThemeAnimation 上的 Duration 時間值,使淡出的速度變慢。

附註  基於說明基本動畫技術的目的,我們將使用應用程式程式碼呼叫 Storyboard 的方法來啟動動畫。您可以使用 BeginStopPauseResume Storyboard 方法,控制如何執行 Storyboard 動畫。不過,那通常不是您將動畫庫加入應用程式的方法。但是,您經常要將動畫庫整合到套用至控制項或元素的 XAML 樣式和範本中。了解範本和視覺狀態有一點複雜。但是我們的確涵蓋了您在視覺狀態中使用動畫庫的方式,做為視覺狀態的腳本動畫主題的一部分。

您可以在 UI 元素套用數個其他的佈景主題動畫,以建立動畫效果。這些 API 的名稱都包含 "ThemeAnimation":

API說明
DragItemThemeAnimation 表示可套用至要拖曳之項目元素的預先設定動畫。
DragOverThemeAnimation 表示可套用至要拖曳之元素下方元素的預先設定動畫。
DropTargetItemThemeAnimation 可套用至可能之放置目標元素的預先設定動畫。
FadeInThemeAnimation 在控制項首次出現時套用的預先設定不透明動畫。
FadeOutThemeAnimation 從 UI 移除或隱藏控制項時套用的預先設定不透明動畫。
PointerDownThemeAnimation 使用者點選或按一下項目或元素時的預先設定動畫。
PointerUpThemeAnimation 使用者點選項目或元素然後動作釋放之後所執行的使用者動作預先設定動畫。
PopInThemeAnimation 控制項的彈入元件出現時套用的預先設定動畫。此動畫結合了不透明和轉譯。
PopOutThemeAnimation 控制項的彈入元件關閉或移除時套用的預先設定動畫。此動畫結合了不透明和轉譯。
RepositionThemeAnimation 重新放置物件時套用的預先設定動畫。
SplitCloseThemeAnimation 使用分割動畫隱藏目標 UI 的預先設定動畫。
SplitOpenThemeAnimation 使用分割動畫顯示目標 UI 的預先設定動畫。
SwipeBackThemeAnimation 元素在撥動互動之後滑回配置位置時,控制項套用的預先設定動畫。
SwipeHintThemeAnimation 指出現在可以使用撥動手勢的預先設定動畫。

 

控制項的內建動畫

有些 Windows 執行階段控制項會內建動畫,做為部分控制項邏輯和預設 XAML 範本。我們建議您充分了解這些控制項,才能將它們用於您的 UI 動畫中。

以下是包含內建動畫的部分控制項清單:

附註  這不是完整的清單。如需詳細資訊,請參閱這個相同區域中的「產生動畫效果...」主題,或特定控制項的「樣式與範本」主題。

建立自己的動畫

當佈景主題動畫無法滿足您的需求時,您可以建立自己的動畫。您是透過設定一或多個物件屬性值的動畫效果,讓物件產生動畫效果。例如,您可以讓矩形的寬度、RotateTransform 的角度或按鈕的色彩值產生動畫效果。我們將這類型的自訂動畫術語定義為腳本動畫,用以區分 Windows 執行階段已經提供為預先設定的動畫類型的動畫庫。若是腳本動畫,您要使用可以變更特定類型值 (例如可為 Double 製作動畫效果的 DoubleAnimation) 的動畫,並將該動畫放在 Storyboard 內以進行控制。

為了建立動畫效果,要產生動畫的屬性必須是「相依性屬性」。如需相依性屬性的詳細資訊,請參閱相依性屬性概觀。如需建立自訂腳本動畫 (包括如何做為目標並加以控制) 的詳細資訊,請參閱腳本動畫

您以 XAML 定義控制項之視覺狀態的一個狀況是,您將定義自訂腳本動畫所在 XAML 中最大的應用程式 UI 定義區域。這麼做的原因是,您要建立新的控制項類別,或是您要在其控制項範本中,為具有視覺狀態的現有控制項重新建立範本。 如需詳細資訊,請參閱視覺狀態的腳本動畫。這些動畫通常不是隨著時間轉換,它們是瞬間發生,而且其實不只是用於為狀態定義一組屬性變更的技術。它們不一定會將視覺上的動畫行為套用到 UI,但是您將會看到控制項的視覺狀態通常包含動畫庫本身。在此情況下,佈景主題動畫不會隨著時間套用變更,但通常是一段很短的時間。

相關主題

使用 C# 或 VB 建立應用程式的藍圖
Property-path 語法
相依性屬性概觀
腳本動畫
視覺狀態的腳本動畫
主要畫面格動畫和 Easing 函式動畫
Storyboard
Storyboard.TargetProperty

 

 

顯示:
© 2014 Microsoft