Silverlight - 動畫

動畫允許您建立真正動態的使用者介面。它常用於應用效果，例如，滑鼠移過時增大的圖示、旋轉的徽標、滾動顯示的文字等等。

有時，這些效果看起來像過度的炫技。如果使用得當，動畫可以多種方式增強應用程式。它們可以使應用程式看起來更具響應性、更自然、更直觀。

例如，單擊時滑入的按鈕感覺像一個真實的物理按鈕，而不僅僅是另一個灰色的矩形。動畫還可以將注意力吸引到重要元素上，並引導使用者過渡到新的內容。

Silverlight 的動畫方法是宣告式的，而不是專注於幀動畫序列。

定義動畫

動畫通常在資源部分定義。事實上，它們通常包含在一個故事板元素中，我們稍後將詳細介紹。

它提供了一個 Begin() 方法，因此可以從程式碼中呼叫動畫。
動畫也可以放在控制元件模板中的可視狀態元素內。

宣告式動畫

Silverlight 中的動畫是宣告式的。它們描述了想要發生的事情。讓 Silverlight 來解決如何實現它。因此，動畫通常遵循以下模式：我們告訴 Silverlight 我們想要更改什麼。

這始終是某些命名元素上的某些屬性，即 **TargetName** 和 **TargetProperty**。

<DoubleAnimation 
   Storyboard.TargetName = "myRectangle" 
   Storyboard.TargetProperty = "Opacity" 
   From = "0" To = "1" 
   Duration = "0:0:5"  
/>

我們說明我們希望該屬性如何更改，在本例中，我們將不透明度從零值更改為一值。換句話說，我們希望目標元素從不透明淡出到透明。
最後，我們說明我們希望這需要多長時間，在本例中需要五秒鐘。
此雙精度動畫的意義在於它針對的是型別為雙精度的屬性，即浮點值。
如果要動畫化表示顏色的屬性，請改用顏色動畫。

讓我們來看一個簡單的雙精度動畫示例。下面是 XAML 程式碼，其中添加了兩個按鈕、一個矩形和兩個故事板。

<UserControl x:Class = "DoubleAnimationExample.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" d:DesignWidth = "640" d:DesignHeight = "480">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "fadeDown"> 
         <DoubleAnimation  
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "1" To = "0" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
      <Storyboard x:Name = "fadeUp"> 
         <DoubleAnimation 
            Storyboard.TargetName = "myRectangle" 
            Storyboard.TargetProperty = "Opacity" 
            From = "0" To = "1" 
            Duration = "0:0:5" /> 
      </Storyboard> 
		
   </UserControl.Resources> 
	
   <Grid x:Name = "LayoutRoot"> 
      <Rectangle x:Name = "myRectangle" 
         Fill = "Blue" Width = "300" Height = "100"  
         HorizontalAlignment = "Center" 
         VerticalAlignment = "Top" Margin = "0,30" /> 
			
      <Button x:Name = "fadeUpButton" Content = "Up" Width = "80"  
         Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,140,0,0"  
         Click = "fadeUpButton_Click" /> 
			
      <Button x:Name = "fadeDownButton" Content = "Down"  
         Width = "80" Height = "30" HorizontalAlignment = "Left" 
         VerticalAlignment = "Top" Margin = "50,180,0,0"  
         Click = "fadeDownButton_Click" />
			
   </Grid>
	
</UserControl>

以下是 C# 中不同事件的實現。

using System.Windows; 
using System.Windows.Controls;  

namespace DoubleAnimationExample { 

   public partial class MainPage : UserControl { 
	
      public MainPage() { 
         InitializeComponent(); 
      } 
	  
      private void fadeUpButton_Click(object sender, RoutedEventArgs e) { 
         fadeUp.Begin(); 
      }
	  
      private void fadeDownButton_Click(object sender, RoutedEventArgs e) { 
         fadeDown.Begin(); 
      } 
   } 
}

編譯並執行上述程式碼後，您將看到以下輸出。

重複和反轉

動畫提供了一些屬性來自動重複和反轉動畫。

如果將重複行為屬性設定為時間跨度，則動畫將迴圈重複，直到經過指定的時間量，或者您可以只告訴它要重複多少次。
這支援小數點，因此您可以重複四次半。
您可以無限期地重複，也可以告訴動畫，一旦它到達末尾，它應該反向執行回到開始。

關鍵幀動畫

通常，從 A 到 B 的簡單動畫過於簡單。例如，您想動畫化一個球從地面反彈。這不是簡單的點到點運動。球下降，逐漸加速，然後在擊中底部時反向其方向。在回到行程頂部時再次減速。

讓我們來看一個簡單的 **關鍵幀動畫** 示例。

下面是 XAML 程式碼，其中包含一個橢圓和具有關鍵幀的雙精度動畫。

<UserControl x:Class = "LinearKeyFrames.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"  
   mc:Ignorable = "d" 
   Width = "400" Height = "300">
   
   <UserControl.Resources> 
	
      <Storyboard x:Name = "ballAnim" SpeedRatio = "0.2"> 
         <DoubleAnimation From = "0" Duration = "00:00:03" To = "96" 
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Left)" />
				
         <DoubleAnimationUsingKeyFrames  
            Storyboard.TargetName = "ellipse" 
            Storyboard.TargetProperty = "(Canvas.Top)"> 

            <LinearDoubleKeyFrame KeyTime = "00:00:00"   Value = "0"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16" /> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02"   Value = "48"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/> 
            <LinearDoubleKeyFrame KeyTime = "00:00:03"   Value = "0"/> 
				
         </DoubleAnimationUsingKeyFrames> 
			
      </Storyboard>
		
   </UserControl.Resources>
	
   <Grid x:Name = "LayoutRoot" Background = "White"> 
      <Canvas> 
         <Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50" /> 
      </Canvas> 
   </Grid> 
	
</UserControl>

以下是 **滑鼠左鍵** 按下事件的實現，當用戶按下網頁上的滑鼠左鍵時，該事件將開始動畫。

using System.Windows.Controls; 
using System.Windows.Input; 
 
namespace LinearKeyFrames { 

   public partial class MainPage : UserControl {
	
      public MainPage() { 
         InitializeComponent();  
         this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown); 
      } 
	  
      void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { 
         ballAnim.Begin(); 
      } 
   } 
}

編譯並執行上述程式碼後，您將看到以下輸出。

單擊網頁時，您會看到球開始移動。

列印頁面