天天看點

WPF三大常用動畫

(1)WPF動畫【線性插值&關鍵幀&路徑】:

1、動畫有兩種類型:①Animation線性插值動畫:在開始值與結束值之間以逐漸增加的方式改變屬性的動畫。②AnimationUsingKeyFrames關鍵幀動畫:從一個值突然變成另一值的動畫,所有關鍵幀動畫都使用"類型名 + AnimationUsingKeyFrames"的形式命名。③AnimationUsingPath路徑動畫:基于路徑而創作的動畫。

2、動畫的構成:布局控件 - 事件觸發器【Trigger】 - 開始播放故事闆【BeginStoryboard】 - 故事闆【Storyboard】 - 動畫【Animation】。

3、Storyboard故事闆:動畫的基本單元,控制動畫的播放、暫停、停止等基礎操作,需要指定TargetName&TargetProperty這兩個屬性。

4、事件觸發器:通過事件觸發器來播放BeginStoryboard故事闆的動畫。

5、動畫執行的兩種方式:①通過設定觸發器事件在頁面執行動畫。②背景托管執行動畫。

6、Animation線性插值動畫:①它提供一種簡單的“漸變”動畫,我們為一個Animation指定開始值與結束值,并指定由開始值到達結束值的所需時間,便可形成一個簡單的動畫。②Animation支援兩種屬性的動畫效果:DoubleAnimation屬于Double類型的屬性都可以使用它産生的線性插值動畫;ColorAnimation作用于屬性為Color類型對象的線性插值動畫,用于改變對象的填充顔色。③Animation動畫設定屬性,如下圖:

WPF三大常用動畫

7、AnimationUsingKeyFrames關鍵幀動畫:①特點:它可以根據目标屬性值之間的差異産生各種動畫效果,一個關鍵幀動畫可以在任意多個目标屬性值之間進行漸變,它能産生更多更複雜的動畫效果。②AnimationUsingKeyFrames支援兩種屬性動畫:DoubleAnimationUsingKeyFrames(Double類型屬性的關鍵幀動畫)、ColorAnimationUsingKeyFrames(Color類型屬性的關鍵幀動畫)。

③關鍵幀與線性插值之間的差別:線性插值動畫可以通過設定From、To這兩個值就能制作出動畫的演變過程,但關鍵幀動畫不能使用From、To屬性,若是需要定義關鍵幀動畫的演變過程,就需要去設定多個關鍵幀動畫,并通過KeyTime來定義演變的時間,0.5秒是由黃色變為綠色,1秒的時候從綠色又變成藍色,Value可以設定屬性值。

8、C#背景建立線性插值動畫:先在頁面定義承載控件,From屬性元素開始值,To屬性元素結束值,Duration整個動畫的執行時間。即使不使用To屬性,也可以使用By屬性,By值被簡單地增加到From值上,使其達到To值,但對于非數值資料類型來說,By屬性是沒有意義的。以下為C#代碼:

//執行個體化DoubleAnimation類

DoubleAnimation doubleAnimation = new DoubleAnimation();

//設定From屬性(btn1為頁面按鈕的Name)

doubleAnimation.From = btn1.Width;

//設定To屬性

doubleAnimation.To = 250;

//設定Duration屬性

doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

//為元素設定BeginAnimation方法

btn1.BeginAnimation(Button.WidthProperty, doubleAnimation);

9、動畫的生命周期:①注意,動畫并不能真正的改變屬性的值,當動畫處于執行狀态時,動畫改變的值隻是覆寫掉了元素原有的值。②為了能讓動畫完成後能修改屬性的值,有兩種方法可以解決:設定AutoReverse屬性,将該屬性設定為true,将會反向運動,将元素屬性傳回到原始的值(不适合用于動畫完成後,它隻為還原動畫執行之前的值);改變FillBehavior屬性,FillBehavior屬性預設設定為HoldEnd,意味着當動畫結束時會繼續為目标元素應用最後的值,如果将FillBehavior的屬性改為Stop,那麼,動畫一旦結束,屬性就會恢複為原來的值(适用于動畫結束後,再次為其設定新值)。這兩種屬性一般不結合使用,隻要用到其中的一個就能成功改變動畫的生命周期問題。

10、動畫的Completed事件:使用該事件時,要将事件設定在BeginAnimation()方法之前,否則将不起作用。在Completed中,可通過調用BeginAnimation()方法來渲染不活動的動畫,隻需要指定屬性,并為動畫對象傳遞null引用便可。

11、TimeLine類:①用于控制動畫的執行速度,加快或減緩動畫播放的速度,動畫暫停、重複等。②該類有七種常用屬性:BeginTime設定将被添加到動畫開始之前的延時時間(TimeSpan類型),此延時會被加載到總時間,設定了5秒延時的5秒動畫,總時長為10秒;Duration設定動畫開始到結束的運作時間;SpeedRatio提高或減慢動畫速度,SpeedRatio預設的屬性值是1,如果增加該屬性值為5,那麼動畫的速度就會變成原來的5倍;AcclerationRatio&DecelerationRatio讓動畫不是線性【即均速狀态】的,從開始時較慢,或開始時較快,這兩個屬性的值都在0~1之間,這兩個屬性值之和不能超過1;AutoReverse如果為true,當動畫完成時會自動反向播放,傳回到動畫執行前的原始值;FillBehavior定義動畫結束時的操作;RepeatBehavior通過該屬性能指定動畫的執行次數或時間間隔重複動畫,用于設定該屬性的RepeatBehavior對象決定了确切的行為。

12、AccelerationRatio與DecelerationRatio屬性:使用這兩個屬性壓縮部分時間軸,使動畫運作更快,并将拉伸其他時間進行補償,使總時間保持不變,這兩個屬性都表示百分比值,例如:将在1個10秒的動畫中,将AccelerationRatio屬性設定為0.3,表示希望使用動畫持續時間中前30%的時間進行加速,前3秒加速運作,将DecelerationRatio屬性設定為0.3,那麼最後3秒則減速運作,而剩餘的4秒則會以恒定不變的速度運作。

13、RepeatBehavior屬性:控制如何重複運作動畫,如果希望重複固定次數,那就要為該屬性構造函數傳遞合适的次數,還可設定它為永久重複,将重複動畫的執行代碼放在執行個體化動畫代碼的後一步位置執行最為合适。

14、故事闆&事件觸發器:①通過故事闆可以将動畫指定到合适的元素和屬性,事件觸發器則用于相應屬性的變化或事件,并控制着故事闆。②故事闆用來分組多個動畫,而且具有控制動畫播放的能力,如:暫停、停止以及播放指定位置,然而Storyboard類提供的最基本功能是能使用TargetProperty和TargetName這兩個附加屬性去指向某個特定屬性和特定元素,它在動畫和希望應用動畫的屬性之間架起了一座橋梁。③建立事件觸發器時,要指定開始觸發器的路由事件和觸發器需要執行的一個或多個動作。對于動畫而言,最常用的動作是定義BeginStoryboard,該動作相當于調用BeginAnimation()方法,要知道的是:所有事件觸發器都可以啟動動作。可以定義事件觸發器的位置:在樣式中(Style.Triggers集合)、

在資料模闆中(DataTemplate.Triggers集合)、在控件模闆中(ControlTemplate.Triggers集合)、直接在元素中定義事件觸發器(FrameworkElement.Triggers集合)。

15、控制播放【此類屬性控制的不是動畫本身,控制的是故事闆】:①BeginStoryboard加載動畫。②PauseStoryboard停止播放動畫并保持目前位置。③ResumeStoryboard恢複或暫停動畫的播放。④StopStoryboard停止播放的動畫,動畫被停止後屬性将恢複到動畫開始階段。⑤SeekStoryboard改變整個故事闆的SpeedRatio屬性值。⑥SkipStoryboardToFill将故事闆移動到動畫執行時間的終點。若FillBehavior屬性設定為HoldEnd,動畫将繼續保持着最後的值。⑦RemoveStoryboard移除故事闆,停止所有正在運作的動畫,并将屬性傳回為原來的(最後一次)設定的數值。⑧注意:如果要成功地執行這些動作,必須在同一個Triggers觸發器集合中定義所有的動作,如果将兩個不同的動作放置到不同的集合中,那麼動作将無法完成。

16、故事闆監聽事件:①Completed:動畫已經到達了終點。②CurrentGlobalSpeedInvalidated:速度發生了變化,或動畫被暫停、重新開始、停止或移到某個新的位置。③CurrentStateInvalidated:動畫已經開始或結束。

④CurrentTimeInvalidated:動畫時鐘已經向前移動了一個步長,正在更改動畫。當動畫開始、停止或結束時也會引發該事件。⑤RemoveRequested動畫正在被移除。

17、動畫緩動:①線性動畫有個缺點,讓人感覺機械且不夠自然,要想改進動畫并建立出更趨自然的動畫,秘訣是改變變化的速率【提高幀率】。設計根據某種方式加速或減速的動畫,實作更趨自然的動畫,最簡單方法是使用預置的緩動函數EasingFunction。但是該緩動函數EasingFunction隻能接受單個緩動函數對象,是以不能為同一個動畫結合不同的緩動函數【缺點】。②EasingMode屬性有三種值,分别是:EaseIn(在動畫開始時應用緩動效果)、EaseOut(動畫結束時應用緩動效果)和EaseInOut(在開始和結束時應用緩動動畫)。注意!應用緩動函數時并不會改變動畫的持續時間。③常用的緩動函數類:BackEase【EaseIn模式應用該緩動函數時,在動畫開始之前拉回動畫,EaseOut模式時,允許動畫稍微超越然後再拉回(Amplitude屬性決定拉回和超越的量,預設值是1,可減小該屬性值以縮減效果,或增加該屬性值放大效果】;ElasticEase【EaseOut模式應用該緩動函數時,使動畫超越其最大值并前後擺動,然後逐漸減慢。EaseIn模式時,動畫在其開始值周圍前後擺動,然後逐漸增加(動畫前後擺動的次數由屬性Oscillations控制)】;BounceEase【與Elastic效果類似,隻是彈跳永遠不會超越初始值或最終值(Bounce屬性控制動畫回調的次數,預設值是2)】;CircleEase【圓函數加速(EaseIn模式),或減速(EaseOut模式)】;CublicEase

【使用基于時間立方的函數加速,其效果與Circle類似,但加速效果更緩和】。QuadraticEase【用基于時間平方的函數加速,效果與CublicEase類似,但加速過程更明顯】。

18、自定義緩動函數:建立一個類,讓其繼承自EasingFunctionBase類,重寫EaseInCore()方法和CreateInstanceCore()方法,定義依賴屬性,然後引用。

19、WPF動畫的性能與幀率:在頁面同時發生多個動畫的情況下,這時候更需要關注動畫的執行性能,WPF預設保持以60幀/秒的速度進行動畫,可以確定從開始到結束得到平滑流暢的動畫。幀速率越低,越容易發生抖動【卡頓】現象。幀速率越高,占用的CPU也就越高,可以通過TimeLine.DesiredFrameRate屬性對幀率進行調整。找VS菜單欄中的調試,再找到視窗選項,然後點選診斷工具,通過診斷工具可以看到目前軟體運作時所占用的CPU。

(2)WPF進階動畫【動态變換】:

1、變換提供了自定義元素的最強大方式之一,每個元素都能以兩種不同的方式使用變換。

2、RenderTransform和LayoutTransform屬性:RenderTransform屬性效率更高,因為是在布局之後應用變換,并且用于變換最終的渲染輸出。LayoutTransform則是在布局之前應用,進而其他控件需要重新排列以适應變換,效率也就低些。

3、動态改變多個變換:在屬性标簽中可以放置多個變換【旋轉、縮放…】。

4、動态改變畫刷:ColorAnimation改變顔色,PointAnimation改變線性漸變的坐标。

5、DoubleAnimation改變數值、ColorAnimation改變顔色、PointAnimation改變坐标。

6、關鍵幀動畫【平滑型】:線性關鍵幀類通常使用"Linear"+資料類型+KeyFrame"的形式進行命名,如果需要建立具有多個分段的動畫和不規則移動的動畫,這個時候可以使用關鍵幀動畫,它是由許多較短的段構成的動畫,每段表示動畫的初始值、最終值或中間值,當運作動畫時,它平滑地從一個值移動到另一個值;關鍵幀對象基本上都有Value屬性和KeyTime屬性,關鍵幀對象的Value屬性的資料類型和其他普通動畫不同,在LinearPointKeyFrame類中是Point類型,在DoubleKeyFrame類中則是double類型。

7、【離散型】的關鍵幀動畫:離散關鍵幀不再是進行插值了,當到達關鍵時間時,屬性突然改變為新值。離散關鍵幀類則使用"Discrete資料類型+KeyFrame"的形式命名。當運作這個動畫時中心點會在适當的時間從一個位置跳轉到下一個位置,所有關鍵幀動畫類都支援離散關鍵幀,但隻有一部分關鍵動畫類支援線性關鍵幀。

8、【緩動型】關鍵幀動畫:離散關鍵幀動畫的分支,常用的緩動關鍵幀類有:EasingDoubleKeyFrame、EasingColorKeyFrame、EasyingPointKeyFrame。每個緩動關鍵幀類和對應的線性插值關鍵幀類的工作方式相同,但是額外提供了EasyingFunction屬性。

9、基于幀的動畫【背景操控】:使用幀的動畫要為靜态的CompositionTarger.Rendering事件關聯事件處理程式,一旦關聯處理程式,WPF将以每秒調用60次的速度開始不斷地調用這個事件處理程式,當動畫結束後,再分離事件處理程式。

繼續閱讀