CN113849157A - 动画播放管理的方法、装置、设备及存储介质 - Google Patents

Abstract

本发明公开了一种动画播放管理的方法，包括步骤：获取ReactNative开发框架的Native Modules控件技术支持，实现高帧率动画模块封装功能；依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口；依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理；IOS操作系统使用UIImageView控件创建帧动画图片UIImage集合，Android操作系统使用ImageView控件作为动画的载体，分别获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架。本发明可实现高帧率流畅帧动画，并支持多层级复杂动效。

Description

动画播放管理的方法、装置、设备及存储介质

技术领域

本发明涉及动画播放技术领域，尤其是一种动画播放管理的方法、装置、电子设备及存储介质。

背景技术

ReactNative开发框架是Facebook于2015年4月开源的跨平台移动开发框架，基于JavaScript语言编写，支持IOS操作系统和安卓操作系统。

在现有技术中，一种是在ReactNative开发框架中常规的帧动画是使用Image图片控件展示图片，基于ReactNative开发框架的刷新机制，每次调用setState时页面都会重新执行render方法进行重新渲染，在页面重新渲染时更换Image控件的Source来刷新图片，如果刷新一组图片可开启循环定时器进行State刷新来实现更新一组帧动画。该方法在低帧率动画的展示没有问题，但缺点是在高帧率动画时会严重丢帧。

另外一种常规实现方案是使用Lottie动画，Lottie是Airbnb开源的面向IOS、Android、React Native的动画库，能分析Adobe After Effects导出的动画，并且能让各平台像使用静态素材一样使用这些动画，Lottie的工作原理是首先通过AE导出带有各动画参数的json文件，由lottie的SDK先将json转为数据模型，通过model属性key值快速查找数据内容，再将对应数据依附到CALayer图层上，最后在图层上添加动画。该方法支持的效果比较有限，只支持基本位移，缩放，透明度等AE自带的变换属性，无法支持多种层级的复杂动效动画，在要做多组动画衔接时，因无法准确获取前一动画的结束时间，所以无法准确开启后一帧动画。

因此，需要一种操作方便、又能够实现高帧率流畅帧动画，并支持多层级复杂动效的动画播放管理方案。

发明内容

为此，本发明提供了一种动画播放管理的方法、装置、电子设备及存储介质，以力图解决或者至少缓解上面存在的至少一个问题。

根据本发明的一个方面，提供了一种动画播放管理的方法，该方法基于IOS操作系统及Android操作系统开发，实现在ReactNative开发框架上播放高帧率动画，该方法包括步骤：获取ReactNative开发框架的Native Modules控件技术支持，实现高帧率动画模块封装功能；依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口，所述操作系统包括IOS操作系统及Android操作系统；依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理；IOS操作系统使用UIImageView控件创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架；Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架。

可选地，在根据本发明的动画播放管理的方法中，所述依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口的步骤包括：操作系统接收到所述ReactNative开发框架的异步下载资源包请求；依据所述异步下载资源包请求，所述操作系统检查资源包是否已下载；如果已下载，则将资源包返回至ReactNative开发框架；如果未下载，则所述操作系统通过异步线程将资源包下载至缓存；将下载至缓存的资源包解压到指定路径，并将解压的路径信息通过回调函数返回至ReactNative开发框架。

可选地，在根据本发明的动画播放管理的方法中，所述依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理的步骤包括：依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage；依据所述高帧率动画视图AHAnimationImage创建原生视图，并将原生视图提供给ReactNative开发框架的RCTUIManager控件；所述RCTUIManager控件根据需要设置和更新所述原生视图的属性，并根据原生视图的委托，给所述ReactNative开发框架发送对应事件。

可选地，在根据本发明的动画播放管理的方法中，所述高帧率动画视图AHAnimationImage支持的参数包括：单次动画时长信息；动画重复次数信息；结束播放回调信息；资源图片地址列表信息；资源图片地址类型信息。

可选地，在根据本发明的动画播放管理的方法中，所述资源图片地址类型信息包括的资源类型有：网络地址、ReactNative开发框架内图片名称、原生本地图片路径。

可选地，在根据本发明的动画播放管理的方法中，所述IOS操作系统使用UIImageView控件，创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架的步骤包括：IOS操作系统使用UIImageView控件，创建帧动画图片UIImage集合；依据所述帧动画图片UIImage集合，从所述ReactNative开发框架获取高帧率动画视图AHAnimationImage；依据获取的所述高帧率动画视图AHAnimationImage，所述IOS操作系统使用startAnimation-stopAnimation控件实现高帧率动画视图AHAnimationImage的开始或停止控制；所述IOS操作系统使用KVO控件对高帧率动画视图AHAnimationImage的播放进行监听；依据所述KVO控件的监听结果，在所述高帧率动画视图AHAnimationImage播放结束时回调至ReactNative开发框架。

可选地，在根据本发明的动画播放管理的方法中，如果所述高帧率动画视图AHAnimationImage为磁盘加载的图片，则需要进行性能内存优化，其步骤包括：将磁盘图片加载到IOS操作系统的内核缓冲区，并将磁盘图片从内核缓冲区复制到用户空间；IOS操作系统生成UIImageView控件，并将磁盘图片赋值给UIImageView控件；IOS操作系统的CATransaction控件捕获到UIImageView layer树的变化，IOS操作系统的主线程Runloop提交CATransaction控件，并开始进行图像渲染。

可选地，在根据本发明的动画播放管理的方法中，所述Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架的步骤包括：Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage；Android操作系统使用setBackgroundResource控件设置高帧率动画视图AHAnimationImage；Android操作系统使用start控件和stop控件分别进行动高帧率动画视图AHAnimationImage的开始和结束控制；在所述高帧率动画视图AHAnimationImage开始播放后，Android操作系统使用定时器监听isRunning控件按照设定的频率监听动画播放信息；当所述定时器监听isRunning控件获取到动画播放结束事件后，回调至ReactNative开发框架。

根据本发明的又一方面，公开了一种动画播放管理的装置，该装置基于IOS操作系统及Android操作系统开发，实现在ReactNative开发框架上播放高帧率动画，该装置包括：

动画获取模块，用于获取ReactNative开发框架的Native Modules控件技术支持，实现高帧率动画模块封装功能；依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口，所述操作系统包括IOS操作系统及Android操作系统；依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理；

播放管理模块，IOS操作系统使用UIImageView控件创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架；Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架。

根据本发明的又一方面，提供了一种计算设备，包括：一个或多个处理器；和存储器；一个或多个程序，其中所述一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，所述一个或多个程序包括用于执行如上所述动画播放管理的方法中的任一方法的指令。

根据本发明的又一方面，提供了一种存储一个或多个程序的计算机可读存储介质，所述一个或多个程序包括指令，所述指令当计算设备执行时，使得计算设备执行如上所述动画播放管理的方法中的任一方法。

根据本发明的动画播放管理的方案，获取ReactNative开发框架的NativeModules控件技术支持，实现高帧率动画模块封装功能；依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口；依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理；IOS操作系统使用UIImageView控件创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架；Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架。本发明可实现高帧率流畅帧动画，并支持多层级复杂动效。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明一个实施例的计算设备100的构造示意图；以及

图2示出了根据本发明一个实施例的动画播放管理的方法200的流程图；以及

图3示出了根据本发明一个实施例的动画播放管理的装置300的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1是示例计算设备100的框图。在基本的配置102中，计算设备100典型地包括系统存储器106和一个或者多个处理器104。存储器总线108可以用于在处理器104和系统存储器106之间的通信。

取决于期望的配置，处理器104可以是任何类型的处理，包括但不限于：微处理器(μP)、微控制器(μC)、数字信息处理器(DSP)或者它们的任何组合。处理器104可以包括诸如一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(ALU)、浮点数单元(FPU)、数字信号处理核心(DSP核心)或者它们的任何组合。示例的存储器控制器118可以与处理器104一起使用，或者在一些实现中，存储器控制器118可以是处理器104的一个内部部分。

取决于期望的配置，系统存储器106可以是任意类型的存储器，包括但不限于：易失性存储器(诸如RAM)、非易失性存储器(诸如ROM、闪存等)或者它们的任何组合。系统存储器106可以包括操作系统120、一个或者多个应用122以及程序数据124。在一些实施方式中，应用122可以布置为在操作系统上利用程序数据124进行操作。在一些实施例中，计算设备100被配置为执行动画播放管理的方法200，该方法200能够根据目标语音数据的节奏对待处理语音数据进行变速处理，得到富有说唱音乐节奏感的语音数据，程序数据124中包含了用于执行该方法200的指令。

计算设备100还可以包括有助于从各种接口设备(例如，输出设备142、外设接口144和通信设备146)到基本配置102经由总线/接口控制器130的通信的接口总线140。示例的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由一个或者多个A/V端口152与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口144可以包括串行接口控制器154和并行接口控制器156，它们可以被配置为有助于经由一个或者多个I/O端口158和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备146可以包括网络控制器160，其可以被布置为便于经由一个或者多个通信端口164与一个或者多个其他计算设备162通过网络通信链路的通信。在本实施例中，可以通过诸如语音输入设备实时获取待处理的语音数据。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(RF)、微波、红外(IR)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。在一些实施例中，计算机可读介质中存储一个或多个程序，这一个或多个程序中包括执行某些方法的指令，如根据本发明的实施例，计算设备100通过所述指令来执行动画播放管理的方法200。

计算设备100可以实现为小尺寸便携(或者移动)电子设备的一部分，这些电子设备可以是诸如蜂窝电话、个人数字助理(PDA)、个人媒体播放器设备、无线网络浏览设备、个人头戴设备、应用专用设备、或者可以包括上面任何功能的混合设备。计算设备100还可以实现为包括桌面计算机和笔记本计算机配置的个人计算机。

图2示出了根据本发明一个实施例的动画播放管理的方法200的流程图。如图2所示，该方法200方法基于IOS操作系统及Android操作系统开发，实现在ReactNative开发框架上播放高帧率动画，方法200始于步骤S210，获取ReactNative开发框架的NativeModules控件技术支持，实现高帧率动画模块封装功能。

具体的，ReactNative开发框架已提供了较为完善的模块封装，但有时候手机应用程序需要访问在ReactNative开发框架上还没有相应的模块封装的平台应用程序接口，或者你需要复用IOS操作系统或Android操作系统的视图、算法、高性能、多线程代码时，不可能使用JavaScript重新实现一遍，此时ReactNative开发框提供了Native Modules技术可以自己实现高级功能的封装。

通过步骤S220，依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口，所述操作系统包括IOS操作系统及Android操作系统。

具体的，所述异步获取图片资源的应用程序接口由提供统一获取图片工具模块AHImageSourceTools来统一执行。

具体的，所述依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口的步骤包括：

操作系统接收到所述ReactNative开发框架的异步下载资源包请求；

依据所述异步下载资源包请求，所述操作系统检查资源包是否已下载；

如果已下载，则将资源包返回至ReactNative开发框架；

如果未下载，则所述操作系统通过异步线程将资源包下载至缓存；

将下载至缓存的资源包解压到指定路径，并将解压的路径信息通过回调函数返回至ReactNative开发框架。

通过步骤S230，依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理。具体的，和操作系统的原生模块一样，通过Native Modules控件技术要桥接的原生视图要被RCTViewManager控件的子视图来创建和管理，这种管理的功能类似“视图控制器”，但他们实际上都是单例，ReactNative开发框架会为每个管理器创建一个实例。

具体的，在本申请的一个实施例中，所述依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理的步骤包括：

依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage；

依据所述高帧率动画视图AHAnimationImage创建原生视图，并将原生视图提供给ReactNative开发框架的RCTUIManager控件；

所述RCTUIManager控件根据需要设置和更新所述原生视图的属性，并根据原生视图的委托，给所述ReactNative开发框架发送对应事件。

具体的，在本申请的一个实施例中，所述高帧率动画视图AHAnimationImage支持的参数包括：

单次动画时长信息，表示单次动画的时长；动画重复次数信息，表示动画重复的次数，0表示无限次重复播放，n表示播放n次；

结束播放回调信息，用于表示动画播放结束回调，方便动画播放结束后进行其他操作；

资源图片地址列表信息，用于表示动画的资源图片的地址列表；

资源图片地址类型信息，用于表示动画的资源图片所支持的场景。

具体的，在本申请的一个实施例中，所述资源图片地址类型信息包括的资源类型有：网络地址、ReactNative开发框架内图片名称、原生本地图片路径。

通过步骤S240，IOS操作系统使用UIImageView控件创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架。

具体的，在实际的应用中，所述IOS操作系统使用UIImageView控件，创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架的步骤包括：

IOS操作系统使用UIImageView控件，创建帧动画图片UIImage集合；

依据所述帧动画图片UIImage集合，从所述ReactNative开发框架获取高帧率动画视图AHAnimationImage；

依据获取的所述高帧率动画视图AHAnimationImage，所述IOS操作系统使用startAnimation-stopAnimation控件实现高帧率动画视图AHAnimationImage的开始或停止控制；

所述IOS操作系统使用KVO控件对高帧率动画视图AHAnimationImage的播放进行监听；

依据所述KVO控件的监听结果，在所述高帧率动画视图AHAnimationImage播放结束时回调至ReactNative开发框架。

具体的，如果所述高帧率动画视图AHAnimationImage为磁盘加载的图片，则需要进行性能内存优化，其步骤包括：

将磁盘图片加载到IOS操作系统的内核缓冲区，并将磁盘图片从内核缓冲区复制到用户空间；

IOS操作系统生成UIImageView控件，并将磁盘图片赋值给UIImageView控件；如果磁盘图片为未解码的PNG或JPG，将磁盘图片解码为位图数据；

IOS操作系统的CATransaction控件捕获到UIImageView layer树的变化，IOS操作系统的主线程Runloop提交CATransaction控件，并开始进行图像渲染，GPU处理位图数据，进行渲染。

所述UIImageView加载图片主要有两个应用程序接口，一个是+imageNamed，另一个是+imageWithContentsOfFile，两者主要的区别在解码的阶段，前者加载到原图后立即进行解码，原图和解码后的位图数据都会保存在系统缓存下，只有在内存低到设定阈值时的时候才会被释放；后者在原图渲染前进行解码，不会对原图做缓存。根据业务场景，多次使用的帧动画图片使用imageNamed的应用程序接口；只用一次的磁盘图片使用imageWithContentsOfFile的应用程序接口，所以可对不同业务场景进行区分，根据不同场景选择合适的API来优化内存占用。

通过步骤S250，Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架。

具体的，在实际的应用中，所述Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架的步骤包括：

Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage；

Android操作系统使用setBackgroundResource控件设置高帧率动画视图AHAnimationImage；

Android操作系统使用start控件和stop控件分别进行动高帧率动画视图AHAnimationImage的开始和结束控制；

在所述高帧率动画视图AHAnimationImage开始播放后，Android操作系统使用定时器监听isRunning控件按照设定的频率监听动画播放信息；

当所述定时器监听isRunning控件获取到动画播放结束事件后，回调至ReactNative开发框架。

本发明的动画播放管理方法解决了常规ReactNative开发框架中帧动画实现丢帧问题及2D矢量动画无法支持多层级复杂动效问题，可实现高帧率流畅帧动画，并支持多层级复杂动效。为用户提供了良好的动画体验；本发明可实现动画资源的动态更新或替换，将新的动画资源上传至服务器，在ReactNative开发框架的页面通过接口下发资源的资源地址，ReactNative开发框架中获取地址后进行资源的预下载，实现资源的动态更新；本发明缓存资源高可用，资源图片会采用解压包形式下载保证了资源的完整性，资源提前下载并缓存，避免了动画播放中即时下载引起的问题；本发明不丢帧，资源已提前完整下载并缓存，避免了图片下载慢或下载失败造成的丢帧问题；本发明能够满足高帧率刷新的动画支持，利用ReactNative开发框架提供的Native Modules控件技术支持可对原生模块进行封装，IOS操作系统将UIImageView控件，Android操作系统的ImageView控件封装改造为统一的AHAnimationImage控件，并提供统一的播放或停止或更新图片资源的应用程序接口，进行帧动画的播放；本发明可避免视图的频繁重绘，使用封装后的AHAnimationImage孔吉纳首次绘制后动画过程中不需再进行页面重绘，只需对动画的组件的引用进行操作即可；本发明可进行资源预下载，ReactNative开发框架可通过各端的Native Modules控件技术对原生模块进行封装，并提供回调函数至ReactNative开发框架，在此技术支持下在ReactNative开发框架和操作系统提供统一的下载资源异步协议；本发明的AHAnimationImage提供有animationFinish控件回调，在前一动画结束后可准确开启后一动画，做到多组动画无缝衔接。

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

在一个实施例中，如图3所示，提供了一种动画播放管理的装置300，所述装置300包括：动画获取模块、播放管理模块。

动画获取模块，用于获取ReactNative开发框架的Native Modules控件技术支持，实现高帧率动画模块封装功能；依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口，所述操作系统包括IOS操作系统及Android操作系统；依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理；

播放管理模块，IOS操作系统使用UIImageView控件创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架；Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架。

具体的，在本申请的另一个实施例中，所述动画获取模块用于操作系统接收到所述ReactNative开发框架的异步下载资源包请求；依据所述异步下载资源包请求，所述操作系统检查资源包是否已下载；如果已下载，则将资源包返回至ReactNative开发框架；如果未下载，则所述操作系统通过异步线程将资源包下载至缓存；将下载至缓存的资源包解压到指定路径，并将解压的路径信息通过回调函数返回至ReactNative开发框架

具体的，在本申请的另一个实施例中，所述动画获取模块用于依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage；依据所述高帧率动画视图AHAnimationImage创建原生视图，并将原生视图提供给ReactNative开发框架的RCTUIManager控件；所述RCTUIManager控件根据需要设置和更新所述原生视图的属性，并根据原生视图的委托，给所述ReactNative开发框架发送对应事件。

具体的，在本申请的另一个实施例中，所述播放管理模块用于将IOS操作系统使用UIImageView控件，创建帧动画图片UIImage集合；依据所述帧动画图片UIImage集合，从所述ReactNative开发框架获取高帧率动画视图AHAnimationImage；依据获取的所述高帧率动画视图AHAnimationImage，所述IOS操作系统使用startAnimation-stopAnimation控件实现高帧率动画视图AHAnimationImage的开始或停止控制；所述IOS操作系统使用KVO控件对高帧率动画视图AHAnimationImage的播放进行监听；依据所述KVO控件的监听结果，在所述高帧率动画视图AHAnimationImage播放结束时回调至ReactNative开发框架。

具体的，在本申请的另一个实施例中，所述播放管理模块用于将磁盘图片加载到IOS操作系统的内核缓冲区，并将磁盘图片从内核缓冲区复制到用户空间；IOS操作系统生成UIImageView控件，并将磁盘图片赋值给UIImageView控件；IOS操作系统的CATransaction控件捕获到UIImageView layer树的变化，IOS操作系统的主线程Runloop提交CATransaction控件，并开始进行图像渲染。

具体的，在本申请的另一个实施例中，所述播放管理模块用于将Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage；Android操作系统使用setBackgroundResource控件设置高帧率动画视图AHAnimationImage；Android操作系统使用start控件和stop控件分别进行动高帧率动画视图AHAnimationImage的开始和结束控制；在所述高帧率动画视图AHAnimationImage开始播放后，Android操作系统使用定时器监听isRunning控件按照设定的频率监听动画播放信息；当所述定时器监听isRunning控件获取到动画播放结束事件后，回调至ReactNative开发框架。

A8、如A1所述的方法200，其中，所述Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架的步骤包括：

Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage；

Android操作系统使用setBackgroundResource控件设置高帧率动画视图AHAnimationImage；

Android操作系统使用start控件和stop控件分别进行动高帧率动画视图AHAnimationImage的开始和结束控制；

在所述高帧率动画视图AHAnimationImage开始播放后，Android操作系统使用定时器监听isRunning控件按照设定的频率监听动画播放信息；

当所述定时器监听isRunning控件获取到动画播放结束事件后，回调至ReactNative开发框架。

应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的，本发明的范围由所附权利要求书限定。

Claims (10)

1.一种动画播放管理的方法，所述方法基于IOS操作系统及Android操作系统开发，实现在ReactNative开发框架上播放高帧率动画，所述方法包括步骤：

获取ReactNative开发框架的Native Modules控件技术支持，实现高帧率动画模块封装功能；

依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口，所述操作系统包括IOS操作系统及Android操作系统；

依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理；

IOS操作系统使用UIImageView控件创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架；

Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架。

2.如权利要求1所述的方法，其中，所述依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口的步骤包括：

操作系统接收到所述ReactNative开发框架的异步下载资源包请求；

依据所述异步下载资源包请求，所述操作系统检查资源包是否已下载；

如果已下载，则将资源包返回至ReactNative开发框架；

如果未下载，则所述操作系统通过异步线程将资源包下载至缓存；

将下载至缓存的资源包解压到指定路径，并将解压的路径信息通过回调函数返回至ReactNative开发框架。

3.如权利要求1所述的方法，其中，所述依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理的步骤包括：

依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage；

依据所述高帧率动画视图AHAnimationImage创建原生视图，并将原生视图提供给ReactNative开发框架的RCTUIManager控件；

所述RCTUIManager控件根据需要设置和更新所述原生视图的属性，并根据原生视图的委托，给所述ReactNative开发框架发送对应事件。

4.如权利要求1所述的方法，其中，所述高帧率动画视图AHAnimationImage支持的参数包括：

单次动画时长信息；

动画重复次数信息；

结束播放回调信息；

资源图片地址列表信息；

资源图片地址类型信息。

5.如权利要求4所述的方法，其中，所述资源图片地址类型信息包括的资源类型有：网络地址、ReactNative开发框架内图片名称、原生本地图片路径。

6.如权利要求1所述的方法，其中，所述IOS操作系统使用UIImageView控件，创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架的步骤包括：

IOS操作系统使用UIImageView控件，创建帧动画图片UIImage集合；

依据所述帧动画图片UIImage集合，从所述ReactNative开发框架获取高帧率动画视图AHAnimationImage；

依据获取的所述高帧率动画视图AHAnimationImage，所述IOS操作系统使用startAnimation-stopAnimation控件实现高帧率动画视图AHAnimationImage的开始或停止控制；

所述IOS操作系统使用KVO控件对高帧率动画视图AHAnimationImage的播放进行监听；

依据所述KVO控件的监听结果，在所述高帧率动画视图AHAnimationImage播放结束时回调至ReactNative开发框架。

7.如权利要求6所述的方法，其中，如果所述高帧率动画视图AHAnimationImage为磁盘加载的图片，则需要进行性能内存优化，其步骤包括：

将磁盘图片加载到IOS操作系统的内核缓冲区，并将磁盘图片从内核缓冲区复制到用户空间；

IOS操作系统生成UIImageView控件，并将磁盘图片赋值给UIImageView控件；

IOS操作系统的CATransaction控件捕获到UIImageView layer树的变化，IOS操作系统的主线程Runloop提交CATransaction控件，并开始进行图像渲染。

8.一种动画播放管理的装置，所述装置基于IOS操作系统及Android操作系统开发，实现在ReactNative开发框架上播放高帧率动画，所述装置包括：

动画获取模块，用于获取ReactNative开发框架的Native Modules控件技术支持，实现高帧率动画模块封装功能；依据所述Native Modules控件技术支持，在所述ReactNative开发框架和操作系统上分别提供异步获取图片资源的应用程序接口，所述操作系统包括IOS操作系统及Android操作系统；依据所述异步获取图片资源的应用程序接口，所述ReactNative开发框架获取高帧率动画视图AHAnimationImage，并将所述高帧率动画视图AHAnimationImage通过ReactNative开发框架的RCTUIManager控件进行管理；

播放管理模块，IOS操作系统使用UIImageView控件创建帧动画图片UIImage集合，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架；Android操作系统使用ImageView控件作为动画的载体，获取高帧率动画视图AHAnimationImage，并在动画播放结束时回调至ReactNative开发框架。

9.一种电子设备，包括：

一个或多个处理器；和

存储器；

一个或多个程序，其中所述一个或多个程序存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序包括用于执行根据权利要求1-7所述的方法中的任一方法的指令。

10.一种存储一个或多个程序的计算机可读存储介质，所述一个或多个程序包括指令，所述指令当计算设备执行时，使得所述计算设备执行根据权利要求1-7所述的方法中的任一方法。

Images