【TAshader工程】七色UI特效数学算法-环绕动画丰富案例-全算法

2021-6-23更新Unity2021-URP版本，新的链接在付费框内，已经购买的用户可以免费获取！

七种颜色，七个范例，7个模块，七个兄die,七倍的快乐
构成我们这一期小学难度的TA学习资料，UI数学算法

有些同学可能比较怕数学，担心看不懂，别怕，兄die，这是只要九年义务教育及格就一定能看懂的程度！

尊敬的游客，如果您要查看本帖关注 或 回复可见内容请关注或回复后刷新页面查看！

场景文件在Scene目录下

关键特性和关键字【Shader数学算法】

• shader数学算法，依靠数学公式对0-1内的数字在UV坐标空间一顿操作，然后输出到像素，显示在任意模型或面片上
• 可以用在很多地方，常见为 UI高亮提示效果，当然作为场景中的霓虹灯，特殊特效也可以使用这些方法
• 适合新人TA学习基础算法，也适合UI同学给自己的UI作品加分
• 适合商业游戏项目直接使用，大家的需求往往都差不多，都是转啊转的没毛病
• 这里还有很多不常见的新框体动画效果，可以配合奇特的贴图，出现奇特的效果
  

更多精彩图片 请登录

本帖内容

• Unity2017.4 、Unity2021全工程
• 1个scene案例 包括的各种效果prefab
• UI界面部分只是背景图，不是图素
• 7个 ASE源工程 shader  和 40多个材质案例
• 视频中展示的材质库,组合不同图素更是可以快速千变万化
• 在微元素内购买本贴可以用于所有商业的项目
• 购买本贴，如遇问题和算法问题，可以在元素 TA群 318958005 找元素界王解答
  

更多精彩图片 请登录

对比传统
用shader数学算法制作的UI 小动画，比传统做法（模型UV  和 序列动画）效率效果都高N个数量级
纯数学算法拥有以下各种优势
1 显存内存容量：

• 很多传统帧序列要做到较为流畅的边框动画，需要5X5的帧序列来做到25帧，至少需要1024~2048的贴图才能勉强高清
• 数学算法不需要这么多画面单帧，只需要一个纹理样式基础 图，256就可以做的非常清晰。
  

2  流畅度

• 序列动画 一般 4X4  5X5  很少有到6X6，也只有6X6能突破30帧的画面，但消耗不菲，且清晰度有限
• 数学算法的shader ,帧率可以不锁，也可以完全匹配应用程序的 最大帧率，做到极为流畅，及时是120帧画面，每帧也流畅舒适
  

3 时间自由

• 传统做法的时间是固定，或者时间需要用曲线重新去K序列，帧序列做法考虑流畅的话，基本上不能降低速度，只能快速播放，越快跳帧越少
• 数序shader无惧时间缩放，再慢的速度 也可以完美适配帧率，不可能存在卡顿效果，比如3秒转一圈，这种细致的动画也毫无难度，设置一个参数即可
  

4  环宽设定

• 无论是 UV动画还是帧序列 这一点都是做不到的，不能实时调节边框宽度，大R-小R就是环宽，一般流程要做死，很难适配到不同的宽度UI
• 数学shader 就是一个参数的事情，所以即使其他条件不变，做出不同环宽也可以有很大的视觉样式差异
  

5 色彩与图素更换

• UV模型是可以随时变化的，这与数学算法一致，但是帧序列动画这种，是不可能实时换图素的，颜色也要看原序列图的颜色是否适合换色
• shader算法 可以做到快速的 换图素 和 颜色，图素一般使用 二方或者 4方，总归有连续性方便适配
  

6 无限圆滑

• 模型做的环绕动画，如果是实时，总归是有模型段数和三角面的 ，在一定距离可能光滑，但放大后可能段数明显，且越光滑，需要的多边形越高，帧序列放大则画质低
• shader算法 用到圆周率函数值 【派】计算， 所以就算是显微镜看 也不会出现模型的卡角。如丝顺滑，且没有多边形的显存，容量的消耗，大图多层叠加，优势越明显
  

7 特殊规则

• 如箭头，环绕球变小等属于特定规则，需要特定的图素和数字配合
• 拥有源文件掌握即可随意修改，创作趣味性 和 作品的专属效果
• 如小球环绕，后面拖尾的小球数量可以控制
• 一个二方连续做圆周运动需要重复几次等
  

更多精彩图片 请登录

这套ShaderUI实用案例可以学习到什么？

• 这个工程可以帮助你学习哪些知识点？
• 基础图像和坐标系知识
• 扩展图像的思路，如果通过简单图像生成复杂的组合图像
• 色域转化控制，比如吧（0~1）分成N个亮度梯度，再把这个梯度作为UV的U，结合另外的V结果
• 抗锯齿设计，默认程序化图像有级强的锯齿，有很多小技巧来降低锯齿
• 多pass混合，比如底下一个轨道，上面有一个环绕的动画去循环，但在1个面片上
  

更多精彩图片 请登录

性能和优化？

• 算法的效率极高，都是一些插入 四则运算，对于GPU来说算这些东西，简直是毛毛雨
• UV动画 和 帧序列也是需要UV计算和转换的，他们在shader的复杂度来说是差不多，可能节点多个20%
• 节约了更多贴图 和模型 的计算，总体来说 ，应该是有更佳的效率
  

更多精彩图片 请登录

更多精彩图片 请登录

后续更新

• 准备升级一些六边形的形状，这个也是常见
• 升级 长宽比不同的矩形按钮，但转速稳定
  

更多精彩图片 请登录

更多精彩图片 请登录

绝对的好东西啊

看起来很不错啊

好东西啊，买了买了

葫芦娃葫芦娃本领ing大

这个感觉一般

。。。。。。听配乐我裂开来了

好屌啊 感觉自己好穷啊

啊····真香····希望界王多出一些这样的干货

看看

厉害

厉害

哇塞 看着好好啊
好方便的样子

看看感觉

我的文档无无无无

买买买

厉害

感谢分享

6

求分享 谢谢楼主