Unity UI 做 圖表動畫

UI分爲三張圖片,背景圖,前景橘色,前景藍色,三張圖片大小一致,前景就是沒有圖片的image,填充的顏色。形狀是通過shader改變的。

這是一個圖標的基本結構,center是中心點,1、2、3...是圖標最外面點。靠這幾個點控制圖標點的位置。

通過隨機center到數字點之間的座標,可以得到每個支點的座標。然後轉換爲UV座標

 

然後把UV座標傳遞給shader             

  fixed4 frag(v2f i) : SV_Target
                {
                    float slope1 = (_point3.y - _point1.y) / (_point3.x - _point1.x);
                    float slope2 = (_point2.y - _point1.y) / (_point2.x - _point1.x);
                    float slope3 = (_point2.y - _point3.y) / (_point2.x - _point3.x);
                    
                    _Color.a *= step(0, (i.uv.x -_point1.x) * slope1 - i.uv.y + _point1.y);
                    _Color.a *= step(0, i.uv.y - (i.uv.x - _point1.x) * slope2 - _point1.y);
                    _Color.a *= step(0, (i.uv.x - _point3.x) * slope3  -i.uv.y + _point3.y);


                    _Color.a *= 0.5;


                    return _Color;
                }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章