從本節開始，我們將圍繞一個有趣的話題展開討論——動畫。

看到動畫一詞，你一定想到Flash，畢竟WP應用的一個很重要的框架是Silverlight，在WP中也發揮了Silverlight的許多優 點，可能不少人說，Silverlight就是和Flash差不多吧，當你深入了解了Silverlight后，你會發現，其實不 然，Silverlight更偏重于數據處和企業級應用。

好了，F話不多說，開始吹我們今天的牛皮吧，在吹牛皮之前，我們更應該知道牛皮是從哪里來的。故在說動畫之前，先想一下，什么是 Storyboard？這個東東你覺得怎么翻譯好呢，叫演示圖板吧，MSDN是這樣翻譯的，我說一個直觀一點的概念吧，不知道各位玩過Flash 沒，Flash里面有一個“幀面板”，是的，其實這個演示圖板和幀面板有著很嚴重的相似之處。

這樣吧，我們還是接受一下.NET非常強大的事實吧，所以，打開Express Blend來看看一個圖形化的演示圖板，這樣一來，大家一定會更好理解。

這樣一看，一定很形象了，Storyboard從TimeLine派生而來，時間線在動畫里面是比較關鍵的，我們都知道，所謂動畫會“動”，正是因為它存在一個時間差，“幀”的概念相信大家能理解，只可意會不可言傳啊，看你跟她能有多少默契了。

一個Storyboard可以包含N多個子動畫時間線，今天我們先來了解一個比較簡單的，DoubleAnimation是在一定時間段內對兩個double值進行動畫處理，如可視化元素的寬度，高度，透明度等。

嚴重警告：不是所有的屬性都能夠進行動畫處理的，要進行動畫處理的屬性必須是依賴項屬性。

好了，理論說多了，很容易讓人走火入魔，還是動手干一下好吧。

下面我們來做一個演練。

第一步，新建一個WP應用程序項目，此處省略35個字。

第二步，在頁面中添加一個矩形，兩個按鈕，矩形是“小白鼠”，是用來給我們做動畫實驗的，至于那兩個按鈕，一個是播放動畫，一個是停止動畫。界面怎么布置，隨你喜歡。

<!--ContentPanel - 在此處放置其他內容-->   
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">   
    <Grid.RowDefinitions>   
        <RowDefinition Height="*"/>   
        <RowDefinition Height="auto"/>   
    </Grid.RowDefinitions>   
    <Rectangle x:Name="rec"   
               Grid.Row="0"   
               Margin="100"   
               Fill="Yellow"/>   
    <StackPanel Grid.Row="1" Orientation="Horizontal">   
        <Button Content="播放" Click="play_Click"/>   
        <Button Content="停止" Click="stop_Click"/>   
    </StackPanel>   
</Grid>  

第三步，在上面那個叫ContentPanel的Grid中加一個Storyboard，作為資源，并在其中聲明一個DoubleAnimation，把矩形的透明度在5秒鐘內變為0，即使矩形產生淡出的動畫效果。

Storyboard.TargetName附加屬性指定要進行動畫處理的對象的名字，你想干掉誰，就寫上它的名字 吧；Storyboard.TargetProperty是要動畫處理的屬性，由于我們要對透明度進行動畫過度，故這里用Opacity屬性。 Duration就是動畫的時長，這里取5秒鐘。

<Grid.Resources>   
    <Storyboard x:Name="std">   
        <DoubleAnimation   
            Duration="0:0:5"   
            Storyboard.TargetName="rec"   
            Storyboard.TargetProperty="Opacity"   
            To="0"/>   
    </Storyboard>   
</Grid.Resources> 

第四步，分別處理兩個按鈕的單擊事件，調用Storyboard的Begin和Stop方法來控件動畫的播放和停止。

private void play_Click(object sender, RoutedEventArgs e)   
{   
    this.std.Begin();   
}   
private void stop_Click(object sender, RoutedEventArgs e)   
{   
    this.std.Stop();   
}   

好，現在運行一下看看。

不夠爽嗎？再做一個吧，把一個橢圓的寬度在3秒鐘內從20變為420，如何。

看XAML代碼。

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">   
        <Grid.RowDefinitions>   
            <RowDefinition />   
            <RowDefinition Height="Auto" />   
        </Grid.RowDefinitions>   
        <Ellipse Grid.Row="0" Height="325" Name="ell"  Width="15" Fill="DarkOrange" />   
        <StackPanel Grid.Row="1" Orientation="Horizontal">   
            <Button Content="播放" Click="onPlay"/>   
            <Button Content="停止" Click="onStop"/>   
        </StackPanel>   
        <Grid.Resources>   
            <Storyboard x:Name="std">   
                <DoubleAnimation Duration="0:0:3"   
                                 Storyboard.TargetName="ell"   
Storyboard.TargetProperty="Width"   
                                 From="20"   
                                 To="420"/>   
            </Storyboard>   
        </Grid.Resources>   
    </Grid>   

后臺代碼：

private void onPlay(object sender, RoutedEventArgs e)   
{   
    this.std.Begin();   
}   
private void onStop(object sender, RoutedEventArgs e)   
{   
    this.std.Stop();   
}   

看看運行效果。