CN112348929A

CN112348929A - 帧动画的渲染方法、装置、计算机设备及存储介质

Info

Publication number: CN112348929A
Application number: CN202011354071.3A
Authority: CN
Inventors: 徐超
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2020-11-26
Filing date: 2020-11-26
Publication date: 2021-02-09

Abstract

本申请是关于一种帧动画的渲染方法、装置、计算机设备及存储介质，属于图片处理技术领域。该方法包括：通过主线程创建的工作线程获取计算机设备的渲染方式支持信息，基于渲染方式支持信息，从至少两种渲染方式中选择目标渲染方式；至少两种渲染方式中包含第一渲染方式和第二渲染方式，第一渲染方式是基于图像处理器进行渲染的方式，第二渲染方式是基于中央处理器进行渲染的方式；基于目标渲染方式，对帧动画中的各帧图片进行逐帧渲染。通过上述方案，可以避免了主线程发生阻塞时对帧动画渲染产生的影响，提高了各帧图片的渲染速度，进而提高了帧动画的渲染效率。

Description

帧动画的渲染方法、装置、计算机设备及存储介质

技术领域

本申请涉及图片处理技术领域，特别涉及一种帧动画的渲染方法、装置、计算机设备及存储介质。

背景技术

如今，随着用户对动画需求的提升，通过Gif图或者Apng图实现帧动画的方式由于分辨率以及展示效果的受限，逐渐被终端设备淘汰，随着终端设备的性能日益提高，可以通过HTML5的原生功能Canvas，实现简单的帧动画。

在相关技术中，利用Canvas实现帧动画，由于Canvas具有的2DAPI可以对帧图片进行渲染，并且绝大多数的终端设备支持HTML5的原生功能Canvas，所以通过Canvas对各个帧图片进行渲染，然后可以根据各个帧图片对应的定时器播放生成帧动画。

然而，相关技术中通过Canvas对各个帧图片进行渲染可能导致帧图片渲染速度较慢，进而导致帧动画的渲染效率较低。

发明内容

本申请实施例提供了一种帧动画的渲染方法、装置、计算机设备及存储介质，可以提高帧动画的渲染效率。该技术方案包括如下内容：

一方面，提供了一种帧动画的渲染方法，所述方法由计算机设备执行，所述方法包括：

响应于所述帧动画所处的页面中存在第一元素，通过主线程创建工作线程；所述第一元素用于指示支持图形绘制；所述主线程用于执行用户操作；所述工作线程是与所述主线程并行执行的线程；

通过所述工作线程获取所述计算机设备的渲染方式支持信息，所述渲染方式支持信息用于指示所述计算机设备对至少两种渲染方式的支持情况；

基于所述渲染方式支持信息，通过所述工作线程从所述至少两种渲染方式中选择目标渲染方式；所述至少两种渲染方式中包含第一渲染方式和第二渲染方式，所述第一渲染方式是基于图像处理器进行渲染的方式，所述第二渲染方式是基于中央处理器进行渲染的方式；所述第一渲染方式的优先级高于所述第二渲染方式的优先级；

基于所述目标渲染方式，通过所述工作线程对所述帧动画中的各帧图片进行逐帧渲染；所述帧动画是对所述各帧图片依序进行展示实现的动画。

一方面，提供了一种帧动画的渲染装置，所述装置用于计算机设备中，所述装置包括：

线程创建模块，用于响应于所述帧动画所处的页面中存在第一元素，通过主线程创建工作线程；所述第一元素用于指示支持图形绘制；所述主线程用于执行用户操作；所述工作线程是与所述主线程并行执行的线程；

信息获取模块，用于通过所述工作线程获取所述计算机设备的渲染方式支持信息，所述渲染方式支持信息用于指示所述计算机设备对至少两种渲染方式的支持情况；

目标选择模块，用于基于所述渲染方式支持信息，通过所述工作线程从所述至少两种渲染方式中选择目标渲染方式；所述至少两种渲染方式中包含第一渲染方式和第二渲染方式，所述第一渲染方式是基于图像处理器进行渲染的方式，所述第二渲染方式是基于中央处理器进行渲染的方式；所述第一渲染方式的优先级高于所述第二渲染方式的优先级；

图片渲染模块，用于基于所述目标渲染方式，通过所述工作线程对所述帧动画中的各帧图片进行逐帧渲染；所述帧动画是对所述各帧图片依序进行展示实现的动画。

在一种可能的实现方式中，所述信息获取模块，包括：

创建结果获取子模块，用于通过所述工作线程创建所述第一渲染方式的渲染上下文，获得所述第一渲染方式的渲染上下文的创建结果；

所述目标选择模块，包括：

第一目标选择子模块，用于响应于所述创建结果指示所述第一渲染方式的渲染上下文创建正确，通过所述工作线程将所述第一渲染方式选择为所述目标渲染方式；

第二目标选择子模块，用于响应于所述创建结果指示所述第一渲染方式的渲染上下文创建错误，通过所述工作线程将所述第二渲染方式选择为所述目标渲染方式。

在一种可能的实现方式中，所述信息获取模块，包括：

状态获取子模块，用于通过所述工作线程获取所述第一渲染方式的上下文状态，所述上下文状态用于指示所述计算机设备是否支持所述第一渲染方式；

所述目标选择模块，包括：

第三目标选择子模块，用于响应于所述上下文状态指示所述计算机设备支持所述第一渲染方式，通过所述工作线程将所述第一渲染方式选择为所述目标渲染方式；

第四目标选择子模块，用于响应于所述上下文状态指示所述计算机设备不支持所述第一渲染方式，通过所述工作线程将所述第二渲染方式选择为所述目标渲染方式。

在一种可能的实现方式中，所述图片渲染模块，包括：

图片加载子模块，用于通过所述工作线程加载所述帧动画中的各帧图片；

管理器创建子模块，用于通过所述工作线程创建所述帧动画的事件管理器，所述事件管理器用于管理事件容器，所述事件容器包含所述各帧图片中，除了首帧图片之外的其它图片对应的动画翻页事件所述动画翻页事件对应有预期触发时间；

图片渲染子模块，用于基于所述目标渲染方式，通过所述工作线程按照所述预期触发时间对所述其它图片进行逐帧渲染。

在一种可能的实现方式中，所述图片渲染子模块，包括：

事件查询单元，用于在开始展示所述其它图片中的一帧图片时，通过所述工作线程查询所述事件容器中是否包含所述预期触发时间到达的事件；

图片渲染单元，用于响应于存在所述预期触发时间到达的事件，且所述预期触发时间到达的事件是所述动画翻页事件，基于所述目标渲染方式，通过所述工作线程渲染所述预期触发时间到达的事件对应的图片。

在一种可能的实现方式中，所述事件容器中还包含用户注册事件，所述装置还包括：

事件执行单元，用于响应于存在所述预期触发时间到达的事件，且所述预期触发时间到达的事件是所述用户注册事件，执行所述用户注册事件。

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

事件销毁单元，用于响应于存在所述预期触发时间到达的事件，且所述预期触发时间到达的事件是暂停播放所述帧动画的事件，销毁所述事件容器中剩余的所述动画翻页事件。

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

事件创建单元，用于响应于存在所述预期触发时间到达的事件，且所述预期触发时间到达的事件是继续播放所述帧动画或者重新播放所述帧动画的事件，在所述事件容器中创建继续播放所述帧动画或者重新播放所述帧动画的所述动画翻页事件。

在一种可能的实现方式中，所述图片加载子模块，包括：

首帧图片加载单元，用于通过第一工作线程加载所述各帧图片中的首帧图片；

其它图片加载单元，用于通过第二工作线程加载所述各帧图片中，除了所述首帧图片之外的其它图片；

所述装置还包括：

首帧图片展示单元，用于在通过所述第一工作线程加载所述各帧图片中的首帧图片完成后，渲染并展示所述首帧图片。

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

第一渲染器创建子模块，用于基于所述目标渲染方式，按照所述预期触发时间对所述其它图片进行逐帧渲染之前，响应于所述目标渲染方式是所述第一渲染方式，创建所述第一渲染方式对应的渲染器；

第一图片渲染子模块，用于响应于创建所述第一渲染方式对应的渲染器成功，基于所述第一渲染方式，按照所述预期触发时间对所述其它图片进行逐帧渲染。

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

第二图片渲染子模块，用于响应于创建所述第一渲染方式对应的渲染器失败，基于所述第二渲染方式，按照所述预期触发时间对所述其它图片进行逐帧渲染。

在一种可能的实现方式中，所述第一渲染方式包括：

基于网络图形库WebGL的渲染方式，以及，基于WebGL2的渲染方式中的至少一种。

另一方面，提供了一种计算机设备，所述计算机设备包含处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上所述的帧动画的渲染方法。

另一方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如上所述的帧动画的渲染方法。

根据本申请的一个方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述方面的各种可选实现方式中提供的帧动画的渲染方法。

本申请提供的技术方案可以包括以下有益效果：

在本申请实施例所示的方案中，通过在主线程之外创建工作线程，基于计算机设备的渲染方式支持信息，通过工作线程可以确定计算机设备支持的且优先级较高的渲染方式作为目标渲染方式，对各帧图片进行逐帧渲染，实现帧动画。其中，优先级较高的渲染方式是优先使用图像处理器进行渲染的渲染方式，通过上述方案，可以通过工作线程单独执行动画渲染逻辑，避免了主线程发生阻塞时对帧动画渲染产生的影响，同时优先选择利用图像处理器进行渲染，且渲染效果较好的渲染方式对各帧图片进行逐帧渲染，提高了各帧图片的渲染速度，进而提高了帧动画的渲染效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1是根据一示例性实施例示出的一种帧动画的渲染系统的示意图；

图2是根据一示例性实施例示出的一种帧动画的渲染方法的流程图；

图3是根据一示例性实施例示出的一种帧动画的渲染方法的流程图；

图4是图3所示实施例涉及的一种帧动画的渲染流程示意图；

图5是根据一示例性实施例示出的一种帧动画的渲染方法框架示意图；

图6是根据一示例性实施例示出的一种帧动画的渲染装置的框图；

图7是根据一示例性实施例示出的一种计算机设备的结构示意图；

图8是根据一示例性实施例示出的计算机设备的结构框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

应当理解的是，在本文中提及的“若干个”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

首先，为了方便理解，下面对本公开实施例中涉及的名词进行说明。

1)人工智能(Artificial Intelligence，AI)

人工智能是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。换句话说，人工智能是计算机科学的一个综合技术，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。人工智能也就是研究各种智能机器的设计原理与实现方法，使机器具有感知、推理与决策的功能。

人工智能技术是一门综合学科，涉及领域广泛，既有硬件层面的技术也有软件层面的技术。人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

2)帧动画

帧动画，也称为逐帧动画(Frame By Frame)，是一种常见的动画形式，其原理是在"连续的关键帧"中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显，逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如，人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

3)WebGL(WebGraphicsLibrary，网络图形库)

WebGL是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等。

图1示出了本申请一个实施例提供的帧动画的渲染系统的示意图。该帧动画的渲染系统可以包括：计算机设备110以及服务器120。

其中，计算机设备110用于执行帧动画渲染的步骤，并且计算机设备110中的显示终端展示生成的帧动画，终端可以接收到用户的操作指令，从而控制生成的帧动画进行播放、暂停、结束播放等。服务器120用于存储生成帧动画的图片素材。

其中，计算机设备110可以是智能手机、平板电脑、笔记本电脑、台式计算机等，但并不局限于此。

服务器120可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。

服务器120中的数据库中可以存储有用于生成帧动画的各帧对应的图片素材。计算机设备110可以通过有线或者无线网络与服务器120进行数据传输。

计算机设备110以及服务器120通过通信网络相连。可选的，通信网络是有线网络或无线网络。

可选的，上述的无线网络或有线网络使用标准通信技术和/或协议。网络通常为因特网、但也可以是任何网络，包括但不限于局域网(Local Area Network，LAN)、城域网(Metropolitan Area Network，MAN)、广域网(Wide Area Network，WAN)、移动、有线或者无线网络、专用网络或者虚拟专用网络的任何组合)。在一些实施例中，使用包括超文本标记语言(Hyper Text Mark-up Language，HTML)、可扩展标记语言(Extensible MarkupLanguage，XML)等的技术和/或格式来代表通过网络交换的数据。此外还可以使用诸如安全套接字层(Secure Socket Layer，SSL)、传输层安全(Transport Layer Security，TLS)、虚拟专用网络(Virtual Private Network，VPN)、网际协议安全(Internet ProtocolSecurity，IPsec)等常规加密技术来加密所有或者一些链路。在另一些实施例中，还可以使用定制和/或专用数据通信技术取代或者补充上述数据通信技术。本申请在此不做限制。

图2是根据一示例性实施例示出的一种帧动画的渲染方法的流程图。该帧动画的渲染方法可以应用在图1所示的帧动画的渲染系统中，由图1中的计算机设备进行执行。如图2所示，该帧动画的渲染方法包括的步骤如下。

在步骤201中，响应于获取到第一元素，通过主线程创建工作线程；第一元素用于指示支持图形绘制；主线程用于执行用户操作；工作线程是与主线程并行执行的线程。

在一种可能的实现方式中，主线程创建工作线程(Web Worker)后，主线程将创建的离屏Canvas通过消息机制传递给工作线程。

在步骤202中，通过工作线程获取计算机设备的渲染方式支持信息，渲染方式支持信息用于指示计算机设备对至少两种渲染方式的支持情况。

在一种可能的实现方式中，至少两种渲染方式包括基于网络图形库WebGL的渲染方式，以及，基于WebGL2的渲染方式中的至少一种。

在步骤203中，基于渲染方式支持信息，通过工作线程从至少两种渲染方式中选择目标渲染方式；至少两种渲染方式中包含第一渲染方式和第二渲染方式，第一渲染方式是基于图像处理器进行渲染的方式，第二渲染方式是基于中央处理器进行渲染的方式；第一渲染方式的优先级高于第二渲染方式的优先级。

其中，计算机设备优先使用第一渲染方式对各帧图片进行渲染，第一渲染方式可以通过使用图像处理器对各帧图片进行渲染，进而减少渲染过程对中央处理器的资源损耗。并且使用图像处理器对各帧图片进行渲染的渲染效果要优于使用中央处理器资源对各帧图片进行渲染的渲染效果。

在步骤204中，基于目标渲染方式，通过工作线程对帧动画中的各帧图片进行逐帧渲染；帧动画是对各帧图片依序进行展示实现的动画。

综上所述，在本申请实施例所示的方案中，通过在主线程之外创建工作线程，基于计算机设备的渲染方式支持信息，通过工作线程可以确定计算机设备支持的且优先级较高的渲染方式作为目标渲染方式，对各帧图片进行逐帧渲染，实现帧动画。其中，优先级较高的渲染方式是优先使用图像处理器进行渲染的渲染方式，通过上述方案，可以通过工作线程单独执行动画渲染逻辑，避免了主线程发生阻塞时对帧动画渲染产生的影响，同时优先选择利用图像处理器进行渲染，且渲染效果较好的渲染方式对各帧图片进行逐帧渲染，提高了各帧图片的渲染速度，进而提高了帧动画的渲染效率。

图3是根据一示例性实施例示出的一种帧动画的渲染方法的流程示意图。该帧动画的渲染方法可以应用于图1所示的帧动画的渲染系统中，由图1中的计算机设备进行执行。如图3所示，该帧动画的渲染方法包括的步骤如下。

步骤301中，响应于帧动画所处的页面中存在第一元素，通过主线程创建工作线程。

在本申请实施例中，若当前需要进行帧动画渲染的页面上存在第一元素，通过主线程可以创建至少一条工作线程。

其中，第一元素用于指示支持图形绘制；主线程用于执行用户操作；工作线程是与主线程并行执行的线程。

在一种可能的实现方式中，第一元素是Canvas元素，响应于获取到页面中的Canvas元素，通过当前执行业务逻辑的主线程创建至少一条工作线程。响应于获取到Canvas元素，创建离屏Canvas。然后基于消息传递机制，通过主线程将离屏Canvas发送给工作线程。

步骤302中，通过工作线程，获取计算机设备的渲染方式支持信息。

在本申请实施例中，计算机设备基于自身的兼容性，通过工作线程获取计算机设备的渲染方式支持信息。

其中，渲染方式支持信息可以用于指示计算机设备对至少两种渲染方式的支持情况。

在一种可能的实现方式中，计算机设备创建第一渲染方式的渲染上下文，获得第一渲染方式的渲染上下文的创建结果。

其中，第一渲染方式包括基于网络图形库WebGL的渲染方式，以及，基于WebGL2的渲染方式中的至少一种。

示例性的，计算机设备可以利用HTML5标准API(Application ProgramInterface，应用程序接口)分别创建WebGL2和WebGL的渲染上下文，若接收到错误信息，则获得WebGL2和WebGL的渲染上下文的创建结果为创建失败，即计算机设备不支持WebGL2和WebGL的渲染方式。

在另一种可能的实现方式中，计算机设备获取第一渲染方式的上下文状态。

其中，上下文状态用于指示计算机设备是否支持第一渲染方式。

示例性的，计算机设备利用HTML5标准API获取WebGL2上下文状态，基于上下文状态判断该计算机设备是否可以对WebGL2提供支持，如果该计算机设备不能支持WebGL2渲染上下文，计算机设备利用HTML5标准API获取WebGL上下文状态，基于上下文状态判断该计算机设备是否可以对WebGL提供支持，如果该计算机设备不能支持WebGL渲染上下文，则程序应自动变更为使用第二渲染方式。

其中，其二渲染方式包含使用HTML5原生的Canvas 2D API渲染方式。

步骤303中，基于渲染方式支持信息，通过工作线程从至少两种渲染方式中选择目标渲染方式。

在本申请实施例中，计算机设备基于渲染方式支持信息，通过工作线程从第一渲染方式以及第二渲染方式中选择一个作为目标渲染方式。

其中，至少两种渲染方式中包含第一渲染方式和第二渲染方式，第一渲染方式是基于图像处理器进行渲染的方式，第二渲染方式是基于中央处理器进行渲染的方式；第一渲染方式的优先级高于第二渲染方式的优先级。

在一种可能的实现方式中，响应于创建结果指示第一渲染方式的渲染上下文创建正确，将第一渲染方式选择为目标渲染方式；响应于创建结果指示第一渲染方式的渲染上下文创建错误，将第二渲染方式选择为目标渲染方式。

在另一种可能的实现方式中，响应于上下文状态指示计算机设备支持第一渲染方式，将第一渲染方式选择为目标渲染方式，响应于上下文状态指示计算机设备不支持第一渲染方式，将第二渲染方式选择为目标渲染方式。

示例性的，响应于创建WebGL2的上下文信息，接收第一反馈信息；第一反馈信息用于指示终端是否支持WebGL2的上下文信息；响应于第一反馈信息指示正确信息，确定目标渲染方式是WebGL2的渲染方式。响应于第一反馈信息指示错误信息，创建WebGL的上下文信息；接收第二反馈信息；第二反馈信息用于指示终端是否支持WebGL的渲染方式；响应于第二反馈信息指示正确信息，确定目标渲染方式是WebGL的渲染方式。响应于第二反馈信息指示错误信息，确定目标渲染方式是使用Canvas 2D API进行渲染的方式。

其中，第一渲染方式可以是创建WebGL2渲染环境，通过WebGL2进行渲染，也可以是创建WebGL渲染环境，通过WebGL进行渲染。第二渲染方式可以是通过使用Canvas 2D API进行渲染。

其中，通过WebGL2或者WebGL进行渲染得到的渲染效果优于通过使用Canvas 2DAPI进行渲染得到的渲染效果。通过WebGL2进行渲染或者通过WebGL进行渲染均可以使用终端中的图像处理器进行加速渲染，而使用HTML5原生的Canvas 2D API进行渲染只能调用终端的中央处理器的资源进行渲染。

示例性的，利用HTML5标准API分别创建WebGL2和WebGL渲染上下文，若设备的兼容性不能支持WebGL2或者WebGL渲染上下文，则会返回一个错误信息反馈，或者，可以利用HTML5标准API获取WebGL的上下文状态，基于获取WebGL的上下文状态判断设备是否可以对WebGL提供支持。当设备可以支持WebGL2类型渲染上下文，则程序使用WebGL2进行渲染；当设备可以支持WebGL类型渲染上下文，则程序使用WebGL进行渲染；当设备不能支持WebGL2类型渲染上下文以及WebGL类型渲染上下文时，则程序应自动变更为使用Canvas 2D API进行渲染。

在一种可能的实现方式中，响应于确定目标渲染方式为通过WebGL进行渲染，且检测到程序中不支持WebGL扩展程序，则将目标渲染方式更换为使用Canvas 2D API进行渲染。

示例性的，由于WebGL是基于OpenGL ES 2.0版本的，且该版本未提供原生的顶点数组对象供应用程序调用，终端需要使用WebGL扩展程序，使得具有顶点数组对象功能。当确定目标渲染方式是WebGL渲染时，需要检测终端是否支持WebGL扩展程序，若终端支持WebGL扩展程序，则目标渲染方式依然是WebGL，若终端不支持WebGL扩展程序，则目标渲染方式是使用Canvas 2D API进行渲染。

其中，顶点数组对象中封装了与顶点处理器有关的所有数据，记录了顶点缓存区和索引缓冲区的引用，以及顶点的各种属性的布局。中央处理器提供给图像处理器的顶点信息，包括了顶点的位置、顶点的颜色、纹理坐标等顶点信息。

步骤304中，通过工作线程加载帧动画中的各帧图片。

在本申请实施例中，计算机设备通过工作线程获取帧动画中的各帧图片，并且进行加载。

其中，各帧图片用于指示帧动画中的各帧原始图片素材的集合。

在一种可能的实现方式中，计算机设备从数据库中调用帧动画中的各帧图片。

示例性的，计算机设备可以创建一个帧动画生成工程，将收集的帧动画中的各帧图片导入帧动画生成工程中。

在一种可能的实现方式中，计算机设备基于帧动画显示界面的理论刷新率，预先设置帧动画对应的帧率。

比如，以使用超文本标记语言HTML5为例，HTML5提供一个专门用于请求动画的接口requestAnimationFrame，使得浏览器开启垂直同步，当浏览器的理论刷新率为60帧每秒，为了保证动画的播放效果具有流畅性，需要设置帧动画的帧率为理论刷新率60的约数，比如，帧动画的帧率可以是60帧每秒、30帧每秒或者20帧每秒。当帧动画的帧率是60的约数时，可以保证浏览器刷新的两帧之间的动画播放的间隔帧数均等，从而保证动画播放效果更加流畅。

其中，每次刷新的间隔中会执行一次回调函数，当帧动画的帧率是浏览器的理论刷新率的约数时不会引起丢帧。

在一种可能的实现方式中，计算机设备通过第一工作线程加载各帧图片中的首帧图片；然后通过第二工作线程加载各帧图片中，除了首帧图片之外的其它图片。

其中，各帧图片中的首帧图片可以渲染为帧动画的动画首帧，需要在未播放帧动画时优先在前端页面中展示动画首帧，所以计算机设备可以优先通过第一工作线程加载首帧图片，然后再通过第二工作线程加载帧图片中除了首帧图片之外的其它图片。

在一种可能的实现方式中，在通过第一工作线程加载各帧图片中的首帧图片完成后，渲染并展示首帧图片。

其中，通过第二渲染方式渲染并展示首帧图片之前，也可以基于渲染方式支持信息，确定该计算机设备是否支持第一渲染方式，若确定该计算机设备支持第一渲染方式，则可以通过第一渲染方式对首帧图片进行渲染。或者，在通过第一工作线程加载各帧图片中的首帧图片完成后，计算机设备可以直接通过第二渲染方式渲染并展示首帧图片。

比如，计算机设备可以从各帧图片中选取一帧对应的图片作为优先处理图片。优先处理图片是优先进行渲染处理的各帧图片中的一个，优先进行渲染加载完成后，可以优先展示在显示终端上作为动画首帧。计算机设备可以根据图片选取指令，将指定帧对应的图片确定为优先处理图片，计算机设备也可以将首帧图片确定为优先处理图片。

步骤305中，通过工作线程创建帧动画的事件管理器。

在本申请实施例中，计算机设备在程序中创建帧动画的事件管理器。

其中，事件管理器用于管理事件容器，事件容器包含各帧图片中，除了首帧图片之外的其它图片对应的动画翻页事件，动画翻页事件对应有预期触发时间。动画翻页事件是用于指示清除屏幕，并渲染当前帧图片的事件。

事件管理器可以是应用程序中一段专用于按照各帧时间轴去执行各个任务的程序代码，相比较于针对各个任务独立注册对应的定时器，大量的注册定时器会导致代码结构变得松散，而且在一定程度上增加了程序退出时对定时器的清理工作。通过事件管理器对任务进行集中管理，可以统一进行销毁，从而减少清理的工作量。

步骤306中，在开始展示其它图片中的一帧图片时，查询事件容器中是否包含预期触发时间到达的事件。

在本申请实施例中，当各帧图片均加载完成时，可以开始展示其他图片。计算机设备通过查询事件容器，按照预期触发时间执行各个事件。

步骤307中，响应于存在预期触发时间到达的事件，且预期触发时间到达的事件是动画翻页事件，基于目标渲染方式，渲染预期触发时间到达的事件对应的图片。

在本申请实施例中，当事件容器中存在预期触发时间到达的事件，并且预期触发时间到达的事件是动画翻页事件时，基于目标渲染方式，渲染预期触发时间到达的事件对应的图片。

在一种可能的实现方式中，响应于目标渲染方式是第一渲染方式，创建第一渲染方式对应的渲染器。

其中，响应于创建第一渲染方式对应的渲染器成功，基于第一渲染方式，按照预期触发时间对其它图片进行逐帧渲染。响应于创建第一渲染方式对应的渲染器失败，基于第二渲染方式，按照预期触发时间对其它图片进行逐帧渲染。

在一种可能的实现方式中，响应于创建第一渲染方式对应的渲染器成功，计算机设备基于目标渲染方式为第一渲染方式，创建着色器。

其中，响应于目标渲染方式为第一渲染方式，基于第一渲染方式的上下文编写着色器代码，调用HTML5标准API创建顶点着色器和片段着色器。

示例性的，基于WebGL或者WebGL2的上下文分别编写着色器代码，调用HTML5标准API创建顶点着色器和片段着色器。

其中，顶点着色器可以负责将物体的坐标转换为2D显示区域中的坐标；片段着色器可以负责计算转换好的顶点像素的最终颜色输出，最终颜色输出基于颜色、纹理、光照、材质等数值输入。并且，顶点着色器是处理顶点数组对象提供的顶点信息的程序。

在一种可能的实现方式中，通过创建的顶点着色器和片段着色器，调用HTML5标准API创建一个渲染程序。

其中，终端依据图片顶点数据以及纹理坐标，创建渲染缓冲区，然后调用HTML5标准API创建一个顶点数组对象，并将渲染缓冲区与顶点数组对象进行绑定。

在一种可能的实现方式中，将加载到的图片转化为纹理对象。

其中，WebGL仅支持对分辨率为2的整数次幂的纹理使用贴图细化技术，所以只需设置纹理重叠方式和放大、缩小滤镜，其中，滤镜可以选择性能较好的线性滤镜。此外，WebGL可以支持Alpha预乘操作，对于有透明度的纹理可以开启Alpha预乘操作，以免除在着色器中进行预乘操作。

在一种可能的实现方式中，通过调用HTML5标准API对渲染程序进行连接，实现对绘图区的清理以及进行图片绘制。

其中，当纹理具有透明度，则WebGL在创建渲染上下文时开启MSAA(MultiSamplingAnti-Aliasing，多重采样抗锯齿)反锯齿或者FXAA(Fast Approximate Anti-Aliasing，快速近似抗锯齿)反锯齿，用来减少在绘制过程中纹理边缘出现的锯齿。

在一种可能的实现方式中，反锯齿手段通过程序调用，用户进行手动开启，或者，在绘制过程中自动进行开启。

其中，FXAA是传统MSAA效果的一种高性能近似值，相比于MSAA，FXAA的目标是速度更快、显存占用更低，还有着不会造成镜面模糊和亚像素模糊的优势，但是FXAA在精度和质量上与MSAA相比较差。

另外，响应于使用FXAA进行反锯齿，需要在渲染程序创建阶段依据FXAA的顶点着色器和片段着色器代码创建新的着色器对象和渲染程序，并创建一个帧缓冲区，在帧缓冲区的颜色挂载点挂载一个空白纹理对象；然后在清理和绘制帧阶段需要先绑定帧缓冲区、激活FXAA渲染程序，然后执行对应的绘制操作，此时，上文创建的空白纹理内容变为经FXAA处理的图片纹理，最后解绑帧缓冲区、激活初次创建的渲染程序，并将FXAA纹理渲染到绘图区。

步骤308中，响应于事件容器中还包含用户注册事件，响应于存在预期触发时间到达的事件，且预期触发时间到达的事件是用户注册事件，执行用户注册事件。

在本申请实施例中，当事件容器中还包括用户注册事件时，响应于存在预期触发时间到达的事件，且预期触发时间到达的事件是用户注册事件，计算机设备执行该用户注册事件。

比如，在帧动画A中，在甲需求下需要在帧动画A开始播放500ms后执行一个“弹出浮层”的事件，在乙需求中需要在A动画开始播放后每100ms在页面中增加一行文本，执行“增加文本”的事件，此处的“弹出浮层”和“增加文本”为对应的用户注册事件。

在一种可能的实现方式中，响应于存在预期触发时间到达的事件，且预期触发时间到达的事件是暂停播放帧动画的事件，计算机设备还销毁事件容器中剩余的动画翻页事件。

在一种可能的实现方式中，响应于存在预期触发时间到达的事件，且预期触发时间到达的事件是继续播放帧动画或者重新播放帧动画的事件，计算机设备还在事件容器中创建继续播放帧动画或者重新播放帧动画的动画翻页事件。

其中，如果是“继续播放帧动画”的事件，则计算机设备从当前帧开始创建剩余的翻页事件；如果是“重新播放帧动画”的事件，则计算机设备清空剩余的动画翻页事件并重新创建动画翻页事件。

在另一种可能的实现方式中，响应于存在预期触发时间到达的事件，且预期触发时间到达的事件是允许帧动画指定区域接收触控操作的事件，接收触控操作指示动画翻页事件的分支，基于接收到的触控操作，选择继续执行的动画翻页事件的分支。

示例性的，当帧动画是一个显示“红包雨”的动画，当预期触发时间到达的事件是接收用户对各个红包图案的触控操作，当接收到对第一指定图案的触控操作，则基于该动画翻页事件分支，可以在下一帧图片显示第一类型图片，用来指示第一指定图案中的内容，当接收到对第二指定图案的触控操作，则基于该动画翻页事件分支，可以在下一帧图片显示第二类型图片，用来指示第二指定图案中的内容。

图4是本申请实施例涉及的一种帧动画渲染流程示意图。如图4所示，计算机设备首先通过主线程获取在页面中是否存在Canvas元素，当获取到页面中的Canvas元素时(S41)，创建与当前的主线程并行的工作线程(S42)，然后通过Canvas元素创建离屏Canvas(S43)，通过消息机制将创建的离屏Canvas发送给工作线程，主线程通过绑定动画翻页事件的回调函数(S44)，使主线程接收到用户操作执行的事件与工作线程的动画翻页事件关联，使得工作线程进行纹理渲染可以受控于主线程，通过接收到的离屏Canvas，工作线程收集到动画帧图片(S45)，优先加载动画首帧图像(S46)，渲染动画首帧图像(S47)，加载其它动画帧(S48)，创建事件管理器，事件管理器中存储有动画翻页事件以及用户注册的事件及其预期触发时间(S49)。然后创建WebGL2渲染上下文，判断当前设备是否支持WebGL2渲染上下文(S410)，若判断当前设备不支持WebGL2渲染上下文，则创建WebGL渲染上下文，判断当前设备是否支持WebGL渲染上下文(S411)，若判断当前设备不支持WebGL渲染上下文，则使用HTML5原生的Canvas 2D API进行渲染(S412)，若判断当前设备支持WebGL2渲染上下文，则在WebGL2渲染上下文中，进行着色器创建(S414)，然后根据创建的着色器创建渲染程序(S415)，根据图片顶点数据以及图片纹理坐标，创建渲染缓冲区，将渲染缓冲区与顶点数组对象进行绑定(S416)，初始化图片纹理(S417)，根据由主线程经过消息机制传递的参数，绑定渲染纹理(S418)，清理并且绘制帧(S419)。若判断当前设备支持WebGL渲染上下文，则判断终端是否支持初始化扩展程序(S413)，若终端支持初始化扩展程序，则执行S414至S419的步骤。若终端不支持初始化扩展程序，则使用HTML5原生的Canvas2D API进行渲染(S412)，最终完成渲染图片(S420)。

图5是根据一示例性实施例示出的一种帧动画的渲染框架示意图。如图5所示，该帧动画的渲染过程应用于计算机设备50中，并且在工作线程中执行，计算机设备50从数据库51中获取帧动画对应的各帧图片，分别是图片a、图片b一直到图片n。将各帧图片中的首帧图片，图片a进行优先渲染处理。计算机设备首先创建WebGL2渲染上下文，若收到正确的反馈信息，则使用WebGL2作为目标渲染方式，若受到错误的反馈信息，则创建WebGL渲染上下文。当WebGL渲染上下文，接收到正确的反馈信息，则使用WebGL作为目标渲染方式，若受到错误的反馈信息，则使用Canvas 2D API作为目标渲染方式。进行优先渲染处理的图片a通过目标渲染方式进行渲染后的动画首帧，图片A在展示终端52上进行优先展示。其它的各帧图片对应的动画翻页事件按照对应的预计触发时间存储在时间轴容器中，按照目标渲染方式，对其它图片进行逐帧渲染，具体可以是先将图片b在绘图区中进行渲染，然后生成纹理B，绘图区中清除后，再将图片c放入绘图区，渲染成纹理C，直到图片n渲染完成。将渲染完成的各帧图片按照时间轴容器中存储的对应的动画翻页事件进行逐帧播放，在展示终端52中播放帧动画。

图6是根据一示例性实施例示出的一种帧动画的渲染装置的框图，如图6所示，该帧动画的渲染装置可以通过硬件或者软硬结合的方式实现为计算机设备中的全部或者部分，以执行图2或图3对应实施例所示的方法的全部或部分步骤。该帧动画的渲染装置可以包括：

线程创建模块610，用于响应于所述帧动画所处的页面中存在第一元素，通过主线程创建工作线程；所述第一元素用于指示支持图形绘制；所述主线程用于执行用户操作；所述工作线程是与所述主线程并行执行的线程；

信息获取模块620，用于通过所述工作线程获取所述计算机设备的渲染方式支持信息，所述渲染方式支持信息用于指示所述计算机设备对至少两种渲染方式的支持情况；

目标选择模块630，用于基于所述渲染方式支持信息，通过所述工作线程从所述至少两种渲染方式中选择目标渲染方式；所述至少两种渲染方式中包含第一渲染方式和第二渲染方式，所述第一渲染方式是基于图像处理器进行渲染的方式，所述第二渲染方式是基于中央处理器进行渲染的方式；所述第一渲染方式的优先级高于所述第二渲染方式的优先级；

图片渲染模块640，用于基于所述目标渲染方式，通过所述工作线程对所述帧动画中的各帧图片进行逐帧渲染；所述帧动画是对所述各帧图片依序进行展示实现的动画。

在一种可能的实现方式中，所述信息获取模块620，包括：

所述目标选择模块630，包括：

在一种可能的实现方式中，所述信息获取模块620，包括：

所述目标选择模块630，包括：

在一种可能的实现方式中，所述图片渲染模块640，包括：

在一种可能的实现方式中，所述图片渲染子模块，包括：

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

在一种可能的实现方式中，所述图片加载子模块，包括：

所述装置还包括：

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

在一种可能的实现方式中，所述第一渲染方式包括：

图7是根据一示例性实施例示出的一种计算机设备的结构示意图。所述计算机设备700包括中央处理单元(Central Processing Unit，CPU)701、包括随机存取存储器(Random Access Memory，RAM)702和只读存储器(Read-Only Memory，ROM)703的系统存储器704，以及连接系统存储器704和中央处理单元701的系统总线705。所述计算机设备700还包括帮助计算机设备内的各个器件之间传输信息的基本输入/输出系统(Input/Output，I/O系统)706，和用于存储操作系统713、应用程序714和其他程序模块715的大容量存储设备707。

所述基本输入/输出系统706包括有用于显示信息的显示器708和用于用户输入信息的诸如鼠标、键盘之类的输入设备709。其中所述显示器708和输入设备709都通过连接到系统总线705的输入输出控制器710连接到中央处理单元701。所述基本输入/输出系统706还可以包括输入输出控制器710以用于接收和处理来自键盘、鼠标、或电子触控笔等多个其他设备的输入。类似地，输入输出控制器710还提供输出到显示屏、打印机或其他类型的输出设备。

所述大容量存储设备707通过连接到系统总线705的大容量存储控制器(未示出)连接到中央处理单元701。所述大容量存储设备707及其相关联的计算机设备可读介质为计算机设备700提供非易失性存储。也就是说，所述大容量存储设备707可以包括诸如硬盘或者只读光盘(Compact Disc Read-Only Memory，CD-ROM)驱动器之类的计算机设备可读介质(未示出)。

不失一般性，所述计算机设备可读介质可以包括计算机设备存储介质和通信介质。计算机设备存储介质包括以用于存储诸如计算机设备可读指令、数据结构、程序模块或其他数据等信息的任何方法或技术实现的易失性和非易失性、可移动和不可移动介质。计算机设备存储介质包括RAM、ROM、可擦除可编程只读存储器(Erasable Programmable ReadOnly Memory，EPROM)、带电可擦可编程只读存储器(Electrically ErasableProgrammable Read-Only Memory，EEPROM)，CD-ROM、数字视频光盘(Digital Video Disc，DVD)或其他光学存储、磁带盒、磁带、磁盘存储或其他磁性存储设备。当然，本领域技术人员可知所述计算机设备存储介质不局限于上述几种。上述的系统存储器704和大容量存储设备707可以统称为存储器。

根据本公开的各种实施例，所述计算机设备700还可以通过诸如因特网等网络连接到网络上的远程计算机设备运行。也即计算机设备700可以通过连接在所述系统总线705上的网络接口单元711连接到网络712，或者说，也可以使用网络接口单元711来连接到其他类型的网络或远程计算机设备系统(未示出)。

所述存储器还包括一个或者一个以上的程序，所述一个或者一个以上程序存储于存储器中，中央处理器701通过执行该一个或一个以上程序来实现图2、图3所示的方法的全部或者部分步骤。

图8是根据一示例性实施例示出的计算机设备800的结构框图。该计算机设备800可以是图1所示的人脸识别系统中的终端。

通常，计算机设备800包括有：处理器801和存储器802。

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

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

在一些实施例中，计算机设备800还可选包括有：外围设备接口803和至少一个外围设备。处理器801、存储器802和外围设备接口803之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口803相连。具体地，外围设备包括：射频电路804、显示屏805、摄像头组件806、音频电路807、定位组件808和电源809中的至少一种。

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

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

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

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

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

定位组件808用于定位计算机设备800的当前地理位置，以实现导航或LBS(Location Based Service，基于位置的服务)。定位组件808可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统或俄罗斯的伽利略系统的定位组件。

电源809用于为计算机设备800中的各个组件进行供电。电源809可以是交流电、直流电、一次性电池或可充电电池。当电源809包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

在一些实施例中，计算机设备800还包括有一个或多个传感器810。该一个或多个传感器810包括但不限于：加速度传感器811、陀螺仪传感器812、压力传感器813、指纹传感器814、光学传感器815以及接近传感器816。

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

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

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

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

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

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

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

在一示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括至少一条指令、至少一段程序、代码集或指令集的存储器，上述至少一条指令、至少一段程序、代码集或指令集可由处理器执行以完成上述图2或图3任一实施例所示的方法的全部或者部分步骤。例如，非临时性计算机可读存储介质可以是ROM、RAM、CD-ROM、磁带、软盘和光数据存储设备等。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本公开实施例所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机设备可读介质中或者作为计算机设备可读介质上的一个或多个指令或代码进行传输。计算机设备可读介质包括计算机设备存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机设备程序的任何介质。存储介质可以是通用或专用计算机设备能够存取的任何可用介质。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims

1.一种帧动画的渲染方法，其特征在于，所述方法由计算机设备执行，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述通过所述工作线程获取所述计算机设备的渲染方式支持信息，包括：

通过所述工作线程创建所述第一渲染方式的渲染上下文，获得所述第一渲染方式的渲染上下文的创建结果；

所述基于所述渲染方式支持信息，通过所述工作线程从所述至少两种渲染方式中选择目标渲染方式，包括：

响应于所述创建结果指示所述第一渲染方式的渲染上下文创建正确，通过所述工作线程将所述第一渲染方式选择为所述目标渲染方式；

响应于所述创建结果指示所述第一渲染方式的渲染上下文创建错误，通过所述工作线程将所述第二渲染方式选择为所述目标渲染方式。

3.根据权利要求1所述的方法，其特征在于，所述通过所述工作线程获取所述计算机设备的渲染方式支持信息，包括：

通过所述工作线程获取所述第一渲染方式的上下文状态，所述上下文状态用于指示所述计算机设备是否支持所述第一渲染方式；

响应于所述上下文状态指示所述计算机设备支持所述第一渲染方式，通过所述工作线程将所述第一渲染方式选择为所述目标渲染方式；

响应于所述上下文状态指示所述计算机设备不支持所述第一渲染方式，通过所述工作线程将所述第二渲染方式选择为所述目标渲染方式。

4.根据权利要求1至3任一所述的方法，其特征在于，所述基于所述目标渲染方式，通过所述工作线程对所述帧动画中的各帧图片进行逐帧渲染，包括：

通过所述工作线程加载所述帧动画中的各帧图片；

通过所述工作线程创建所述帧动画的事件管理器，所述事件管理器用于管理事件容器，所述事件容器包含所述各帧图片中，除了首帧图片之外的其它图片对应的动画翻页事件，所述动画翻页事件对应有预期触发时间；

基于所述目标渲染方式，通过所述工作线程按照所述预期触发时间对所述其它图片进行逐帧渲染。

5.根据权利要求4所述的方法，其特征在于，所述基于所述目标渲染方式，通过所述工作线程按照所述预期触发时间对所述其它图片进行逐帧渲染，包括：

在开始展示所述其它图片中的一帧图片时，通过所述工作线程查询所述事件容器中是否包含所述预期触发时间到达的事件；

响应于存在所述预期触发时间到达的事件，且所述预期触发时间到达的事件是所述动画翻页事件，基于所述目标渲染方式，通过所述工作线程渲染所述预期触发时间到达的事件对应的图片。

6.根据权利要求5所述的方法，其特征在于，所述事件容器中还包含用户注册事件，所述方法还包括：

响应于存在所述预期触发时间到达的事件，且所述预期触发时间到达的事件是所述用户注册事件，执行所述用户注册事件。

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

响应于存在所述预期触发时间到达的事件，且所述预期触发时间到达的事件是暂停播放所述帧动画的事件，销毁所述事件容器中剩余的所述动画翻页事件。

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

响应于存在所述预期触发时间到达的事件，且所述预期触发时间到达的事件是继续播放所述帧动画或者重新播放所述帧动画的事件，在所述事件容器中创建继续播放所述帧动画或者重新播放所述帧动画的所述动画翻页事件。

9.根据权利要求4所述的方法，其特征在于，所述通过所述工作线程加载所述帧动画中的各帧图片，包括：

通过第一工作线程加载所述各帧图片中的首帧图片；

通过第二工作线程加载所述各帧图片中，除了所述首帧图片之外的其它图片；

所述方法还包括：

在通过所述第一工作线程加载所述各帧图片中的首帧图片完成后，渲染并展示所述首帧图片。

10.根据权利要求4所述的方法，其特征在于，所述基于所述目标渲染方式，按照所述预期触发时间对所述其它图片进行逐帧渲染之前，还包括：

响应于所述目标渲染方式是所述第一渲染方式，创建所述第一渲染方式对应的渲染器；

响应于创建所述第一渲染方式对应的渲染器成功，基于所述第一渲染方式，按照所述预期触发时间对所述其它图片进行逐帧渲染。

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

响应于创建所述第一渲染方式对应的渲染器失败，基于所述第二渲染方式，按照所述预期触发时间对所述其它图片进行逐帧渲染。

12.根据权利要求1至3任一所述的方法，其特征在于，所述第一渲染方式包括：

13.一种帧动画的渲染装置，其特征在于，所述装置用于计算机设备中，所述装置包括：

14.一种计算机设备，其特征在于，所述计算机设备包含处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如权利要求1至12任一所述的帧动画的渲染方法。

15.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如权利要求1至12任一所述的帧动画的渲染方法。