CN110033503A - 动画显示方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本发明公开了一种动画显示方法、装置、计算机设备及存储介质，属于多媒体技术领域。方法包括：获取粒子动画；对于每帧粒子图像，根据每个粒子的位置信息，获取每个粒子对应的用户界面UI元素的位置信息；对每个粒子的贴图进行采样，得到每个粒子对应的UI元素的纹理信息和颜色信息，UI元素的纹理信息和颜色信息与对应的粒子的纹理信息和颜色信息相同；在图形用户界面中，按照每个粒子对应的UI元素的位置信息、纹理信息和颜色信息，显示与粒子动画的动画效果相符的目标动画。本发明通过将粒子动画中每个粒子转化为UI元素，无需采用多摄像机对粒子动画进行拍摄，可以有效降低显示成本，提高动画显示效率，且显示过程简单，不容易出错。

Description

动画显示方法、装置、计算机设备及存储介质

技术领域

本发明涉及多媒体技术领域，特别涉及一种动画显示方法、装置、计算机设备及存储介质。

背景技术

随着多媒体技术的发展，终端可以在用户界面中显示各种各样的显示元素，例如，用户界面中的按钮或背景图案等。终端也可以在用户界面中显示粒子动画，实现特效显示。

目前，动画显示方法通常是采用多个摄像机对粒子动画进行拍摄，该多个摄像机设置有不同的层级，从而可以根据该多个摄像机的层级，对该多个摄像机拍摄的粒子动画进行顺序显示。

上述动画显示方法中采用多个摄像机对粒子动画进行拍摄，则对该粒子动画进行显示时，需要等待所有摄像机显示后才能显示，大大增加了粒子动画的显示成本，动画显示效率低，且处理过程复杂，容易出错。

发明内容

本发明实施例提供了一种动画显示方法、装置、计算机设备及存储介质，可以解决相关技术中显示成本高、显示效率低，处理过程复杂和容易出错的问题。所述技术方案如下：

一方面，提供了一种动画显示方法，所述方法包括：

获取粒子动画，所述粒子动画包括多帧粒子图像；

对于每帧粒子图像，根据每个粒子的位置信息，获取所述每个粒子对应的用户界面(User Interface，UI)元素的位置信息；

对所述每个粒子的贴图进行采样，得到所述每个粒子对应的UI元素的纹理信息和颜色信息，所述UI元素的纹理信息和颜色信息与对应的粒子的纹理信息和颜色信息相同；

在图形用户界面中，按照所述每个粒子对应的UI元素的位置信息、纹理信息和颜色信息，显示与所述粒子动画的动画效果相符的目标动画。

一方面，提供了一种动画显示装置，所述装置包括：

获取模块，用于获取粒子动画，所述粒子动画包括多帧粒子图像；

所述获取模块，还用于对于每帧粒子图像，根据每个粒子的位置信息，获取所述每个粒子对应的用户界面UI元素的位置信息；

采样模块，用于对所述每个粒子的贴图进行采样，得到所述每个粒子对应的UI元素的纹理信息和颜色信息，所述UI元素的纹理信息和颜色信息与对应的粒子的纹理信息和颜色信息相同；

显示模块，用于在图形用户界面中，按照所述每个粒子对应的UI元素的位置信息、纹理信息和颜色信息，显示与所述粒子动画的动画效果相符的目标动画。

一方面，提供了一种计算机设备，所述计算机设备包括一个或多个处理器和一个或多个存储器，所述一个或多个存储器中存储有至少一条指令，所述指令由所述一个或多个处理器加载并执行以实现所述动画显示方法所执行的操作。

一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令，所述指令由处理器加载并执行以实现所述动画显示方法所执行的操作。

本发明实施例通过将粒子动画中每个粒子转化为UI元素，根据粒子的位置信息，获取UI元素的位置信息，对粒子的贴图进行采样，得到UI元素的纹理信息和颜色信息，从而对其进行显示，实现对粒子动画对应的目标动画的显示，无需采用多摄像机对粒子动画进行拍摄，而可以直接对转化后的目标动画进行显示，可以有效降低显示成本，提高动画显示效率，且显示过程简单，无需设置多摄像机的层级，不容易出错。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种粒子动画的显示界面示意图；

图2是本发明实施例提供的一种动画显示方法的流程图；

图3是本发明实施例提供的一种UI元素的位置信息的获取过程示意图；

图4是本发明实施例提供的一种UI元素的纹理信息和颜色信息的获取过程示意图；

图5是本发明实施例提供的一种动画显示方法的流程图；

图6是本发明实施例提供的一种动画显示装置的结构示意图；

图7是本发明实施例提供的一种终端的结构框图；

图8是本发明实施例提供的一种服务器的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

本发明实施例提供的动画显示方法可以应用于计算机设备中，该计算机设备可以被提供为终端，也可以被提供为服务器，在此仅以终端为例。该粒子动画通常用于显示某种动态效果，例如，如图1所示，该图形用户界面中可以包括有UI元素和粒子动画，其中，该图形用户界面中显示的背景即为一个或多个UI元素的显示效果，前层的按钮也是一个或多个UI元素的显示效果，该图形用户界面中飘落的白色雪花即为粒子动画。

图2是本发明实施例提供的一种动画显示方法的流程图，参见图2，该方法可以包括以下步骤：

201、计算机设备获取粒子动画，该粒子动画包括多帧粒子图像。

在本发明实施例中，计算机设备可以获取粒子动画，并将粒子动画中的每个粒子转化为UI元素，从而在图形用户界面中对UI元素进行显示，且该粒子动画包括多帧粒子图像，每帧粒子图像均可以进行转化并显示，或者该粒子动画中包括的多帧粒子图像中的部分粒子图像可以转化并显示，最终计算机设备显示目标动画，该目标动画与该粒子动画的动画效果相符。

其中，粒子动画是指一种通过粒子系统实现的动画，该粒子系统用于表示三维计算机图形学中模拟一些特定的模糊现象的技术，例如，该模糊现象可以包括火、爆炸、烟、水流、火花、落叶、云、雾、雪、尘、流星尾迹或者发光轨迹以及类似的抽象视觉效果。该粒子动画可以由设计人员通过粒子系统制作，该粒子动画所要体现的效果即为上述模糊现象，在此我们称这些模糊现象为特效。

例如，该粒子系统中可以包括每一时刻喷射的粒子数量、每个粒子的位置信息、纹理信息和颜色信息等，该粒子系统喷射的粒子数量是动态变化的，每个粒子在不同时刻的位置信息、纹理信息和颜色信息也可以不同。也即是，该粒子动画即包括上述信息，每帧粒子图像中每个粒子的信息均包括于该粒子动画中。在一种可能实现方式中，该粒子系统中还可以包括其他信息，例如，每个粒子的形态信息，本发明实施例在此仅对该粒子系统进行简单介绍，具体该粒子系统包括每个粒子的哪些信息并不作限定。

该步骤201中，计算机设备可以实时获取该粒子动画，也即是，该粒子动画制作完成时，计算机设备即获取该粒子动画。计算机设备也可以获取本次或云端存储的粒子动画，也即是，该粒子动画制作完成并存储于该计算机设备本地或存储于云端，从而计算机设备在需要对其进行显示时，获取该粒子动画，并执行下述步骤，以将其进行转化和显示。

在一种可能实现方式中，该动画显示方法可以由该计算机设备中的对象实现，该对象可以继承可遮罩图像(MaskableGraphic)类。具体地，计算机设备可以对MaskableGraphic类进行实例化，得到继承该MaskableGraphic类的对象，从而基于该对象执行该动画显示方法的步骤。这样该对象即可在对粒子动画进行转化后，对其进行绘制，得到目标用户界面，从而对目标用户界面进行显示。

例如，在一个具体示例中，该动画显示方法可以由一个组件完成，该组件可以继承MaskableGraphic类，基于绘制函数，对粒子对应的UI元素进行重新绘制，得到目标动画。该组件可以包括多个阶段，在初始阶段可以初始化该组件的一些参数，在绘制阶段可以确定待绘制的UI元素的信息，从而根据UI元素的信息进行绘制得到的目标动画，从而显示该目标动画。

202、对于每帧粒子图像，计算机设备获取每帧粒子图像中每个粒子的位置信息。

计算机设备获取到粒子动画后，可以对该粒子动画包括的粒子图像进行处理，以将每个粒子转化为UI元素，这样粒子动画即转化为目标动画，这样可以直接粒子动画转化为目标动画进行显示即可，无需采用多个摄像机对该粒子动画进行拍摄，再按照多个摄像机的层级进行顺序显示，可以有效减少显示的成本。

在将粒子动画进行转化时，可以根据每帧粒子图像中每个粒子的位置信息，来确定UI元素的位置信息，因而，计算机设备可以执行该步骤202，获取每个粒子的位置信息，以此作为下述步骤203的数据依据。

在一种可能实现方式中，计算机设备可以获取该粒子动画的每帧粒子图像，来执行该步骤202以及后续步骤，这样该粒子动画中的每帧粒子图像对应于目标动画中的一帧图像，粒子动画包括的粒子图像的数量与目标动画包括的图像的数量相同。在另一种可能实现方式中，计算机设备也可以每隔目标数量帧，执行该步骤202以及后续步骤，也即是，对于该粒子动画包括的多帧粒子图像，每隔目标数量帧，计算机设备执行获取UI元素的位置信息、纹理信息、颜色信息以及显示步骤，该目标动画包括的图像的数量小于该粒子动画包括的粒子图像的数量。从而通过降帧更新的方式来进一步提高该动画显示的效率。同时，降帧更新的方式对实际的视觉效果几乎没有损失。本发明实施例对具体采用哪种实现方式不作限定。

具体地，对于每个粒子的位置信息，该每个粒子的位置信息可能包括不同的形式，该位置信息可以是世界坐标系下的位置信息，也可以是本次坐标系下的位置信息，该本次坐标系为以该每个粒子对应的目标位置为原点的物体坐标系。需要说明的是，一般地，粒子动画通常是针对某个目标位置所要体现的动态效果，因而，对于位置信息为世界坐标系下的位置信息，计算机设备还可以对其进行转换。具体地，当该位置信息为世界坐标系下的位置信息时，计算机设备可以将该每个粒子的位置信息转换为本地坐标系下的位置信息。

在一种可能实现方式中，该粒子动画的缩放模式不同时，该每个粒子的位置信息可能不同，则该计算机设备获取该每个粒子的位置信息时，还可以根据该粒子动画的缩放模式，对该每个粒子的位置信息进行修正。

该粒子动画的缩放模式可以包括多种，例如，基于整个变换层次结构的缩放模式、基于本地变换比例的缩放模式和基于形状的缩放模式等。在一种可能实现方式中，该修正过程可以为：当该粒子动画的缩放模式为基于形状的缩放模式时，计算机设备根据当前画布的缩放比例，对该每个粒子的位置信息进行修正。

在一种可能实现方式中，该粒子动画中每个粒子还可以包括形态信息，则该步骤202中，计算机设备还可以获取每个粒子的形态信息，该形态信息也可以作为下述步骤203中获取每个粒子对应的UI元素的位置信息的数据依据。其中，该形态信息可以包括该每个粒子的缩放大小和旋转信息。

203、计算机设备根据每个粒子的位置信息，获取该每个粒子对应的UI元素的位置信息。

计算机设备在获取到每个粒子的位置信息后，可以根据每个粒子的位置信息来确定UI元素的位置信息。可以理解地，粒子的位置信息不同时，该粒子对应的UI元素的位置信息则可以不同，从而该UI元素可以用于指代该粒子进行显示，模拟该粒子的情况。

在步骤202中的一种可能实现方式中，该每个粒子还可以包括形态信息。该每个粒子的形态信息不同时，该UI元素的位置信息也可能不同。则该步骤203还可以为：计算机设备根据该每个粒子的位置信息和形态信息，获取该每个粒子对应的UI元素的位置信息。

在一种可能实现方式中，该UI元素的位置信息可以通过该UI元素的顶点位置信息来表示，在计算机设备对粒子图像进行处理之前，也即是该步骤203之前，计算机设备可以根据该粒子动画中每帧粒子图像的粒子数量，创建顶点数组，该顶点数组用于表示UI元素的顶点位置信息。可以理解地，计算机设备创建该顶点数组的过程为初始化过程，计算机设备可以根据粒子动画中每帧粒子图像中每个粒子的位置信息，来对该顶点数组的顶点位置信息进行更新。

需要说明的是，计算机设备可以根据该粒子动画中每帧粒子图像的粒子数量中的最大值，创建顶点数组。粒子动画中每帧粒子图像中粒子数量是动态变化的，则该每帧粒子图像对应的UI元素的数量也是动态变化的，如果在运行时动态申请内存空间可能触发垃圾回收(Garbage Collection，GC)机制，引起顿卡，造成用户体验上的损失。通过粒子数量中的最大值，创建顶点数组，则可以避免在粒子动画显示过程中申请内存空间，也即是，一开始即申请一个比较大的顶点数组，不会在粒子动画显示过程有更多的内存空间需求，也即无需再动态申请内存空间，从而不会触发垃圾回收(Garbage Collection，GC)机制，不会出现顿卡现象，有效提高了用户体验。

例如，在一个具体示例中，一个粒子对应一个UI元素，该UI元素可以包括四个顶点，如果该粒子动画包括多帧粒子图像，该多帧粒子图像的粒子数量分别是50、100、40等，其中，100为粒子数量的最大值，则该计算机设备可以创建一个大小为100*4的顶点数组。当然，还可以创建一个大于100*4的顶点数组，从而创建的顶点数组完全符合本次粒子动画转化需求，本发明实施例对具体创建一个多大的顶点数组不作限定。

在这种实现方式中，该步骤203中，对于每帧粒子图像，计算机设备可以根据每个粒子的位置信息，获取该每个粒子对应的UI元素的顶点位置信息。在上述图像信息还包括形态信息的实现方式中，该步骤203还可以为：对于每帧粒子图像，计算机设备可以根据每个粒子的位置信息和形态信息，获取该每个粒子对应的UI元素的顶点位置信息。

例如，如图3所示，在一个具体示例中，计算机设备可以先获取每个粒子的位置信息，如果当前粒子动画的缩放模式为基于形状的缩放模式，计算机设备根据当前画布的缩放比例，对该每个粒子的位置信息进行修正。计算机设备获取该每个粒子的形态信息，也即是，获取该每个粒子的缩放大小和旋转信息，从而根据该每个粒子的位置信息、放大小和旋转信息，获取该每个粒子对应的UI元素的顶点位置信息。在一种可能实现方式中，该顶点位置信息可以为顶点坐标信息。则该计算机设备获取UI元素的顶点坐标信息的过程也即是转换坐标的过程。

该UI元素的顶点位置信息和该粒子的位置信息、形态信息之间可以具有对应关系，计算机设备可以根据该每个粒子的位置信息、形态信息和该对应关系，计算该每个粒子对应的UI元素的顶点位置信息。该对应关系可以由相关技术人员根据显示需求进行设置，本发明实施例对此不作限定。

204、计算机设备对该每个粒子的贴图进行采样，得到该每个粒子对应的UI元素的纹理信息和颜色信息，该UI元素的纹理信息和颜色信息与对应的粒子的纹理信息和颜色信息相同。

计算机设备还可以获取每个粒子对应的UI元素的纹理信息和颜色信息，以体现粒子的真实显示情况。

对于每个粒子的颜色信息，计算机设备可以根据该每帧粒子图像在该粒子动画中的时间，获取该每帧粒子图像中每个粒子的颜色信息，将该每个粒子的颜色信息作为该每个粒子对应的UI元素的颜色信息。该每个粒子的颜色信息可能会随着时间发生变化，在确定每帧粒子图像中每个粒子的颜色信息时，可以根据该每帧粒子图像在该粒子动画中的时间，来确定该每个粒子的颜色信息。其中，该每帧粒子图像在粒子动画中的时间实质为粒子系统的当前系统时间。

对于每个粒子的纹理信息，计算机设备可以根据该粒子动画中每个粒子的生命周期的数量来确定。该粒子动画中每个粒子的生命周期的数量不同时，该每个粒子的纹理信息的确定方式可以不同。也即是，对于具有循环的粒子动画和不具有循环的粒子动画，计算机设备获取每个粒子的纹理信息的过程可以不同。可以理解地，具有循环的粒子动画，可以在粒子视图中创建和编辑事件，每个事件对应有粒子的图像信息，该事件不同时，该每个粒子的纹理信息可以不同。具体地，该每个粒子的纹理信息的获取过程可以通过下述步骤实现：

计算机设备获取该粒子动画中每个粒子的生命周期的数量。当该数量等于一时，获取该每帧粒子图像中每个粒子的纹理信息，将该每个粒子的纹理信息作为该每个粒子对应的UI元素的纹理信息。当该数量大于一时，根据当前事件，获取该每帧粒子图像中该每个粒子的纹理信息，将该每个粒子的纹理信息作为该每个粒子对应的UI元素的纹理信息。

在一种情况中，该数量等于一，说明该粒子动画为不具有循环的粒子动画，该每个粒子的纹理信息包括一种，则计算机设备可以获取该每帧粒子图像中每个粒子的纹理信息。例如，该每个粒子的纹理信息映射为一个矩形区域，该矩形区域中的点的取值可以为0至1，对于每个粒子，该粒子的位置信息发生变化，计算机设备可以根据该每个粒子的位置信息，获取该每个粒子的纹理信息。当然，如果该粒子包括形态信息，该粒子的形态信息发生变化时，该粒子的纹理信息也可以不同。则计算机设备还可以根据该每个粒子的位置信息和形态信息，获取该每个粒子的纹理信息。

在另一种情况中，该数量大于一，说明该粒子动画为具有循环的粒子动画，该每个粒子的纹理信息包括多种，则计算机设备可以根据当前事件，确定将当前事件对应的纹理信息获取为该每帧粒子图像中每个粒子的纹理信息。例如，该每个粒子的纹理信息映射为多个矩形区域，每个矩形区域对应一个事件，计算机设备可以根据当前事件，确定从哪个矩形区域中获取该每个粒子的纹理信息，确定了矩形区域后，计算机设备可以执行与上述情况中同理的获取步骤，根据该每个粒子的位置信息，或根据该每个粒子的位置信息和形态信息进行纹理信息获取。

例如，如图4所示，计算机设备可以根据每帧粒子图像在该粒子动画中的时间，获取该每帧粒子图像中每个粒子的颜色信息，然后计算机设备可以获取该粒子动画中每个粒子的生命周期的数量，以该数量与一的关系来判断该粒子动画是否具有循环，如果数量等于一，则说明不具有循环，则计算机设备可以获取该每帧粒子图像中每个粒子的纹理信息，如果数量大于一，则说明具有循环，则计算机设备可以根据当前事件，确定将当前事件对应的纹理信息获取为该每帧粒子图像中每个粒子的纹理信息。最后，计算机设备将粒子的纹理信息作为其对应的UI元素的纹理信息。

计算机设备可以根据该每个粒子的位置信息，对该每个粒子的贴图进行采样，得到该每个粒子对应的UI元素的纹理信息和颜色信息。这样可以将每个粒子与UI元素正确对应，每个UI元素在正确的位置上体现该位置的粒子应该体现出的纹理信息和颜色信息。

例如，该每个粒子的纹理信息映射为一个矩形区域，该矩形区域中的点的取值可以为0至1，对于每个粒子，该粒子的位置信息发生变化，该粒子的纹理信息可以不同。比如，该粒子的纹理信息可以通过UV信息来表示，该UV信息是驻留在多边形网格顶点上的两维纹理坐标点，可以称上述矩形区域为UV纹理空间。计算机设备可以根据该每个粒子的位置信息，确定该每个粒子在上述UV纹理空间的UV信息，也即是，该每个粒子的纹理信息。确定了该每个粒子的UV信息后，可以对该粒子的贴图进行采样，得到该每个粒子对应的UI元素的纹理信息。当然，该采样过程也可以获取到该UI元素的颜色信息，该UI元素的颜色信息与该每个粒子的颜色信息相同，如上述步骤202中所示，该每个粒子的颜色信息基于该每帧粒子图像在粒子动画中的时间确定，在此不多做赘述。

在一种可能实现方式中，该每个粒子的图像信息还包括该每个粒子的形态信息。则该步骤204中，计算机设备可以根据该每个粒子的位置信息和形态信息，对该每个粒子的贴图进行采样，得到该每个粒子对应的UI元素的纹理信息和颜色信息。例如，同理地，该粒子的形态信息发生变化时，该粒子的UV信息也可以不同。则计算机设备还可以根据该每个粒子的位置信息和形态信息，获取该每个粒子的UV信息。确定了UV信息后，可以进行与上述同理的采样过程，得到该粒子对应的UI元素的纹理信息和颜色信息。

该步骤203和步骤204为根据每帧粒子图像中每个粒子的图像信息，获取该每个粒子对应的UI元素的图像信息的过程，该过程中将粒子动画中的每个粒子转化为每个UI元素，将粒子动画转化目标动画，从而可以在下述步骤205中，对目标动画进行显示。

205、计算机设备在图形用户界面中，按照该每个粒子对应的UI元素的位置信息、纹理信息和颜色信息，显示与该粒子动画的动画效果相符的目标动画。

计算机设备在获取得到每个粒子对应的UI元素的位置信息、纹理信息和颜色信息后，则可以在该图形用户界面中按照该每个粒子对应的UI元素的位置信息、纹理信息和颜色信息，对该UI元素进行显示。需要说明的是，该每帧粒子图像对应有多帧粒子图像，对该多帧粒子图像中每帧粒子图像进行上述粒子向UI元素的转化，或对该多帧粒子图像中的部分粒子图像进行上述粒子向UI元素的转化，可以得到目标动画，该目标动画的动画效果与粒子动画的动画效果相符。

需要说明的是，该步骤205实质为基于一帧粒子图像，得到目标动画中的一帧图像时，即可对该图像进行显示，从而后续再获取到目标动画的下一帧图像时，显示下一帧图像的实时刷新过程。

在上述步骤201中提到的降帧更新的方式中，可以每隔几帧设置UI元素顶点需要更新(SetVerticesDirty)触发OnPopulateMesh重新绘制粒子对应的UI元素，从而体现粒子的位置，在刷新过程中根据粒子信息不断调整UI元素的位置、纹理和颜色等，从而达到模拟特效(粒子动画)变化的目的。其中，OnPopulateMesh为一种绘制函数。

将粒子动画转化多帧目标用户界面，将粒子动画中的每个粒子转化为的每个UI元素，相较于采样多摄像机对粒子动画进行拍摄，从而根据多摄像机的层级进行顺序显示的方式，无需等待多摄像机均显示结束才完成粒子动画的显示，因而，节省了显示的成本，提高了动画显示的效率，且无需设置多摄像机的层级等，显示过程简单，不容易出错。

将粒子动画转换成普通的UI元素，极大地提高了制作效率，特效美术或UI美术直接在任意画布下制作粒子动画，粒子动画可完全当成一个普通的UI元素去使用，极大地降低了调整UI层级的成本。同时由于是根据粒子动画当前的粒子的uv生成的UI元素信息，支持UV动画。

在步骤201中的实现方式中，执行该动画显示方法的步骤的对象本身继承自MaskableGraphic，从而也天然支持普通UI元素的裁切和自适应功能。由于将粒子动画进行了转化，在显示时粒子的PraticleSystemRender本身处于禁止(disable)状态，不会带来额外的显示开销。在上述创建顶点数组时，在初始化阶段申请过一次内存，在动画显示过程中不产生额外的垃圾回收(GC)。

进一步地，粒子动画在显示时无需重新调整缩放比例，因为上述在转化过程中已经基于当前画布对粒子的位置信息进行修正，也基于粒子的缩放大小确定了UI元素的位置，将粒子动画转化成了普通的UI元素，面对需要显示UI-粒子动画-UI时，也无需进行额外特殊处理，直接将粒子动画进行转化，对多个UI进行显示，处理过程简单，粒子动画对应的UI可以和其他UI相互遮挡，无需处理UI层级，解决了粒子动画穿插的痛点，降低了成本，不容易出错。同时本发明提供的动画显示方法的可扩展性强，使用便捷，开发友好。

在一种可能实现方式中，该动画显示方法可以应用于Unity引擎所支持的电子游戏中，可以在满足游戏界面需要较多UI和特效(粒子动画)的需求时，提供较高的显示效率和显示效果。

如图5所示，在一个具体示例中，计算机设备可以先申请顶点数组，根据粒子位置获得UI元素的顶点坐标，从而对粒子的贴图进行采样，从而实现将粒子转化为UI元素进行显示，并基于刷新机制触发刷新，该刷新过程也即是重新执行根据粒子位置获得UI元素的顶点坐标和采样贴图的步骤，以实现一帧又一帧画面的刷新显示，从而实现对粒子动画对应的目标动画的显示。

本发明实施例通过将粒子动画中每个粒子转化为UI元素，根据粒子的位置信息，获取UI元素的位置信息，对粒子的贴图进行采样，得到UI元素的纹理信息和颜色信息，从而对其进行显示，实现对粒子动画对应的目标动画的显示，无需采用多摄像机对粒子动画进行拍摄，而可以直接对转化后的目标动画进行显示，可以有效降低显示成本，提高动画显示效率，且显示过程简单，无需设置多摄像机的层级，不容易出错。

上述所有可选技术方案，可以采用任意结合形成本发明的可选实施例，在此不再一一赘述。

图6是本发明实施例提供的一种动画显示装置的结构示意图，参见图6，该装置可以包括：

获取模块601，用于获取粒子动画，该粒子动画包括多帧粒子图像；

该获取模块601，还用于对于每帧粒子图像，根据每个粒子的位置信息，获取该每个粒子对应的用户界面UI元素的位置信息；

采样模块602，用于对该每个粒子的贴图进行采样，得到该每个粒子对应的UI元素的纹理信息和颜色信息，该UI元素的纹理信息和颜色信息与对应的粒子的纹理信息和颜色信息相同；

显示模块603，用于在图形用户界面中，按照该每个粒子对应的UI元素的位置信息、纹理信息和颜色信息，显示与该粒子动画的动画效果相符的目标动画。

在一种可能实现方式中，该采样模块602用于根据该每个粒子的位置信息，对该每个粒子的贴图进行采样，得到该每个粒子对应的UI元素的纹理信息和颜色信息。

在一种可能实现方式中，该装置还包括：

创建模块，用于根据该粒子动画中每帧粒子图像的粒子数量，创建顶点数组，该顶点数组用于表示UI元素的顶点位置信息；

该获取模块601还用于：

对于每帧粒子图像，根据每个粒子的位置信息，获取该每个粒子对应的UI元素的顶点位置信息。

在一种可能实现方式中，该获取模块601还用于：

获取该每帧粒子图像中每个粒子的位置信息；

当该位置信息为世界坐标系下的位置信息时，将该每个粒子的位置信息转换为本地坐标系下的位置信息，该本次坐标系为以该每个粒子对应的目标位置为原点的物体坐标系。

在一种可能实现方式中，该获取模块601还用于根据该粒子动画的缩放模式，对该每个粒子的位置信息进行修正。

在一种可能实现方式中，该获取模块601还用于获取该每个粒子的形态信息；

该获取模块601用于根据该每个粒子的位置信息和形态信息，获取该每个粒子对应的UI元素的位置信息；

该采样模块602用于根据该每个粒子的位置信息和形态信息，对该每个粒子的贴图进行采样，得到该每个粒子对应的UI元素的纹理信息和颜色信息。

在一种可能实现方式中，该采样模块602用于：

根据该每帧粒子图像在该粒子动画中的时间，获取该每帧粒子图像中每个粒子的颜色信息，将该每个粒子的颜色信息作为该每个粒子对应的UI元素的颜色信息；

获取该粒子动画中每个粒子的生命周期的数量；

当该数量等于一时，获取该每帧粒子图像中每个粒子的纹理信息，将该每个粒子的纹理信息作为该每个粒子对应的UI元素的纹理信息；

当该数量大于一时，根据当前事件，获取该每帧粒子图像中该每个粒子的纹理信息，将该每个粒子的纹理信息作为该每个粒子对应的UI元素的纹理信息。

在一种可能实现方式中，该装置还包括：

处理模块，用于对可遮罩图像MaskableGraphic类进行实例化，得到继承该MaskableGraphic类的对象；

显示模块603，用于基于该对象，执行该动画显示方法的步骤。

在一种可能实现方式中，该获取模块601和该显示模块603还用于：

对于该粒子动画包括的多帧粒子图像，每隔目标数量帧，执行获取UI元素的位置信息、纹理信息、颜色信息以及显示步骤，该目标动画包括的图像的数量小于该粒子动画包括的粒子图像的数量。

本发明实施例提供的装置，通过将粒子动画中每个粒子转化为UI元素，根据粒子的位置信息，获取UI元素的位置信息，对粒子的贴图进行采样，得到UI元素的纹理信息和颜色信息，从而对其进行显示，实现对粒子动画对应的目标动画的显示，无需采用多摄像机对粒子动画进行拍摄，而可以直接对转化后的目标动画进行显示，可以有效降低显示成本，提高动画显示效率，且显示过程简单，无需设置多摄像机的层级，不容易出错。

需要说明的是：上述实施例提供的动画显示装置在显示动画时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将计算机设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的动画显示装置与动画显示方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

上述计算机设备可以被提供为下述图7该的终端，也可以被提供为下述图8该的服务器，本发明实施例对此不作限定。

图7是本发明实施例提供的一种终端的结构框图。该终端700可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端700还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，终端700包括有：一个或多个处理器701和一个或多个存储器702。

处理器701可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器701可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器701也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器701可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器701还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器702可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器702还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器702中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器701所执行以实现本发明中方法实施例提供的动画显示方法。

在一些实施例中，终端700还可选包括有：外围设备接口703和至少一个外围设备。处理器701、存储器702和外围设备接口703之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口703相连。具体地，外围设备包括：射频电路704、触摸显示屏705、摄像头706、音频电路707、定位组件708和电源709中的至少一种。

外围设备接口703可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器701和存储器702。在一些实施例中，处理器701、存储器702和外围设备接口703被集成在同一芯片或电路板上；在一些其他实施例中，处理器701、存储器702和外围设备接口703中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路704用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路704通过电磁信号与通信网络以及其他通信设备进行通信。射频电路704将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路704包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路704可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路704还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本发明对此不加以限定。

显示屏705用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏705是触摸显示屏时，显示屏705还具有采集在显示屏705的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器701进行处理。此时，显示屏705还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏705可以为一个，设置终端700的前面板；在另一些实施例中，显示屏705可以为至少两个，分别设置在终端700的不同表面或呈折叠设计；在再一些实施例中，显示屏705可以是柔性显示屏，设置在终端700的弯曲表面上或折叠面上。甚至，显示屏705还可以设置成非矩形的不规则图形，也即异形屏。显示屏705可以采用LCD(LiquidCrystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件706用于采集图像或视频。可选地，摄像头组件706包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件706还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路707可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器701进行处理，或者输入至射频电路704以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端700的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器701或射频电路704的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路707还可以包括耳机插孔。

定位组件708用于定位终端700的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件708可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。

电源709用于为终端700中的各个组件进行供电。电源709可以是交流电、直流电、一次性电池或可充电电池。当电源709包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端700还包括有一个或多个传感器710。该一个或多个传感器710包括但不限于：加速度传感器711、陀螺仪传感器712、压力传感器713、指纹传感器714、光学传感器715以及接近传感器716。

加速度传感器711可以检测以终端700建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器711可以用于检测重力加速度在三个坐标轴上的分量。处理器701可以根据加速度传感器711采集的重力加速度信号，控制触摸显示屏705以横向视图或纵向视图进行用户界面的显示。加速度传感器711还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器712可以检测终端700的机体方向及转动角度，陀螺仪传感器712可以与加速度传感器711协同采集用户对终端700的3D动作。处理器701根据陀螺仪传感器712采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器713可以设置在终端700的侧边框和/或触摸显示屏705的下层。当压力传感器713设置在终端700的侧边框时，可以检测用户对终端700的握持信号，由处理器701根据压力传感器713采集的握持信号进行左右手识别或快捷操作。当压力传感器713设置在触摸显示屏705的下层时，由处理器701根据用户对触摸显示屏705的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器714用于采集用户的指纹，由处理器701根据指纹传感器714采集到的指纹识别用户的身份，或者，由指纹传感器714根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器701授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器714可以被设置终端700的正面、背面或侧面。当终端700上设置有物理按键或厂商Logo时，指纹传感器714可以与物理按键或厂商Logo集成在一起。

光学传感器715用于采集环境光强度。在一个实施例中，处理器701可以根据光学传感器715采集的环境光强度，控制触摸显示屏705的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏705的显示亮度；当环境光强度较低时，调低触摸显示屏705的显示亮度。在另一个实施例中，处理器701还可以根据光学传感器715采集的环境光强度，动态调整摄像头组件706的拍摄参数。

接近传感器716，也称距离传感器，通常设置在终端700的前面板。接近传感器716用于采集用户与终端700的正面之间的距离。在一个实施例中，当接近传感器716检测到用户与终端700的正面之间的距离逐渐变小时，由处理器701控制触摸显示屏705从亮屏状态切换为息屏状态；当接近传感器716检测到用户与终端700的正面之间的距离逐渐变大时，由处理器701控制触摸显示屏705从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图7中示出的结构并不构成对终端700的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

图8是本发明实施例提供的一种服务器的结构示意图，该服务器800可因配置或性能不同而产生比较大的差异，可以包括一个或多个处理器(central processing units，CPU)801和一个或多个的存储器802，其中，该一个或多个存储器802中存储有至少一条指令，该至少一条指令由该一个或多个处理器801加载并执行以实现上述各个方法实施例提供的动画显示方法。当然，该服务器800还可以具有有线或无线网络接口、键盘以及输入输出接口等部件，以便进行输入输出，该服务器800还可以包括其他用于实现设备功能的部件，在此不做赘述。

在示例性实施例中，还提供了一种计算机可读存储介质，例如包括指令的存储器，上述指令可由处理器执行以完成上述实施例中的动画显示方法。例如，该计算机可读存储介质可以是只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random AccessMemory，RAM)、只读光盘(Compact Disc Read-Only Memory，CD-ROM)、磁带、软盘和光数据存储设备等。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，该程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

上述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (15)

1.一种动画显示方法，其特征在于，所述方法包括：

获取粒子动画，所述粒子动画包括多帧粒子图像；

对于每帧粒子图像，根据每个粒子的位置信息，获取所述每个粒子对应的用户界面UI元素的位置信息；

对所述每个粒子的贴图进行采样，得到所述每个粒子对应的UI元素的纹理信息和颜色信息，所述UI元素的纹理信息和颜色信息与对应的粒子的纹理信息和颜色信息相同；

在图形用户界面中，按照所述每个粒子对应的UI元素的位置信息、纹理信息和颜色信息，显示与所述粒子动画的动画效果相符的目标动画。

2.根据权利要求1所述的方法，其特征在于，所述对所述每个粒子的贴图进行采样，得到所述每个粒子对应的UI元素的纹理信息和颜色信息，包括：

根据所述每个粒子的位置信息，对所述每个粒子的贴图进行采样，得到所述每个粒子对应的UI元素的纹理信息和颜色信息。

3.根据权利要求1所述的方法，其特征在于，所述对于每帧粒子图像，根据每个粒子的位置信息，获取所述每个粒子对应的用户界面UI元素的位置信息之前，所述方法还包括：

根据所述粒子动画中每帧粒子图像的粒子数量，创建顶点数组，所述顶点数组用于表示UI元素的顶点位置信息；

所述对于每帧粒子图像，根据每个粒子的位置信息，获取所述每个粒子对应的用户界面UI元素的位置信息，包括：

对于每帧粒子图像，根据每个粒子的位置信息，获取所述每个粒子对应的UI元素的顶点位置信息。

4.根据权利要求1所述的方法，其特征在于，所述根据每个粒子的位置信息，获取所述每个粒子对应的用户界面UI元素的位置信息之前，所述方法还包括：

获取所述每帧粒子图像中每个粒子的位置信息；

当所述位置信息为世界坐标系下的位置信息时，将所述每个粒子的位置信息转换为本地坐标系下的位置信息，所述本次坐标系为以所述每个粒子对应的目标位置为原点的物体坐标系。

5.根据权利要求4所述的方法，其特征在于，所述方法还包括：

根据所述粒子动画的缩放模式，对所述每个粒子的位置信息进行修正。

6.根据权利要求4所述的方法，其特征在于，所述方法还包括；

获取所述每个粒子的形态信息；

所述根据每个粒子的位置信息，获取所述每个粒子对应的UI元素的位置信息，包括：

根据所述每个粒子的位置信息和形态信息，获取所述每个粒子对应的UI元素的位置信息；

所述对所述每个粒子的贴图进行采样，得到所述每个粒子对应的UI元素的纹理信息和颜色信息，包括：

根据所述每个粒子的位置信息和形态信息，对所述每个粒子的贴图进行采样，得到所述每个粒子对应的UI元素的纹理信息和颜色信息。

7.根据权利要求1所述的方法，其特征在于，所述对所述每个粒子的贴图进行采样，得到所述每个粒子对应的UI元素的纹理信息和颜色信息，包括：

根据所述每帧粒子图像在所述粒子动画中的时间，获取所述每帧粒子图像中每个粒子的颜色信息，将所述每个粒子的颜色信息作为所述每个粒子对应的UI元素的颜色信息；

获取所述粒子动画中每个粒子的生命周期的数量；

当所述数量等于一时，获取所述每帧粒子图像中每个粒子的纹理信息，将所述每个粒子的纹理信息作为所述每个粒子对应的UI元素的纹理信息；

当所述数量大于一时，根据当前事件，获取所述每帧粒子图像中所述每个粒子的纹理信息，将所述每个粒子的纹理信息作为所述每个粒子对应的UI元素的纹理信息。

8.根据权利要求1所述的方法，其特征在于，所述对于每帧粒子图像，根据每个粒子的位置信息，获取所述每个粒子对应的用户界面UI元素的位置信息之前，所述方法还包括：

对可遮罩图像MaskableGraphic类进行实例化，得到继承所述MaskableGraphic类的对象；

基于所述对象，执行所述动画显示方法的步骤。

9.根据权利要求1所述的方法，其特征在于，所述方法还包括：

对于所述粒子动画包括的多帧粒子图像，每隔目标数量帧，执行获取UI元素的位置信息、纹理信息、颜色信息以及显示步骤，所述目标动画包括的图像的数量小于所述粒子动画包括的粒子图像的数量。

10.一种动画显示装置，其特征在于，所述装置包括：

获取模块，用于获取粒子动画，所述粒子动画包括多帧粒子图像；

所述获取模块，还用于对于每帧粒子图像，根据每个粒子的位置信息，获取所述每个粒子对应的用户界面UI元素的位置信息；

采样模块，用于对所述每个粒子的贴图进行采样，得到所述每个粒子对应的UI元素的纹理信息和颜色信息，所述UI元素的纹理信息和颜色信息与对应的粒子的纹理信息和颜色信息相同；

显示模块，用于在图形用户界面中，按照所述每个粒子对应的UI元素的位置信息、纹理信息和颜色信息，显示与所述粒子动画的动画效果相符的目标动画。

11.根据权利要求10所述的装置，其特征在于，所述装置还包括：

创建模块，用于根据所述粒子动画中每帧粒子图像的粒子数量，创建顶点数组，所述顶点数组用于表示UI元素的顶点位置信息；

所述获取模块还用于：

对于每帧粒子图像，根据每个粒子的位置信息，获取所述每个粒子对应的UI元素的顶点位置信息。

12.根据权利要求10所述的装置，其特征在于，所述获取模块还用于：

获取所述每帧粒子图像中每个粒子的位置信息；

当所述位置信息为世界坐标系下的位置信息时，将所述每个粒子的位置信息转换为本地坐标系下的位置信息，所述本次坐标系为以所述每个粒子对应的目标位置为原点的物体坐标系。

13.根据权利要求10所述的装置，其特征在于，所述采样模块用于：

根据所述每帧粒子图像在所述粒子动画中的时间，获取所述每帧粒子图像中每个粒子的颜色信息，将所述每个粒子的颜色信息作为所述每个粒子对应的UI元素的颜色信息；

获取所述粒子动画中每个粒子的生命周期的数量；

当所述数量等于一时，获取所述每帧粒子图像中每个粒子的纹理信息，将所述每个粒子的纹理信息作为所述每个粒子对应的UI元素的纹理信息；

当所述数量大于一时，根据当前事件，获取所述每帧粒子图像中所述每个粒子的纹理信息，将所述每个粒子的纹理信息作为所述每个粒子对应的UI元素的纹理信息。

14.一种计算机设备，其特征在于，所述计算机设备包括一个或多个处理器和一个或多个存储器，所述一个或多个存储器中存储有至少一条指令，所述指令由所述一个或多个处理器加载并执行以实现如权利要求1至权利要求9任一项所述的动画显示方法所执行的操作。

15.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条指令，所述指令由处理器加载并执行以实现如权利要求1至权利要求9任一项所述的动画显示方法所执行的操作。