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