UI

前言 Unity 中的补间动画（Tween Animation）是一种在两个关键帧之间自动生成平滑过渡的动画技术。一般在程序动画中使用，如位置、旋转、缩放、颜色等的变化。 这里介绍的框架在这基础上，加入了时间节点（延时执行、反复执行）和行为树的概念，把动画抽象在“节点”概念之下。 节点类型 链式节点 链式节点相当于容器，本身没有具体的执行逻辑，管理了节点列表，在合适的时机标记链式节点为完成状态，根据完成的条件分为以下节点，类似行为树。 顺序节点：按顺序执行节点，上一个节点执行完才执行下一个，全部完成以后标记完成 并行节点：并行执行节点，全部完成以后标记完成 执行节点 执行完回调以后就标记完成 条件节点 Update中判断条件，返回True以后标记完成 时间节点 延后当Timer完成后标记完成，Timer可以简单延迟，也可以反复执行一定次数以后标记完成。 值节点 值节点才是传统意义上的补间动画，就是通过输入时间，计算出值的结果，每帧执行，下面具体介绍。 值节点 值节点主要由两个部分组成，一个是缓动函数，一个是插值函数。 在Update先通过缓动函数，默认为线性函数，根据流逝的时间计算出当前的进度。 再调用插值函数，根据当前进度算出结果值，默认为线性函数。 根据值节点派生出的Color、Vector、Float节点，其实就是插值函数不一样。 缓动函数（Easing Function） 缓动函数是一种用于控制动画或过渡效果速度变化的数学函数。 它的主要作用是使动画或过渡效果看起来更加自然和真实。在没有缓动函数的情况下，动画可能会以恒定的速度进行，显得生硬和不流畅。 缓动函数可以改变动画在不同阶段的速度，常见的效果包括： 加速：动画开始时速度较慢，然后逐渐加快。 减速：动画开始时速度较快，然后逐渐减慢。 先加速后减速：动画开始时加速，然后在接近结束时减速。 先减速后加速：动画开始时减速，然后在中间或接近结束时加速。 //-------------------------------------------------- // Author : David Ochmann // Website：https://easings.net/ //-------------------------------------------------- using System; namespace UniFramework.Tween { /// <summary> /// 公共补间方法 /// </summary> public static class TweenEase { public static class Linear { public static float Default(float t, float b, float c, float d) { return c * t / d + b; } public static float EaseIn(float t, float b, float c, float d) { return c * t / d + b; } public static float EaseOut(float t, float b, float c, float d) { return c * t / d + b; } public static float EaseInOut(float t, float b, float c, float d) { return c * t / d + b; } } public static class Sine { public static float EaseIn(float t, float b, float c, float d) { return -c * (float)Math.Cos(t / d * ((float)Math.PI / 2)) + c + b; } public static float EaseOut(float t, float b, float c, float d) { return c * (float)Math.Sin(t / d * ((float)Math.PI / 2)) + b; } public static float EaseInOut(float t, float b, float c, float d) { return -c / 2f * ((float)Math.Cos((float)Math.PI * t / d) - 1) + b; } } public static class Quad { public static float EaseIn(float t, float b, float c, float d) { return c * (t /= d) * t + b; } public static float EaseOut(float t, float b, float c, float d) { return -c * (t /= d) * (t - 2) + b; } public static float EaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b; return -c / 2 * ((--t) * (t - 2) - 1) + b; } } public static class Cubic { public static float EaseIn(float t, float b, float c, float d) { return c * (t /= d) * t * t + b; } public static float EaseOut(float t, float b, float c, float d) { return c * ((t = t / d - 1) * t * t + 1) + b; } public static float EaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t + b; return c / 2 * ((t -= 2) * t * t + 2) + b; } } public static class Quart { public static float EaseIn(float t, float b, float c, float d) { return c * (t /= d) * t * t * t + b; } public static float EaseOut(float t, float b, float c, float d) { return -c * ((t = t / d - 1) * t * t * t - 1) + b; } public static float EaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t * t - 2) + b; } } public static class Quint { public static float EaseIn(float t, float b, float c, float d) { return c * (t /= d) * t * t * t * t + b; } public static float EaseOut(float t, float b, float c, float d) { return c * ((t = t / d - 1) * t * t * t * t + 1) + b; } public static float EaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; } } public static class Expo { public static float EaseIn(float t, float b, float c, float d) { return (t == 0) ? b : c * (float)Math.Pow(2, 10 * (t / d - 1)) + b; } public static float EaseOut(float t, float b, float c, float d) { return (t == d) ? b + c : c * (-(float)Math.Pow(2, -10 * t / d) + 1) + b; } public static float EaseInOut(float t, float b, float c, float d) { if (t == 0) return b; if (t == d) return b + c; if ((t /= d / 2) < 1) return c / 2 * (float)Math.Pow(2, 10 * (t - 1)) + b; return c / 2 * (-(float)Math.Pow(2, -10 * --t) + 2) + b; } } public static class Circ { public static float EaseIn(float t, float b, float c, float d) { return -c * ((float)Math.Sqrt(1 - (t /= d) * t) - 1) + b; } public static float EaseOut(float t, float b, float c, float d) { return c * (float)Math.Sqrt(1 - (t = t / d - 1) * t) + b; } public static float EaseInOut(float t, float b, float c, float d) { if ((t /= d / 2) < 1) return -c / 2 * ((float)Math.Sqrt(1 - t * t) - 1) + b; return c / 2 * ((float)Math.Sqrt(1 - (t -= 2) * t) + 1) + b; } } public static class Back { public static float EaseIn(float t, float b, float c, float d) { float s = 1.70158f; return c * (t /= d) * t * ((s + 1) * t - s) + b; } public static float EaseOut(float t, float b, float c, float d) { float s = 1.70158f; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; } public static float EaseInOut(float t, float b, float c, float d) { float s = 1.70158f; if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525f)) + 1) * t - s)) + b; return c / 2 * ((t -= 2) * t * (((s *= (1.525f)) + 1) * t + s) + 2) + b; } } public static class Elastic { public static float EaseIn(float t, float b, float c, float d) { if (t == 0) return b; if ((t /= d) == 1) return b + c; float p = d * .3f; float a = c; float s = p / 4; return -(a * (float)Math.Pow(2, 10 * (t -= 1)) * (float)Math.Sin((t * d - s) * (2 * (float)Math.PI) / p)) + b; } public static float EaseOut(float t, float b, float c, float d) { if (t == 0) return b; if ((t /= d) == 1) return b + c; float p = d * .3f; float a = c; float s = p / 4; return (a * (float)Math.Pow(2, -10 * t) * (float)Math.Sin((t * d - s) * (2 * (float)Math.PI) / p) + c + b); } public static float EaseInOut(float t, float b, float c, float d) { if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; float p = d * (.3f * 1.5f); float a = c; float s = p / 4; if (t < 1) return -.5f * (a * (float)Math.Pow(2, 10 * (t -= 1)) * (float)Math.Sin((t * d - s) * (2 * (float)Math.PI) / p)) + b; return a * (float)Math.Pow(2, -10 * (t -= 1)) * (float)Math.Sin((t * d - s) * (2 * (float)Math.PI) / p) * .5f + c + b; } } public static class Bounce { public static float EaseIn(float t, float b, float c, float d) { return c - Bounce.EaseOut(d - t, 0, c, d) + b; } public static float EaseOut(float t, float b, float c, float d) { if ((t /= d) < (1 / 2.75f)) { return c * (7.5625f * t * t) + b; } else if (t < (2 / 2.75f)) { return c * (7.5625f * (t -= (1.5f / 2.75f)) * t + .75f) + b; } else if (t < (2.5f / 2.75f)) { return c * (7.5625f * (t -= (2.25f / 2.75f)) * t + .9375f) + b; } else { return c * (7.5625f * (t -= (2.625f / 2.75f)) * t + .984375f) + b; } } public static float EaseInOut(float t, float b, float c, float d) { if (t < d / 2) return Bounce.EaseIn(t * 2, 0, c, d) * .5f + b; else return Bounce.EaseOut(t * 2 - d, 0, c, d) * .5f + c * .5f + b; } } } } 插值函数（Lerp Function） 值函数根据当前进度算出结果值，默认为线性函数，一般情况下不需要改动，只要更换缓动函数就可以实现不同的动态效果。 ...

前言 UI一般是入门程序员首先接触到的内容，除了业务的开发，还有很多值得研究的地方。 例如共用的组件设计，渲染的效果（如各种文字效果，在UI上显示模型和特效），性能上的优化（如虚拟的滚动列表，UI的动静分离，图集等），还有UI的管理。 这篇文章就来实现一个简单的UI管理器，主要的类就是管理类和窗口类。 框架功能 打开单例UI 加载 层级管理 显隐管理 UI生命周期管理（初始化，打开后，轮询更新，关闭后，销毁） 类图 管理类 管理类是外部调用的入口，打开和关闭窗口，管理UI的层级以及显示隐藏状态。 打开窗口以后，实例化一个对应的类，调用其加载方法 窗口加载完成或者窗口关闭以后回调到管理类中，遍历窗口列表重新设置其深度值，根据是否有全屏窗口，把比全屏窗口以下的窗口都设置为隐藏。 窗口类 窗口类定义了窗口的特性，如是否全屏，所在层级等，按项目需求添加特性。 窗口类中需要复写其生命周期函数，在合适的时机做合适的事情。 一般在初始化时，初始化组件，打开后，显示内容，关闭或者销毁时，做清理。 另外一个值得注意的时，当UI被隐藏的时候，不是使用SetActive(false)，因为这样会引起UI的网格重构，可以把UI移动到一个渲染不到的layer下，或者直接移出相机以外。 打开UI 打开UI时的流程如下 功能拓展 这里只是实现了基础的功能，实际项目中还有许多功能可能用得上，但只需在这基础上拓展即可。 支持面板中的嵌套Prefab：可以在UIWindow给再写一个父类。 打开关闭动画支持：涉及到生命周期的调用实际，需要等待动画完成以后再调用打开关闭方法。 增加缓存：关闭UI时不立即销毁，而且先缓存起来，真正销毁的时机，可以是达到一定的缓存值，或者是存活时机，按实际需要写。 增加通用的遮罩管理。 增加多实例的窗口打开，一个窗口可以多开。 总结 UI管理器基本的功能，以及拓展的功能介绍完了。 实现这些功能不难，但是想要优雅把这些功能都组织起来，让调用简单，代码阅读清晰，也是一门艺术。 参考 UniFramework/UniFramework/UniWindow at main · gmhevinci/UniFramework

前言 在UI上显示特效是一直是一个比较棘手的问题，一开始的方案是调整UI特效的渲染顺序，设置其sortingLayer和sortingOrder+offset，在每个单独的UI以后渲染。 这种方法能满足大部分的需求，但也有缺点。 如果需要在特效上再盖一层UI的话，由于特效并不属于Canvas的一部分，所以修改Hierarchy并不能改变其渲染顺序，特效会在渲染完Canvas的UI元素以后再进行渲染，所以需要把这个UI的层级通过添加Canvas继续往上抬。 再者无法被RectMask2D和Mask裁剪，除非改造Shader，并手动传入裁剪区域。 最好的方法就是让特效像UI一样，直接按Hierarchy 顺序渲染，并支持遮罩，就是这文章的主角UIParticle。 原理 This package utilizes the new APIsMeshBake/MashTrailBake(introduced with Unity 2018.2) to render particles through CanvasRenderer. You can render, mask, and sort your ParticleSystems for UI without the necessity of an additional Camera, RenderTexture, or Canvas. 这是项目首页的原理，具体就是通过一个API让例子特效通过CanvasRender进行渲染，这样就和普通的UI没什么不同了。 使用 按官方的教程，直接引入包，添加组件到特效上，直接拖到UI中即可。 改造已有shader以支持遮罩 项目推荐我们使用UIShader，如UIDefault或者UIAdditive。 Mask通过模板测试实现遮罩，RectMask2D通过传入裁剪区域实现。 所以自定义的Shader只需要参考上面的UIShader使其拥有遮罩特效即可，注意RenderQueue设置为Transparent，下面贴一下关键Shader代码。 Shader "Your/Custom/Shader" { Properties { // ... // #### required for Mask #### _StencilComp ("Stencil Comparison", Float) = 8 _Stencil ("Stencil ID", Float) = 0 _StencilOp ("Stencil Operation", Float) = 0 _StencilWriteMask ("Stencil Write Mask", Float) = 255 _StencilReadMask ("Stencil Read Mask", Float) = 255 _ColorMask ("Color Mask", Float) = 15 [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0 } SubShader { Tags { // ... } // #### required for Mask #### Stencil { Ref [_Stencil] Comp [_StencilComp] Pass [_StencilOp] ReadMask [_StencilReadMask] WriteMask [_StencilWriteMask] } ColorMask [_ColorMask] // ... Pass { // ... // #### required for RectMask2D #### #include "UnityUI.cginc" #pragma multi_compile __ UNITY_UI_CLIP_RECT float4 _ClipRect; // #### required for Mask #### #pragma multi_compile __ UNITY_UI_ALPHACLIP struct appdata_t { // ... }; struct v2f { // ... // #### required for RectMask2D #### float4 worldPosition : TEXCOORD1; }; v2f vert(appdata_t v) { v2f OUT; // ... // #### required for RectMask2D #### OUT.worldPosition = v.vertex; return OUT; } fixed4 frag(v2f IN) : SV_Target { // ... // #### required for RectMask2D #### #ifdef UNITY_UI_CLIP_RECT color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect); #endif // #### required for Mask #### #ifdef UNITY_UI_ALPHACLIP clip (color.a - 0.001); #endif return color; } ENDCG } } } 总结 至此已经可以像UI一样使用UI特效了，具体的性能分析，参考一下首页。 ...