Unity UI 做图表动画

最新推荐文章于 2024-07-27 10:35:41 发布

迷牙

最新推荐文章于 2024-07-27 10:35:41 发布

阅读量949

点赞数 1

分类专栏： Unity UI 文章标签： Unity

本文链接：https://blog.csdn.net/BDDNH/article/details/100574540

版权

该博客介绍了如何使用Unity创建图表动画。通过三张图片（背景、前景橘色、前景蓝色）配合Shader来实现图表的动态效果。关键在于设置图标中心点和各个外部点，通过随机生成坐标并转换为UV坐标，将数据传递给Shader，从而控制图标各点的位置，达到动画目的。

摘要由CSDN通过智能技术生成

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 =