從本節(jié)開(kāi)始，我們將圍繞一個(gè)有趣的話題展開(kāi)討論——動(dòng)畫(huà)。

看到動(dòng)畫(huà)一詞，你一定想到Flash，畢竟WP應(yīng)用的一個(gè)很重要的框架是Silverlight，在WP中也發(fā)揮了Silverlight的許多優(yōu) 點(diǎn)，可能不少人說(shuō)，Silverlight就是和Flash差不多吧，當(dāng)你深入了解了Silverlight后，你會(huì)發(fā)現(xiàn)，其實(shí)不 然，Silverlight更偏重于數(shù)據(jù)處和企業(yè)級(jí)應(yīng)用。

好了，F(xiàn)話不多說(shuō)，開(kāi)始吹我們今天的牛皮吧，在吹牛皮之前，我們更應(yīng)該知道牛皮是從哪里來(lái)的。故在說(shuō)動(dòng)畫(huà)之前，先想一下，什么是 Storyboard？這個(gè)東東你覺(jué)得怎么翻譯好呢，叫演示圖板吧，MSDN是這樣翻譯的，我說(shuō)一個(gè)直觀一點(diǎn)的概念吧，不知道各位玩過(guò)Flash 沒(méi)，F(xiàn)lash里面有一個(gè)“幀面板”，是的，其實(shí)這個(gè)演示圖板和幀面板有著很嚴(yán)重的相似之處。

這樣吧，我們還是接受一下.NET非常強(qiáng)大的事實(shí)吧，所以，打開(kāi)Express Blend來(lái)看看一個(gè)圖形化的演示圖板，這樣一來(lái)，大家一定會(huì)更好理解。

這樣一看，一定很形象了，Storyboard從TimeLine派生而來(lái)，時(shí)間線在動(dòng)畫(huà)里面是比較關(guān)鍵的，我們都知道，所謂動(dòng)畫(huà)會(huì)“動(dòng)”，正是因?yàn)樗嬖谝粋€(gè)時(shí)間差，“幀”的概念相信大家能理解，只可意會(huì)不可言傳啊，看你跟她能有多少默契了。

一個(gè)Storyboard可以包含N多個(gè)子動(dòng)畫(huà)時(shí)間線，今天我們先來(lái)了解一個(gè)比較簡(jiǎn)單的，DoubleAnimation是在一定時(shí)間段內(nèi)對(duì)兩個(gè)double值進(jìn)行動(dòng)畫(huà)處理，如可視化元素的寬度，高度，透明度等。

嚴(yán)重警告：不是所有的屬性都能夠進(jìn)行動(dòng)畫(huà)處理的，要進(jìn)行動(dòng)畫(huà)處理的屬性必須是依賴項(xiàng)屬性。

好了，理論說(shuō)多了，很容易讓人走火入魔，還是動(dòng)手干一下好吧。

下面我們來(lái)做一個(gè)演練。

第一步，新建一個(gè)WP應(yīng)用程序項(xiàng)目，此處省略35個(gè)字。

第二步，在頁(yè)面中添加一個(gè)矩形，兩個(gè)按鈕，矩形是“小白鼠”，是用來(lái)給我們做動(dòng)畫(huà)實(shí)驗(yàn)的，至于那兩個(gè)按鈕，一個(gè)是播放動(dòng)畫(huà)，一個(gè)是停止動(dòng)畫(huà)。界面怎么布置，隨你喜歡。

<!--ContentPanel - 在此處放置其他內(nèi)容-->   
<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>  

第三步，在上面那個(gè)叫ContentPanel的Grid中加一個(gè)Storyboard，作為資源，并在其中聲明一個(gè)DoubleAnimation，把矩形的透明度在5秒鐘內(nèi)變?yōu)?，即使矩形產(chǎn)生淡出的動(dòng)畫(huà)效果。

Storyboard.TargetName附加屬性指定要進(jìn)行動(dòng)畫(huà)處理的對(duì)象的名字，你想干掉誰(shuí)，就寫上它的名字 吧；Storyboard.TargetProperty是要?jiǎng)赢?huà)處理的屬性，由于我們要對(duì)透明度進(jìn)行動(dòng)畫(huà)過(guò)度，故這里用Opacity屬性。 Duration就是動(dòng)畫(huà)的時(shí)長(zhǎng)，這里取5秒鐘。

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

第四步，分別處理兩個(gè)按鈕的單擊事件，調(diào)用Storyboard的Begin和Stop方法來(lái)控件動(dòng)畫(huà)的播放和停止。

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

好，現(xiàn)在運(yùn)行一下看看。

不夠爽嗎？再做一個(gè)吧，把一個(gè)橢圓的寬度在3秒鐘內(nèi)從20變?yōu)?20，如何。

看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>   

后臺(tái)代碼：

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

看看運(yùn)行效果。