ui unity 图片高亮_程序化生成UI模型与顶点动画
頂點動畫一般指通過頂點著色器對模型每個頂點獨立運動的方法。在游戲中遇到碎片爆破或者聚合一類的、涉及到大量同類物體在有序和無序之間切換的特殊效果，就非常適合將所有物體頂點每幀位移和形變的迭代交付給GPU進行并行運算制作頂點動畫。
本文主要介紹借助頂點動畫的思路在UI界面上的應用嘗試，通過程序化生成的方法生成定制UI面片，來制作取色盤系統的頂點動畫效果。
知乎視頻?www.zhihu.com實現這樣的輪盤效果需要解決兩個問題：
1、 繪制圓弧極坐標排列的色塊
2、 每個色塊交錯時序的展開動畫
UI面片繪制：
從最簡單的方形面片開始，使用unity 的Graphic類進行擴展幫助我們解決各種UI適配排序的問題，繪制mesh的步驟雖然有點繁瑣但并不困難，為四個頂點的位置和uv坐標賦值，然后用頂點順時針鏈接成兩個三角形，將定點的順序的序號依次存入indexBuffer。
我參考的是hallgrimgames的這篇文章：
https://www.hallgrimgames.com/blog/2018/11/25/custom-unity-ui-meshes
還有Saticmotion 的對大量mesh更新的方法：
https://saticmotion.github.io/Blog/2018/06/26/Generating-UI-Meshes-in-Unity.html
這里就不詳細解釋具體步驟了。
知乎視頻?www.zhihu.com很快你就會發現用純色直接填充的多邊形邊緣只要與xy軸方向有一點點偏差就會產生鋸齒。
這樣的情況在UI圖片上也會發生，如果仔細觀察會發現在圖片上并不是所有的邊緣都會產生鋸齒，產色鋸齒的邊緣通常邊界明暗對比比較大，而且過渡比較銳利，在模糊或者有外發光的邊緣就比較少有鋸齒。總之有一定過渡的邊緣就不容易產生鋸齒，通過unity的雙精度采樣，如果我們僅在色塊周圍加上像素的半透明描邊，邊緣的鋸齒效果就可以減弱很多，兩個像素過渡，鋸齒就已經很難察覺了，雖然這種方法會減少圖片的銳利程度（標準的矢量圖消除鋸齒會在邊緣增強一些對比度），但在一般手機１０８０p分辨率下這種損失幾乎無法察覺，而相比于后處理的消除鋸齒方案我們換來的是幾乎免費的消除鋸齒。
本次實現的邊緣處理使用了類似九宮格的處理方案，根據拉伸uv坐標繪制一個徑向漸變，在多邊形的邊緣產生過渡，在后面我們會向外拉伸這些漸變，形成模糊的邊緣。
知乎視頻?www.zhihu.com當取得了對繪制色塊的完全控制，繪制梯形的陣列就非常簡單了，設置一個圓心和色塊的高度和寬度，我們就可以根據到圓形的距離確定上底和下低的寬度，然后按照固定的角度和間距就可以用色塊排出我們想要的扇形陣列。
這時候橫向用直線段鏈接的邊緣就顯得非常不順暢，然而使用線段繪制這種小段圓弧會非常不劃算，我們將要把圓弧繪制的任務交給像素著色階段，繪制圓弧需要知道圓心的位置和圓弧的半徑，在繪制的時候圓心位置為所有頂點共享，可以由材質參數定義，前后圓弧半徑每個頂點有所不同，可以在使用一組材質坐標分別保存在每個頂點上。在著色階段根據每個像素到圓形的距離和圓弧半徑的差值計算透明度即可繪制圓弧邊緣。由于圓弧的加入，在繪制頂點時需留好余量，以免被邊緣截掉。
完成基本型以后我們需要考慮如何給每個色塊配置顏色，如果由現成的顏色數組我們可以直接講顏色賦值給頂點顏色，或者也可以將顏色保存在貼圖上，每個色塊根據自身在色盤中的位置配置保存一個材質坐標，這個表示位置的材質坐標在之后的動畫中也會派上用場。
點擊和旋轉
由于排布比較規則，點擊的判定可以通過點擊位置相對圓心的距離和角度計算。
知乎視頻?www.zhihu.com最后在要讓輪盤轉起來，還需要考慮如何處理色盤的邊界，由于色盤的顏色采樣的是貼圖，如果貼圖的warpmode 設置為repeat 的話，顏色就可以自然的循環起來。而輪盤實際旋轉的時候每過一列色塊的角度，所有色塊都會往回跳一格，并選取下一格的顏色，使得輪盤看起來在持續旋轉，但實際屏幕上一直顯示的是固定的一組色塊。
頂點動畫
完成了基本圖形的繪制我們就可以開始制作動畫了。
知乎視頻?www.zhihu.com對于展開動畫其實每一個色塊的運動使用的都是同一種動畫，但是由于色塊之間時間順序的差異，產生了看似很厲害的感覺。
單個色塊的運動是一個簡單的加速減速動畫，同時色塊的尺寸會隨著速度的變化進行響應的拉伸，作為其受力的表現。同時在運動時拉伸模糊邊緣產生簡單的動態模糊效果。
速度和形變都由時間控制，同簡單的表達式進行配置。
每一塊色塊的延遲播放時間會根據其在輪盤中橫向、縱向的位置以及自身配置的隨機數與配置的權重累加產生：
根據配置不同的權重可以產生各種不同的順序效果。
知乎視頻?www.zhihu.com色盤到HSB取色器的變化其實也是同樣的道理，我們可以在頂點上配置好一組新的坐標然后根據新位置重新計算顯示的顏色即可。在項目中只是選取了輪盤中間一塊區域對HSB中心方塊做了簡單的映射關系，根據預設的尺寸重新計算了新坐標，省下一組頂點坐標。
知乎視頻?www.zhihu.com知乎視頻?www.zhihu.com以上這些就是色盤頂點動畫實現的大致內容。這套方案其實還有很多可以擴展的效果，比如在點擊的反饋上，根據點擊的位置和時間可以制作擴散的抖動效果，你可以將色塊的運動和形變寫入RT單獨計算或者進行烘培，便可以解鎖做更多酷炫的模擬效果。由于本人也沒有具體實踐，有興趣的同學可以自行挖掘，歡迎交流！
總結
以上是生活随笔為你收集整理的ui unity 图片高亮_程序化生成UI模型与顶点动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么实现阵列装配_第九篇：磁盘阵列和群晖
- 下一篇： 丢丢电影院打不开看不了解决方法攻略