WPF動畫基礎及例項

學習平台

微軟開發者部落格:

微軟文件與學習:

微軟開發者平台:

1.介紹

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

2.傳統的方式

(1).建立乙個週期性觸發的定時器(例如, 間隔50毫秒的重新整理動作)

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

(3).重新繪製整個介面元素。

缺點：1.修改乙個效果的時候,要比想象中複雜, 你要追加乙個效果,必須編寫所有的**, 甚至變得更加複雜。

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

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

3.基於屬性的wpf動畫

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

屬性值的一種方式。

優點：1.一套完整的動畫封裝, system.windows.media.animation空間下已經提供了多數動畫類。

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));

.fromfrom屬性用於設定初始值, 例如上例中,margin設定為上下邊距為300.

.to

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

7.xaml建立動畫

1.相對於**建立動畫, xaml方式建立動畫要簡單的多。新增 storyboard鍵 , 然後新增 thicknessanimation 鍵和繫結引數

"
loading
">
"0:0:0.3
" to="
0" from="
0,300,0,300
"storyboard.targetname="
gridmain
" storyboard.targetproperty="
margin
" />

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

"
loaded
" >
""/>

剩餘部分：關閉部分動畫的收縮**實現：

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 事件, 完整**(包含上面部分)：

"
loading
">
"0:0:0.3
" to="
0" from="
0,300,0,300
"storyboard.targetname="
gridmain
" storyboard.targetproperty="
margin
" />
"closing
">
"stop
" duration="
0:0:0.6
" to="
0,300,0,300
" from="
0" storyboard.targetname="
gridmain
"storyboard.targetproperty="
margin
" completed="
sb_completed
"/>
"loaded
" >
""/>
"textblock.mouseleftbuttondown
">
""  />

WPF動畫基礎及例項

wpf 動畫 WPF中監視動畫進度

wpf動畫概述

WPF 動畫收縮選單

WPF動畫基礎及例項

wpf 動畫 WPF中監視動畫進度

wpf動畫概述

WPF 動畫收縮選單

相關推薦