CN109118556A - 一种实现ui界面动画过渡效果的方法、系统及存储介质 - Google Patents

Abstract

一种实现UI界面动画过渡效果的方法、系统及存储介质，所述方法包括步骤：创建作为渲染目标的渲染纹理；创建需要过渡的UI的网格；渲染需要过渡的UI，得到需要过渡的UI的渲染贴图；将需要过渡的UI的渲染贴图映射到需要过渡的UI的网格上；根据需要过渡的UI的网格以及渲染贴图的变化，实现UI界面动画过渡效果。本发明的实现UI界面过渡效果的方法、系统及存储介质，能够在不打破原有UI系统的情况下，对UI界面进行任意的过渡变化，例如实现网格变化、纹理偏移采样等更加绚丽的过渡效果。

Description

一种实现UI界面动画过渡效果的方法、系统及存储介质

技术领域

本发明涉及UI界面技术领域，特别是涉及一种实现UI界面动画过渡效果的方法、系统及存储介质。

背景技术

目前的主流游戏一般只对游戏里的UI界面做缩放或者平移滑入、滑出的出现、消失的过渡效果，很少有能够实现对UI界面进行局部变形或整体变形，以及着色变化的过渡效果。

产生上述现象的原因在于：UI界面本身就是由多个UI元素组成的，UI系统会进行UI元素网格的合并，并且会涉及多个材质球用于渲染的情况，若从现有的UI界面的系统中间进行切入，去实现局部变形或整体变形以及着色变化的过渡效果，其一需要打破原有的系统逻辑，其二对各UI元素的变化需要从整体坐标系转换为UI元素坐标系，加大计算复杂度，尤其是对于需要采样相邻像素点才能得到的显示效果，更需要进行跨UI元素的操作。

发明内容

为了解决现有技术存在的不足，本发明的目的在于提供一种实现UI界面动画过渡效果的方法、系统及存储介质，能够在Unity等游戏中实现UI界面的高级动画过渡效果。

为实现上述目的，本发明提供的实现UI界面动画过渡效果的方法，包括以下步骤：

创建作为渲染目标的渲染纹理；

创建需要过渡的UI的网格；

渲染需要过渡的UI，得到需要过渡的UI的渲染贴图；

将需要过渡的UI的渲染贴图映射到需要过渡的UI的网格上；

根据需要过渡的UI的网格以及渲染贴图的变化，实现UI界面动画过渡效果。

进一步地，所述创建作为渲染目标的渲染纹理的步骤之后还包括步骤：

获得需要过渡的UI的顶点坐标。

进一步地，所述获得需要过渡的UI的顶点坐标的步骤之后，所述渲染需要过渡的UI的步骤之前，还包括步骤：

缩放需要过渡的UI。

进一步地，所述需要过渡的UI的网格为带控制标记的，和需要过渡的UI的原始界面大小一致的网格。

所述将需要过渡的UI的渲染贴图映射到需要过渡的UI的网格上的步骤，进一步包括步骤：

创建渲染对象，将渲染对象的渲染层级设置为需要过渡的UI的层，并将需要过渡的UI的网格和着色器的材质球赋值给渲染对象；

以及将需要过渡的UI的渲染贴图传递给着色器。

进一步地，所述的实现UI界面动画过渡效果的方法，还包括步骤：

将预制定的关键帧数据、辅助的效果控制贴图传递给着色器。

进一步地，所述根据需要过渡的UI的网格以及渲染贴图的变化，实现UI界面动画过渡效果的步骤，在GPU上实现。

进一步地，所述的实现UI界面动画过渡效果的方法，还包括步骤：

若UI界面动画过渡结束，则还原相关参数的设置以及清除创建的相关对象。

为实现上述目的，本发明提供的实现UI界面动画过渡效果的系统，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。

为实现上述目的，本发明提供的计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项所述方法的步骤。

本发明的实现UI界面过渡效果的方法、系统及存储介质，能够在不打破原有UI系统的情况下，对UI界面进行任意的过渡变化，例如实现网格变化、纹理偏移采样等更加绚丽的过渡效果。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，并与本发明的实施例一起，用于解释本发明，并不构成对本发明的限制。在附图中：

图1为根据本发明的实现UI界面动画过渡效果的方法流程图；

图2为根据本发明的需要过渡的UI的窗口截面示意图；

图3为根据本发明的采用相机渲染需要过渡的UI的窗口截面示意图；

图4为根据本发明的得到的需要过渡的UI的渲染贴图的窗口截面示意图；

图5为根据本发明的创建的需要过渡的UI的网格的窗口截面示意图；

图6为根据本发明的需要过渡的UI的渲染贴图映射到需要过渡的UI的网格上的窗口截面示意图；

图7为根据本发明的计算网格点的坐标变化产生网格形变的窗口截面示意图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

图1为根据本发明的实现UI界面动画过渡效果的方法流程图，图2为根据本发明的需要过渡的UI的窗口截面示意图，下面将参考图1并结合图2，对本发明的实现UI界面动画过渡效果的方法进行详细描述。其中，需要过渡的UI指需要作为做动画过渡的UI界面。

在步骤101，创建作为渲染目标的渲染纹理。

该步骤中，在系统逻辑中创建一张RenderTexture（渲染纹理）以及一个Camera（相机）；并设置Camera的可渲染层为指定的UITransition层（UI过渡层），并将Camera的渲染目标指定为创建的RenderTexture。

同时将Camera的clearFlags（清除标记）设置为SolidColor（纯色），SolidColor的具体颜色指定为无色，从而能够保证无渲染对象时，Camera能够得到一张无色透明的渲染贴图。

其中，RenderTexture的尺寸通过屏幕分辨率确定，优选地，RenderTexture的尺寸为屏幕分辨率的一半以上，例如若屏幕分辨率为1920x1080，则RenderTexture的尺寸优选为1024x1024。

在步骤102，获得需要过渡的UI的顶点坐标，以及缩放需要过渡的UI。

该步骤中，首先获得需要过渡的UI的四个顶点的世界坐标，并通过矩阵变化将世界坐标转换为屏幕坐标；再根据屏幕大小以及转换后的四个顶点的屏幕坐标，计算出四个顶点的UV纹理贴图坐标。

最后，根据RenderTexture的尺寸和屏幕分辨率的比例缩放需要过渡的UI。

在步骤103，渲染需要过渡的UI，得到需要过渡的UI的渲染贴图。

该步骤中，将需要过渡的UI的层设置为步骤101中的Camera的可渲染层所指定的UITransition，并将Camera渲染需要过渡的UI时，所涉及的相关参数都指向Camera。

图3为根据本发明的采用相机渲染需要过渡的UI的窗口截面示意图。图4为根据本发明的得到的需要过渡的UI的渲染贴图的窗口截面示意图。

使用Camera渲染一帧需要过渡的UI，得到一张仅有需要过渡的UI的界面的渲染贴图，并将渲染贴图的图像信息传给具体动画实现类，以及关闭Camera的渲染。

在步骤104，创建需要过渡的UI的网格。

该步骤中，创建一个接收渲染贴图的图像信息的具体动画实现类，并使用步骤102中得到的UI界面的顶点的屏幕坐标和UV纹理贴图坐标，以及根据具体动画实现类实现需要过渡的UI的动画需要的网格三角形密度，进行平均划分，并附加上具体动画实现类实现需要过渡的UI的动画的控制标记到各个网格点的属性上，得到一个带控制标记的、和需要过渡的UI的原始界面（即需要过渡的UI缩放前的界面）大小一致的网格。

图5为根据本发明的创建的需要过渡的UI的网格的窗口截面示意图。

在步骤105，将需要过渡的UI的渲染贴图映射到需要过渡的UI的网格上，根据需要过渡的UI的网格以及渲染贴图的像素的变化，实现UI界面动画过渡效果。

图6为根据本发明的需要过渡的UI的渲染贴图映射到需要过渡的UI的网格上的窗口截面示意图。

该步骤中，创建一个渲染对象，并将渲染对象的渲染层级设置为步骤101中的Camera，并将步骤104中创建的需要过渡的UI的网格和绑定的实现需要过渡的UI的动画的效果着色器的材质球赋值给渲染对象，以及将步骤102和103中获得的需要过渡的UI的顶点坐标、渲染贴图，以及预制定的关键帧数据、辅助的效果控制贴图传递给着色器：

在Vertex着色器中根据预制定的关键帧数据计算需要过渡的UI的网格的每个网格点的坐标变化，产生局部或者全部的网格形变，从而用以具体实现需要过渡的UI的撕裂、翻页、折页等动画过渡效果，图7为根据本发明的计算网格点的坐标变化产生网格形变的窗口截面示意图。

在Fragment着色器中根据控制变量的值和辅助的效果控制贴图对每个像素进行计算，产生每个像素颜色的变化，从而用以具体实现需要过渡的UI的溶解、模糊、形状淡入淡出等动画过渡效果。

该步骤中，需要过渡的UI的动画计算都放在GPU，运算放到了恰当的阶段，从而充分地利用了硬件性能，因此加速了运算过程。

在步骤106，若UI界面动画过渡结束，则还原相关参数的设置以及清除创建的相关对象。

该步骤中，UI界面动画过渡结束后，将需要过渡的UI的渲染层级、缩放，以及相机参数的设置还原回原来的值；同时销毁或回收过程中临时创建的渲染对象、网格等。

基于本发明的实现UI界面动画过渡效果的方法，本发明提供的实现UI界面动画过渡效果的系统，包括至少一个计算设备，所述至少一个计算设备包括存储器、处理器及存储在存储器上并可在处理器上运行的至少一个计算机程序，所述处理器执行所述至少一个计算机程序时实现本发明所述方法的步骤。

基于本发明的实现UI界面动画过渡效果的方法，本发明提供的计算机可读存储介质，其上存储有至少一个计算机程序，所述至少一个计算机程序被处理器执行时实现本发明所述方法的步骤。

本发明提供的计算机可读存储介质，位于至少一个计算设备，所述至少一个计算设备包括处理器，所述处理器执行所述计算机可读存储介质上存储的至少一个计算机程序时实现本发明所述方法的步骤。

本发明的实现UI界面过渡效果的方法、系统及存储介质，仅依靠创建一张纹理和一个网格并配合具体效果着色器进行变化，即可实现UI界面过渡效果，并且过渡中的消耗甚至低于原始静态UI界面的渲染。

调用者根据需求自定义网格和效果着色器，即可依托系统实现更多的个性化效果；本发明易于应用到Unity UGUI的Overlay或者Camera模式，也可以移植到其他游戏引擎中。

本领域普通技术人员可以理解：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种实现UI界面动画过渡效果的方法，其特征在于，包括以下步骤：

创建作为渲染目标的渲染纹理；

创建需要过渡的UI的网格；

渲染需要过渡的UI，得到需要过渡的UI的渲染贴图；

将需要过渡的UI的渲染贴图映射到需要过渡的UI的网格上；

根据需要过渡的UI的网格以及渲染贴图的变化，实现UI界面动画过渡效果。

2.根据权利要求1所述的实现UI界面动画过渡效果的方法，其特征在于，所述创建作为渲染目标的渲染纹理的步骤之后还包括步骤：

获得需要过渡的UI的顶点坐标。

3.根据权利要求2所述的实现UI界面动画过渡效果的方法，其特征在于，所述获得需要过渡的UI的顶点坐标的步骤之后，所述渲染需要过渡的UI的步骤之前，还包括步骤：

缩放需要过渡的UI。

4.根据权利要求1所述的实现UI界面动画过渡效果的方法，其特征在于，

所述需要过渡的UI的网格为带控制标记的，和需要过渡的UI的原始界面大小一致的网格。

5.根据权利要求1所述的实现UI界面动画过渡效果的方法，其特征在于，所述将需要过渡的UI的渲染贴图映射到需要过渡的UI的网格上的步骤，进一步包括步骤：

创建渲染对象，将渲染对象的渲染层级设置为需要过渡的UI的层，并将需要过渡的UI的网格和着色器的材质球赋值给渲染对象；

以及将需要过渡的UI的渲染贴图传递给着色器。

6.根据权利要求5所述的实现UI界面动画过渡效果的方法，其特征在于，还包括步骤：

将预制定的关键帧数据、辅助的效果控制贴图传递给着色器。

7.根据权利要求1所述的实现UI界面动画过渡效果的方法，其特征在于，

所述根据需要过渡的UI的网格以及渲染贴图的变化，实现UI界面动画过渡效果的步骤，在GPU上实现。

8.根据权利要求1所述的实现UI界面动画过渡效果的方法，其特征在于，还包括步骤：

若UI界面动画过渡结束，则还原相关参数的设置以及清除创建的相关对象。

9.一种实现UI界面动画过渡效果的系统，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1-8中任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-8中任一项所述方法的步骤。