CN111951356A

CN111951356A - 基于json数据格式的动画渲染方法

Info

Publication number: CN111951356A
Application number: CN202010803214.8A
Authority: CN
Inventors: 舒镕智
Original assignee: Shenzhen Qianhai Hand Painted Technology and Culture Co Ltd
Current assignee: Shenzhen Qianhai Hand Painted Technology and Culture Co Ltd
Priority date: 2020-08-11
Filing date: 2020-08-11
Publication date: 2020-11-17
Anticipated expiration: 2040-08-11
Also published as: WO2022033131A1; CN111951356B

Abstract

本发明属于动画渲染技术领域，提供一种基于JSON数据格式的动画渲染方法，获取带有占位图的JSON动画文件，获取用户资源文件；预处理所用户资源文件，以使用户资源文件与JSON动画文件能匹配替换；将预处理后的用户资源文件动态替换占位图，以得到用户资源文件与JSON动画文件的结合文件；对结合文件进行动画渲染。通过该方法，可以有效减少客户端、Web端在实现设计师所给定的交互效果时的工作量，可避免多个平台或版本上的动画效果存在差异。

Description

基于JSON数据格式的动画渲染方法

技术领域

本发明属于动画渲染技术领域，尤其涉及一种基于JSON数据格式的动画渲染方法、装置、电子设备和存储介质。

背景技术

目前，主流的动画效果实现过程，一般为交互设计师出动画效果，开发者根据设计师的效果，利用自定义View来实现动画。这种实现方式存在如下技术缺陷：

第一，不同平台都需要单独编写实现动画代码，开发成本较高。

第二，不同平台的API、实现方式上存在差异，可能导致每个平台上动画效果不一致。

第三，对于客户端应用，如果要新增/修改动画，则需要开发者再次修改代码，重新打包发布，更新成本过大。

第四，对于客户端应用，存在多个版本共存的情况，需要处理不同版本动画效果差异问题。

第五，一个精美流畅的动画，需要占用开发者大量时间进行开发调试，同时对于开发者也有一定的艺术知识要求。

发明内容

为解决上述技术缺陷，本发明提供一种基于JSON数据格式的动画渲染方法，该方法能够有效减少客户端、Web端在实现设计师所给定的交互效果时的工作量；能够基于统一的JSON数据，避免多个平台或版本上的动画效果存在差异；能够基于JSON数据格式，从服务端下发最新的动画JSON（JavaScript Object Notation），实现不需要更新客户端，就能使用最新动画效果的功能。

一种基于JSON数据格式的动画渲染方法，包括如下步骤：

获取带有占位图的JSON动画文件，获取用户资源文件；

预处理所述用户资源文件，以使所述用户资源文件与所述JSON动画文件能匹配替换；

将预处理后的所述用户资源文件动态替换所述占位图，以得到所述用户资源文件与所述JSON动画文件的结合文件；

对所述结合文件进行动画渲染。

需要说明的是，预处理所述用户资源文件的目的是，让所述用户资源文件与所述JSON动画文件能匹配替换。因为JSON动画文件中的占位图为图片文件，所以要实现所述用户资源文件与所述JSON动画文件替换，需要用户资源文件能与占位图的属性匹配，例如，都是图片属性。需要用户资源文件能与占位图的尺寸大小匹配。

具体的，所述的预处理所述用户资源文件的步骤包括：

判断所述用户资源文件是视频文件，还是图片文件；

如果所述用户资源文件是视频文件，解码所述视频文件为视屏帧；

缓存所述视屏帧为图片序列；

缩放所述图片序列中的图片文件。

需要说明的是，用户资源文件可以是视频文件或者图片文件，从而满足用户动画渲染的个性化体验需求。

另外，视频文件需要转换为图片文件，才能与JSON动画文件中的占位图替换结合。

进一步，所述的对所述结合文件进行动画渲染的步骤包括：

监听动画渲染的更新进度；

根据所述更新进度计算需要渲染的视频帧下标；

根据所述视频帧下标，依序对所述结合文件进行动画渲染。

需要说明的是，视频转化为视频帧后，每一帧之间具有连续性和动态性，将每一视频帧对应的图片与占位图进行替换，进而进行动画渲染，是一个连续动态的过程，因此，监听动画渲染的更新进度，可以根据更新进度进行连续替换，避免数据丢失，避免替换紊乱。

具体的，所述的获取带有占位图的JSON动画文件的步骤包括：从服务端动态获取JSON文件。

需要说明的是，带有占位图的JSON动画文件可以从本地获取加载，也可以从服务端动态获取。在需要更新JSON动画文件时，从服务端下发新的动画JSON文件，无需更新客户端即可使用，能有效减少客户端的发版成本。另外，也降低本地存储资源的占用，减少客户端安装包的大小。

相应的，本发明还提供一种基于JSON数据格式的动画渲染装置，包括：

获取模块，用于获取带有占位图的JSON动画文件，获取用户资源文件；

预处理模块，用于预处理所述用户资源文件，以使所述用户资源文件与所述JSON动画文件能匹配替换；

结合模块，用于将预处理后的所述用户资源文件动态替换所述占位图，以得到所述用户资源文件与所述JSON动画文件的结合文件；

渲染模块，用于对所述结合文件进行动画渲染。

具体的，所述预处理模块包括：

判断单元，用于判断所述用户资源文件是视频文件，还是图片文件；

解码单元，用于如果所述用户资源文件是视频文件，解码所述视频文件为视屏帧；

缓存单元，用于缓存所述视屏帧为图片序列；

缩放单元，用于缩放所述图片序列中的图片文件。

进一步，基于JSON数据格式的动画渲染装置还包括：

监听单元，用于监听动画渲染的更新进度；

计算单元，用于根据所述更新进度计算需要渲染的视频帧下标；

依序渲染单元，用于根据所述视频帧下标，依序对所述结合文件进行动画渲染。

另外的，本发明还提供一种电子设备，包括存储器和处理器，所述存储器存储计算机程序，所述计算机程序在所述处理器中执行可实现上述任一种方法。其中，可以为移动终端或web端。

另外的，本发明还提供一种存储介质，存储计算机程序，所述计算机程序在处理器中执行可实现上述任一种方法。

改进地，对带社交属性的用户资源文件，可用来生成用户独特的虚拟形象。

现有技术中，实现方式主要由UI设计师提前画好许多虚拟形象，或是提前画好人物分片模型，由用户选择拼接后生成。这两种实现方式各有缺点，如形象容易重复、生成的形象为静态、设计师制作素材成本过高等。

本发明改进方案中，调用预设的人物分片模型，结合用户所选的图片，结合JSON动画，实现自定义、动态的虚拟人物形象。

本发明提供的基于JSON数据格式的动画渲染方法，获取带有占位图的JSON动画文件，获取用户资源文件；预处理所用户资源文件，以使用户资源文件与JSON动画文件能匹配替换；将预处理后的用户资源文件动态替换占位图，以得到用户资源文件与JSON动画文件的结合文件；对结合文件进行动画渲染。通过该方法，可以有效减少客户端、Web端在实现设计师所给定的交互效果时的工作量，可避免多个平台或版本上的动画效果存在差异。

附图说明

图1为一实施例提供的基于JSON数据格式的动画渲染方法的流程图；

图2为一实施例提供的对图1中方法的改进方法流程图；

图3为一实施例提供的对图1中方法的改进方法流程图；

图4为一实施例提供的基于JSON数据格式的动画渲染装置的架构图；

图5为图4中预处理模块的架构图；

图6为图4中渲染模块的架构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，在本发明的描述中，除非另有明确的规定和限定，术语“存储介质”可以是ROM、RAM、磁碟或者光盘等各种可以存储计算机程序的介质。术语“处理器”可以是CPLD（Complex Programmable Logic Device：复杂可编程逻辑器件）、FPGA（Field－Programmable Gate Array：现场可编程门阵列）、MCU（Microcontroller Unit：微控制单元）、PLC（Programmable Logic Controller：可编程逻辑控制器）以及CPU（CentralProcessing Unit：中央处理器）等具备数据处理功能的芯片或电路。术语“电子设备”可以是具有数据处理功能和存储功能的任何设备，通常可以包括固定终端和移动终端。固定终端如台式机等。移动终端如手机、PAD以及移动机器人等。此外，后续所描述的本发明不同实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互结合。

下面，本发明提出部分优选实施例以教导本领域技术人员实现。

实施例一：

参见图1，本发明提供一种基于JSON数据格式的动画渲染方法，包括如下步骤：

S1、获取带有占位图的JSON动画文件，获取用户资源文件；

S2、预处理用户资源文件，以使用户资源文件与JSON动画文件能匹配替换；

S3、将预处理后的用户资源文件动态替换占位图，以得到用户资源文件与JSON动画文件的结合文件；

S4、对结合文件进行动画渲染。

其中，带有占位图的JSON动画文件可以从服务端动态获取。

参见图2，在步骤S2中，预处理用户资源文件的步骤包括：

S20、判断用户资源文件是视频文件，还是图片文件；

S21、如果用户资源文件是视频文件，解码视频文件为视屏帧；

S22、缓存视屏帧为图片序列；

S23、缩放图片序列中的图片文件。

对应上述动画渲染方法，另外的，本发明还提供一种电子设备，包括存储器和处理器，所述存储器存储计算机程序，所述计算机程序在所述处理器中执行可实现上述任一种方法。其中，可以为移动终端或web端。

参见图3，进一步的，在步骤S4中，本发明在用户资源文件为视频文件时，渲染视频文件的方法具体如下：

S40、监听动画渲染的更新进度；

S41、根据更新进度计算需要渲染的视频帧下标；

S42、根据视频帧下标，依序对结合文件进行动画渲染。

需要说明的是，监听动画渲染的更新进度可以通过设置AnimatorUpdateListener实现。其中，AnimatorUpdateListener是指动画进度更新监听器。

还需要说明的是，AnimatorUpdateListener，可以通过Animator调用addUpdateListener来设置，在AnimatorUpdateListener的onAnimationUpdate回调方法中，根据当前进度，计算需要渲染的视频帧下标，实现动态连续的图片动画渲染。其中，Animator是指动画执行者，每个平台都有对应的实现。addUpdateListener是Animator的一个方法，可以给Animator注册一个回调函数，Animator在渲染动画时，内部会根据现在渲染的进度，回调这个函数，在这个函数内部可以知道当前动画渲染到哪里。addUpdateLister是Android端上的方法名称，不同平台的Animator上对应的名称可以不一样。

还需要说明的是，视频转化为视频帧后，每一帧之间具有连续性和动态性，将每一视频帧对应的图片与占位图进行替换，进而进行动画渲染，是一个连续动态的过程，因此，需要在动画渲染的同时进行渲染进度的更新，监听动画渲染的更新进度，可以根据更新进度进行连续替换结合和渲染，避免数据丢失，避免替换紊乱。

实施例二：

参见图4，对应的，本发明提供一种基于JSON数据格式的动画渲染装置，包括：

获取模块1，用于获取带有占位图的JSON动画文件，获取用户资源文件；

预处理模块2，用于预处理所述用户资源文件，以使所述用户资源文件与所述JSON动画文件能匹配替换；

结合模块3，用于将预处理后的所述用户资源文件动态替换所述占位图，以得到用户资源文件与所述JSON动画文件的结合文件；

渲染模块4，用于对所述结合文件进行动画渲染。

实施例三：

参见图5，具体的，本发明提供预处理模块包括：

判断单元20，用于判断所述用户资源文件是视频文件，还是图片文件；

解码单元21，用于如果所述用户资源文件是视频文件，解码所述视频文件为视屏帧；

缓存单元22，用于缓存所述视屏帧为图片序列；

缩放单元23，用于缩放所述图片序列中的图片文件。

施例四：

参见图6，进一步，本发明提供的渲染模块包括：

监听单元40，用于监听动画渲染的更新进度；

计算单元41，用于根据所述更新进度计算需要渲染的视频帧下标；

依序渲染单元42，用于根据所述视频帧下标，依序对所述结合文件进行动画渲染。

需要说明的是，现有技术中，动画实现的技术方案一般为：交互设计师出动画效果，开发者根据设计师设计的动画效果，利用自定义View来实现动画。这种实现方式存在如下技术缺陷：

针对上述技术缺陷，本发明提供一种基于JSON数据格式的动画渲染方法，获取带有占位图的JSON动画文件，获取用户资源文件；预处理用户资源文件，以使用户资源文件与JSON动画文件能匹配替换；将预处理后的用户资源文件动态替换占位图，以得到用户资源文件与JSON动画文件的结合文件；对结合文件进行动画渲染。

需要说明的是，用户资源文件为用户提供，可以是图片或者视频等通过预处理能与占位图动态替换的任何格式文件。这样，可以充分体现用户个性化需求，实现多样化动画渲染的需求。

需要说明的是，JSON（JavaScript Object Notation）是一种基于可阅读文本的数据交换语言。

需要说明的是，JSON动画文件可以使用AE（After Effect）制作出来，可以供给不同平台进行动画渲染调用。

不同平台进行动画渲染时，通过调取用户资源文件进行预处理，然后与JSON动画文件中的占位图动态替换，可以实现用户资源文件与占位图的结合，达到个性定制动画的目的。

本发明预处理用户资源文件，与占位图动态替换的方案，存在如下技术创新：

第一，可以有效解决现有技术中，不同平台单独编写实现动画代码，开发成本较高的技术问题。

第二，可以有效解决现有技术中，不同平台API（Application ProgrammingInterface，应用程序接口）实现方式上存在差异，使得不同平台上动画效果保持一致。

第三，对于客户端应用，存在多个版本共存的情况，不存在需要处理不同版本动画效果差异问题。

第四，在需要渲染精美流畅的动画时，可以避免占用开发者大量时间进行开发调试的问题，也不需要开发者具有较高的艺术知识修养。

在步骤S1中，获取带有占位图的JSON动画文件，具体方法举例说明如下：

第一，读取JSON文件到内存中，转成JSONObject。其中，JSONObject是指一个实体对象，该实体对象可以通过get方法获得JSON中某个字段的值。

第二，调用get方法获取assets对象列表。其中，assets是指JSON动画中存放占位图信息的字段名称。

第三，循环遍历assets对象列表，获取每一个assets对象。

第四，获取assets对象中的id、w、h字段，得到assets的id以及宽高。其中，id是指某个Assets的唯一标识。

第五，assets的id宽高存入AssetsManger中。其中，AssetsManger是指自定义的Assert管理类。

在步骤S2中，预处理用户资源文件，以使用户资源文件与JSON动画文件能匹配替换，具体方法举例说明如下：

在用户资源文件为图片文件时，预处理图片文件，具体如下：

第一，读取Assets字段的宽高信息。

第二，根据Assets字段的宽高信息，对图片文件调用Bitmap.createBitmap进行缩放。其中，Bitmap.createBitmap是指创建一张指定宽高的图片，每个平台都有的对应实现方法。

在用户资源文件为视频文件时，预处理视频文件，具体如下：

第一，解码视频每一帧。

第二，缓存解码视频为图片序列。

第三，对图片文件进行缩放处理。

需要说明的是，本发明工作原理如下：

读取JSON文件到内存中，转成JSONObject。调用get方法获取assets对象列表，循环遍历该列表，获取每一个assets对象，并获取该对象中的id、w、h字段，得到assets的id以及宽高。把id、宽高存入AssetsManger中。

通过列表的形式展现占位图，当用户选择素材资源替换占位图后，通过AssetsManger获得该占位图对应的宽高、id，实现用户资源关联。

读取Assets字段的宽高信息，对用户素材进行预处理。

如果用户素材是图片，则根据Assets指定的宽高，对图片调用Bitmap.createBitmap进行缩放。

如果用户素材是视频，需要先解码视频每一帧，缓存为图片序列。再根据Assets指定的宽高，对图片调用Bitmap.createBitmap进行缩放处理。

对动画渲染View调用setImageBitmap方法，传递用户资源图片给View，在View的OnDraw方法中把图片渲染到屏幕上。其中，View是指一个对象，用于在屏幕上绘制内容的绘图控件。OnDraw是View中的一个方法，可以叫做绘图更新函数，当系统触发绘制时，就会调用这个方法，在这个方法里面把内容绘制到屏幕上。

执行动画渲染。

针对用户资源为视频的情况，本发明需要做如下处理：

对Animator调用addUpdateListener，设置进度更新监听器AnimatorUpdateListener，在AnimatorUpdateListener的onAnimationUpdate回调方法中，根据当进度计算需要渲染的视频帧下标，使用下标在解码视频每一帧后缓存的图片序列中拿到图片，并且调用动画渲染View的setImageBitmap设置图片。

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

Claims

1.一种基于JSON数据格式的动画渲染方法，其特征在于，包括如下步骤：

获取带有占位图的JSON动画文件，获取用户资源文件；

对所述结合文件进行动画渲染。

2.如权利要求1所述的方法，其特征在于，所述的预处理所述用户资源文件的步骤包括：

判断所述用户资源文件是视频文件，还是图片文件；

缓存所述视屏帧为图片序列；

缩放所述图片序列中的图片文件。

3.如权利要求2所述的方法，其特征在于，所述的对所述结合文件进行动画渲染的步骤包括：

监听动画渲染的更新进度；

根据所述更新进度计算需要渲染的视频帧下标；

根据所述视频帧下标，依序对所述结合文件进行动画渲染。

4.如权利要求1所述的方法，其特征在于，所述的获取带有占位图的JSON动画文件的步骤包括：从服务端动态获取JSON文件。

5.一种基于JSON数据格式的动画渲染装置，其特征在于，包括：

渲染模块，用于对所述结合文件进行动画渲染。

6.如权利要求5所述的装置，其特征在于，所述预处理模块包括：

缓存单元，用于缓存所述视屏帧为图片序列；

缩放单元，用于缩放所述图片序列中的图片文件。

7.如权利要求6所述的装置，其特征在于，所述渲染模块包括：

监听单元，用于监听动画渲染的更新进度；

8.一种电子设备，包括存储器和处理器，所述存储器存储计算机程序，其特征在于，所述计算机程序在所述处理器中执行可实现权利要求1-4中任一种方法。

9.一种存储介质，存储计算机程序，其特征在于，所述计算机程序在处理器中执行可实现权利要求1-4中任一种方法。

10.如权利要求8所述的电子设备，其特征在于，所述电子设备为移动终端或web端。