WPF 用 Effect 實現線條光影效果

幾個月前 chokcoco 大佬發布了一篇文章：

css 奇技淫巧 | 妙用 drop-shadow 實現線條光影效果

現在正好有空就試試用 wpf 實現一下。在實現過程中我用到這些知識和技巧：

這篇文章將講解如何使用這些知識和技巧模仿他的動畫效果。

雖然 chokcoco 大佬已經給了乙個心形的路徑，但總不能每次都期待別人給的東西。對於 wpf 開發者來說，用圖示字型和 blend 可以輕鬆建立一些簡單的路徑。

首先要找到乙個心形的圖示字型，在 windows 10/11 可以直接使用 segoe mdl2 和 segoe fluent 字型，這兩個是隨 windows 10/11 發布的系統內建字型。下面的頁面列出了可用的 segoe fluent 字型：

找到 heartfill 的 unicode 碼位eb52，然後開啟 microsoft blend for visualstudio 2019（更新的版本砍掉了這篇文章用到的功能），建立乙個 wpf 應用，在 xaml 中輸入下面這段 xaml：

這時候應該可以看到乙個心形，他就是 heartfill 的文字圖示。在設計檢視選中它，右鍵選擇path->convert to path（中文版本下應該是轉換為路徑）：

這樣 textblock 就被轉換為乙個相同形狀的 path。接下來將 fill 設定為空，stroke 和 strokethickness 分別設定為 black 和 10，path 的形狀就如下圖所示，選中左邊工具欄的pen工具還可以調整 path 的形狀：

這時候對應的 xaml 如下：

拿到路徑後，下一步需要計算它的長度。這個長度不需要太精確，可以用 getflattenedpathgeometry 獲取 pathgeometry 物件的多邊形近似 geometry，然後計算每條邊的長度：

public double getlength(geometry geo)}}
return length;
}

上一步計算出的 path 長度是 898。

然後通過 strokedasharray 和 strokedashoffset 對 path 做邊框動畫。因為 path 的 strokethickness 是 10 畫素，所以做邊框動畫時所有數值都要除以 10。

第一步，將 strokedasharray 設定為29.9 59.9，它將 path 的邊框分成兩部分，第一部分為實線，第二部分為空白。

第二步，然後用 doubleanimation 使 strokedashoffset 從 0 到 89.8 不斷迴圈，實現線條動畫的不斷迴圈。

第三步，新增乙個相同的 path，並讓它的動畫延遲一秒執行，這樣就實現了兩個心形線條的追逐動畫。

實用的shape指南

用shape做動畫

現在我們只差讓這兩個 path 發光了。但在這之前我們需要了解 visualstudio 的設計時資料的概念。

設計時資料是你設定的模擬資料，使控制項更易於在 xaml 設計器中進行視覺化。d:字首用於設定設計時的屬性值，它只影響設計檢視，不會編譯到正在執行的應用中。具體可以參考這篇文件：

在 visual studio 中通過 xaml 設計器使用設計時資料

這是乙個很實用的小技巧，由於上面的兩個 path 重疊在一起，在設計檢視難以區分，所以用了d:strokedashoffset="45"讓其中乙個錯開。這段內容只在設計檢視起作用，不會有其它***。

在 wpf 中要做發光效果通常都是用 dropshadoweffect ，例如這樣：

但這樣顏色實在太淡，太淡了。為了解決這個問題，其中一種做法是疊加多個 path，這樣它們的 drop shadow 也會疊加起來，實現乙個很亮的發光效果。但是這裡會需要對疊加的多個 path 都做動畫，恐怕效能會很有問題。

另一種方式是自定義乙個 effect，它的**只需要如下幾行：

float amount : register(c0);
float4 main(float2 uv : texcoord) : color

這只是個很簡單的 effect，就是將所有畫素的顏色和透明度乘以乙個指定值。我不知道這種效果叫什麼名字，但因為它最終實現了發光的效果，所以命名為 gloweffect。使用 gloweffect 配合 blureffect，上面暗淡的顏色就變得明亮起來：

wpf 畫素著色器入門：使用 shazzam shader editor 編寫 hlsl 畫素著色器**

最後的成果如下：