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;
                }
发布了31 篇原创文章 · 获赞 2 · 访问量 2790

猜你喜欢

转载自blog.csdn.net/BDDNH/article/details/100574540