這兩天把《WPF程式設計寶典》這本書的動畫相關章節看完了，於是想寫個小程式練練手，但是不知道寫什麼好。看書的時候雖然也把上面的案例照著敲了一遍，但是它們畢竟和實際應用有很大差別，想用到日常專案裡也不知道從何下手。

剛好看到了一位網友 youngytj  分享的模仿QQ載入和關閉動畫的文章，我就跟著學習模仿了一遍，下面來講講具體如何實現的。

首先分析下我想實現的效果：第一，我開啟程式後它從上到下滾動逐漸顯示出來。第二，我點選視窗的關閉按鈕後，窗體由下而上滾動逐漸消失。

為了實現這種效果我們要把窗體的WindowStyle設為None，因為用預設窗體風格的話，動畫是執行在一個帶有邊框的框架裡面的，遠不是我們想要的效果，如下圖：

從上面還可以看到窗體動畫執行的時候，未填充的部分顯示黑色，這是因為窗體的AllowsTransparency屬性為false的緣故。我們把AllowsTransparency設為true以後，窗體的工作區支援透明瞭，就不會有黑色出現了。

接下來我們要給窗體設定一個背景，這樣執行才能看到效果，我設的背景是一個漸變畫刷，上面是淺藍色，下面是白色，程式碼如下：

<Style TargetType="Window" x:Key="MyWindowStyle">

        <Setter Property="Background">

            <Setter.Value>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#428AC7" Offset="0"/>

                    <GradientStop Color="White" Offset="1"/>

                </LinearGradientBrush>

            </Setter.Value>

        </Setter>

</Style>
 

建議：為了規範點，我建立了一個資源字典MainResourceDictionary：本示例的所有樣式是放在這裡面的。

背景新增完以後我們需要給窗體新增一個透明掩碼和展開、合併的動畫，這也是本示例的關鍵部分。動畫改變的就是這個透明掩碼的偏移值和偏移的顏色。透明掩碼如下：

<Window.OpacityMask>

        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

            <GradientStop Offset="0" Color="Transparent"></GradientStop>

            <GradientStop Offset="0" Color="Yellow"></GradientStop>

        </LinearGradientBrush>

</Window.OpacityMask>
 

這個透明掩碼也是一個漸變畫刷組成的，它實現的是從上到下的垂直漸變。我自己測試之後發現，這個漸變畫刷最關鍵的部分是指定第一個顏色為透明色，至於後面一種顏色設定成什麼都無所謂，不知道為什麼會這樣。（因為是新手，我現在還只是“知其然”的階段，如果哪位大神知道原因還請不吝賜教。）

動畫的程式碼如下：

<Window.Resources>

        <Storyboard x:Key="zhankai">

            <DoubleAnimation From="0" To="1" Duration="0:0:0.5"

                                 Storyboard.TargetName="MyWindow"

                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].Offset"/>

            <DoubleAnimation From="0" To="1" BeginTime="0:0:0.1" Duration="0:0:0.4"

                                 Storyboard.TargetName="MyWindow"

                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Offset"/>

            <ColorAnimation BeginTime="0:0:0.5" Duration="0:0:0" From="Transparent" To="Yellow" Storyboard.TargetName="MyWindow"

                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].Color"/>

        </Storyboard>

        <Storyboard x:Key="hebing" Completed="Storyboard_Completed">

            <DoubleAnimation From="1" To="0" Duration="0:0:0.4"

                                 Storyboard.TargetName="MyWindow"

                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].Offset"/>

            <DoubleAnimation Duration="0:0:.3" BeginTime="0:0:0.1" From="1" To="0"

                                 Storyboard.TargetName="MyWindow"

                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Offset"/>

            <ColorAnimation Duration="0" From="Yellow" To="Transparent" Storyboard.TargetName="MyWindow"

                                 Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Color"/>

        </Storyboard>

    </Window.Resources> 

動畫新增完以後我們需要在事件觸發器裡呼叫它們，具體是哪兩個事件呢？

我一開始想的是在Window.Loaded呼叫展開動畫，在Button.Click事件裡呼叫關閉動畫，但是在展開的時候有一個問題。那就是Window.Loaded事件是載入完以後才執行的，這時候才呼叫動畫給人的感覺就是窗體先彈出來，然後再回頭由上而下逐漸滾動顯示出來，這就有點凌亂了。

所以還是按照youngytj的方法，在窗體的建構函式裡呼叫，這樣就實現了從無到有逐漸顯示的效果，程式碼如下：

 Storyboard storyBoard =(System.Windows.Media.Animation.Storyboard)MyWindow.Resources["zhankai"];
 if (storyBoard != null)
 {
     storyBoard.Begin();
 }

關閉動畫我們還是在Xaml裡呼叫，程式碼如下：

<Window.Triggers>

        <EventTrigger RoutedEvent="Button.Click">

            <BeginStoryboard Storyboard="{StaticResource hebing}"></BeginStoryboard>

        </EventTrigger>

</Window.Triggers>

現在基本上就實現了我們要的效果了，如下圖：

以上就是全部的實現了，整體來說也沒有什麼難點。但我覺得對於我們新手來說最大的問題不是如何實現出這樣的動畫，而是大腦當中如何設計出這樣的動畫。比如我是看了youngytj 的文章才知道這個動畫的原理，如果憑空讓我設計其他動畫的話我還是不知道如何下手，這是最頭疼的，還是繼續努力學習吧，爭取早點脫離這種“只知其然而不知其所以然”的階段。

原始碼已經上傳，感興趣的朋友可以去下載：