Expression Blend實例中文教程(7) - 動畫基礎快速入門Animation
通過前面文章學習，已經對Blend的開發界面，以及控件有了初步的認識。本文將講述Blend的一個核心功能，動畫設計。大家也許註意到，從開篇到現在，所有的文章都是屬於快速入門，是因為這些文章，都是我曾經學習的經驗和工作中使用到的經驗總結出來的。在我個人認為，掌握了這些核心功能也就等於掌握了Blend的開發方法。在以後開發項目中使用Blend開發工具，這些知識應該足夠用了。當然，特殊項目也需要特殊對待，如果您在項目開發中，有新的Blend開發經驗，希望您能夠毫不吝嗇的分享，在這裏，我表示深深的謝意。
言歸正傳，關於Silverlight的動畫設計。在講述Blend設計Silverlight動畫之前，我想介紹一些動畫設計基礎知識。
學習Silverlight動畫之前，首先需要明確一下三點核心概念：
1. Silverlight動畫是基於時間線的； 開發人員可以設置初始狀態，結束狀態和動畫時間段，Silverlight會自動計算生成動畫效果。
2. Silverlight動畫是對象屬性的修改過程； 例如，一個按鈕動畫，用戶點擊後，按鈕會自動增大，其動畫原理，就是對按鈕的寬度和高度在一定時間段中進行改變置，即生成動畫效果。
3. Silverlight動畫中，不同的數據類型，需要使用不同的動畫類； 這和編程中的類型匹配很相似，假如要在動畫中實現修改控件寬度或者高度，則需要使用DoubleAnimation類。動畫實現控件背景色，則需要使用ColorAnimation類
在以上三點核心概念下，我們將列舉一些基礎概念，對其進行解釋，
首先要明白Silverlight動畫類型，在Silverlight的動畫設計中，動畫類型被分為兩類，分別是：From/To/By 動畫和關鍵幀動畫。 還有一些專業開發人士稱這兩個類型為線性插值動畫（Linear Interpolation）和關鍵幀動畫（Key-frame Animation）。
1. From/To/By 動畫，也稱為線性插值動畫（Linear Interpolation），是Silverlight類型中最簡單的一種動畫。開發人員只需要設置動畫開始值（From），動畫終止值（To）和動畫相對改變值(By),即可實現Silverlight動畫效果。從字面意思可以理解From，To和By，From是設置動畫在時間線中的開始位置，To是設置動畫在時間線中的結束位置，而By和To類似，但是比To更靈活一些，設置By，不用關心具體屬性數值改變，也不用關心動畫具體經歷的時長。該動畫類型，只是三種動畫數據類型類，分別是：DoubleAnimation，ColorAnimation和PointAnimation。這三種數據類型類，分別用於Double數據類型，Color數據類型和Point數據類型。其中DoubleAnimation類是最為常用的一種。例如，修改對象的高度和寬度，就是不錯的例子。我們經常會在項目代碼中看到：
這是一個指定對象的屬性值在5秒內從20到100改變的動畫，也是最簡單的動畫語句。這裏我們忽略了目標對象屬性，後文將有詳細代碼，這裏僅做演示。
2. 關鍵幀動畫（Key-frame Animation），相比線性插值動畫（Linear Interpolation）要更加靈活和強大。在關鍵幀動畫中，可以不用指定具體的開始點和結束點，僅需要設置關鍵幀和相關動畫控制方法，Silverlight將自動生成動畫效果。這個動畫類型，有兩個重要概念，關鍵幀和動畫控制方法。
關鍵幀可以理解為對象屬性值，每設置一個關鍵幀，也就是修改一次對象屬性值。
動畫控制方法，也可以理解為動畫過渡效果，是指從某一個關鍵幀開始過渡到下一個關鍵幀的動畫效果。默認微軟提供三種動畫控制方法：線性（Linear），離散（Discrete）和樣條（Spline）。為了能夠讓讀者快速入門動畫概念，這裏我暫時不細述以上三種動畫控制方法，將在後文使用單獨篇幅進行描述。
關鍵幀動畫，也有相關動畫數據類型類，分別是DoubleAnimationUsingKeyFrames，ColorAnimationUsingKeyFrames，PointAnimationUsingKeyFrames和ObjectAnimationUsingKeyFrames。其中前三個數據類型類用法和DoubleAnimation，ColorAnimation和PointAnimation相同，而ObjectAnimationUsingKeyFrames是關鍵幀動畫特有的數據類型類，可以替代任意數據類型，例如，假如想實現一個控件的可見性動畫效果，我們需要控制該控件的Visibility屬性，而該屬性不屬於Double，Color和Point任一類型，這裏便可以使用ObjectAnimationUsingKeyFrames。在後文，會有實例進行說明。
在了解了Silverlight動畫類型後，另外一個重要的基礎概念是StoryBoard。
StoryBoard是管理時間線的類，開發人員可以使用該類管理和控制多個動畫進程。例如，控制動畫的播放，暫停，停止或者改變動畫位置等功能，不僅如此，通過StoryBoard還可以為動畫指定控件和控件屬性。在Blend中，微軟內置了一個StoryBoard時間線編輯器，設計人員和開發人員可以脫離代碼使用視圖方式方便的設計動畫效果。本系列著重介紹Blend應用，所以，後文將詳細介紹StoryBoard在Blend中的設計方法。
相信不少新手看了以上的基礎概念，還是比較困惑，下面看看微軟提供的Silverlight動畫簡單類圖：
從上圖可以看出，線性插值動畫，關鍵幀動畫和StoryBoard都是繼承自System.Windows.Media.Animation.Timeline. 也就是說，以上三個類都繼承了Timeline的相關屬性，下面我們分別看一下Timeline基類屬性。
1. AutoReverse屬性，類型為Bool， 該屬性如果為True，指定動畫將正序運行後，反序運行一次。例如，有一按鈕動畫效果，改變寬度從20到100後，動畫將從100再回到20.
1 <Grid x:Name="LayoutRoot" Background="White">2 <Grid.Resources>
3 <Storyboard x:Name="Grow" AutoReverse="True" >
4 <DoubleAnimation Storyboard.TargetName="btnGrow"
5 Storyboard.TargetProperty="Width"
6 From="20" To="100" Duration="0:0:5">
7 </DoubleAnimation>
8 </Storyboard>
9 </Grid.Resources>
10 <Button x:Name="btnGrow" Width="20" Height="150" Content="按鈕動畫"/>
11 </Grid>
2. BeginTime屬性，類型為Nullable<TimeSpan>,如果該屬性為空（Null），說明該動畫沒有BeginTime，從字面意思理解，該屬性是設置動畫起始時間點；
3. Duration屬性，類型為Sytem.Windows.Duration，該屬性表示動畫的運行周期時長; <DoubleAnimation From="20" To="100" Duration="0:0:5"></DoubleAnimation> 這裏可以理解為，在5秒內，改變對象屬性從20到100.
4. FillBehavior屬性，類型為Animation.FillBehavior,該屬性獲取或設置一個值，該值指定動畫在運行周期結束後的行為方式，默認值為HoldEnd。簡單的說，如果希望動畫在運行周期結束時候保留其值，則將FillBehavior屬性設置為HoldEnd。而如果動畫的運行周期已結束且FillBehavior的設置為HoldEnd，則說明動畫進入填充周期。如果不希望動畫在其活動周期結束時保留其值，則將其FillBehavior屬性設置為Stop（引自MSDN）。
1 <Canvas>2 <Rectangle
3 x:Name="MyAnimatedRectangle"
4 Width="100"
5 Height="100"
6 Fill="Blue">
7 <Rectangle.Triggers>
8
9 <!-- Animates the rectangle‘s opacity. -->
10 <EventTrigger RoutedEvent="Rectangle.Loaded">
11 <BeginStoryboard>
12 <Storyboard>
13 <DoubleAnimation
14 Storyboard.TargetName="MyAnimatedRectangle"
15 Storyboard.TargetProperty="Opacity"
16 From="1.0" To="0" Duration="0:0:5" FillBehavior="Stop" />
17 </Storyboard>
18 </BeginStoryboard>
19 </EventTrigger>
20 </Rectangle.Triggers>
21 </Rectangle>
22 </Canvas>
5. RepeatBehavior屬性，類型為Animation.RepeatBehavior，動畫重復行為，可以簡單的理解為動畫播放次數，該屬性有另外兩個屬性Count和Duration。其中Count屬性可以指定具體的動畫時間線重復值。例如，有一個2秒的動畫，如果設置RepeatBehavior.Count=1.5x(x是倍數的含義，又稱叠代)，該動畫將完整的運行一次，然後在運行一半動畫。而Duration屬性是指定該動畫運行時長，無論該動畫總長度多少。例如，有一個2秒的動畫，如果設置RepeatBehavior.Duration="0:0:6",則該動畫將重復3次。
6. SpeedRatio屬性，類型為Double，該屬性用來控制動畫速率，默認為1.0.如果設置速率大於1.0，則動畫速度會變快，反之，動畫速度會變慢。
Timeline作為Silverlight動畫基類，為線性插值動畫，關鍵幀動畫和StoryBoard提供了基礎動畫要使用的屬性，掌握了基類屬性使用，在以後動畫設計中可以達到事半功倍的效果。到這裏為止，Silverlight動畫設計需要的基礎知識已經介紹完畢，下節將結合這些概念，演示Blend如何設計動畫效果的。
Expression Blend實例中文教程(7) - 動畫基礎快速入門Animation