搜索
    element3ds.com
    微元素»资源 › 原创/研发/悬赏 › 原创TA技术美术 › 原创TA-Shader › 【TAshader工程】七色UI特效数学算法-环绕动画丰富案例- ...
    原创TA-Shader [Unity] 【TAshader工程】七色UI特效数学算法-环绕动画丰富案例-全算法
    发布于
    2024-5-5
    115358
    703
    原创TA/Shader
    Shader信息: 节点shader文件
    Shader类型: 特效 UI/界面 
    工程信息: 完整工程 
    使用的版本管线: Unity2017.4 、Unity2021

    您需要 登录 才可以下载或查看，没有账号？注册

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

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

    有些同学可能比较怕数学，担心看不懂，别怕，兄die，这是只要九年义务教育及格就一定能看懂的程度！
    尊敬的游客，如果您要查看本帖关注 或 回复可见内容请关注或回复后刷新页面查看！



    A2CC22.jpg

    Snipaste_2022-06-23_20-34-49.jpg 场景文件在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%
    • 节约了更多贴图 和模型 的计算，总体来说 ，应该是有更佳的效率


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





    Snipaste_2020-05-05_18-56-13.jpg
    Snipaste_2020-05-05_18-57-48.jpg
    Snipaste_2020-05-05_18-57-57.jpg
    参与人数 16 元素币 +238 活跃度 +424 贡献值 +1

    本帖被以下画板推荐:

    想要成大触，天天上元素

    使用道具 举报 登录

    回复 <
    nldxhsw  发表于 2020-5-6 22:18:26  
    677938#
    绝对的好东西啊
    回复 收起回复
    使用道具
    千水凝冰  发表于 2020-5-7 08:02:16  
    678531#
    看起来很不错啊
    回复 收起回复
    使用道具
    シキ  发表于 2020-5-5 20:15:40  
    2#
    好东西啊，买了买了
    回复 收起回复
    使用道具
    岚色花火  发表于 2020-5-5 21:02:04  
    3#
    葫芦娃葫芦娃本领ing大
    回复 收起回复
    使用道具
    凌一一  发表于 2020-5-5 22:13:56  
    4#
    回复 收起回复
    使用道具
    超级飞侠  发表于 2020-5-6 09:30:10  
    5#
    这个感觉一般
    回复 收起回复
    使用道具
    壮士~等等我~  发表于 2020-5-6 10:01:33  
    6#
    。。。。。。听配乐我裂开来了
    回复 收起回复
    使用道具
    路飞  发表于 2020-5-6 10:22:28  
    7#
    好屌啊 感觉自己好穷啊
    回复 收起回复
    使用道具
    天蝎  发表于 2020-5-6 10:31:25  
    8#
    啊····真香····希望界王多出一些这样的干货

    评分

    参与人数 1元素币 +1
    元素界王神... + 1 计划中！

    查看全部评分

    回复 收起回复
    使用道具
    小朱的自留地  发表于 2020-5-6 10:35:56  
    9#
    看看
    回复 收起回复
    使用道具
    JaricZou  发表于 2020-5-6 10:54:16  
    10#
    厉害
    回复 收起回复
    使用道具
    几点_77  发表于 2020-5-6 10:56:10  
    11#
    厉害
    回复 收起回复
    使用道具
    小小冒险家  发表于 2020-5-6 11:31:24  
    12#
    哇塞 看着好好啊
    好方便的样子
    回复 收起回复
    使用道具
    qq_旧巷_ffX  发表于 2020-5-6 11:36:55  
    13#
    看看感觉
    回复 收起回复
    使用道具
    dalaovip  发表于 2020-5-6 11:40:31  
    14#
    我的文档无无无无
    回复 收起回复
    使用道具
    元素动效狂  发表于 2020-5-6 11:45:36  
    15#
    买买买
    回复 收起回复
    使用道具
    plume  发表于 2020-5-6 11:47:00  
    16#
    厉害
    回复 收起回复
    使用道具
    volcanoFX  发表于 2020-5-6 11:49:32  
    17#
    感谢分享
    回复 收起回复
    使用道具
    qq_spinoza_AYH  发表于 2020-5-6 12:25:52  
    18#
    回复 收起回复
    使用道具
    242  发表于 2020-5-6 12:40:45  
    19#
    6
    回复 收起回复
    使用道具
    zy2346148  发表于 2020-5-6 12:47:44  
    20#
    求分享 谢谢楼主
    回复 收起回复
    使用道具
    12345678910... 36下一页
    回复

    快来发表你宝贵的意见吧！

    素材推荐
    元素界王 实名

    通过了实名认证的内容创造者

    十六倍界王拳

    + 关注 4806 发私信
  • RyanReos QueenMarika 模型

    RyanReos QueenMarika 模型

    价格：188元素币

    • 主题
    44
    精华
    30
    超神
    0
    扩散
    0
    微金
    3000
    智慧
    291
    余额
    712
    在线时间
    14 小时

    天子剑 女皇之泪 战神 射日 暴风之眼 圣光之钻 五星珠 【绝】赤影战盔 【绝】魔焰斧 烈火长枪

    提醒
    0
    快速回复 返回顶部 返回列表