2021-URP版本升级！【TAshader工程】七色UI特效数学算法-环绕动画丰富案例-全算法

七种颜色，七个范例，7个模块，七个兄die,七倍的快乐
部位同学希望有一个2021 URP的版本，在2022年6-23日特别升级。之前购买过的同学 在之前的帖子中就能直接更新升级。
旧版本-默认管线的地址
【TAshader工程】七色UI特效数学算法-环绕动画丰富案例-全算法

构成我们这一期小学难度的TA学习资料，UI数学算法

包含2017和2021-URP两个版本
有些同学可能比较怕数学，担心看不懂，别怕，兄die，这是只要九年义务教育及格就一定能看懂的程度！

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

场景文件在Scene目录下

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

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

更多精彩图片 请登录

本帖内容

• unity2017.4 全工程
• 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%
• 节约了更多贴图 和模型 的计算，总体来说 ，应该是有更佳的效率
  

更多精彩图片 请登录

更多精彩图片 请登录

后续更新

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

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

666

悄悄路过

好强

6666

6666666666

谢谢分享！！！！！！！！！！！！！！！！

回复看看价格

谢谢分享

感谢分享

楼主真棒啊

6666

6666666666666666666666

1

看看

学习一下 赞

感谢分享

不错的效果，先拿走收藏了。。。

感谢分享

1