腳本之家服務器常用軟件

快捷導航

WPF實現(xiàn)動畫效果

更新時間：2022年01月26日 08:42:26 作者：痕跡g

這篇文章介紹了WPF實現(xiàn)動畫效果的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

學習平臺

微軟開發(fā)者博客:
https://devblogs.microsoft.com/?WT.mc_id=DT-MVP-5003986
微軟文檔與學習:
https://docs.microsoft.com/zh-cn/?WT.mc_id=DT-MVP-5003986
微軟開發(fā)者平臺:
https://developer.microsoft.com/en-us/?WT.mc_id=DT-MVP-5003986

1.介紹

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

2.傳統(tǒng)的方式

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

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

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

缺點：

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

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

3.復雜的動畫需要更復雜的代碼實現(xiàn), 不僅開發(fā)難, 維護更難。

3.基于屬性的WPF動畫

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

屬性值的一種方式。

優(yōu)點：

1.一套完整的動畫封裝, System.Windows.Media.Animation空間下已經(jīng)提供了多數(shù)動畫類。

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

3.支持硬件加速。

4.基本動畫

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

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

微軟官方文檔連接

類圖如下所示：

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

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

6.代碼創(chuàng)建

1.創(chuàng)建 Storyboard 對象, 用于裝配子動畫對象和屬性信息。
2.由于控制Margin, 用到的屬于 Thickness 結構的數(shù)據(jù)類型, 所以需要創(chuàng)建 ThicknessAnimation 對象。
3.設置 ThicknessAnimation 其子屬性的參數(shù): 動畫時間、初始值、結束值。
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結構定義了一個隱式轉換,能夠根據(jù)需要將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創(chuàng)建動畫

1.相對于代碼創(chuàng)建動畫, Xaml方式創(chuàng)建動畫要簡單的多。添加 Storyboard鍵 , 然后添加 ThicknessAnimation鍵和綁定參數(shù)

<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.利用時間觸發(fā)器, 關聯(lián)啟動事件, 進行動畫的加載。

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

剩余部分：

關閉部分動畫的收縮代碼實現(xiàn)：

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代碼的實現(xiàn)方式, 關閉的事件中, 綁定的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>

到此這篇關于WPF實現(xiàn)動畫效果的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: