20.背景CS代碼中建立四種常用的動畫效果

        在實際項目中，我們通常會在XAML代碼中建立控件的動畫效果，但在某一些特殊情況下，需要背景進行動畫效果的自定義修改。那麼我們就需要用到本節中講述 的相關動畫效果自建立知識。在Silverlight中常用的動畫建立方式有4種分别為 DoubleAnimation,ColorAnimation,PointAnimation,DoubleAnimationUsingKeyFrames。

　　　　•DoubleAnimation是控制控件的某一些Double值的屬性的變化來形成動畫的，比如讓某個空間的Opactiy變大變小，就是透明度變大變小。

•ColorAnimation是控制控件的顔色的漸變，從綠色變藍色。

•PointAnimation是控制控件的Point點位置的變化而操作控件的動畫效果的。如本例中的中心點位置

•DoubleAnimationUsingKeyFrames 這個是添加幀片段，在這些片段中控制了某個控件的某一些屬性在時間軸上的變化

        DoubleAnimation,ColorAnimation,PointAnimation這三種動畫基本上都有以下相似的屬性：

　　　　•TargetName（要進行動畫動畫處理的對象的名稱）

　　　　•TargetProperty（要進行動畫動畫處理的對象的屬性）

　　　　•BeginTime （觸發動畫的時間點）

　　　　•From（ 動畫的起始值） 

　　　　•To（動畫的結束值） 

　　　　•By（動畫從起始值動畫起始計算所需變化的總量）

　　　　•Duration（時間線的持續時間）

        DoubleAnimationUsingKeyFrames 動畫則是其内部可以添加多種動畫類型的關鍵幀分别是ColorAnimationUsingKeyFrames 、 DoubleAnimationUsingKeyFrames 、PointAnimationUsingKeyFrames 等等，在這裡不過多詳述。

        現在我們首先看一個XAML檔案，這裡有4個按鈕和4個可控制的控件通過點選不同的按鈕我們調用不同的動畫：

<Canvas x:Name="LayoutRoot" Background="White"> 

<Rectangle RadiusX="5" RadiusY="5" Fill="#FFE8BE59" Height="92" Name="rectangle1" Stroke="Black" StrokeThickness="1" Width="148" Canvas.Left="47" Canvas.Top="76" /> 

<Button Canvas.Left="47" Canvas.Top="195" Content="開始DoubleAnimation動畫" Height="23" Name="button1" Width="148" Click="button1_Click" /> 

<Rectangle Canvas.Left="231" Canvas.Top="76" Fill="Green" Height="92" Name="rectangle2" RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1" Width="148" /> 

<Rectangle Canvas.Left="414" Canvas.Top="76" Fill="DarkGoldenrod" Height="92" Name="rect" Opacity="0.1" RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1" Width="148" /> 

<Button Canvas.Left="414" Canvas.Top="195" Content="開始ColorAnimation動畫" Height="23" Name="button2" Width="148" Click="button2_Click" /> 

<Button Canvas.Left="231" Canvas.Top="195" Content="開始ColorAnimation動畫" Height="23" Name="button3" Width="148" Click="button3_Click" /> 

<Button Canvas.Left="593" Canvas.Top="195" Content="開始PointAnimation動畫" Height="23" Name="button4" Width="148" Click="button4_Click" /> 

<Ellipse Canvas.Left="579" Canvas.Top="76" Height="92" Name="ellipse1" Fill="Blue" Stroke="Black" StrokeThickness="1" Width="183" > 

<Ellipse.Clip> 

<EllipseGeometry Center="100,100" x:Name="elgeome" RadiusX="90" RadiusY="60" /> 

</Ellipse.Clip> 

</Ellipse> 

</Canvas> 

        現在我們看MainPage.xaml.cs檔案。在本代碼中進行了相關的動畫操作。我們再建立4個全局的故事闆：

//裝載DoubleAnimation動畫的故事闆 

   Storyboard sboard = new Storyboard(); 

   //裝載ColorAnimation動畫的故事闆 

   Storyboard colorboard = new Storyboard(); 

   //裝載DoubleAnimationUsingKeyFrames動畫的故事闆 

   Storyboard keyFrameboard = new Storyboard(); 

   //裝載PointAnimation動畫的故事闆 

   Storyboard pointboard = new Storyboard(); 

        DoubleAnimation類型動畫的背景代碼建立以及操作：

#region 背景代碼添加DoubleAnimation動畫 

DoubleAnimation danima = new DoubleAnimation(); 

//設定rectangle1矩形控件的透明度的Double類型數字變化 

danima.SetValue(Storyboard.TargetNameProperty, "rectangle1"); 

danima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("UIElement.Opacity")); 

//透明度從0.1到1 

danima.From = 0.1; 

danima.To = 1; 

danima.Duration = new Duration(new TimeSpan(0, 0, 5)); 

sboard.Children.Add(danima); 

this.LayoutRoot.Resources.Add("Storyboard", sboard); 

#endregion 

        ColorAnimation類型動畫的背景代碼建立以及操作：

#region 背景代碼添加ColorAnimation動畫 

ColorAnimation coloranima = new ColorAnimation(); 

//設定rectangle2矩形控件的顔色的改變動畫 

coloranima.SetValue(Storyboard.TargetNameProperty, "rectangle2"); 

coloranima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)")); 

//設定顔色動畫從綠色變到藍色 

coloranima.From = Colors.Green; 

coloranima.To = Colors.Blue; 

colorboard.Children.Add(coloranima); 

LayoutRoot.Resources.Add("colorboard", colorboard); 

        PointAnimation類型動畫的背景代碼建立以及操作：

#region 背景代碼添加PointAnimation動畫 

PointAnimation pointanima = new PointAnimation(); 

//EllipseGeometry的中心點的變化 

pointanima.From = new Point(100, 100); 

pointanima.To = new Point(200, 100); 

//經過2秒的時間 

pointanima.Duration = new TimeSpan(0, 0, 2); 

//設定EllipseGeometry控件的中心點EllipseGeometry.CenterProperty位置的變化 

Storyboard.SetTarget(pointanima, elgeome); 

Storyboard.SetTargetProperty(pointanima, new PropertyPath(EllipseGeometry.CenterProperty)); 

pointboard.Children.Add(pointanima); 

LayoutRoot.Resources.Add("pointboard", pointboard); 

        DoubleAnimationUsingKeyFrames類型動畫的背景代碼建立以及操作：

#region 背景代碼添加DoubleAnimationUsingKeyFrames動畫 

DoubleAnimationUsingKeyFrames dakeyframe = new DoubleAnimationUsingKeyFrames(); 

//設定rect矩形控件的Opacity透明度，并且開始動畫事件為0秒的時候。 

Storyboard.SetTarget(dakeyframe,rect); 

Storyboard.SetTargetProperty(dakeyframe, new PropertyPath("UIElement.Opacity")); 

dakeyframe.BeginTime = new TimeSpan(0, 0, 0); 

//添加一個在第二秒的時候Opacity透明度值為1的關鍵幀 

SplineDoubleKeyFrame SKeyFrame = new SplineDoubleKeyFrame(); 

SKeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)); 

SKeyFrame.Value = 1; 

dakeyframe.KeyFrames.Add(SKeyFrame); 

//添加一個在第四秒的時候Opacity透明度值為0.1的關鍵幀 

SplineDoubleKeyFrame SKeyFrame1 = new SplineDoubleKeyFrame(); 

SKeyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)); 

SKeyFrame1.Value = 0.1; 

dakeyframe.KeyFrames.Add(SKeyFrame1); 

keyFrameboard.Children.Add(dakeyframe); 

        以上就是4中動畫的背景建立方式，相關的注釋也在代碼中，在這裡就不一一解釋。最後點選相應的按鈕，運作相應的故事闆Begin()方法開始動畫。

<a target="_blank" href="http://blog.51cto.com/attachment/201203/233322440.jpg"></a>

本文轉自程興亮 51CTO部落格，原文連結:http://blog.51cto.com/chengxingliang/821964