Expression Blend例項中文教程(7) - 動畫基礎快速入門Animation

weixin_34391854發表於2010-03-28

 

通過前面文章學習,已經對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類是最為常用的一種。例如,修改物件的高度和寬度,就是不錯的例子。我們經常會在專案程式碼中看到:

1 <DoubleAnimation From="20" To="100" Duration="0:0:5"></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如何設計動畫效果的。

相關文章