[WPF] 用 Effect 實現線條光影效果
1. 前言
幾個月前 ChokCoco 大佬發佈了一篇文章：
CSS 奇技淫巧 | 妙用 drop-shadow 實現線條光影效果
在文章里實現了一個發光的心形線條互相追逐的效果：
現在正好有空就試試用 WPF 實現一下。在實現過程中我用到這些知識和技巧：
- Segoe Fluent 圖標字體
- 在 Blend 中創建 Path
- 計算 Path 的長途
- Path 的邊框動畫
- VisualStudio 的設計時數據支持
- 自定義 Effect
這篇文章將講解如何使用這些知識和技巧模仿他的動畫效果。
2. 圖標字體和 Path
雖然 ChokCoco 大佬已經給了一個心形的路徑，但總不能每次都期待別人給的東西。對於 WPF 開發者來說，用圖標字體和 Blend 可以輕鬆創建一些簡單的路徑。
首先要找到一個心形的圖標字體，在 Windows 10/11 可以直接使用 Segoe MDL2 和 Segoe Fluent 字體，這兩個是隨 Windows 10/11 發佈的系統內置字體。下面的頁面列出了可用的 Segoe Fluent 字體：
//docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font
找到 HeartFill 的 Unicode 碼位 eb52，然後打開 Microsoft Blend for VisualStudio 2019（更新的版本砍掉了這篇文章用到的功能），創建一個 WPF 應用，在 XAML 中輸入下面這段 XAML：
<TextBlock FontFamily="Segoe Fluent Icons" Text="" Foreground="#C72335" FontSize="300"/>
這時候應該可以看到一個心形，他就是 HeartFill 的文字圖標。在設計視圖選中它，右鍵選擇 Path -> Convert to Path（中文版本下應該是 轉換為路徑）：
這樣 TextBlock 就被轉換為一個相同形狀的 Path。接下來將 Fill 設置為空，Stroke 和 StrokeThickness 分別設置為 Black 和 10，Path 的形狀就如下圖所示，選中左邊工具欄的 Pen 工具還可以調整 Path 的形狀：
這時候對應的 XAML 如下：
<Path Margin="0,18.75,492,137.75"
Data="M80.859375,18.75 C91.894524,18.75 102.31933,20.849609 112.13379,25.048828 C121.94823,29.248047 130.76172,35.205078 138.57422,42.919922 C140.52734,44.873062 142.40723,46.777359 144.21387,48.632813 C146.02051,50.488297 147.90039,52.392593 149.85352,54.345703 C151.70898,52.392593 153.54004,50.488297 155.34668,48.632813 C157.15332,46.777359 159.0332,44.92189 160.98633,43.066406 C168.89648,35.449219 177.66113,29.56543 187.28027,25.415039 C196.8994,21.264648 207.22655,19.189453 218.26172,19.189453 C229.58983,19.189453 240.23436,21.362305 250.19531,25.708008 C260.15625,30.053711 268.82324,35.961914 276.19629,43.432617 C283.56934,50.903336 289.37988,59.619156 293.62793,69.580078 C297.87598,79.541031 300,90.185562 300,101.51367 C300,112.25586 297.97363,122.68066 293.9209,132.78809 C289.86816,142.89551 284.0332,151.75781 276.41602,159.375 L159.375,277.58789 C156.93359,280.0293 153.95508,281.25 150.43945,281.25 C147.02148,281.25 144.0918,280.0293 141.65039,277.58789 L23.876953,158.64258 C16.259766,150.92773 10.375976,142.0166 6.2255859,131.90918 C2.0751953,121.80176 0,111.2793 0,100.3418 C0,89.111343 2.0996094,78.564468 6.2988281,68.701172 C10.498046,58.837906 16.235352,50.195328 23.510742,42.773438 C30.786131,35.351563 39.331055,29.492188 49.145508,25.195313 C58.959957,20.898438 69.53125,18.75 80.859375,18.75 z"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill"
Stroke="Black"
StrokeThickness="10">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
</Path>
3. 計算 Path 的長途
拿到路徑後，下一步需要計算它的長度。這個長度不需要太精確，可以用 GetFlattenedPathGeometry 獲取 PathGeometry 對象的多邊形近似 Geometry，然後計算每條邊的長度：
public double GetLength(Geometry geo)
{
PathGeometry path = geo.GetFlattenedPathGeometry();
double length = 0.0;
foreach (PathFigure pf in path.Figures)
{
Point start = pf.StartPoint;
foreach (PolyLineSegment seg in pf.Segments)
{
foreach (Point point in seg.Points)
{
length += (start - point).Length;
start = point;
}
}
}
return length;
}
4. Path 的邊框動畫
上一步計算出的 Path 長度是 898。
然後通過 StrokeDashArray 和 StrokeDashOffset 對 Path 做邊框動畫。因為 Path 的 StrokeThickness 是 10 像素，所以做邊框動畫時所有數值都要除以 10。
第一步，將 StrokeDashArray 設置為 29.9 59.9，它將 Path 的邊框分成兩部分，第一部分為實線，第二部分為空白。
第二步，然後用 DoubleAnimation 使 StrokeDashOffset 從 0 到 89.8 不斷循環，實現線條動畫的不斷循環。
第三步，添加一個相同的 Path，並讓它的動畫延遲一秒執行，這樣就實現了兩個心形線條的追逐動畫。
<DoubleAnimation RepeatBehavior="Forever"
Storyboard.TargetName="P1"
Storyboard.TargetProperty="StrokeDashOffset"
To="89.8"
Duration="0:0:2" />
<DoubleAnimation RepeatBehavior="Forever" BeginTime="0:0:1"
Storyboard.TargetName="P2"
Storyboard.TargetProperty="StrokeDashOffset"
To="89.8"
Duration="0:0:2" />
<Path x:Name="P1" />
<Path x:Name="P2" d:StrokeDashOffset="45" />
有關邊框動畫的更多內容，可以參考這兩篇文章：
5. VisualStudio 的設計時數據
現在我們只差讓這兩個 Path 發光了。但在這之前我們需要了解 VisualStudio 的設計時數據的概念。
設計時數據是你設置的模擬數據，使控件更易於在 XAML 設計器中進行可視化。d: 前綴用於設置設計時的屬性值，它隻影響設計視圖，不會編譯到正在運行的應用中。具體可以參考這篇文檔：
在 Visual Studio 中通過 XAML 設計器使用設計時數據
這是一個很實用的小技巧，由於上面的兩個 Path 重疊在一起，在設計視圖難以區分，所以用了 d:StrokeDashOffset="45" 讓其中一個錯開。這段內容只在設計視圖起作用，不會有其它副作用。
6. 自定義 Effect
在 WPF 中要做發光效果通常都是用 DropShadowEffect ，例如這樣：
<Path x:Name="P1" >
<Path.Effect>
<DropShadowEffect BlurRadius="40" ShadowDepth="0" Color="#f24983"/>
</Path.Effect>
</Path>
<Path x:Name="P2" d:StrokeDashOffset="45" >
<Path.Effect>
<DropShadowEffect BlurRadius="40" ShadowDepth="0" Color="#37c1ff"/>
</Path.Effect>
</Path>
但這樣顏色實在太淡，太淡了。為了解決這個問題，其中一種做法是疊加多個 Path，這樣它們的 Drop Shadow 也會疊加起來，實現一個很亮的發光效果。但是這裡會需要對疊加的多個 Path 都做動畫，恐怕性能會很有問題。
另一種方式是自定義一個 Effect，它的代碼只需要如下幾行：
float Amount : register(C0);
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 srcColor = tex2D(input, uv);
srcColor.rgb *= Amount;
srcColor.a *= Amount;
return srcColor;
}
這只是個很簡單的 Effect，就是將所有像素的顏色和透明度乘以一個指定值。我不知道這種效果叫什麼名字，但因為它最終實現了發光的效果，所以命名為 GlowEffect。使用 GlowEffect 配合 BlurEffect，上面暗淡的顏色就變得明亮起來：
<Grid>
<Grid.Effect>
<effects:GlowEffect Amount="5" />
</Grid.Effect>
<Grid>
<Grid.Effect>
<BlurEffect Radius="70" RenderingBias="Quality" />
</Grid.Effect>
<Path x:Name="P1b" Stroke="#f24983" />
<Path x:Name="P2b"
d:StrokeDashOffset="45"
Stroke="#37c1ff" />
</Grid>
</Grid>
<Grid>
<Path x:Name="P1" />
<Path x:Name="P2" d:StrokeDashOffset="45" />
</Grid>
關於自定義 Effect 的更多內容，可以參考 WalterLv 大佬的這篇文章：
WPF 像素着色器入門：使用 Shazzam Shader Editor 編寫 HLSL 像素着色器代碼
7. 成果
最後的成果如下：
8. 源碼
//github.com/DinoChan/wpf_design_and_animation_lab
