WO2022033131A1 - 基于json数据格式的动画渲染方法 - Google Patents

基于json数据格式的动画渲染方法 Download PDF

Info

Publication number
WO2022033131A1
WO2022033131A1 PCT/CN2021/097787 CN2021097787W WO2022033131A1 WO 2022033131 A1 WO2022033131 A1 WO 2022033131A1 CN 2021097787 W CN2021097787 W CN 2021097787W WO 2022033131 A1 WO2022033131 A1 WO 2022033131A1
Authority
WO
WIPO (PCT)
Prior art keywords
file
user resource
animation
resource file
json
Prior art date
Application number
PCT/CN2021/097787
Other languages
English (en)
French (fr)
Inventor
舒镕智
魏博
Original Assignee
深圳市前海手绘科技文化有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 深圳市前海手绘科技文化有限公司 filed Critical 深圳市前海手绘科技文化有限公司
Publication of WO2022033131A1 publication Critical patent/WO2022033131A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/76—Adapting program code to run in a different environment; Porting

Definitions

  • the invention belongs to the technical field of animation rendering, and in particular relates to an animation rendering method, device, electronic device and storage medium based on JSON data format.
  • the mainstream animation effect implementation process is generally an animation effect for the interaction designer, and the developer uses a custom View to realize the animation according to the designer's effect.
  • This implementation has the following technical defects:
  • the present invention provides an animation rendering method based on JSON data format, which can effectively reduce the workload of the client and the Web when realizing the interaction effect given by the designer; it can be based on a unified JSON data to avoid differences in animation effects on multiple platforms or versions; based on the JSON data format, the latest animation JSON (JavaScript Object Notation) can be sent from the server side, so that the latest animation effects can be used without updating the client. Function.
  • JSON JavaScript Object Notation
  • An animation rendering method based on JSON data format comprising the following steps:
  • Preprocessing the user resource file so that the user resource file and the JSON animation file can be matched and replaced;
  • Animation rendering is performed on the combined file.
  • the purpose of preprocessing the user resource file is to match and replace the user resource file and the JSON animation file.
  • the placeholder image in the JSON animation file is an image file, to realize the replacement of the user resource file with the JSON animation file, it is required that the user resource file can match the attributes of the placeholder image, for example, both are image attributes. It is required that the user resource file can match the size of the placeholder image.
  • the step of preprocessing the user resource file includes:
  • the user resource file is a video file, decode the video file into a video frame;
  • the picture files in the picture sequence are scaled.
  • the user resource file may be a video file or a picture file, so as to meet the personalized experience requirements of the user animation rendering.
  • video files need to be converted to image files to be combined with placeholder replacement in JSON animation files.
  • step of performing animation rendering on the combined file includes:
  • animation rendering is performed on the combined files in sequence.
  • each frame has continuity and dynamics.
  • the picture corresponding to each video frame is replaced with the placeholder image, and then animation rendering is performed, which is a continuous and dynamic process. , therefore, by monitoring the update progress of animation rendering, continuous replacement can be performed according to the update progress to avoid data loss and replacement disorder.
  • the step of obtaining the JSON animation file with the placeholder image includes: dynamically obtaining the JSON file from the server.
  • JSON animation files with placeholder images can be obtained and loaded locally, or dynamically obtained from the server.
  • a new animation JSON file is delivered from the server, which can be used without updating the client, which can effectively reduce the client's release cost.
  • the occupation of local storage resources is also reduced, and the size of the client installation package is reduced.
  • the present invention also provides an animation rendering device based on the JSON data format, including:
  • the acquisition module is used to acquire JSON animation files with placeholder images and user resource files;
  • preprocessing module for preprocessing the user resource file, so that the user resource file and the JSON animation file can be matched and replaced;
  • a combination module is used to dynamically replace the placeholder map with the preprocessed user resource file to obtain a combination file of the user resource file and the JSON animation file;
  • a rendering module configured to perform animation rendering on the combined file.
  • the preprocessing module includes:
  • a judging unit for judging whether the user resource file is a video file or a picture file
  • a decoding unit for decoding the video file as a video frame if the user resource file is a video file
  • a cache unit used to cache the video frame as a sequence of pictures
  • a scaling unit used for scaling the picture files in the picture sequence.
  • the animation rendering device based on the JSON data format also includes:
  • the monitoring unit is used to monitor the update progress of animation rendering
  • a computing unit configured to calculate the subscript of the video frame that needs to be rendered according to the update progress
  • a sequential rendering unit configured to sequentially perform animation rendering on the combined file according to the video frame index.
  • step of obtaining the JSON animation file with the placeholder image it also includes:
  • the attribute information of each assets object in the assets object list is obtained and stored in AssetsManger.
  • step of obtaining the JSON animation file with the placeholder image also includes:
  • the placeholder map is associated with attribute information of the assets object in AssetsManger based on the matching information.
  • the preprocessing of the user resource file includes:
  • the user resource file is processed based on the assets object attribute information associated with the placeholder map corresponding to the user resource file to obtain a preprocessed user resource file.
  • the attribute information includes any one or more of ID information, width information and height information.
  • the acquisition module is also used to perform the following steps, including:
  • the attribute information of each assets object in the assets object list is obtained and stored in AssetsManger.
  • the acquisition module is also used to perform the following steps, including:
  • the placeholder map is associated with attribute information of the assets object in AssetsManger based on the matching information.
  • preprocessing module is also used to perform the following steps, including:
  • the user resource file is processed based on the assets object attribute information associated with the placeholder map corresponding to the user resource file to obtain a preprocessed user resource file.
  • the attribute information includes any one or more of ID information, width information and height information.
  • the present invention also provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the computer program is executed in the processor to implement any of the above methods.
  • the present invention may be a mobile terminal or a web terminal.
  • the present invention also provides a storage medium storing a computer program, the computer program being executed in a processor to implement any of the above methods.
  • the implementation method is mainly that the UI designer draws many virtual images in advance, or draws the character fragmentation model in advance, and the user selects and splices them and generates them.
  • These two implementation methods have their own shortcomings, such as the image is easy to repeat, the generated image is static, and the cost of material production for designers is too high.
  • a preset character fragmentation model is invoked, combined with a picture selected by the user, combined with JSON animation, to realize a self-defined and dynamic virtual character image.
  • the animation rendering method based on the JSON data format provided by the present invention obtains a JSON animation file with a placeholder image, and obtains a user resource file; preprocesses the user resource file, so that the user resource file and the JSON animation file can be matched and replaced; The preprocessed user resource file dynamically replaces the placeholder image to obtain a combined file of the user resource file and the JSON animation file; the combined file is animated and rendered.
  • This method can effectively reduce the workload of the client and the web when realizing the interaction effect given by the designer, and can avoid differences in animation effects on multiple platforms or versions.
  • FIG. 1 is a flowchart of an animation rendering method based on JSON data format provided by an embodiment
  • FIG. 2 is a flowchart of an improved method for the method in FIG. 1 provided by an embodiment
  • FIG. 3 is a flowchart of an improved method for the method in FIG. 1 provided by an embodiment
  • FIG. 4 is an architecture diagram of an animation rendering device based on a JSON data format provided by an embodiment
  • Fig. 5 is the architecture diagram of the preprocessing module in Fig. 4;
  • FIG. 6 is an architectural diagram of the rendering module in FIG. 4 .
  • the term “storage medium” may be various media that can store computer programs, such as ROM, RAM, magnetic disk or optical disk.
  • the term "processor” can be CPLD (Complex Programmable Logic Device: Complex Programmable Logic Device), FPGA (Field-Programmable Gate Array: Field Programmable Gate Array), MCU (Microcontroller Unit: Micro Control Unit), PLC (Programmable Logic) Controller: programmable logic controller) and CPU (Central Processing Unit: central processing unit) and other chips or circuits with data processing functions.
  • electronic device may be any device with data processing and storage functions, and may generally include both stationary and mobile terminals. Fixed terminals such as desktops, etc. Mobile terminals such as mobile phones, PADs and mobile robots. In addition, the technical features involved in the different embodiments of the present invention described later can be combined with each other as long as there is no conflict with each other.
  • the present invention provides an animation rendering method based on JSON data format, comprising the following steps:
  • the JSON animation file with the placeholder image can be dynamically obtained from the server.
  • step S2 the step of preprocessing the user resource file includes:
  • the decoded video file is a video frame
  • the cached video frame is a picture sequence
  • the present invention also provides an electronic device including a memory and a processor, wherein the memory stores a computer program, and the computer program is executed in the processor to implement any of the above methods.
  • the memory stores a computer program
  • the computer program is executed in the processor to implement any of the above methods.
  • it may be a mobile terminal or a web terminal.
  • step S4 when the user resource file is a video file, the method for rendering the video file is as follows:
  • AnimatorUpdateListener refers to the animation progress update listener.
  • AnimatorUpdateListener can be set by calling addUpdateListener from Animator.
  • onAnimationUpdate callback method of AnimatorUpdateListener according to the current progress, the subscript of the video frame to be rendered is calculated to realize dynamic and continuous picture animation rendering.
  • Animator refers to the animation performer, and each platform has a corresponding implementation.
  • addUpdateListener is a method of Animator. It can register a callback function for Animator. When Animator renders animation, it will call back this function according to the current rendering progress. Inside this function, you can know where the current animation is rendered.
  • addUpdateLister is the method name on the Android side, and the corresponding names on Animators of different platforms can be different.
  • each frame has continuity and dynamics.
  • the picture corresponding to each video frame is replaced with the placeholder image, and then animation rendering is performed, which is a continuous and dynamic process. Therefore, it is necessary to update the rendering progress at the same time as the animation rendering, monitor the update progress of the animation rendering, and perform continuous replacement, combination and rendering according to the update progress to avoid data loss and replacement disorder.
  • the method before the step of acquiring the JSON animation file with the placeholder image, the method further includes:
  • the attribute information of each assets object in the assets object list is obtained and stored in AssetsManger.
  • the attribute information includes any one or more of ID information, width information, and height information.
  • the step of obtaining the JSON animation file with the placeholder image further includes:
  • the placeholder map is associated with attribute information of the assets object in AssetsManger based on the matching information.
  • the placeholder image is displayed in the form of a list.
  • the width, height and id corresponding to the placeholder image are obtained through AssetsManger to realize user resource association.
  • step of preprocessing the user resource file it also includes:
  • the user resource file is processed based on the assets object attribute information associated with the occupancy map corresponding to the user resource file to obtain a preprocessed user resource file.
  • the present invention also provides a storage medium storing a computer program, the computer program being executed in a processor to implement any of the above methods.
  • Embodiment 2 is a diagrammatic representation of Embodiment 1:
  • the present invention provides an animation rendering device based on JSON data format, including:
  • Obtaining module 1 is used to obtain JSON animation files with placeholder images and user resource files;
  • Preprocessing module 2 for preprocessing the user resource file, so that the user resource file and the JSON animation file can be matched and replaced;
  • Combination module 3 for dynamically replacing the placeholder map with the preprocessed user resource file, to obtain a combination file of the user resource file and the JSON animation file;
  • the rendering module 4 is used for performing animation rendering on the combined file.
  • the present invention provides a preprocessing module including:
  • Judging unit 20 for judging whether the user resource file is a video file or a picture file
  • Decoding unit 21 for if the user resource file is a video file, decoding the video file as a video frame;
  • a cache unit 22 configured to cache the video frame as a sequence of pictures
  • the scaling unit 23 is used for scaling the picture files in the picture sequence.
  • the rendering module provided by the present invention includes:
  • the monitoring unit 40 is used to monitor the update progress of animation rendering
  • Computing unit 41 for calculating the video frame subscript that needs to be rendered according to the update progress
  • the sequential rendering unit 42 is configured to sequentially perform animation rendering on the combined file according to the subscript of the video frame.
  • the obtaining module is further configured to perform the following steps, including:
  • the attribute information of each assets object in the assets object list is obtained and stored in AssetsManger.
  • the attribute information includes any one or more of ID information, width information and height information.
  • the obtaining module is further configured to perform the following steps, including:
  • the placeholder map is associated with attribute information of the assets object in AssetsManger based on the matching information.
  • the placeholder image is displayed in the form of a list.
  • the corresponding width, height and id of the placeholder image are obtained through AssetsManger to realize the user resource association.
  • the preprocessing module is further configured to perform the following steps, including:
  • the user resource file is processed based on the assets object attribute information associated with the placeholder map corresponding to the user resource file to obtain a preprocessed user resource file.
  • the present invention provides an animation rendering method based on the JSON data format, obtaining a JSON animation file with a placeholder image, and obtaining a user resource file; preprocessing the user resource file, so that the user resource file and the JSON animation file are Can match and replace; dynamically replace the placeholder image with the preprocessed user resource file to obtain the combined file of the user resource file and the JSON animation file; perform animation rendering on the combined file.
  • the user resource file is provided to the user, and can be any format file that can be dynamically replaced with a placeholder image through preprocessing, such as a picture or a video.
  • a placeholder image such as a picture or a video.
  • JSON JavaScript Object Notation
  • JSON animation files can be produced using AE (After Effect), and can be supplied to different platforms for animation rendering calls.
  • AE After Effect
  • the present invention preprocesses the user resource file and dynamically replaces it with the placeholder map, and has the following technical innovations:
  • step S1 a JSON animation file with a placeholder image is obtained, and the specific method is illustrated as follows:
  • JSONObject refers to an entity object, and the entity object can obtain the value of a field in JSON through the get method.
  • assets refers to the field name in the JSON animation that stores the placeholder information.
  • id refers to the unique identifier of an Asset.
  • AssetsManger refers to the custom Assert management class.
  • step S2 the user resource file is preprocessed so that the user resource file and the JSON animation file can be matched and replaced.
  • the specific method is illustrated as follows:
  • the image file is preprocessed, as follows:
  • Bitmap.createBitmap refers to creating a picture with a specified width and height, and each platform has a corresponding implementation method.
  • the user resource file is a video file
  • preprocess the video file as follows:
  • the placeholder image is displayed in the form of a list.
  • the corresponding width, height and id of the placeholder image are obtained through AssetsManger to realize the user resource association.
  • Bitmap.createBitmap to scale the picture according to the width and height specified by Assets.
  • each frame of the video needs to be decoded first and cached as a picture sequence. Then according to the width and height specified by Assets, call Bitmap.createBitmap to scale the image.
  • View refers to an object, a drawing control used to draw content on the screen.
  • OnDraw is a method in View, which can be called a drawing update function. When the system triggers drawing, this method is called, and the content is drawn to the screen in this method.
  • the present invention needs to do the following processing:
  • Call addUpdateListener to the Animator set the progress update listener AnimatorUpdateListener, in the onAnimationUpdate callback method of AnimatorUpdateListener, calculate the subscript of the video frame to be rendered according to the current progress, and use the subscript to get the picture in the sequence of pictures cached after decoding each frame of the video , and call the setImageBitmap of the animation rendering View to set the image.

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数据格式的动画渲染装置还包括：
监听单元，用于监听动画渲染的更新进度；
计算单元，用于根据所述更新进度计算需要渲染的视频帧下标；
依序渲染单元，用于根据所述视频帧下标，依序对所述结合文件进行动画渲染。
进一步，在所述获取带有占位图的JSON动画文件的步骤前，还包括：
将JSON文件转成JSONObject数据格式，在JSONObject数据格式中具有assets对象列表；
获取所述assets对象列表中每一个assets对象的属性信息并存入至AssetsManger中。
进一步，所述获取带有占位图的JSON动画文件的步骤还包括：
基于预设形式展示占位图；
基于匹配信息将所述占位图与AssetsManger中assets对象的属性信息关联。
进一步，所述预处理所述用户资源文件包括：
获取用户资源文件以及与所述用户资源文件对应的占位图；
基于所述用户资源文件对应的占位图关联的assets对象属性信息对所述用户资源文件进行处理，得到预处理后的用户资源文件。
进一步，所述属性信息包括ID信息、宽度信息以及高度信息中的任意一种或多种。
进一步，所述获取模块还用于执行以下步骤，包括：
将JSON文件转成JSONObject数据格式，在JSONObject数据格式中具有assets对象列表；
获取所述assets对象列表中每一个assets对象的属性信息并存入至AssetsManger中。
进一步，所述获取模块还用于执行以下步骤，包括：
基于预设形式展示占位图；
基于匹配信息将所述占位图与AssetsManger中assets对象的属性信息关联。
进一步，所述预处理模块还用于执行以下步骤，包括：
获取用户资源文件以及与所述用户资源文件对应的占位图；
基于所述用户资源文件对应的占位图关联的assets对象属性信息对所述用户资源文件进行处理，得到预处理后的用户资源文件。
进一步，所述属性信息包括ID信息、宽度信息以及高度信息中的任意一种或多种。
另外的，本发明还提供一种电子设备，包括存储器和处理器，所述存储器存储计算机程序，所述计算机程序在所述处理器中执行可实现上述任一种方法。其中，可以为移动终端或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(Central Processing 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上对应的名称可以不一样。
还需要说明的是，视频转化为视频帧后，每一帧之间具有连续性和动态性，将每一视频帧对应的图片与占位图进行替换，进而进行动画渲染，是一个连续动态的过程，因此，需要在动画渲染的同时进行 渲染进度的更新，监听动画渲染的更新进度，可以根据更新进度进行连续替换结合和渲染，避免数据丢失，避免替换紊乱。
在一个实施例中，在所述获取带有占位图的JSON动画文件的步骤前，还包括：
将JSON文件转成JSONObject数据格式，在JSONObject数据格式中具有assets对象列表；
获取所述assets对象列表中每一个assets对象的属性信息并存入至AssetsManger中。
其中，属性信息包括ID信息、宽度信息以及高度信息中的任意一种或多种。
在上述的步骤中，读取JSON文件到内存中，转成JSONObject，调用get方法获取assets对象列表，循环遍历该列表，获取每一个assets对象，并获取该对象中的id、w、h字段，得到assets的id以及宽高。把id、宽高存入AssetsManger中。
在一个可能的实施例中，获取带有占位图的JSON动画文件的步骤还包括：
基于预设形式展示占位图；
基于匹配信息将所述占位图与AssetsManger中assets对象的属性信息关联。
通过列表的形式展现占位图，当用户选择素材资源替换占位图后，通过AssetsManger获得该占位图对应的宽高、id，实现用户资源关联。
在预处理所述用户资源文件的步骤中，还包括：
获取用户资源文件以及与所述用户资源文件对应的占位图；
基于所述用户资源文件对应的占位图关联的assets对象属性信息 对所述用户资源文件进行处理，得到预处理后的用户资源文件。
另外的，本发明还提供一种存储介质，存储计算机程序，所述计算机程序在处理器中执行可实现上述任一种方法。
实施例二：
参见图4，对应的，本发明提供一种基于JSON数据格式的动画渲染装置，包括：
获取模块1，用于获取带有占位图的JSON动画文件，获取用户资源文件；
预处理模块2，用于预处理所述用户资源文件，以使所述用户资源文件与所述JSON动画文件能匹配替换；
结合模块3，用于将预处理后的所述用户资源文件动态替换所述占位图，以得到用户资源文件与所述JSON动画文件的结合文件；
渲染模块4，用于对所述结合文件进行动画渲染。
实施例三：
参见图5，具体的，本发明提供预处理模块包括：
判断单元20，用于判断所述用户资源文件是视频文件，还是图片文件；
解码单元21，用于如果所述用户资源文件是视频文件，解码所述视频文件为视屏帧；
缓存单元22，用于缓存所述视屏帧为图片序列；
缩放单元23，用于缩放所述图片序列中的图片文件。
施例四：
参见图6，进一步，本发明提供的渲染模块包括：
监听单元40，用于监听动画渲染的更新进度；
计算单元41，用于根据所述更新进度计算需要渲染的视频帧下 标；
依序渲染单元42，用于根据所述视频帧下标，依序对所述结合文件进行动画渲染。
在一个实施例中，获取模块还用于执行以下步骤，包括：
将JSON文件转成JSONObject数据格式，在JSONObject数据格式中具有assets对象列表；
获取所述assets对象列表中每一个assets对象的属性信息并存入至AssetsManger中。
所述属性信息包括ID信息、宽度信息以及高度信息中的任意一种或多种。
在上述的步骤中，读取JSON文件到内存中，转成JSONObject，调用get方法获取assets对象列表，循环遍历该列表，获取每一个assets对象，并获取该对象中的id、w、h字段，得到assets的id以及宽高。把id、宽高存入AssetsManger中。
在一个实施例中，获取模块还用于执行以下步骤，包括：
基于预设形式展示占位图；
基于匹配信息将所述占位图与AssetsManger中assets对象的属性信息关联。
通过列表的形式展现占位图，当用户选择素材资源替换占位图后，通过AssetsManger获得该占位图对应的宽高、id，实现用户资源关联。
在一个实施例中，所述预处理模块还用于执行以下步骤，包括：
获取用户资源文件以及与所述用户资源文件对应的占位图；
基于所述用户资源文件对应的占位图关联的assets对象属性信息对所述用户资源文件进行处理，得到预处理后的用户资源文件。
需要说明的是，现有技术中，动画实现的技术方案一般为：交互设计师出动画效果，开发者根据设计师设计的动画效果，利用自定义View来实现动画。这种实现方式存在如下技术缺陷：
第一，不同平台都需要单独编写实现动画代码，开发成本较高。
第二，不同平台的API、实现方式上存在差异，可能导致每个平台上动画效果不一致。
第三，对于客户端应用，如果要新增/修改动画，则需要开发者再次修改代码，重新打包发布，更新成本过大。
第四，对于客户端应用，存在多个版本共存的情况，需要处理不同版本动画效果差异问题。
第五，一个精美流畅的动画，需要占用开发者大量时间进行开发调试，同时对于开发者也有一定的艺术知识要求。
针对上述技术缺陷，本发明提供一种基于JSON数据格式的动画渲染方法，获取带有占位图的JSON动画文件，获取用户资源文件；预处理用户资源文件，以使用户资源文件与JSON动画文件能匹配替换；将预处理后的用户资源文件动态替换占位图，以得到用户资源文件与JSON动画文件的结合文件；对结合文件进行动画渲染。
需要说明的是，用户资源文件为用户提供，可以是图片或者视频等通过预处理能与占位图动态替换的任何格式文件。这样，可以充分体现用户个性化需求，实现多样化动画渲染的需求。
需要说明的是，JSON(JavaScript Object Notation)是一种基于可阅读文本的数据交换语言。
需要说明的是，JSON动画文件可以使用AE(After Effect)制作出来，可以供给不同平台进行动画渲染调用。
不同平台进行动画渲染时，通过调取用户资源文件进行预处理， 然后与JSON动画文件中的占位图动态替换，可以实现用户资源文件与占位图的结合，达到个性定制动画的目的。
本发明预处理用户资源文件，与占位图动态替换的方案，存在如下技术创新：
第一，可以有效解决现有技术中，不同平台单独编写实现动画代码，开发成本较高的技术问题。
第二，可以有效解决现有技术中，不同平台API(Application Programming Interface，应用程序接口)实现方式上存在差异，使得不同平台上动画效果保持一致。
第三，对于客户端应用，存在多个版本共存的情况，不存在需要处理不同版本动画效果差异问题。
第四，在需要渲染精美流畅的动画时，可以避免占用开发者大量时间进行开发调试的问题，也不需要开发者具有较高的艺术知识修养。
在步骤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 (18)

  1. 一种基于JSON数据格式的动画渲染方法，其特征在于，包括如下步骤：
    获取带有占位图的JSON动画文件，获取用户资源文件；
    预处理所述用户资源文件，以使所述用户资源文件与所述JSON动画文件能匹配替换；
    将预处理后的所述用户资源文件动态替换所述占位图，以得到所述用户资源文件与所述JSON动画文件的结合文件；
    对所述结合文件进行动画渲染。
  2. 如权利要求1所述的方法，其特征在于，所述的预处理所述用户资源文件的步骤包括：
    判断所述用户资源文件是视频文件，还是图片文件；
    如果所述用户资源文件是视频文件，解码所述视频文件为视屏帧；
    缓存所述视屏帧为图片序列；
    缩放所述图片序列中的图片文件。
  3. 如权利要求2所述的方法，其特征在于，所述的对所述结合文件进行动画渲染的步骤包括：
    监听动画渲染的更新进度；
    根据所述更新进度计算需要渲染的视频帧下标；
    根据所述视频帧下标，依序对所述结合文件进行动画渲染。
  4. 如权利要求1所述的方法，其特征在于，所述的获取带有占位图的JSON动画文件的步骤包括：从服务端动态获取JSON文件。
  5. 一种基于JSON数据格式的动画渲染装置，其特征在于，包括：
    获取模块，用于获取带有占位图的JSON动画文件，获取用户资源文件；
    预处理模块，用于预处理所述用户资源文件，以使所述用户资源文件与所述JSON动画文件能匹配替换；
    结合模块，用于将预处理后的所述用户资源文件动态替换所述占位图，以得到所述用户资源文件与所述JSON动画文件的结合文件；
    渲染模块，用于对所述结合文件进行动画渲染。
  6. 如权利要求5所述的装置，其特征在于，所述预处理模块包括：
    判断单元，用于判断所述用户资源文件是视频文件，还是图片文件；
    解码单元，用于如果所述用户资源文件是视频文件，解码所述视频文件为视屏帧；
    缓存单元，用于缓存所述视屏帧为图片序列；
    缩放单元，用于缩放所述图片序列中的图片文件。
  7. 如权利要求6所述的装置，其特征在于，所述渲染模块包括：
    监听单元，用于监听动画渲染的更新进度；
    计算单元，用于根据所述更新进度计算需要渲染的视频帧下标；
    依序渲染单元，用于根据所述视频帧下标，依序对所述结合文件进行动画渲染。
  8. 如权利要求1所述的方法，其特征在于，在所述获取带有占位图的JSON动画文件的步骤前，还包括：
    将JSON文件转成JSONObject数据格式，在JSONObject数据格式中具有assets对象列表；
    获取所述assets对象列表中每一个assets对象的属性信息并存入至AssetsManger中。
  9. 如权利要求8所述的方法，其特征在于，所述获取带有占位图的JSON动画文件的步骤还包括：
    基于预设形式展示占位图；
    基于匹配信息将所述占位图与AssetsManger中assets对象的属性信息关联。
  10. 如权利要求9所述的方法，其特征在于，
    所述预处理所述用户资源文件包括：
    获取用户资源文件以及与所述用户资源文件对应的占位图；
    基于所述用户资源文件对应的占位图关联的assets对象属性信息对所述用户资源文件进行处理，得到预处理后的用户资源文件。
  11. 如权利要求8所述的方法，其特征在于，
    所述属性信息包括ID信息、宽度信息以及高度信息中的任意一种或多种。
  12. 如权利要求5所述的装置，其特征在于，所述获取模块还用于执行以下步骤，包括：
    将JSON文件转成JSONObject数据格式，在JSONObject数据格式中具有assets对象列表；
    获取所述assets对象列表中每一个assets对象的属性信息并存入至AssetsManger中。
  13. 如权利要求12所述的装置，其特征在于，所述获取模块还用于执行以下步骤，包括：
    基于预设形式展示占位图；
    基于匹配信息将所述占位图与AssetsManger中assets对象的属性信息关联。
  14. 如权利要求13所述的装置，其特征在于，
    所述预处理模块还用于执行以下步骤，包括：
    获取用户资源文件以及与所述用户资源文件对应的占位图；
    基于所述用户资源文件对应的占位图关联的assets对象属性信息对所述用户资源文件进行处理，得到预处理后的用户资源文件。
  15. 如权利要求12所述的装置，其特征在于，
    所述属性信息包括ID信息、宽度信息以及高度信息中的任意一种或多种。
  16. 一种电子设备，包括存储器和处理器，所述存储器存储计算机程序，其特征在于，所述计算机程序在所述处理器中执行可实现权利要求1-4、8-11中任一种方法。
  17. 一种存储介质，存储计算机程序，其特征在于，所述计算机程序在处理器中执行可实现权利要求1-4、8-11中任一种方法。
  18. 如权利要求16所述的电子设备，其特征在于，所述电子设备为移动终端或web端。
PCT/CN2021/097787 2020-08-11 2021-06-01 基于json数据格式的动画渲染方法 WO2022033131A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010803214.8A CN111951356B (zh) 2020-08-11 2020-08-11 基于json数据格式的动画渲染方法
CN202010803214.8 2020-08-11

Publications (1)

Publication Number Publication Date
WO2022033131A1 true WO2022033131A1 (zh) 2022-02-17

Family

ID=73332153

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/097787 WO2022033131A1 (zh) 2020-08-11 2021-06-01 基于json数据格式的动画渲染方法

Country Status (2)

Country Link
CN (1) CN111951356B (zh)
WO (1) WO2022033131A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114979748A (zh) * 2022-05-24 2022-08-30 上海哔哩哔哩科技有限公司 视频处理方法及装置
CN115641400A (zh) * 2022-11-04 2023-01-24 广州大事件网络科技有限公司 一种动态图片生成方法、系统、设备及存储介质

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111951356B (zh) * 2020-08-11 2022-12-09 深圳市前海手绘科技文化有限公司 基于json数据格式的动画渲染方法

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120256928A1 (en) * 2011-04-07 2012-10-11 Adobe Systems Incorporated Methods and Systems for Representing Complex Animation Using Scripting Capabilities of Rendering Applications
US20180246871A1 (en) * 2017-02-27 2018-08-30 Disney Enterprises, Inc. Multiplane animation system
CN109636884A (zh) * 2018-10-25 2019-04-16 阿里巴巴集团控股有限公司 动画处理方法、装置及设备
CN109658484A (zh) * 2018-12-21 2019-04-19 上海哔哩哔哩科技有限公司 一种动画自动生成方法及动画自动生成系统
CN110727471A (zh) * 2019-09-09 2020-01-24 杭州玖欣物联科技有限公司 一种动态可扩展的加载动画的方法
CN110853121A (zh) * 2019-10-25 2020-02-28 稿定（厦门）科技有限公司 基于ae的跨平台数据处理的方法及装置
CN111951356A (zh) * 2020-08-11 2020-11-17 深圳市前海手绘科技文化有限公司 基于json数据格式的动画渲染方法

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108010112B (zh) * 2017-11-28 2023-08-22 腾讯数码（天津）有限公司 动画处理方法、装置及存储介质
CN109920037A (zh) * 2019-01-15 2019-06-21 苏州仙峰网络科技股份有限公司 基于Cocos2d-x序列帧动画实现方法
CN110489682B (zh) * 2019-07-08 2022-04-15 北京三快在线科技有限公司 一种页面加载方法和装置
CN110415319B (zh) * 2019-08-07 2022-11-15 深圳市前海手绘科技文化有限公司 基于ppt的动画制作方法、装置与电子设备和存储介质
CN111178027B (zh) * 2019-12-09 2023-03-31 北京尊冠科技有限公司 基于在线创建模板和在线指定数据的报告生成系统和方法

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120256928A1 (en) * 2011-04-07 2012-10-11 Adobe Systems Incorporated Methods and Systems for Representing Complex Animation Using Scripting Capabilities of Rendering Applications
US20180246871A1 (en) * 2017-02-27 2018-08-30 Disney Enterprises, Inc. Multiplane animation system
CN109636884A (zh) * 2018-10-25 2019-04-16 阿里巴巴集团控股有限公司 动画处理方法、装置及设备
CN109658484A (zh) * 2018-12-21 2019-04-19 上海哔哩哔哩科技有限公司 一种动画自动生成方法及动画自动生成系统
CN110727471A (zh) * 2019-09-09 2020-01-24 杭州玖欣物联科技有限公司 一种动态可扩展的加载动画的方法
CN110853121A (zh) * 2019-10-25 2020-02-28 稿定（厦门）科技有限公司 基于ae的跨平台数据处理的方法及装置
CN111951356A (zh) * 2020-08-11 2020-11-17 深圳市前海手绘科技文化有限公司 基于json数据格式的动画渲染方法

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114979748A (zh) * 2022-05-24 2022-08-30 上海哔哩哔哩科技有限公司 视频处理方法及装置
CN114979748B (zh) * 2022-05-24 2024-02-23 上海哔哩哔哩科技有限公司 视频处理方法及装置
CN115641400A (zh) * 2022-11-04 2023-01-24 广州大事件网络科技有限公司 一种动态图片生成方法、系统、设备及存储介质
CN115641400B (zh) * 2022-11-04 2023-11-17 广州大事件网络科技有限公司 一种动态图片生成方法、系统、设备及存储介质

Also Published As

Publication number Publication date
CN111951356A (zh) 2020-11-17
CN111951356B (zh) 2022-12-09

Similar Documents

Publication Publication Date Title
WO2022033131A1 (zh) 基于json数据格式的动画渲染方法
WO2018050003A1 (zh) 3D canvas网页元素的渲染方法、装置及电子设备
US11113874B2 (en) Displaying rich text on 3D models
US11094036B2 (en) Task execution on a graphics processor using indirect argument buffers
CN113411664B (zh) 基于子应用的视频处理方法、装置和计算机设备
WO2017152776A1 (zh) 网络引擎启动方法及装置
Schwab et al. Scalable scalable vector graphics: Automatic translation of interactive svgs to a multithread vdom for fast rendering
CN113411660B (zh) 视频数据的处理方法、装置和电子设备
CN107943805A (zh) 一种动画渲染及发布方法、装置
US7743387B2 (en) Inheritance context for graphics primitives
US10621768B2 (en) Augmented reality and virtual reality engine at the object level for virtual desktop infrastucture
JP2010282200A (ja) アニメーションフォントファイルの構造及び携帯用端末のテキスト出力方法
CN113419806B (zh) 图像处理方法、装置、计算机设备和存储介质
CN115391692A (zh) 视频处理方法和装置
CN112348928A (zh) 动画合成方法、动画合成装置、电子设备及介质
CN112418902A (zh) 基于网页的多媒体合成方法和系统
CN110727471A (zh) 一种动态可扩展的加载动画的方法
CN114489910B (zh) 一种视频会议数据显示方法、装置、设备及介质
CN113535304B (zh) 设计软件中插入、展示、编辑第三方模型的方法与装置
US20240104808A1 (en) Method and system for creating stickers from user-generated content
Newmarch et al. Basic OpenVG on the Raspberry Pi
CN113838167A (zh) 用于生成动画的方法和装置
CN116700704A (zh) 图像处理方法、装置、存储介质及电子设备
CN113849157A (zh) 动画播放管理的方法、装置、设备及存储介质
CN116010736A (zh) 矢量图标的处理方法、装置、设备以及存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21855187

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205 DATED 13.06.2023)

122 Ep: pct application non-entry in european phase

Ref document number: 21855187

Country of ref document: EP

Kind code of ref document: A1