我入行做桌面客戶端的時候最常被問的一句話就是“這界面能讓它動起來嗎”。那時候還在用傳統(tǒng)框架想做一個平滑的展開收起效果得開著計時器、改屬性、手動重繪界面稍微復(fù)雜一點(diǎn)就開始卡頓掉幀是家常便飯。后來切到WPF第一次用幾行XAML就搞定了一個帶緩動函數(shù)的位移動畫說實話那個瞬間有點(diǎn)上頭——原來“會動的界面”可以這么優(yōu)雅地寫出來。這篇內(nèi)容就是寫給那些想把WPF界面做“活”的開發(fā)者。不管你是剛接觸WPF的新手還是已經(jīng)在做業(yè)務(wù)系統(tǒng)想提升交互質(zhì)感的老手這篇指南都會從頭梳理WPF動畫的底層邏輯、常用寫法、性能邊界以及我在實際項目里踩過的一些坑。目標(biāo)只有一個讓你看完之后能自己動手寫出流暢、可控、不卡的WPF動畫。1. WPF動畫的三塊基石依賴屬性、時鐘與時間軸很多新手第一次接觸WPF動畫看到DoubleAnimation和Storyboard就開始照著示例敲代碼能跑起來但稍微改改就出問題。根本原因是沒有理解動畫系統(tǒng)背后在做什么。WPF動畫不是“每幀改一個變量的值”那么簡單它是一套從屬性系統(tǒng)到渲染線程的完整協(xié)作機(jī)制。我建議你在寫第一行動畫代碼之前至少搞清楚這三塊基石。1.1 依賴屬性動畫真正“動”的是它如果你用過傳統(tǒng)框架可能習(xí)慣給控件設(shè)一個left或者opacity這樣的普通屬性然后自己算中間值。但WPF里能讓動畫平滑運(yùn)作的屬性幾乎都是依賴屬性Dependency Property。依賴屬性有一個很特殊的本事它的值不是存在控件實例里的一個普通字段而是通過一套屬性值解析鏈路動態(tài)計算出來的。你可以把依賴屬性理解成一個“投票系統(tǒng)”動畫系統(tǒng)、樣式、模板、本地賦值、數(shù)據(jù)綁定都可以往這個屬性上“投票”最后系統(tǒng)按照優(yōu)先級把得票最高的值定為當(dāng)前生效值。動畫在這一套體系里的優(yōu)先級非常高所以一旦動畫開始運(yùn)行哪怕你同時在XAML里寫了Opacity0.5動畫也會暫時蓋住這個值動畫結(jié)束后才恢復(fù)。這就是為什么你經(jīng)常會看到“動畫運(yùn)行完了屬性沒有變”的現(xiàn)象——不是代碼寫錯了而是動畫退出后依賴屬性的值又回到動畫前的狀態(tài)。理解了這一點(diǎn)你就能解釋后面很多奇怪的問題。1.2 時鐘系統(tǒng)WPF的“心跳”從哪來WPF動畫的驅(qū)動核心是CompositionTarget.Rendering事件所在的渲染線程但真正讓動畫可以精確控制進(jìn)度的是圍繞Clock時鐘構(gòu)建的整套機(jī)制。每創(chuàng)建一個動畫WPF內(nèi)部都會創(chuàng)建一個對應(yīng)的Clock對象這個時鐘記錄了動畫的起點(diǎn)、持續(xù)時間、循環(huán)次數(shù)、填充行為等信息。渲染線程每次刷新時會向時鐘詢問“現(xiàn)在時間到了哪一格”時鐘根據(jù)時間和動畫的緩動函數(shù)算出當(dāng)前值再把值交給依賴屬性。這里我想強(qiáng)調(diào)一個觀點(diǎn)WPF動畫不是“每幀硬算”而是“按時間映射值”。也就是說動畫在時間軸上的進(jìn)度和屬性值的變化是一一對應(yīng)的流暢度由WPF的整體渲染管線保障不需要開發(fā)者在自己的業(yè)務(wù)邏輯里維護(hù)循環(huán)。1.3 時間軸動畫的“劇本”結(jié)構(gòu)時間軸Timeline描述的是動畫在時間維度上的表現(xiàn)。Duration時長、RepeatBehavior重復(fù)行為、AutoReverse自動反轉(zhuǎn)、FillBehavior結(jié)束后行為這些都是時間軸的一部分。舉個例子你希望一個按鈕在鼠標(biāo)懸停的時候透明度從1降到0.3松開后又回到1。如果用時間軸描述整個動畫時長可以設(shè)為0.2秒AutoReverse保持默認(rèn)即可動畫的起始值是當(dāng)前透明度結(jié)束值是0.3完成之后通過觸發(fā)器的條件反轉(zhuǎn)回1。這比手動寫兩個動畫還要處理好銜接要省事得多。你完全可以先忘掉具體API只要記住一條主線依賴屬性負(fù)責(zé)“值存哪兒”時鐘負(fù)責(zé)“時間到哪兒了”時間軸負(fù)責(zé)“值怎么隨時間變”。這三者串起來WPF動畫的核心原理就通了。2. 從第一行動畫代碼說起DoubleAnimation與Storyboard的協(xié)作原理通了就該寫代碼了。我盡量不給你塞一堆抽象的概念直接按照實際開發(fā)中最常用的路徑走一遍。2.1 用XAML聲明一個最簡單的不透明度動畫假設(shè)界面上有一個Border我希望程序啟動后它從完全透明逐漸顯示出來。在XAML里可以這樣寫B(tài)order Width200 Height100 Background#FF4081 Border.Triggers EventTrigger RoutedEventFrameworkElement.Loaded BeginStoryboard Storyboard DoubleAnimation Storyboard.TargetPropertyOpacity From0 To1 Duration0:0:1.5 / /Storyboard /BeginStoryboard /EventTrigger /Border.Triggers /Border這段代碼的核心邏輯是在Border加載完成后觸發(fā)一個StoryboardStoryboard里放了一個DoubleAnimation專門負(fù)責(zé)把Opacity屬性從0動畫到1總時長1.5秒。DoubleAnimation是WPF動畫家族里最常用的一個凡是double類型的依賴屬性比如透明度、寬度、高度、旋轉(zhuǎn)角度都可以用它。我建議把所有動畫類型都當(dāng)成“某一種類型的屬性值在時間軸上的映射”這樣以后看到ColorAnimation顏色、PointAnimation坐標(biāo)點(diǎn)就不會覺得陌生。2.2 從代碼里創(chuàng)建動畫什么時候用XAML什么時候用C#XAML聲明的動畫寫起來直觀但有時候需要在運(yùn)行時動態(tài)創(chuàng)建。比如用戶點(diǎn)了按鈕側(cè)邊欄從左側(cè)滑出滑出距離要根據(jù)當(dāng)前窗口寬度計算這時候XAML里寫死數(shù)值就不太靈活。在C#里創(chuàng)建動畫通常這樣寫var slideAnimation new DoubleAnimation { From -200, To 0, Duration TimeSpan.FromMilliseconds(300), EasingFunction new CubicEase { EasingMode EasingMode.EaseOut } }; Storyboard.SetTargetProperty(slideAnimation, new PropertyPath((UIElement.RenderTransform).(TranslateTransform.X))); Storyboard.SetTarget(slideAnimation, sidebarPanel); var storyboard new Storyboard(); storyboard.Children.Add(slideAnimation); storyboard.Begin();這里有一個關(guān)鍵點(diǎn)From不是必需的。如果你不寫From動畫會從依賴屬性當(dāng)前的值開始。這個特性在彈窗、懸停效果里特別有用因為控件可能處于各種狀態(tài)從“當(dāng)前值”開始往往比寫死起始值更自然。在代碼里設(shè)置Storyboard.SetTargetProperty時字符串寫法要格外小心。像上面那種嵌套路徑如果寫成RenderTransform.X動畫很可能沒效果因為屬性路徑解析不到正確的依賴屬性。最穩(wěn)妥的寫法就是上面的完整路徑(UIElement.RenderTransform).(TranslateTransform.X)。2.3 Storyboard的Begin、Stop、Pause到底在控制什么很多人的誤解是把Storyboard當(dāng)成一個“動畫對象”本身但實際上它更像是“一組動畫的指揮者”。調(diào)用Begin()之后動畫時鐘開始走調(diào)用Stop()之后所有子動畫立即結(jié)束并且屬性回退到動畫之前的狀態(tài)除非你設(shè)置了FillBehaviorHoldEnd。Pause()和Resume()則暫停在時間軸當(dāng)前的位置。這里我要分享一個實戰(zhàn)經(jīng)驗用Stop()停止Storyboard并不會讓屬性停留在Stop那一刻的中間值而是會讓所有被動畫控制的值瞬間回到動畫前狀態(tài)。如果產(chǎn)品經(jīng)理要求“點(diǎn)一下暫停畫面停在當(dāng)前幀”你需要用Pause()而Stop()經(jīng)常用來徹底結(jié)束并重置狀態(tài)。很多動畫“做完之后界面跳變”的Bug就是Stop()和Pause()用混了導(dǎo)致的。3. 讓界面會“呼吸”常用動畫類型與屬性的搭配實戰(zhàn)只會用DoubleAnimation改不透明度界面還是顯得單薄。真正讓界面有質(zhì)感、有“呼吸感”的是不同動畫類型配合使用并且用對緩動函數(shù)和觸發(fā)時機(jī)。3.1 位移動畫RenderTransform 比 Margin 更重要想做一個元素平滑移動新手往往直接動畫Margin。這能跑但性能很差因為Margin變化會觸發(fā)重新布局Measure和ArrangeWPF布局系統(tǒng)在動畫期間被頻繁調(diào)用很容易掉幀。正確的思路是動畫RenderTransform。它不會影響布局只影響渲染層的位置性能開銷小一大截。Border Width80 Height80 Background#3F51B5 Border.RenderTransform TranslateTransform x:NamemoveTransform / /Border.RenderTransform Border.Style Style TargetTypeBorder Style.Triggers Trigger PropertyIsMouseOver ValueTrue Trigger.EnterActions BeginStoryboard Storyboard DoubleAnimation Storyboard.TargetNamemoveTransform Storyboard.TargetPropertyX To120 Duration0:0:0.3 DoubleAnimation.EasingFunction CubicEase EasingModeEaseOut/ /DoubleAnimation.EasingFunction /DoubleAnimation /Storyboard /BeginStoryboard /Trigger.EnterActions Trigger.ExitActions BeginStoryboard Storyboard DoubleAnimation Storyboard.TargetNamemoveTransform Storyboard.TargetPropertyX To0 Duration0:0:0.3 DoubleAnimation.EasingFunction CubicEase EasingModeEaseOut/ /DoubleAnimation.EasingFunction /DoubleAnimation /Storyboard /BeginStoryboard /Trigger.ExitActions /Trigger /Style.Triggers /Style /Border.Style /Border這段代碼實現(xiàn)的效果是鼠標(biāo)移到Border上它向右平移120像素移開后平滑回到原位。Trigger.EnterActions和Trigger.ExitActions是處理懸停交互最常用的兩個入口。我把TranslateTransform放在RenderTransform里的原因是動畫只影響渲染位置不影響布局。用Margin做動畫旁邊元素會跟著跳來跳去用RenderTransform其他元素紋絲不動。這一點(diǎn)在儀表盤拖拽、通知欄彈出等場景里太重要了。3.2 縮放的“中心點(diǎn)”坑ScaleTransform的縮放默認(rèn)是以元素左上角為原點(diǎn)CenterX0、CenterY0想讓元素從中心向外縮放需要顯式設(shè)置中心點(diǎn)。因為動畫的目標(biāo)是元素的左上角如果不設(shè)置中心點(diǎn)放大時元素會向右下角擴(kuò)散視覺上非常不自然。Border Width100 Height100 Background#FF9800 Border.RenderTransformOrigin0.5,0.5/Border.RenderTransformOrigin Border.RenderTransform ScaleTransform x:NamescaleTransform / /Border.RenderTransform Border.Style Style TargetTypeBorder Style.Triggers Trigger PropertyIsMouseOver ValueTrue Trigger.EnterActions BeginStoryboard Storyboard DoubleAnimation Storyboard.TargetNamescaleTransform Storyboard.TargetPropertyScaleX To1.05 Duration0:0:0.15 / DoubleAnimation Storyboard.TargetNamescaleTransform Storyboard.TargetPropertyScaleY To1.05 Duration0:0:0.15 / /Storyboard /BeginStoryboard /Trigger.EnterActions Trigger.ExitActions BeginStoryboard Storyboard DoubleAnimation Storyboard.TargetNamescaleTransform Storyboard.TargetPropertyScaleX To1 Duration0:0:0.15 / DoubleAnimation Storyboard.TargetNamescaleTransform Storyboard.TargetPropertyScaleY To1 Duration0:0:0.15 / /Storyboard /BeginStoryboard /Trigger.ExitActions /Trigger /Style.Triggers /Style /Border.Style /Border這里RenderTransformOrigin0.5,0.5的含義是把變換的中心點(diǎn)設(shè)在元素自身寬度高度的50%處也就是幾何中心。鼠標(biāo)懸停時卡片會稍微放大到1.05倍移開后恢復(fù)原狀。如果只放大ScaleX不放大ScaleY就會出現(xiàn)“拉伸”而不是“等比縮放”的效果在一些需要壓扁再彈起的特效里才會單獨(dú)控制。3.3 顏色動畫與漸變背景的搭配很多現(xiàn)代界面的“動感”來自背景色或漸變色的平滑過渡。ColorAnimation專門處理Color類型的屬性通常和LinearGradientBrush配合使用Border Width300 Height150 CornerRadius12 Border.Background LinearGradientBrush StartPoint0,0 EndPoint1,1 GradientStop x:NamestartStop Color#FF6A00 Offset0 / GradientStop x:NameendStop Color#FFD800 Offset1 / /LinearGradientBrush /Border.Background Border.Style Style TargetTypeBorder Style.Triggers Trigger PropertyIsMouseOver ValueTrue Trigger.EnterActions BeginStoryboard Storyboard ColorAnimation Storyboard.TargetNamestartStop Storyboard.TargetPropertyColor To#E91E63 Duration0:0:0.4 / ColorAnimation Storyboard.TargetNameendStop Storyboard.TargetPropertyColor To#9C27B0 Duration0:0:0.4 / /Storyboard /BeginStoryboard /Trigger.EnterActions Trigger.ExitActions BeginStoryboard Storyboard ColorAnimation Storyboard.TargetNamestartStop Storyboard.TargetPropertyColor To#FF6A00 Duration0:0:0.4 / ColorAnimation Storyboard.TargetNameendStop Storyboard.TargetPropertyColor To#FFD800 Duration0:0:0.4 / /Storyboard /BeginStoryboard /Trigger.ExitActions /Trigger /Style.Triggers /Style /Border.Style /Border漸變背景懸停變色的效果一上來就能把界面的質(zhì)感拉高一個檔次。但要注意ColorAnimation的性能比DoubleAnimation稍高因為顏色轉(zhuǎn)換要計算RGB通道所以背景就不建議放那種超大漸變區(qū)域做高頻動畫否則GPU壓力會上去低端設(shè)備上可能出現(xiàn)閃爍。3.4 再說說緩動函數(shù)你要的“手感”全靠它不加緩動函數(shù)的動畫是線性勻速的視覺上很生硬。真實世界的物體運(yùn)動大多是加速或減速的WPF的EasingFunction就是模擬這種物理手感的關(guān)鍵。我在項目里常用的幾個緩動函數(shù)效果描述典型場景CubicEase先慢后快或先快后慢中等強(qiáng)度過渡卡片彈出、面板滑入ElasticEase像彈簧一樣回彈過沖后回擺完成狀態(tài)提示、徽章彈出BounceEase落地反彈效果消息氣泡落下、加載完成提示PowerEase冪次曲線數(shù)值越大越劇烈大幅位移動畫、首頁Banner切換QuadraticEase輕柔的二次緩動適合微小交互按鈕懸停反饋、圖標(biāo)微動就我的體驗來說EaseOut先快后慢適合物體呼出進(jìn)入視野EaseIn先慢后快適合物體離開視野或者被拖拽后回歸。ElasticEase這類回彈效果因為存在過沖正式項目里要謹(jǐn)慎用用多了會讓人覺得很“鬧騰”但在關(guān)鍵注冊成功、確認(rèn)操作這些需要強(qiáng)化注意力的節(jié)點(diǎn)一下恰到好處的回彈能讓用戶產(chǎn)生“這軟件很精致”的印象。4. 控制動畫的走向交互狀態(tài)與Storyboard的管理技巧學(xué)了基礎(chǔ)語法只是“會寫動畫”離“會控制動畫”還有一段距離。這篇文章既然叫“完整指南”我想把在實際項目里真正關(guān)鍵的控制邏輯也講透。4.1 用VisualStateManager管理狀態(tài)動畫Trigger適合簡單的鼠標(biāo)懸停、按下但如果界面有多個互斥狀態(tài)比如“普通態(tài)、懸停態(tài)、選中態(tài)、禁用態(tài)”用觸發(fā)器就會很亂。這時候更好的選擇是VisualStateManager。Grid VisualStateManager.VisualStateGroups VisualStateGroup x:NameCommonStates VisualState x:NameNormal Storyboard DoubleAnimation Storyboard.TargetNamehoverPanel Storyboard.TargetPropertyOpacity To0 Duration0 / /Storyboard /VisualState VisualState x:NameMouseOver Storyboard DoubleAnimation Storyboard.TargetNamehoverPanel Storyboard.TargetPropertyOpacity To1 Duration0:0:0.2 / /Storyboard /VisualState /VisualStateGroup /VisualStateManager.VisualStateGroups Border x:NamehoverPanel Opacity0 Background#22000000 CornerRadius8 / /GridVisualStateManager最大的優(yōu)勢是狀態(tài)切換時動畫的可維護(hù)性更高。你可以在C#里直接調(diào)用VisualStateManager.GoToState來做狀態(tài)切換不需要在XAML里堆一堆Trigger.EnterActions。對于復(fù)雜控件、自定義控件來說這幾乎是標(biāo)準(zhǔn)做法。但使用VisualStateManager有個容易忽略的點(diǎn)狀態(tài)里的Storyboard默認(rèn)會在狀態(tài)切換時自動停止并根據(jù)Duration播放。如果你切到MouseOver狀態(tài)動畫還沒有播放完又切回Normal狀態(tài)WPF會打斷前者并立即開始播后者。想讓狀態(tài)切換更順滑最好所有狀態(tài)里的動畫時長保持一致或者使用TransitionStoryboard來定義狀態(tài)之間的過渡動畫。4.2 事件觸發(fā)器中Storyboard的“坑”使用EventTrigger時有一個非常經(jīng)典的坑EventTrigger默認(rèn)的SourceName是整個可視樹而RoutedEvent的觸發(fā)時機(jī)在不同模板里可能不一樣。最常見的“Bug”是事件觸發(fā)后Storyboard沒有啟動或啟動了但目標(biāo)屬性沒變——結(jié)果是目標(biāo)控件不是被測控件的信號源。我見過A同事寫了一個TextBox聚焦時動畫跑起來但焦點(diǎn)離開時動畫回不去的案例。那其實是因為他用了一個EventTrigger掛在了父容器上而父容器一直處于焦點(diǎn)范圍內(nèi)導(dǎo)致動畫一觸發(fā)就開始執(zhí)行等到焦點(diǎn)真正離開時才想反向播放時間上已經(jīng)晚了。所以一個很重要的經(jīng)驗是EventTrigger看起來簡單但責(zé)任要劃分清楚。每個動畫的觸發(fā)和目標(biāo)要盡量統(tǒng)一在同一個視覺元素上避免跨元素的觸發(fā)關(guān)系。如果需要全局性的動畫控制建議直接在Code-Behind或者ViewModel里管理而不是到處埋觸發(fā)器。4.3 程序化控制Storyboard的完整生命周期在真正的業(yè)務(wù)系統(tǒng)里Storyboard絕大多數(shù)是從后臺代碼啟動的。這時候?qū)toryboard生命周期的控制就非常重要。代碼里需要一個Storyboard實例時我想提醒你最好把它存成字段而不是每次創(chuàng)建完直接調(diào)用private Storyboard _slideStoryboard; private void BuildSlideAnimation() { var animation new ThicknessAnimation { To new Thickness(0, 0, 20, 0), Duration TimeSpan.FromMilliseconds(250), EasingFunction new CubicEase { EasingMode EasingMode.EaseOut } }; Storyboard.SetTarget(animation, infoPanel); Storyboard.SetTargetProperty(animation, new PropertyPath(Margin)); _slideStoryboard new Storyboard(); _slideStoryboard.Children.Add(animation); } private void ShowInfoPanel() { if (_slideStoryboard null) { BuildSlideAnimation(); } _slideStoryboard.Begin(); }你看我把Storyboard創(chuàng)建和開始分離。這樣可以在需要時調(diào)用Stop()、Pause()、Resume()、Seek()等操作而不會每次重新創(chuàng)建導(dǎo)致舊動畫還在運(yùn)行出現(xiàn)僵尸時鐘。這里有一個經(jīng)驗要強(qiáng)調(diào)如果一個屬性正在被動畫控制你又用同一個Storyboard重新Begin新的Storyboard會接管屬性如果你用了另一個Storyboard甚至直接對屬性賦值可能會出現(xiàn)“動畫蓋手寫值”的詭異情況。因為動畫在屬性系統(tǒng)里的優(yōu)先級很高普通賦值是壓不住動畫的。碰上這種情況先調(diào)用Storyboard.Remove()或者storyboard.Stop()再賦值。4.4 動畫Completed事件的線程與綁定問題Storyboard.Completed事件是個好東西很多“動畫播放完成后做下一步”的邏輯都靠它。但請記得Completed事件是在UI線程上下文觸發(fā)的可以放心更新界面不需要Dispatcher調(diào)用。但如果你在Completion事件里啟動另一個Storyboard要做好新Storyboard的引用管理避免連續(xù)觸發(fā)多次導(dǎo)致動畫隊列堆積。另外如果動畫目標(biāo)屬性背后綁定了數(shù)據(jù)源動畫播放期間數(shù)據(jù)源的變化不會立刻反映到屬性上動畫優(yōu)先級更高動畫結(jié)束后才會“拉回”到最新綁定值。如果你在動畫結(jié)束時需要同步數(shù)據(jù)最新值可以在Completed里強(qiáng)制觸發(fā)一次屬性刷新或者調(diào)用BindingExpression.UpdateTarget()。5. 性能與細(xì)節(jié)動畫不卡頓的實戰(zhàn)判斷把動畫寫出來很容易但寫一個在低配機(jī)器上也流暢的動畫需要一些硬核認(rèn)知。這一節(jié)我把自己在性能排查中總結(jié)出來的經(jīng)驗盡量講透。5.1 用GPU還是用CPU談?wù)勪秩緦拥倪x擇WPF動畫的性能關(guān)鍵不在于代碼量而在于動畫期間WPF把工作交給了CPU還是GPU。動畫Opacity、RenderTransform移動、縮放、旋轉(zhuǎn)WPF會走合成層盡量用GPU性能很好。動畫Width、Height、Margin每次變化都要重新布局走CPU性能很差。動畫Canvas.Left、Canvas.Top因為Canvas是絕對定位不會觸發(fā)整體重新布局比Margin稍好但還是不如RenderTransform。動畫大面積的Brush漸變顏色涉及像素填充性能取決于GPU資源。所以我寫動畫時有個“鐵律”能用RenderTransform絕不動Margin能用合成器屬性就不碰布局屬性。這不是潔癖是實測差距。在舊機(jī)器上動畫MarginCPU占用能沖到30%以上同樣的動畫用RenderTransformCPU占比基本可以忽略。5.2 硬件加速與掉幀的判斷標(biāo)準(zhǔn)WPF的硬件加速并不是“所有元素都能GPU加速”的有些元素比如直接畫上去的文字、位圖沒有做特效處理的截圖可能還是走軟件渲染。一個很常見的掉幀場景是把一個內(nèi)容非常多、層次非常深的復(fù)雜Panel整體做位移動畫結(jié)果動起來卡成PPT。如果你想粗略判斷動畫是CPU瓶頸還是GPU瓶頸打開WPF的[渲染診斷工具]或性能分析器看“渲染線程利用率”和“UI線程利用率”這兩項。如果是UI線程CPU滿載問題多半出在屬性選擇或布局觸發(fā)上如果是渲染線程滿載可能是圖元過于復(fù)雜需要簡化視覺樹或降低陰影、模糊等特效。5.3 常用動畫性能優(yōu)化手法速查表優(yōu)化手段具體做法適用場景減少布局觸發(fā)用RenderTransform替代Margin/Layout屬性動畫平移、縮放、旋轉(zhuǎn)簡化視覺樹動畫期間隱藏不必要的復(fù)雜子元素或降低它們的圖層大面積動態(tài)內(nèi)容展示避免過大的模糊特效動畫期間臨時關(guān)閉DropShadowEffect、BlurEffect拖動、平移動畫固定圖層對被頻繁運(yùn)行動畫的元素顯式設(shè)置CacheMode為BitmapCache靜態(tài)內(nèi)容頻繁位移關(guān)閉不可見的動畫頁面隱藏時主動暫?；蛞瞥齽赢嫸囗撁?、多標(biāo)簽應(yīng)用降低動畫復(fù)雜度對大范圍背景用靜態(tài)漸變動態(tài)元素用純色或低透明度大面積漸變動態(tài)過渡CacheMode這個屬性我建議認(rèn)真用一下。當(dāng)一個元素的內(nèi)容不變化、只是整體在移動時把它設(shè)置成BitmapCacheWPF會把這個元素緩存成一個位圖然后只移動位圖性能提升非常明顯。Border CacheModeBitmapCache !-- 復(fù)雜但靜態(tài)的內(nèi)容 -- /Border但要注意如果元素的內(nèi)容在動畫期間也在變化比如有進(jìn)度條在跑BitmapCache可能會讓你的動畫看起來有滯后感因為緩存位圖不能實時反映內(nèi)容變化。這種場景就不要硬開這個模式了。5.4 動畫數(shù)量多了以后的管理策略一個界面上幾十個動畫同時跑在業(yè)務(wù)系統(tǒng)里很常見尤其是那種帶實時數(shù)據(jù)刷新的看板。動畫一多就要避免“全局無差別動畫”——比如所有卡片同時都在用ElasticEase做回彈那CPU和GPU都會被拖垮。我的習(xí)慣做法是高頻低強(qiáng)度動畫比如數(shù)值刷新、光標(biāo)跟隨用極短時長和線性或輕緩動低頻高強(qiáng)度動畫比如大型面板切換、引導(dǎo)層出現(xiàn)用較長的緩動曲線。同時凡是離開界面的動畫比如彈窗關(guān)閉、頁面切走主動調(diào)用Storyboard.Remove()把時鐘清掉不要等GC去回收。否則積壓的時鐘會讓UI線程的幀間隔越來越不穩(wěn)定。6. 實戰(zhàn)案例從零做一個帶動畫的側(cè)邊欄導(dǎo)航講了這么多最后用一個常見的案例串起來做一個左側(cè)滑出式導(dǎo)航欄包含遮罩漸入、面板平移、菜單項依次淡入三個動畫。這個案例在后臺管理系統(tǒng)、IM界面、文檔工具里都非常典型。6.1 布局與初始狀態(tài)定義首先定義布局。左側(cè)面板初始在屏幕左側(cè)以外TranslateTransform.X為負(fù)數(shù)遮罩層初始Opacity0不可見。Grid x:NameRootGrid Grid.RowDefinitions RowDefinition Height* / /Grid.RowDefinitions !-- 遮罩層 -- Border x:NamemaskLayer Grid.Row0 Background#88000000 Opacity0 VisibilityCollapsed / !-- 側(cè)邊欄 -- Border x:NamesidebarPanel Grid.Row0 Width260 HorizontalAlignmentLeft BackgroundWhite VisibilityCollapsed Border.RenderTransform TranslateTransform x:NamesidebarTranslate X-260 / /Border.RenderTransform StackPanel Margin16 !-- 菜單項 -- TextBlock Text首頁 FontSize16 Margin0,8 Opacity0 / TextBlock Text數(shù)據(jù)看板 FontSize16 Margin0,8 Opacity0 / TextBlock Text設(shè)置 FontSize16 Margin0,8 Opacity0 / /StackPanel /Border /Grid我刻意把遮罩和側(cè)邊欄的Visibility都設(shè)為Collapsed這樣初始不會占用任何渲染資源。顯示的時候再通過動畫變成Visible。6.2 展開動畫遮罩淡入、面板滑入、菜單依次出現(xiàn)展開側(cè)邊欄的邏輯分三步把兩個元素設(shè)為Visible。遮罩Opacity從0到1。側(cè)邊欄TranslateTransform.X從-260到0。菜單項依次做透明度位移動畫形成“排隊入場”的效果。這里我選擇用Storyboard同時啟動多個DoubleAnimation它們會并行執(zhí)行private void OpenSidebar() { maskLayer.Visibility Visibility.Visible; sidebarPanel.Visibility Visibility.Visible; var fadeMask new DoubleAnimation { From 0, To 1, Duration TimeSpan.FromMilliseconds(300), EasingFunction new CubicEase { EasingMode EasingMode.EaseOut } }; Storyboard.SetTarget(fadeMask, maskLayer); Storyboard.SetTargetProperty(fadeMask, new PropertyPath(Opacity)); var slidePanel new DoubleAnimation { From -260, To 0, Duration TimeSpan.FromMilliseconds(350), EasingFunction new CubicEase { EasingMode EasingMode.EaseOut } }; Storyboard.SetTarget(slidePanel, sidebarTranslate); Storyboard.SetTargetProperty(slidePanel, new PropertyPath(X)); var openStoryboard new Storyboard(); openStoryboard.Children.Add(fadeMask); openStoryboard.Children.Add(slidePanel); // 菜單項依次淡入 for (int i 0; i menuItems.Count; i) { var menuItem menuItems[i]; var fadeIn new DoubleAnimation { From 0, To 1, BeginTime TimeSpan.FromMilliseconds(150 i * 60), Duration TimeSpan.FromMilliseconds(250), EasingFunction new CubicEase { EasingMode EasingMode.EaseOut } }; Storyboard.SetTarget(fadeIn, menuItem); Storyboard.SetTargetProperty(fadeIn, new PropertyPath(Opacity)); openStoryboard.Children.Add(fadeIn); } openStoryboard.Begin(); }注意這里sidebarTranslate是一個TranslateTransform實例直接把它作為Storyboard.SetTarget的目標(biāo)比去字符串解析TargetName要高效且更不容易寫錯。在代碼里做動畫時這是更推薦的做法。6.3 收起動畫反向播放并清理時鐘收起動畫的思路正好相反但要注意菜單項如果依次隱藏應(yīng)該從后往前藏視覺上更順滑。這里我不再重復(fù)整段代碼把最核心的把控點(diǎn)列一下private void CloseSidebar() { var closeStoryboard new Storyboard(); var fadeMask new DoubleAnimation { From 1, To 0, Duration TimeSpan.FromMilliseconds(250) }; Storyboard.SetTarget(fadeMask, maskLayer); Storyboard.SetTargetProperty(fadeMask, new PropertyPath(Opacity)); var slidePanel new DoubleAnimation { From 0, To -260, Duration TimeSpan.FromMilliseconds(300), EasingFunction new CubicEase { EasingMode EasingMode.EaseIn } }; Storyboard.SetTarget(slidePanel, sidebarTranslate); Storyboard.SetTargetProperty(slidePanel, new PropertyPath(X)); closeStoryboard.Children.Add(fadeMask); closeStoryboard.Children.Add(slidePanel); closeStoryboard.Completed (s, e) { maskLayer.Visibility Visibility.Collapsed; sidebarPanel.Visibility Visibility.Collapsed; }; closeStoryboard.Begin(); }這里的關(guān)鍵點(diǎn)是在Completed事件里把Visibility設(shè)回Collapsed。如果不這樣做遮罩雖然透明了但還占據(jù)著渲染層級鼠標(biāo)穿透不了點(diǎn)擊事件會被擋住。同樣側(cè)邊欄的Opacity恢復(fù)了但它還在那里也有可能會攔截鼠標(biāo)區(qū)域。這個細(xì)節(jié)是很多側(cè)邊欄動畫“界面像卡住了”的真正原因。6.4 動畫期間的輸入遮擋與IsHitTestVisible側(cè)邊欄展開動畫播放期間用戶可能還沒等動畫徹底結(jié)束就急著點(diǎn)擊菜單。如果此時遮罩層的Visibility是Visible但Opacity還在變化它仍然會攔截鼠標(biāo)事件。比較穩(wěn)妥的做法是動畫結(jié)束后再讓遮罩響應(yīng)點(diǎn)擊或者使用IsHitTestVisibleFalse來暫時禁用它等動畫結(jié)束再打開。我在項目里的習(xí)慣是遮罩層淡入期間把IsHitTestVisible設(shè)為False動畫結(jié)束時置True。收起動畫開始時置False結(jié)束之后把兩個元素都設(shè)為Collapsed。這樣既能保證動畫流暢又不會偶爾“吃”掉一兩次點(diǎn)擊。7. 動畫的代碼組織ViewModel與MVVM模式下的動畫怎么放現(xiàn)在的項目基本都走M(jìn)VVM動畫是UI行為理論上屬于View層。但是動畫的觸發(fā)時機(jī)往往和ViewModel里的狀態(tài)變化強(qiáng)相關(guān)這就容易出現(xiàn)“代碼到底該寫在哪一層”的糾結(jié)。我分享一下自己比較順手的做法。7.1 觸發(fā)型動畫不要直接用EventTrigger綁定ViewModel很多初學(xué)者會在Button上直接寫EventTrigger然后指定RoutedEventClick再BeginStoryboard。這在MVVM里很別扭因為Storyboard本質(zhì)上需要拿到具體的控件實例而ViewModel不應(yīng)該直接知道界面上有哪個控件、該怎么動。我的做法是分成兩層ViewModel里只暴露狀態(tài)比如IsSidebarOpen、IsPanelVisible。View層監(jiān)聽狀態(tài)變化在Code-Behind里寫動畫觸發(fā)邏輯。這樣動畫邏輯全部集中在View層ViewModel保持干凈測試也方便。7.2 通過數(shù)據(jù)觸發(fā)器的StoryboardSetter與觸發(fā)器之外的路徑對于“狀態(tài)數(shù)據(jù)變?yōu)槟硞€值就播放動畫”的場景可以用DataTrigger配合EnterActions來播動畫Border.Style Style TargetTypeBorder Style.Triggers DataTrigger Binding{Binding IsActive} ValueTrue DataTrigger.EnterActions BeginStoryboard Storyboard DoubleAnimation Storyboard.TargetPropertyOpacity To1 Duration0:0:0.3 / /Storyboard /BeginStoryboard /DataTrigger.EnterActions DataTrigger.ExitActions BeginStoryboard Storyboard DoubleAnimation Storyboard.TargetPropertyOpacity To0.3 Duration0:0:0.3 / /Storyboard /BeginStoryboard /DataTrigger.ExitActions /DataTrigger /Style.Triggers /Style /Border.Style這里想提醒一個點(diǎn)DataTrigger里的EnterActions和ExitActions在同一個Storyboard對象里如果有多個Trigger同時觸發(fā)動畫之間可能相互覆蓋。此時用VisualStateManager管理狀態(tài)切換往往更可靠因為它有狀態(tài)切換的優(yōu)先級和過渡機(jī)制。7.3 Code-Behind里動畫的“可測試性”怎么做動畫代碼集中在View層不代表完全不能測試?？梢园选皠赢嫷膭?chuàng)建”和“動畫的執(zhí)行”分離創(chuàng)建部分接收參數(shù)返回Storyboard執(zhí)行部分調(diào)用Begin()。這樣創(chuàng)建部分是純函數(shù)可以單測執(zhí)行部分只做最簡單的調(diào)用。public static Storyboard BuildSlideAnimation(FrameworkElement target, double fromX) { var transform new TranslateTransform(fromX, 0); target.RenderTransform transform; var slide new DoubleAnimation { To 0, Duration TimeSpan.FromMilliseconds(300), EasingFunction new CubicEase { EasingMode EasingMode.EaseOut } }; Storyboard.SetTarget(slide, transform); Storyboard.SetTargetProperty(slide, new PropertyPath(X)); var storyboard new Storyboard(); storyboard.Children.Add(slide); return storyboard; }這樣一套寫下來動畫邏輯就不至于成為“改一次就崩潰、沒人敢動”的黑盒。8. 最后分享一點(diǎn)我自己的動畫設(shè)計心得代碼能力很重要但動畫做得好不好很多時候還取決于對交互的把握。我做WPF項目這幾年最大的感觸是動畫是界面信息的“語氣”。一個確認(rèn)刪除的彈窗如果只用平淡的淡入淡出用戶可能感受不到這操作的分量感但如果在紅色危險區(qū)按鈕上做一點(diǎn)點(diǎn)急促的回彈用戶會潛意識里變得更慎重。反過來說一個儀表盤刷新動畫如果每次都來一遍花哨的回彈用戶很快就會覺得疲勞甚至懷疑系統(tǒng)是不是卡住了。所以我會把界面動畫粗略分成三種語氣信息型動畫數(shù)值刷新、滾動條滑動追求平穩(wěn)、快速、不打擾傾向用普通線性或輕微緩動時長控制在200毫秒以內(nèi)。導(dǎo)航型動畫頁面切換、側(cè)邊欄展開、Tab切換追求清晰的方向感和連貫性適合用CubicEase配合中等時長300-400毫秒讓人意識到“我換了位置”。強(qiáng)調(diào)型動畫注冊成功、危險操作、特殊獎勵追求注意力放大可以用回彈、彈性甚至配合短暫的顏色閃爍但這種動畫一整屏最多一兩個不要全家桶式濫用。還有一個小技巧是所有動畫都最好配有“可退出”的設(shè)置。在系統(tǒng)設(shè)置里放一個“關(guān)閉動畫”選項或者在用戶開啟“減少動態(tài)效果”系統(tǒng)選項時主動降級動畫效果。這不僅是對不同用戶偏好的尊重也是讓你的應(yīng)用走得更遠(yuǎn)的基本功。寫到這里WPF動畫的核心路徑基本都走完了從依賴屬性、時鐘、時間軸這些底層概念到DoubleAnimation、Storyboard的具體寫法再到緩動函數(shù)、性能優(yōu)化、MVVM下的代碼組織以及最后這個側(cè)邊欄導(dǎo)航的實戰(zhàn)案例。動畫不是給界面加的特效它是界面表達(dá)信息、塑造手感的一部分。希望這篇指南能讓你下一次做界面的時候敢于讓每個面板、每個進(jìn)度條、每次狀態(tài)切換都擁有自己的節(jié)奏和情緒。