WPF動畫基礎及實例

1.介紹

 

在之前做winform中, 也做過一些動畫效果, 但是整個動畫都需要我們自己去編寫, 利用計時器或線程去直接操作UI元素的屬性, 然而在WPF中, 則是通過一種全新的基於屬性的動畫系統, 改變了傳統的開發模式。

 

2.傳統的方式

 

(1).創建一個周期性觸發的定時器(例如, 間隔50毫秒的刷新動作)

(2).當每次出發計時器時, 關聯的事件處理程序會執行一些與界面UI元素相關的細節。(例如,改變窗體的大小)

(3).重新繪制整個界面元素。

缺點：

1.修改一個效果的時候,要比想象中復雜, 你要追加一個效果,必須編寫所有的代碼, 甚至變得更加復雜。

2.動畫的幀率固定, 然后渲染基於基礎的GDI+繪圖, 並不支持顯卡級別的渲染模式。

3.復雜的動畫需要更復雜的代碼實現, 不僅開發難, 維護更難。

 

3.基於屬性的WPF動畫

在WPF中, 動畫使用了一個完全不同的模型。本質上, WPF動畫只不過是在一段時間間隔內修改依賴性

屬性值的一種方式。

優點：

1.一套完整的動畫封裝, System.Windows.Media.Aniation 空間下已經提供了多數動畫類。

2.完成不同的特效, 只需要微調部分屬性即可。

3.支持硬件加速。

 

4.基本動畫

正如上面所說, 每一個動畫依賴於一個依賴項屬性。原理則是通過修改其屬性值到達效果。

WPF所有的動畫類中, 都繼承於 Animatable ， 該抽象類提供動畫支持 , 具體看如下：

微軟官方文檔連接

類圖如下所示：

 

 

5.示例(一個基本的收縮動畫)

gif效果圖, 演示可以兩個動畫, 一個在窗體加載時向上下張開, 一個關閉時上下向中間收縮動畫。

 

6.代碼創建

1.創建 Storyboard 對象, 用於裝配子動畫對象和屬性信息。
2.由於控制Margin, 用到的屬於 Thickness 結構的數據類型, 所以需要創建 ThicknessAnimation 對象。
3.設置 ThicknessAnimation 其子屬性的參數: 動畫時間、 初始值、結束值。
4.綁定其元素對象GridMain
5.綁定依賴屬性 Margin
6.添加到 Storyboard 容器中
7.運行動畫

            System.Windows.Media.Animation.Storyboard sb = new System.Windows.Media.Animation.Storyboard();
            System.Windows.Media.Animation.ThicknessAnimation dmargin = new System.Windows.Media.Animation.ThicknessAnimation();
            dmargin.Duration = new TimeSpan(0, 0, 0, 0, 300);
            dmargin.From = new Thickness(0, 300, 0, 300);
            dmargin.To = new Thickness(0, 0, 0, 0);
            System.Windows.Media.Animation.Storyboard.SetTarget(dmargin, GridMain);
            System.Windows.Media.Animation.Storyboard.SetTargetProperty(dmargin, new PropertyPath("Margin", new object[] { }));
            sb.Children.Add(dmargin);
            sb.Begin();

   注: GridMain實際為xmal中 Grid窗體的 Name="GridMain"

 

ThicknessAnimation 屬性介紹：

.Duration

Duration屬性很簡單, 它就是在動畫開始時刻和結束時刻之間的時間間隔(時間間隔單位以毫秒、分鍾、小時或者其他喜歡使用的任何單位)。Duration和TimeSpan非常類似, 並且Duration結構定義了一個隱式轉換,能夠根據需要將System.TimeSpan轉為System.Windows.Duration。

這正是為什么下面的代碼完全可以和上面的一樣使用：

  dmargin.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 300));

 

.From

From屬性用於設置初始值, 例如上例中,Margin設置為上下邊距為300.

 

.To

To屬性用於設置動畫結束的值。如上中, 結束動畫完成, Grid的邊距則為0.

 

 

 

7.XAML創建動畫

1.相對於代碼創建動畫, Xaml方式創建動畫要簡單的多。添加 Storyboard鍵 , 然后添加 hicknessAnimation鍵和綁定參數

<Storyboard x:Key="Loading">
            <ThicknessAnimation Duration="0:0:0.3" To="0" From="0,300,0,300" 
                                Storyboard.TargetName="GridMain" Storyboard.TargetProperty="Margin" />
</Storyboard>

2.利用時間觸發器, 關聯啟動事件, 進行動畫的加載。

 <Window.Triggers>
        <EventTrigger  RoutedEvent="Loaded" >
            <BeginStoryboard Storyboard="{StaticResource Loading}"/>
        </EventTrigger>
 </Window.Triggers>

 

 

剩余部分：

關閉部分動畫的收縮代碼實現：

 

            System.Windows.Media.Animation.ThicknessAnimation dmargin = new System.Windows.Media.Animation.ThicknessAnimation();
            dmargin.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 300));
            dmargin.From = GridMain.Margin;
            dmargin.To = new Thickness(0, 300, 0, 300);
            System.Windows.Media.Animation.Storyboard.SetTarget(dmargin, GridMain);
            System.Windows.Media.Animation.Storyboard.SetTargetProperty(dmargin, new PropertyPath("Margin", new object[] { }));
            sb.Children.Add(dmargin);

 

  前台XAML代碼的實現方式,  關閉的事件中, 綁定的TextBlock.MouseLeftButtonDown 事件, 完整代碼(包含上面部分)：

<Window.Resources>
        <Storyboard x:Key="Loading">
            <ThicknessAnimation Duration="0:0:0.3" To="0" From="0,300,0,300" 
                                Storyboard.TargetName="GridMain" Storyboard.TargetProperty="Margin" />
        </Storyboard>
        
        <Storyboard x:Key="Closing">
            <ThicknessAnimation FillBehavior="Stop" Duration="0:0:0.6" To="0,300,0,300" From="0" Storyboard.TargetName="GridMain" 
                                Storyboard.TargetProperty="Margin" Completed="Sb_Completed"/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger  RoutedEvent="Loaded" >
            <BeginStoryboard Storyboard="{StaticResource Loading}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="TextBlock.MouseLeftButtonDown">
            <BeginStoryboard Storyboard="{StaticResource Closing}"  />
        </EventTrigger>
 </Window.Triggers>