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

索引

• Shiny 閃亮
• 思路分析
• • 閃亮區域
  • 柔和度
  • 光澤度
  • 旋轉
  • 閃亮動畫

Shiny 閃亮

Shiny以另一種方式實現了LOGO流光，在表現效果上與其相差無幾，不同的地方是Shiny不需要指定流光遮罩以及流動的圖片紋理等，他是直接通過UV計算出一塊區域，然后疊加顏色，以達到亮閃閃的效果，最終的效果圖：

思路分析

首先，按照LOGO流光的思路，我們只需要選出一片uv區域，為區域疊加顏色，并使得區域的中心越亮，越往區域的兩邊擴散越暗，在不考慮動畫的情況下，這便是我們想要的區域閃亮效果了。

因為要給人一種一閃而過的感覺，所以我們的閃亮區域必定是上下貫通（左右移動）或者左右貫通（上下移動）的情況，如上文的最終效果圖，閃亮區域便是上下貫通的，進行左右移動達到一閃而過的效果。

閃亮區域

我們先考慮上下貫通的方式，設想中，我們的閃亮區域如下：

我們將閃亮的值想象為0-1，則區域最中心為1（最亮），越往兩邊擴散就越接近0（最暗）：

根據經驗，很明顯我們這里可以使用uv的橫坐標來轉換至閃亮的值，已知uv的橫坐標值區間如下：

那么我們的算法便明確了，即是將區間[0,1]（也即是uv.x的取值范圍）映射為區間[0,1,0]！

首先，區間[0,1]可以進一步抽象為區間[0,0.5,1]，然后，先將區間[0,0.5,1]映射至區間[-1,0,1]：

//將區間[0,0.5,1]，映射到區間[-1,0,1]half value1 = uv.x * 2 - 1;

然后再將區間[-1,0,1]，通過取絕對值映射到區間[1,0,1]：

//將區間[0,0.5,1]，映射到區間[-1,0,1]half value1 = uv.x * 2 - 1;//將區間[-1,0,1]，映射到區間[1,0,1]half value2 = abs(value1);

最后，將區間[1,0,1]倒置，便得到我們的所求結果，區間[0,1,0]：

//將區間[0,0.5,1]，映射到區間[-1,0,1]half value1 = uv.x * 2 - 1;//將區間[-1,0,1]，映射到區間[1,0,1]half value2 = abs(value1);//倒置區間[1,0,1]，得到區間[0,1,0]half value3 = 1 - value2;

到這里，得到的值value3便是一個根據當前輸入的uv.x值，返回的閃亮的值，此值的區間為[0,1,0]，中間亮，兩邊暗。

柔和度

我們可以使用如下方式將值value3 [0,1,0]進行平滑，得到的power就是我們最終的閃亮強度：

//通過smoothstep將區間[0,1,0]平滑，得到閃亮強度powerhalf power = smoothstep(0, softness, value3);

這里的softness是外部輸入的值，我們命名為柔和度，柔和度為何能夠達到平滑效果呢？我們看圖分析一下。

首先，當柔和度最低時（這里是0.01），效果上表現為完全不柔和：

我們分析一下公式，將柔和度0.01帶入：

//通過smoothstep將區間[0,1,0]平滑，得到閃亮強度powerhalf power = smoothstep(0, 0.01, value3);

根據smoothstep方法特性，只要輸入值value3值大于0.01的，都會返回1，賦予power，也即是說，經過一輪平滑運算，我們原本的value3區間：

//擴大區間細節[0,0.1,0.2,...0.9,1,0.9...0.2,0.1,0]

被轉換為了power區間：

//擴大區間細節[0,1,1,...1,1,1...1,1,0]

也即是說，極低柔和度使得所有稍微有一點亮度的地方，都變為了亮度為1，這便是柔和度的體現。

反之，當柔和度最高時（這里是1），此平滑運算將返回value3原值，他本身就是一個帶有平滑效果的區間：

光澤度

由上文我們已經求得了閃亮的亮度值power，我們將亮度值乘以一個顏色，便得到我們最終的閃亮顏色了，在這里，我們再度引入一個控制參數光澤度，用他來控制我們輸出的顏色值：

//通過光澤度插值得到閃光顏色shinyColorhalf3 shinyColor = lerp(fixed3(1, 1, 1), color.rgb, gloss);//輸出最終顏色（原始顏色 + 閃亮顏色）color.rgb += shinyColor * power;

這里的光澤度gloss在純白色與本身顏色之間插值，當光澤度為0，閃亮顏色為白色（三通道值相等，乘以power后會被降低部分值），任意顏色的三通道RGB累加上相同的值后，并不會改變其色相，也就是說，他該是紅色還是紅色，該是藍色還是藍色，看起來就只是整體變亮了一點，沒有光澤感：

當光澤度為1時，閃亮顏色為自身顏色，自身顏色累加自身顏色，這就使得紅色的地方越紅，藍色的地方越藍，極具光澤感：

旋轉

如上的計算，我們得到的只是一個垂直的，上下貫通的閃亮區域，我們想要將他任意旋轉，比如下面這樣：

這樣：

這樣：

如何實現這樣的效果呢？

我們再回想一下最開始求得閃亮區域的算法：輸入一個uv坐標，根據uv坐標的x值求得此坐標點的閃亮顏色強度。

我們要實現旋轉效果，直接將uv坐標旋轉后再輸入，輸出的不就是該uv坐標的真實坐標點的閃亮顏色強度！

所以算法很簡單，說干就干，直接轉一下uv：

//uv旋轉 uv = RotatePoint2(uv, float2(0.5, 0.5), radians(_Rotation));

RotatePoint2的功能是沿著一個圓心，將輸入的二維點旋轉指定弧度：

//將二維頂點point2，沿著圓心center，順時針旋轉radian弧度 float2 RotatePoint2(float2 point2, float2 center, half radian) {half radius = distance(point2, center);half angle = atan((point2.y - center.y) / (point2.x - center.x)) - radian;point2.x = cos(angle) * radius + center.x;point2.y = sin(angle) * radius + center.y;return point2; }

算法也即是三角函數，這里就不做詳解了。

閃亮動畫

要實現閃亮動畫，我們只需要改變輸入的_Position值即可，不需要借助_Time參數，直接添加一個動畫播放器：

到此，這個簡單的閃亮效果就基本完結了，如果還有不明白的地方可以查閱源碼，當然，博客中的代碼不一定與源碼完全相同，這里的本意只是介紹思路，具體的實現過程中可能有一些語句上的優化，當然核心算法是一樣的。

總結

以上是生活随笔為你收集整理的【Unity Shader】Special Effects（三）Shiny 闪亮（UI）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。