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

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

Info

Publication number
CN109118556B
CN109118556B CN201810952037.2A CN201810952037A CN109118556B CN 109118556 B CN109118556 B CN 109118556B CN 201810952037 A CN201810952037 A CN 201810952037A CN 109118556 B CN109118556 B CN 109118556B
Authority
CN
China
Prior art keywords
transition
rendering
interface
needing
grid
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201810952037.2A
Other languages
English (en)
Other versions
CN109118556A (zh
Inventor
高超
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suzhou Snail Digital Technology Co Ltd
Original Assignee
Suzhou Snail Digital Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Suzhou Snail Digital Technology Co Ltd filed Critical Suzhou Snail Digital Technology Co Ltd
Priority to CN201810952037.2A priority Critical patent/CN109118556B/zh
Publication of CN109118556A publication Critical patent/CN109118556A/zh
Application granted granted Critical
Publication of CN109118556B publication Critical patent/CN109118556B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour

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中任一项所述方法的步骤。
CN201810952037.2A 2018-08-21 2018-08-21 一种实现ui界面动画过渡效果的方法、系统及存储介质 Active CN109118556B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810952037.2A CN109118556B (zh) 2018-08-21 2018-08-21 一种实现ui界面动画过渡效果的方法、系统及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810952037.2A CN109118556B (zh) 2018-08-21 2018-08-21 一种实现ui界面动画过渡效果的方法、系统及存储介质

Publications (2)

Publication Number Publication Date
CN109118556A CN109118556A (zh) 2019-01-01
CN109118556B true CN109118556B (zh) 2022-07-15

Family

ID=64852624

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810952037.2A Active CN109118556B (zh) 2018-08-21 2018-08-21 一种实现ui界面动画过渡效果的方法、系统及存储介质

Country Status (1)

Country Link
CN (1) CN109118556B (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110838166B (zh) * 2019-10-21 2024-02-13 腾讯科技（深圳）有限公司 特效数据检测方法、装置、设备及存储介质
CN110990104B (zh) * 2019-12-06 2023-04-11 珠海金山数字网络科技有限公司 一种基于Unity3D的纹理渲染方法及装置
CN112150592B (zh) * 2020-09-28 2023-07-14 腾讯科技（深圳）有限公司 动画文件的生成方法和装置、存储介质及电子设备
CN112164121B (zh) * 2020-09-30 2021-11-23 北京完美赤金科技有限公司 撕裂效果图的生成方法和装置、存储介质、电子装置
CN112346614B (zh) * 2020-10-28 2022-07-29 京东方科技集团股份有限公司 图像显示方法及装置、电子设备、存储介质

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105321200B (zh) * 2015-07-10 2018-03-06 苏州蜗牛数字科技股份有限公司 离线渲染的预处理方法
CN105468353B (zh) * 2015-11-06 2020-06-09 网易（杭州）网络有限公司 一种界面动画的实现方法及装置、移动终端和电脑终端
CN108282648B (zh) * 2018-02-05 2020-11-03 北京搜狐新媒体信息技术有限公司 一种vr渲染方法、装置、穿戴式设备及可读存储介质

Also Published As

Publication number Publication date
CN109118556A (zh) 2019-01-01

Similar Documents

Publication Publication Date Title
CN109118556B (zh) 一种实现ui界面动画过渡效果的方法、系统及存储介质
CN103810742B (zh) 图像渲染方法和系统
US6038031A (en) 3D graphics object copying with reduced edge artifacts
CN108236783B (zh) 游戏场景中模拟光照的方法、装置、终端设备及存储介质
US8917281B2 (en) Image rendering method and system
CN105912234B (zh) 虚拟场景的交互方法和装置
KR102637736B1 (ko) 그래픽스 처리 방법 및 시스템
CN111508052A (zh) 三维网格体的渲染方法和装置
CN109035383B (zh) 一种体积云的绘制方法、装置及计算机可读存储介质
KR20150039495A (ko) 이전 타일의 이미지를 이용하여 현재 프레임을 렌더링하는 방법 및 장치
GB2546720B (en) Method of and apparatus for graphics processing
KR102442488B1 (ko) 그래픽 처리 시스템 및 그래픽 프로세서
JPWO2009142333A1 (ja) 画像処理方法、画像処理装置及び画像処理プログラム並びに記憶媒体
CN109985384B (zh) 贴图动态调整方法及装置
US20230230311A1 (en) Rendering Method and Apparatus, and Device
US20040075657A1 (en) Method of rendering a graphics image
CN113470153A (zh) 虚拟场景的渲染方法、装置及电子设备
EP2728551B1 (en) Image rendering method and system
JP3502796B2 (ja) ビデオゲームにおける立体モデル表示方法及び装置、ゲーム装置並びにビデオゲーム用立体モデル表示プログラムを格納したコンピュータ読み取り可能な記録媒体
JP3350473B2 (ja) オクルージョンカリングを行う３次元グラフィックス描画装置および方法
US6906729B1 (en) System and method for antialiasing objects
JP4513423B2 (ja) 仮想三次元座標ポリゴンによるオブジェクト画像の表示制御方法及びこれを用いた画像表示装置
WO2010134292A1 (ja) 描画装置及び描画方法
JP2001070634A (ja) ゲーム機及びゲーム機におけるゲーム方法
JP3258286B2 (ja) 半透明物体と不透明物体とが混在する複数の物体についての画像データをコンピュータ表示画面に表示する描画方法および描画装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant