更新日期：2021年8月16日。
Github源碼：[點我獲取源碼]

索引

• 【系列簡介】
• 【SpecialEffects 模塊簡介】
• 【UI特效的動畫播放器】
• • 下載SpecialEffects模塊
  • 使用進(jìn)階版UI組件
  • 使用、移除UI特效
  • 使用UI特效動畫播放器
  • 動畫參數(shù)
  • 動畫曲線
  • 外部調(diào)用動畫播放器
  • 其他特效
  • Demo場景

【系列簡介】

本專欄作為SpecialEffects的Shader學(xué)習(xí)教程，會逐步講解各種特效的設(shè)計思路和實現(xiàn)算法，力求將晦澀難懂的著色器語句通俗化。

【SpecialEffects 模塊簡介】

SpecialEffects模塊是一個基于Unity的Shader庫，里面包含多個UI特效和模型網(wǎng)格特效，主要是自己學(xué)習(xí)和平時積累而來，雖然每個特效的效果表現(xiàn)和設(shè)計思路可能并非首創(chuàng)，但實現(xiàn)算法皆是自己一行一行代碼敲出來的，如有雷同，純屬巧合。

【UI特效的動畫播放器】

在這里，我們先引入UI特效的動畫播放器，作為快速驅(qū)動UI特效表現(xiàn)效果的簡單又好用的利器，他支持針對任意Shader的任意屬性定制動畫效果。

下載SpecialEffects模塊

首先，可以使用模塊管理器下載SpecialEffects模塊：

也可以直接通過文章開頭的源碼鏈接進(jìn)入到SpecialEffects倉庫頁面，克隆或下載倉庫，不過需要注意的是，手動克隆時，請務(wù)必要將整個SpecialEffects文件夾放入到以下路徑：Assets -> Plugins -> HT，如下圖：

使用進(jìn)階版UI組件

我們在任意Image組件或RawImage組件上點擊鼠標(biāo)右鍵，在彈出的菜單中選擇Upgrade UI Component選項，即可將組件升級為進(jìn)階版，反之，點擊Downgrade UI Component即是反向降級為普通組件。

注意：只有進(jìn)階版組件支持UI特效動畫播放器。

使用、移除UI特效

進(jìn)階版UI組件與常規(guī)UI組件幾乎一模一樣，只是多了一個UI特效的快捷設(shè)置面板，點擊Use Special Effects按鈕便可以選擇需要使用的特效，同時，已經(jīng)使用了特效的組件，點擊Remove Special Effects按鈕便可以移除特效：


事實上，這里的使用UI特效也即是創(chuàng)建了一個材質(zhì)球，并賦予給組件，所以我們很容易就能找到場景中自動創(chuàng)建的特效材質(zhì)球，可以自行重命名并規(guī)范移入其他文件夾即可。

使用UI特效動畫播放器

在為組件使用了某一特效之后，組件的屬性面板會自動展開Animation的區(qū)域，點擊New Animation按鈕即可創(chuàng)建一個動畫，此時會自動彈出屬性選擇菜單，選擇將你的動畫附加到哪一個屬性（其實也即是Shader中公開到Unity的屬性）：

動畫參數(shù)

比如上面我們使用了方格鏤空特效，而方格鏤空特效公開的屬性就有鏤空區(qū)域和鏤空透明度兩個，我們選擇鏤空區(qū)域。

動畫參數(shù)如下：
1.Display Name：屬性的顯示名稱。
2.Property Name：屬性名稱。
3.Value Type：屬性的類型（比如這里的鏤空區(qū)域為Vector4類型）。
4.Curve：動畫曲線。
5.Start Value：動畫起始值。
6.End Value：動畫結(jié)束值。
7.Loop：動畫是否循環(huán)。
8.Loop Mode：動畫循環(huán)模式（Restart為重新開始，PingPong為終點倒回）。
9.Duration：動畫持續(xù)時間。
10.Play On Start：在呼叫Start時自動播放。

動畫曲線

動畫播放時，播放器會根據(jù)播放進(jìn)度和動畫曲線從動畫起始值到動畫結(jié)束值之間取值賦予到材質(zhì)的對應(yīng)屬性，這里的動畫曲線可以實現(xiàn)任意的緩動效果。

比如這樣：

運行效果：

這樣：

運行效果：

請注意：播放曲線的X坐標(biāo)值0-1對應(yīng)了播放進(jìn)度的開始-結(jié)束，Y坐標(biāo)值0-1對應(yīng)了屬性的開始值-結(jié)束值。

外部調(diào)用動畫播放器

外部可以通過如下的方式調(diào)用動畫播放器：

public class Test : MonoBehaviour {//進(jìn)階版Image組件public AdvancedImage Image;private bool _isPlaying;private void Update(){if (Input.GetKeyDown(KeyCode.P)){//播放或停止動畫_isPlaying = !_isPlaying;//設(shè)置播放器的播放狀態(tài)（設(shè)置到屬性 _PiercedRect 的播放器，同一屬性只能有一個播放器）Image.SetEffectsPlaying("_PiercedRect", _isPlaying);}} }

當(dāng)然，最恰當(dāng)?shù)姆绞绞侵苯荧@取到該屬性的播放器，再進(jìn)行操作：

public class Test : MonoBehaviour {//進(jìn)階版Image組件public AdvancedImage Image;//屬性_PiercedRect的播放器（同一屬性只能有一個播放器，所以他是唯一的）private UIEffectsPlayer _piercedRect;private void Start(){//通過屬性名稱獲取動畫播放器_piercedRect = Image.GetEffectsPlayer("_PiercedRect");}private void Update(){if (Input.GetKeyDown(KeyCode.P)){//播放或停止動畫_piercedRect.IsPlaying = !_piercedRect.IsPlaying;}if (Input.GetKeyDown(KeyCode.Space)){if(!_piercedRect.IsPlaying){//設(shè)置動畫播放進(jìn)度（播放位置）if (_piercedRect.PlayPosition < 1){_piercedRect.PlayPosition = 1;}else{_piercedRect.PlayPosition = 0;}}}} }

其他特效

當(dāng)然，使用其他的任意Shader也是支持UI特效播放器的，比如我們使用UI/Default：

特效的名稱欄會顯示一個<Other>，因為這不是隸屬于SpecialEffects的特效。

不過，同樣也可以為他的屬性添加動畫：

Demo場景

最后，我們可以瀏覽一下UIEffectsDemo場景，里面包含一些UI特效的預(yù)覽（某些圖片資源來源于網(wǎng)絡(luò)，如要商用請刪除）：


后續(xù)，我們將對各個特效的設(shè)計思路以及實現(xiàn)算法進(jìn)行詳解。

總結(jié)

以上是生活随笔為你收集整理的【Unity Shader】Special Effects（一）UI特效的动画播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。