學(xué)習(xí)平臺(tái)

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

1.介紹

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

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

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

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

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

缺點(diǎn)：

1.修改一個(gè)效果的時(shí)候,要比想象中復(fù)雜, 你要追加一個(gè)效果,必須編寫(xiě)所有的代碼, 甚至變得更加復(fù)雜。

2.動(dòng)畫(huà)的幀率固定, 然后渲染基于基礎(chǔ)的GDI+繪圖, 并不支持顯卡級(jí)別的渲染模式。

3.復(fù)雜的動(dòng)畫(huà)需要更復(fù)雜的代碼實(shí)現(xiàn), 不僅開(kāi)發(fā)難, 維護(hù)更難。

3.基于屬性的WPF動(dòng)畫(huà)

在WPF中, 動(dòng)畫(huà)使用了一個(gè)完全不同的模型。本質(zhì)上, WPF動(dòng)畫(huà)只不過(guò)是在一段時(shí)間間隔內(nèi)修改依賴性

屬性值的一種方式。

優(yōu)點(diǎn)：

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

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

3.支持硬件加速。

4.基本動(dòng)畫(huà)

正如上面所說(shuō), 每一個(gè)動(dòng)畫(huà)依賴于一個(gè)依賴項(xiàng)屬性。原理則是通過(guò)修改其屬性值到達(dá)效果。

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

微軟官方文檔連接

類圖如下所示：

5.示例(一個(gè)基本的收縮動(dòng)畫(huà))

gif效果圖, 演示可以兩個(gè)動(dòng)畫(huà), 一個(gè)在窗體加載時(shí)向上下張開(kāi), 一個(gè)關(guān)閉時(shí)上下向中間收縮動(dòng)畫(huà)。

6.代碼創(chuàng)建

1.創(chuàng)建 Storyboard 對(duì)象, 用于裝配子動(dòng)畫(huà)對(duì)象和屬性信息。
2.由于控制Margin, 用到的屬于 Thickness 結(jié)構(gòu)的數(shù)據(jù)類型, 所以需要?jiǎng)?chuàng)建 ThicknessAnimation 對(duì)象。
3.設(shè)置 ThicknessAnimation 其子屬性的參數(shù): 動(dòng)畫(huà)時(shí)間、 初始值、結(jié)束值。
4.綁定其元素對(duì)象GridMain
5.綁定依賴屬性 Margin
6.添加到 Storyboard 容器中
7.運(yùn)行動(dòng)畫(huà)

            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實(shí)際為xmal中 Grid窗體的 Name="GridMain"

ThicknessAnimation 屬性介紹：

.Duration

Duration屬性很簡(jiǎn)單, 它就是在動(dòng)畫(huà)開(kāi)始時(shí)刻和結(jié)束時(shí)刻之間的時(shí)間間隔(時(shí)間間隔單位以毫秒、分鐘、小時(shí)或者其他喜歡使用的任何單位)。Duration和TimeSpan非常類似, 并且Duration結(jié)構(gòu)定義了一個(gè)隱式轉(zhuǎn)換,能夠根據(jù)需要將System.TimeSpan轉(zhuǎn)為System.Windows.Duration。

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

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

.From

From屬性用于設(shè)置初始值, 例如上例中,Margin設(shè)置為上下邊距為300.

.To

To屬性用于設(shè)置動(dòng)畫(huà)結(jié)束的值。如上中, 結(jié)束動(dòng)畫(huà)完成, Grid的邊距則為0.

7.XAML創(chuàng)建動(dòng)畫(huà)

1.相對(duì)于代碼創(chuàng)建動(dòng)畫(huà), Xaml方式創(chuàng)建動(dòng)畫(huà)要簡(jiǎn)單的多。添加 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.利用時(shí)間觸發(fā)器, 關(guān)聯(lián)啟動(dòng)事件, 進(jìn)行動(dòng)畫(huà)的加載。

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

剩余部分：

關(guān)閉部分動(dòng)畫(huà)的收縮代碼實(shí)現(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);

前臺(tái)XAML代碼的實(shí)現(xiàn)方式, 關(guā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>

到此這篇關(guān)于WPF實(shí)現(xiàn)動(dòng)畫(huà)效果的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。