CN114218409A - 前端动画性能优化方法、装置和计算机设备 - Google Patents

Abstract

本申请涉及一种前端动画性能优化方法、装置、计算机设备、存储介质和计算机程序产品。所述方法包括：对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；动画配置文件包括各动画文件的动画优先级和性能标识；性能参数包括当前终端设备的支持播放动画类型和播放性能等级；基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；根据待播放动画文件的动画优先级，对待播放动画文件进行分步加载和渲染。采用本方法能够实现目标动画在各种前端设备中播放时都能达到性能和动画效果最优化效果。

Description

前端动画性能优化方法、装置和计算机设备

技术领域

本申请涉及移动互联信息宣传技术领域，特别是涉及一种前端动画性能优化方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

动画在互联网中的应用越来越普及，复杂的动画播放效果对设备性能依赖程度高，但互联网终端设备尤其是移动端设备性能参差不齐。随着web页面功能和画面的复杂化，前端页面的性能压力也越来越大。虽然随着硬件的发展，设备性能也在逐步提升，但web终端尤其是移动设备品类繁多、性能参差不齐，对于受众较广泛的web应用而言，仍然需要兼容旧机型和中低端性能设备。

随着动画应用场景的多样化，为满足复杂的动画需求，动画数据文件体积越来越大，但web网速发展较慢，web动画播放时需通过网络获取动画数据文件，当动画文件体积较大时，前端页面需要较长时间加载，容易导致长时间白屏卡顿现象。因此，减少初始动画加载时间很有必要。

目前，主流技术可针对特定类型文件进行无损或有损压缩，以缩短数据文件传输大小，节省传输时间，但依然无法满足一些复杂的动画播放需求。由于web前端设备的多样性，一个复杂的动画效果在不同设备的流畅度有差异，为了兼容大部分设备，开发者通常会牺牲一部分酷炫的动画效果体验，采用简单的消耗小的动画资源代替，这样在高端机型上无法体验复杂度高的动画，在某些低端的安卓设备上可能出现动画卡顿不流畅的现象，甚至在一些ios设备上可能因为过高的性能消耗导致应用闪退。因此，目前的技术无法针对各个设备达到性能和动画效果的最优化。

发明内容

基于此，有必要针对上述技术问题，提供一种能够满足各种设备达到性能和动画效果最优化的前端动画性能优化方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种前端动画性能优化方法。所述方法包括：

对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

在其中一个实施例中，所述并获取当前终端设备的性能参数包括：

获取当前终端设备的硬件性能信息；

基于所述硬件性能信息，获取当前终端设备的支持播放动画类型；

根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级；所述播放性能等级与所述动画配置文件中的性能标识相匹配。

在其中一个实施例中，所述基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件包括：

基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件；

基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件。

在其中一个实施例中，所述根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染包括：

获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对所述待播放动画文件进行排序；

按照排序顺序对所述待播放动画文件进行分步加载和渲染。

在其中一个实施例中，所述基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件包括：

将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配；

若匹配，将该动画文件作为初筛动画文件；若不匹配，将该动画文件从动画文件列表中移除。

在其中一个实施例中，所述基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件包括：

将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配；

若匹配，将该动画文件作为待播放动画文件；若不匹配，将该动画文件从动画文件列表中移除。

第二方面，本申请还提供了一种前端动画性能优化装置。所述装置包括：

获取模块，用于对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

筛选模块，用于基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

播放模块，用于根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

上述前端动画性能优化方法、装置、计算机设备、存储介质和计算机程序产品，对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数，基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件，根据待播放动画文件的动画优先级，对待播放动画文件进行分步加载和渲染，通过对动画文件进行双层筛选，并对通过双层筛选后的待播放文件按照动画优先级进行播放，用最小的资源消耗实现最大的动画效果，大大降低了设备的性能压力、提高了动画渲染效率，采用分步加载分步渲染方法，遵循由简到繁的原则，重要动画先展示，最大程度保证在所有设备上都有较好的流畅性，实现了目标动画在各种前端设备中播放都能达到性能和动画效果最优化。

附图说明

图1为一个实施例中前端动画性能优化方法的应用环境图；

图2为一个实施例中前端动画性能优化方法的流程示意图；

图3为一个实施例中获取当前终端设备的性能参数步骤的流程示意图；

图4为一个实施例中对目标动画中的动画文件进行筛选的流程示意图；

图5为一个实施例中对待播放动画文件进行加载和渲染的流程示意图；

图6为一个实施例中前端动画性能优化装置的结构框图；

图7为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请实施例提供的前端动画性能优化方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上，也可以放在云上或其他网络服务器上。

其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2所示，提供了一种前端动画性能优化方法，以该方法应用于图1中的102终端为例进行说明，包括以下步骤：

步骤202，对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级。

其中，目标动画是当前终端设备将要加载和渲染的动画文件，目标动画包含不少于一种动画文件，当目标动画是一个复合型场景动画时，该目标动画可能包含1个或多个相互独立的动画层，每个动画层可视为一个动画文件，如静态层、动态背景层、文字层、动态交互层等，每个动画层具有不同的动画属性(包括动画类型、时长、尺寸、位置、是否循环播放等)。动画的原始数据文件(如js、json、视频、图片等格式文件)由动画设计师或者动画开发者提供。当前终端设备是用于加载和渲染目标动画的终端设备，当前终端设备的性能参数包括当前终端设备的支持播放动画类型和播放性能等级。当前终端设备的支持播放动画类型是当前终端设备支持播放的文件类型，播放性能等级是当前终端设备能够播放的动画文件的等级。例如，前端在获取终端设备性能参数后，可根据业务需要判定当前终端运行的性能等级以及支持播放动画类型，例如将性能等级分为低、中、高三个等级(根据需求自行定义，与动画配置文件中的性能标识对应)，是否支持lottie动画播放等。

具体地，获取目标动画中各动画文件的动画配置文件时，首先对多个原始动画的数据文件进行基础属性的自动采集，自动生成json格式的动画配置文件。动画配置文件内容包括各动画文件的动画优先级和性能标识，根据需要还可以包括默认背景层(静态图路径/纯颜色/渐变色)、动画类型、动画层级、动画基础属性等。其中，默认背景层可以是配置为静态/动态图片，也可以配置为简单的色值(css样式)，也可图片和颜色同时配置；动画优先级可以用整数1，2，3，……，n依次递增进行标记，该参数的主要作用是用于后续动画的分步加载；性能分级设置同样可以用特定标记比如“低、中、高、…”等进行标记(根据需求自行定义)，该参数主要用于动画的性能分级过滤。所有配置参数可结合动画实际情况，在上传动画数据文件至服务器时手动设置，参数可扩展，可根据实际业务需求增加参数。

此外还需要获取当前终端设备的性能参数，获取方式为在前端请求动画资源时，前端对终端设备进行性能监控，前端需要采集的的主要性能参数包括：当前终端设备的支持播放动画类型和播放性能等级，根据需要还可包括FPS、CPU占用、GPU占用、内存占用等，其中FPS是影响动画流畅度的重要参数。

步骤204，基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件。

具体地，获取目标动画中各动画文件的动画配置文件和当前终端设备的性能参数之后，基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，从一系列动画中挑选出符合设备性能等级且具备播放条件的动画文件。对动画文件进行双层过滤，首先基于当前终端设备的性能参数对目标动画中的动画文件进行类型过滤，根据动画文件类型，仅筛选出当前终端设备支持播放的动画类型；例如，web端的lottie动画基于svg和canvas实现，对于部分不支持canvas和svg的浏览器，此时lottie类动画就可以直接过滤掉，不在当前设备加载显示。之后，根据动画文件的性能等级对通过类型过滤的动画文件进行性能过滤，仅筛选出与设备性能匹配的动画文件。例如，在性能等级为“低”的终端上，遍历动画配置文件中的所有动画，仅挑选出性能标记为“低”的动画，对于性能标记为“高”的动画不需要加载。

步骤206，根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

具体地，经过双层过滤获取与当前终端设备性能相匹配的动画文件作为待播放动画文件之后，获取待播放动画文件的动画优先级，根据待播放动画文件的动画优先级对各待播放动画文件进行分步加载和渲染；其中，对动画文件的加载和渲染并行处理，能够大大节省动画前端呈现的等待时间。

上述前端动画性能优化方法中，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数，基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件，根据待播放动画文件的动画优先级，对待播放动画文件进行分步加载和渲染，通过对动画文件进行双层筛选，并对通过双层筛选后的待播放文件按照动画优先级进行播放，实现了目标动画在各种前端设备中播放都能达到性能和动画效果最优化。

在一个实施例中，所述并获取当前终端设备的性能参数包括：

获取当前终端设备的硬件性能信息；

基于所述硬件性能信息，获取当前终端设备的支持播放动画类型；

根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级；所述播放性能等级与所述动画配置文件中的性能标识相匹配。

具体地，在web前端运行时，借助浏览器或者webview提供的能力可获取到当前终端设备的硬件性能信息。图3为一个实施例中获取当前终端设备的性能参数步骤的流程示意图，如图3所示，前端可通过浏览器的相关接口，结合定时器工具，记录两次画布更新之间的时间间隔，从而计算每秒刷新的次数即FPS(FPS＝1秒/刷新时间间隔)，从而达到性能监控的目的。此外，也可根据实际情况，在条件允许的情况下，借助终端应用的原生能力直接获取相关信息，比如通过JSAPI直接获取当前webview的FPS、CPU、GPU、手机型号、内存占用等硬件设备和性能信息。基于上述硬件性能信息，获取当前终端设备的支持播放动画类型，根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级；播放性能等级与动画配置文件中的性能标识相匹配，例如，当动画配置文件的性能标识分为高、中、低三种时，当前终端设备的播放性能等级也分为高、中、低三挡。

本实施例中，获取当前终端设备的硬件性能信息，基于硬件性能信息，获取当前终端设备的支持播放动画类型，根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级，实现了对于当前终端设备的支持播放动画类型和播放性能等级的获取，为进一步对动画文件的分级过滤和类型过滤创造了前提。

在一个实施例中，所述基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件包括：

基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件；

基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件。

具体地，前端在进行动画资源请求前，先向服务器获取动画配置文件，结合当前终端设备的支持播放动画类型和播放性能等级，从一系列动画中挑选出符合设备性能等级且具备播放条件的动画文件。图4为一个实施例中对目标动画中的动画文件进行筛选的流程示意图，如图4所示，将对动画文件进行双层过滤；首先是类型过滤，基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件；之后是性能过滤，基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件。通过双层过滤后的动画文件即为待播放动画文件，能够在当前终端设备中进行播放。

本实施例中，基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取待播放动画文件，实现了对于待播放动画文件的获取，最大程度去掉不必要的性能消耗，使得当前终端设备能够达到性能和动画效果的最优化。

在一个实施例中，所述根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染包括：

获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对所述待播放动画文件进行排序；

按照排序顺序对所述待播放动画文件进行分步加载和渲染。

具体地，图5为一个实施例中对待播放动画文件进行加载和渲染的流程示意图，如图5所示，首先获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对所述待播放动画文件进行排序，根据动画配置文件中的优先级顺序，前端分步请求动画资源，优先级高的优先加载，同时优先渲染。本着从少到多、逐步加载的原则，优先保证优先级高的动画的正常显示，而不需要等待所有动画文件下载完成后再进行渲染显示，节省网络请求时间，从而保证在较差的设备和网络环境下也能显示最小化动画，防止在一开始就出现白屏、卡屏现象。例如，在一个随风飘动的大树的场景动画中，大树动画在0秒开始播放，在第3秒开始飘下落叶。按照普通的动画播放方案，大树动画资源和落叶动画资源同时请求，二者同时占用网络和设备资源，假设此时大树动画加载完成耗时1秒，在这1秒中的时间内，因所有动画资源都未加载完成，连大树层都无法显示，此时动画窗口就出现了1秒的白屏。但是结合场景可以发现，落叶在第3秒才开始播放，在前3秒内，落叶动画是不需要渲染的，但却占用了最宝贵的初始化资源，影响了动画的流畅性。

而按照本实施例中的分步加载和渲染方案，情况将大大改善：首先，我们预先给该场景动画配置了1个默认背景层，可能是纯色/渐变填充，因颜色填充用纯css实现即可，不需要额外的图片或动画资源文件，不消耗网络资源，可以即使呈现设置好的背景颜色，即时实现场景的初始化，防止白屏。也可根据需要在背景颜色的基础上，继续设置文件较小的图片作为默认背景层，本实施例中，默认背景层配置的意义主要是用于动画的初始化显示，因此，默认背景层相对于其它动画文件应该要更小更简单。

本发明采用分步加载，根据优先级，大树动画的优先级较高，前端集中资源保证大树动画的快速呈现，先单独请求加载大树动画资源，由于此时不受落叶动画资源的影响，前端专注一项任务，大树的加载和渲染速度加快，假设耗时0.5秒。在第0.5秒后，前端继续进行落叶动画的资源加载和渲染，因落叶动画在第3秒才进入，所以只需要在2.5秒内加载并渲染完成即可，在这2.5秒内不会影响动画的流畅性，时间更充足，对设备的依赖性大大降低。即使超过2.5秒，因大树动画已经存在，落叶可能只是锦上添花，对动画的整理影响较小。

本实施例中，获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对待播放动画文件进行排序，按照排序顺序对所述待播放动画文件进行分步加载和渲染，最大化保证了用户的感官体验，用最小的资源消耗实现最大的动画效果，大大降低了设备的性能压力、提高了动画渲染效率，采用分步加载分步渲染方法，遵循由简到繁的原则，重要动画先展示，最大程度保证在所有设备上都有较好的流畅性；增加默认背景配置对动画容器进行初始化，杜绝白屏现象。

在一个实施例中，所述基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件包括：

将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配；

若匹配，将该动画文件作为初筛动画文件；若不匹配，将该动画文件从动画文件列表中移除。

具体地，进行类型过滤时，首先将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配，若目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型相匹配，将该动画文件作为初筛动画文件；若目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型不相匹配，将该动画文件从动画文件列表中移除，实现对动画文件的类型过滤。

本实施例中，将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配，当匹配时，将该动画文件作为初筛动画文件；否则将该动画文件从动画文件列表中移除，实现了对于动画文件的类型过滤，降低了设备的性能压力、提高了动画渲染效率。

在一个实施例中，所述基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件包括：

将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配；

若匹配，将该动画文件作为待播放动画文件；若不匹配，将该动画文件从动画文件列表中移除。

具体地，进行性能过滤时，将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配，若初筛动画文件的性能标识与当前终端设备的播放性能等级相匹配，将该动画文件作为待播放动画文件；若初筛动画文件的性能标识与当前终端设备的播放性能等级不相匹配，将该动画文件从动画文件列表中移除。

本实施例中，将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配，当匹配时，将该动画文件作为待播放动画文件；否则，将该动画文件从动画文件列表中移除，实现了对于动画文件的性能过滤，降低了设备的性能压力、提高了动画渲染效率。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的前端动画性能优化方法的前端动画性能优化装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个前端动画性能优化装置实施例中的具体限定可以参见上文中对于前端动画性能优化方法的限定，在此不再赘述。

在一个实施例中，如图6所示，提供了一种前端动画性能优化装置，包括：获取模块601、筛选模块602和播放模块603，其中：

获取模块601，用于对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

筛选模块602，用于基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

播放模块603，用于根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

在一个实施例中，所述获取模块601具体用于：获取当前终端设备的硬件性能信息；基于所述硬件性能信息，获取当前终端设备的支持播放动画类型；根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级；所述播放性能等级与所述动画配置文件中的性能标识相匹配。

本实施例中，获取当前终端设备的硬件性能信息，基于硬件性能信息，获取当前终端设备的支持播放动画类型，根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级，实现了对于当前终端设备的支持播放动画类型和播放性能等级的获取，为进一步对动画文件的分级过滤和类型过滤创造了前提。

在一个实施例中，所述筛选模块602具体用于：基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件；基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件。

本实施例中，基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取待播放动画文件，实现了对于待播放动画文件的获取，最大程度去掉不必要的性能消耗，使得当前终端设备能够达到性能和动画效果的最优化。

在一个实施例中，所述播放模块603具体用于：获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对所述待播放动画文件进行排序；按照排序顺序对所述待播放动画文件进行分步加载和渲染。

本实施例中，获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对待播放动画文件进行排序，按照排序顺序对所述待播放动画文件进行分步加载和渲染，最大化保证了用户的感官体验，用最小的资源消耗实现最大的动画效果，大大降低了设备的性能压力、提高了动画渲染效率，采用分步加载分步渲染方法，遵循由简到繁的原则，重要动画先展示，最大程度保证在所有设备上都有较好的流畅性；增加默认背景配置对动画容器进行初始化，杜绝白屏现象。

在一个实施例中，所述筛选模块602具体用于：将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配；若匹配，将该动画文件作为初筛动画文件；若不匹配，将该动画文件从动画文件列表中移除。

本实施例中，将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配，当匹配时，将该动画文件作为初筛动画文件；否则将该动画文件从动画文件列表中移除，实现了对于动画文件的类型过滤，降低了设备的性能压力、提高了动画渲染效率。

在一个实施例中，所述筛选模块602具体用于：将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配；若匹配，将该动画文件作为待播放动画文件；若不匹配，将该动画文件从动画文件列表中移除。

本实施例中，将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配，当匹配时，将该动画文件作为待播放动画文件；否则，将该动画文件从动画文件列表中移除，实现了对于动画文件的性能过滤，降低了设备的性能压力、提高了动画渲染效率。

上述前端动画性能优化装置，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数，基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件，根据待播放动画文件的动画优先级，对待播放动画文件进行分步加载和渲染，通过对动画文件进行双层筛选，并对通过双层筛选后的待播放文件按照动画优先级进行播放，实现了目标动画在各种前端设备中播放都能达到性能和动画效果最优化。

上述前端动画性能优化装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器和网络接口。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种前端动画性能优化方法。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：获取当前终端设备的硬件性能信息；基于所述硬件性能信息，获取当前终端设备的支持播放动画类型；根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级；所述播放性能等级与所述动画配置文件中的性能标识相匹配。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件；基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对所述待播放动画文件进行排序；按照排序顺序对所述待播放动画文件进行分步加载和渲染。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配；若匹配，将该动画文件作为初筛动画文件；若不匹配，将该动画文件从动画文件列表中移除。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配；若匹配，将该动画文件作为待播放动画文件；若不匹配，将该动画文件从动画文件列表中移除。

上述计算机设备，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数，基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件，根据待播放动画文件的动画优先级，对待播放动画文件进行分步加载和渲染，通过对动画文件进行双层筛选，并对通过双层筛选后的待播放文件按照动画优先级进行播放，实现了目标动画在各种前端设备中播放都能达到性能和动画效果最优化。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：获取当前终端设备的硬件性能信息；基于所述硬件性能信息，获取当前终端设备的支持播放动画类型；根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级；所述播放性能等级与所述动画配置文件中的性能标识相匹配。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件；基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对所述待播放动画文件进行排序；按照排序顺序对所述待播放动画文件进行分步加载和渲染。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配；若匹配，将该动画文件作为初筛动画文件；若不匹配，将该动画文件从动画文件列表中移除。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配；若匹配，将该动画文件作为待播放动画文件；若不匹配，将该动画文件从动画文件列表中移除。

上述存储介质，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数，基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件，根据待播放动画文件的动画优先级，对待播放动画文件进行分步加载和渲染，通过对动画文件进行双层筛选，并对通过双层筛选后的待播放文件按照动画优先级进行播放，实现了目标动画在各种前端设备中播放都能达到性能和动画效果最优化。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：获取当前终端设备的硬件性能信息；基于所述硬件性能信息，获取当前终端设备的支持播放动画类型；根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级；所述播放性能等级与所述动画配置文件中的性能标识相匹配。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件；基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对所述待播放动画文件进行排序；按照排序顺序对所述待播放动画文件进行分步加载和渲染。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配；若匹配，将该动画文件作为初筛动画文件；若不匹配，将该动画文件从动画文件列表中移除。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配；若匹配，将该动画文件作为待播放动画文件；若不匹配，将该动画文件从动画文件列表中移除。

上述计算机程序产品，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数，基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件，根据待播放动画文件的动画优先级，对待播放动画文件进行分步加载和渲染，通过对动画文件进行双层筛选，并对通过双层筛选后的待播放文件按照动画优先级进行播放，实现了目标动画在各种前端设备中播放都能达到性能和动画效果最优化。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (15)

1.一种前端动画性能优化方法，其特征在于，所述方法包括：

对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

2.根据权利要求1所述的方法，其特征在于，所述并获取当前终端设备的性能参数包括：

获取当前终端设备的硬件性能信息；

基于所述硬件性能信息，获取当前终端设备的支持播放动画类型；

根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级；所述播放性能等级与所述动画配置文件中的性能标识相匹配。

3.根据权利要求2所述的方法，其特征在于，所述基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件包括：

基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件；

基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件。

4.根据权利要求1所述的方法，其特征在于，所述根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染包括：

获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对所述待播放动画文件进行排序；

按照排序顺序对所述待播放动画文件进行分步加载和渲染。

5.根据权利要求3所述的方法，其特征在于，所述基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件包括：

将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配；

若匹配，将该动画文件作为初筛动画文件；若不匹配，将该动画文件从动画文件列表中移除。

6.根据权利要求3所述的方法，其特征在于，所述基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件包括：

将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配；

若匹配，将该动画文件作为待播放动画文件；若不匹配，将该动画文件从动画文件列表中移除。

7.一种前端动画性能优化装置，其特征在于，所述装置包括：

获取模块，用于对目标动画进行分层，获取不少于一个动画文件，获取目标动画中各动画文件的动画配置文件，并获取当前终端设备的性能参数；所述动画配置文件包括各动画文件的动画优先级和性能标识；所述性能参数包括当前终端设备的支持播放动画类型和播放性能等级；

筛选模块，用于基于当前终端设备的性能参数对目标动画中的动画文件进行筛选，获取与当前终端设备性能相匹配的动画文件作为待播放动画文件；

播放模块，用于根据所述待播放动画文件的动画优先级，对所述待播放动画文件进行分步加载和渲染。

8.根据权利要求7所述的方法，其特征在于，所述获取模块具体用于：

获取当前终端设备的硬件性能信息；

基于所述硬件性能信息，获取当前终端设备的支持播放动画类型；

根据预设的分级标准对当前终端设备的性能进行分级，获取当前终端设备的播放性能等级；所述播放性能等级与所述动画配置文件中的性能标识相匹配。

9.根据权利要求8所述的方法，其特征在于，所述筛选模块具体用于：

基于目标动画中各动画文件的动画类型和当前终端设备的支持播放动画类型，对目标动画中的动画文件进行筛选，获取符合当前终端设备的支持播放动画类型的动画文件作为初筛动画文件；

基于初筛动画文件的性能标识和当前终端设备的播放性能等级，对初筛动画文件进行筛选，获取与当前终端设备的播放性能等级匹配的动画文件作为待播放动画文件。

10.根据权利要求7所述的方法，其特征在于，所述播放模块具体用于：

获取待播放动画文件的动画优先级，按照动画优先级的高低顺序对所述待播放动画文件进行排序；

按照排序顺序对所述待播放动画文件进行分步加载和渲染。

11.根据权利要求9所述的方法，其特征在于，所述筛选模块具体用于：

将目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型进行对比，判断目标动画中各动画文件的动画类型与当前终端设备的支持播放动画类型是否匹配；

若匹配，将该动画文件作为初筛动画文件；若不匹配，将该动画文件从动画文件列表中移除。

12.根据权利要求9所述的方法，其特征在于，所述筛选模块具体用于：

将初筛动画文件的性能标识和当前终端设备的播放性能等级进行对比，判断初筛动画文件的性能标识与当前终端设备的播放性能等级是否匹配；

若匹配，将该动画文件作为待播放动画文件；若不匹配，将该动画文件从动画文件列表中移除。

13.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

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

15.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

Images