Windows Phone開發（36）：動畫之DoubleAnimation

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

看到動畫一詞，你一定想到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();        }

 

 看看運行效果。