Animation implementation method, device, equipment and storage medium
Through the combination of global scripts and rendering scripts, the animation files corresponding to the animation configuration parameters are directly obtained, which solves the compatibility problem of Spine animation on the lower version of the operating system, and realizes the rapid initialization and smooth playback of the animation files.
Patent Information
- Application Number
- CN202111007769.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-08-30
- Publication Date
- 2025-08-19
- Estimated Expiration
- 2041-08-30
AI Technical Summary
In the prior art, the Spine animation runtime library has compatibility problems on the lower version of the operating system, and the animation screen needs to be re-rendered when the browser refreshes, resulting in poor playback.
The animation file corresponding to the animation configuration parameters is directly obtained through a pre-configured global script, without the need for running library registration, and the rendering script is combined with the rendering script to synchronize the rendering when the animation screen is refreshed, so as to achieve fast initialization and smooth playback of the animation file.
It solves the compatibility problem of low-version operating systems, improves animation initialization efficiency, and ensures the smoothness and continuity of animation playback.
Smart Images

Figure CN113706671B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of artificial intelligence technology, and in particular to animation implementation methods, devices, equipment and storage media. Background Art
[0002] Website animations are primarily categorized as attribute animations and frame animations. Attribute animations are achieved by changing DOM element properties, such as width, height, font size, or transform attributes like scale and rotate, over a period of time. Frame animations are achieved by replacing images at a constant rate over a period of time, similar to traditional animation methods.
[0003] Spine is a 2D skeletal animation editing tool specifically designed for game development. It features a well-designed UI and comprehensive 2D skeletal animation editing capabilities, simplifying and streamlining the workflow. The Spine tool includes features such as skinning, freeform deformation, and skinning. Users can bind images to skeletons to control them and animate them. It can even simulate complex human animations, further enhancing the details of game animations.
[0004] In the related art, there are many runtime libraries for Spine animations. The implementation methods of these runtime libraries are relatively complex, and animation operation requires calling the runtime library for data conversion. However, when using the runtime library, the runtime library must be registered with the window by defining the external import of the tag to define the animation file corresponding to the initial animation configuration parameters. However, registering the runtime library with the window by defining the external import of the tag will cause compatibility issues with older operating systems. At the same time, when the browser is refreshed, the animation screen is also refreshed synchronously, and the animation screen needs to be re-rendered. After the browser completes the refresh and reloads the animation file to re-render the animation screen, the animation playback will be jerky and not smooth. Summary of the Invention
[0005] The following is a summary of the subject matter described in detail herein. This summary is not intended to limit the scope of the claims.
[0006] The main purpose of the embodiments of the present disclosure is to propose an animation implementation method, device, equipment and storage medium, which can directly determine the corresponding animation file based on the initial animation configuration parameters without the need for runtime library registration, thereby solving system compatibility issues and synchronizing animation screen rendering and refresh, making animation playback smoother.
[0007] In a first aspect, an embodiment of the present invention provides an animation implementation method, comprising:
[0008] Get at least one initial animation file;
[0009] receiving an animation configuration parameter set, the animation configuration parameter set including a plurality of initial animation configuration parameters;
[0010] Call pre-configured global scripts;
[0011] Obtaining the at least one initial animation file corresponding to the animation configuration parameter set through the global script to obtain at least one target animation file;
[0012] Obtaining an animation picture to be presented according to the at least one target animation file and the corresponding initial animation configuration parameters;
[0013] The animation picture to be presented is refreshed and rendered, wherein the animation picture to be presented is rendered by calling a pre-configured rendering script.
[0014] In some embodiments, the at least one initial animation file includes a first initial animation file, and obtaining the at least one initial animation file includes:
[0015] Acquire loading information of the first initial animation file, where the loading information of the first initial animation file is used to indicate address information of the first initial animation file;
[0016] Get animation information from the local animation repository;
[0017] The first initial animation file is retrieved according to the loading information of the first initial animation file and the animation information in the local animation storage library.
[0018] In some embodiments, the at least one initial animation file includes a first initial animation file, and obtaining the at least one initial animation file includes:
[0019] Acquire loading information of the first initial animation file, where the loading information of the first initial animation file is used to indicate address information of the first initial animation file;
[0020] Get animation information from the local animation repository;
[0021] The first initial animation file is retrieved according to the loading information of the first initial animation file and the animation information in the local animation storage library.
[0022] In some embodiments, retrieving the first initial animation file according to the loading information of the first initial animation file and the animation information in the local animation repository includes:
[0023] In a case where the local animation repository does not include the first initial animation file, sending animation resource request information to an animation resource server;
[0024] Receive the first initial animation file fed back by the animation resource server according to the animation resource request information.
[0025] In some embodiments, retrieving the first initial animation file according to the loading information of the first initial animation file and the animation information in the local animation repository includes:
[0026] In a case where the local animation repository includes the first initial animation file and a version of the first initial animation file meets a preset requirement, the first initial animation file is obtained from the local animation repository.
[0027] In some embodiments, obtaining the animation picture to be presented according to the at least one target animation file includes:
[0028] Obtaining animation configuration parameter change information, where the animation configuration parameter change information is used to indicate whether the animation configuration parameters have changed during the animation processing process;
[0029] In the case of determining that the animation configuration parameters have changed, determining updated animation configuration parameters;
[0030] The animation picture to be presented is obtained according to the updated animation configuration parameters and the at least one target animation file.
[0031] In some embodiments, obtaining animation configuration parameter change information includes:
[0032] A preset monitoring script is called to monitor changes in the animation configuration parameters during the animation processing process to obtain the animation configuration parameter change information.
[0033] In some embodiments, rendering the animation picture to be presented by calling a pre-configured rendering script includes:
[0034] The pre-configured rendering script is called by a pre-set calling script to render the animation picture to be presented.
[0035] In a second aspect, an embodiment of the present invention further provides an animation implementation device, comprising:
[0036] An acquisition module, used for acquiring at least one initial animation file;
[0037] A receiving module, configured to receive an animation configuration parameter set, wherein the animation configuration parameter set includes a plurality of initial animation configuration parameters;
[0038] a processing module, configured to call a pre-configured global script, obtain the animation configuration parameter set corresponding to the at least one initial animation file through the global script, and obtain at least one target animation file;
[0039] A rendering module, configured to obtain an animation picture to be rendered according to the at least one target animation file and the corresponding initial animation configuration parameters;
[0040] The rendering module is used to refresh and render the animation picture to be presented, wherein the animation picture to be presented is rendered by calling a pre-configured rendering script.
[0041] In a third aspect, an embodiment of the present invention further provides an electronic device, including:
[0042] Memory;
[0043] processor;
[0044] program;
[0045] The program is stored in a memory, and the processor executes the program to implement the method according to the first aspect of the present disclosure.
[0046] In a fourth aspect, an embodiment of the present invention further provides a storage medium, which is a computer-readable storage medium. The computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to cause a computer to execute:
[0047] As described in the first aspect above.
[0048] An embodiment of the present invention includes: determining at least one initial animation file corresponding to initial animation configuration parameters by calling a pre-configured global script to obtain at least one target animation file, without registering the runtime library to determine the animation file corresponding to the initial animation configuration parameters, and directly finding the animation file corresponding to the initial configuration parameters through the global script, and then presenting the animation picture according to the initial animation configuration parameters and the target animation file, so there is no need to register the runtime library in the operating system by defining an external tag introduction, which solves the compatibility problem existing in the low version operating system, and when the animation picture is refreshed, the rendering script is called at the same time to render the animation picture to be presented, so that the animation refresh and the animation picture rendering are synchronized to improve the smoothness of the animation playback.
[0049] Other features and advantages of the present invention will be described in the following description, and in part will become apparent from the description, or will be understood through actual practice of the present invention. The purposes and other advantages of the present invention can be realized and obtained through the structures particularly pointed out in the description, claims and drawings. BRIEF DESCRIPTION OF THE DRAWINGS
[0050] The accompanying drawings are used to provide a further understanding of the technical solution of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the technical solution of the present invention and do not constitute a limitation to the technical solution of the present invention.
[0051] Figure 1 It is a flowchart of the animation implementation method provided by the embodiment of the present disclosure.
[0052] Figure 2 yes Figure 1 Flowchart of step S100 in FIG.
[0053] Figure 3 yes Figure 2 Flowchart of step S130 in .
[0054] Figure 4 This is a partial flow chart of another animation implementation method provided by an embodiment of the present disclosure.
[0055] Figure 5 Schematic diagram of the hardware structure of the electronic device provided by the embodiment of the present disclosure. DETAILED DESCRIPTION
[0056] In order to make the purpose, technical solutions and advantages of the present invention more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not intended to limit the present application.
[0057] It should be noted that although the device schematics illustrate functional module divisions and the flowcharts illustrate logical sequences, in certain circumstances, the steps shown or described may be performed in a sequence that differs from the module divisions in the device or the sequence in the flowcharts. The terms "first," "second," and so on, in the specification, claims, and drawings, are used to distinguish similar items and are not necessarily used to describe a specific sequence or precedence.
[0058] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the art to which the present invention pertains. The terms used herein are for the purpose of describing embodiments of the present invention only and are not intended to limit the present invention.
[0059] The present invention provides an animation implementation method, apparatus, device and storage medium, the method comprising: obtaining at least one initial animation file; receiving initial animation configuration parameters; calling a pre-configured global script, obtaining at least one initial animation file corresponding to the initial animation configuration parameters through the global script, and obtaining at least one target animation file; obtaining an animation screen to be presented according to the at least one target animation file and the corresponding initial animation configuration parameters. According to the solution provided by an embodiment of the present invention, the animation file corresponding to the initial animation configuration parameters is determined by a pre-configured global script, without registering the runtime library to the operating system by defining an external reference of a tag, thereby solving the compatibility problem existing in an operating system of a lower version, and obtaining at least one target animation file by determining at least one initial animation file corresponding to the initial configuration parameters, and then obtaining the animation screen to be presented according to the at least one target animation file and the corresponding initial animation configuration parameters to complete most of the animation scene settings, thereby improving the efficiency of animation initialization, and at the same time calling the rendering script to render the animation screen when the animation screen is refreshed, thereby improving the smoothness of animation playback.
[0060] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Artificial Intelligence (AI) is the theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to achieve optimal results.
[0061] Fundamental AI technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interaction systems, and mechatronics. AI software technologies primarily encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.
[0062] First, some terms involved in this invention are analyzed:
[0063] Runtime: A runtime generally includes functions commonly used in programming, such as string manipulation, file operations, and user interfaces. Different languages often support different functions, so the libraries used are completely different. A runtime is a packaged program module that provides an interface that can be used freely as long as the interface parameters are known. Without a runtime, each program would contain a lot of duplicate code. Using a runtime can significantly reduce the size of compiled programs. However, the use of a runtime requires distributing the program with these libraries, which is more cumbersome. If the corresponding runtime library cannot be found in the operating system, the program will not run. Animations loaded and rendered using the Spine runtime library run just like in Spine. Our API provides direct access to data such as skeletons, attachments, skins, and animations. Using the API, you can manipulate skeletons, combine animations, and create effects such as fades in and out in-game.
[0064] Spine: Spine is a 2D skeletal animation editing tool for game development. It aims to provide a more efficient and streamlined workflow for creating animations required for games. In Spine, animations are achieved by binding images to bones, which are then controlled by the bones.
[0065] JS: JavaScript (abbreviated as "JS") is a lightweight, function-first, interpreted or just-in-time compiled programming language. While best known as a scripting language for web page development, JS is also used in many non-browser environments. JavaScript is a prototype-based, multi-paradigm dynamic scripting language that supports object-oriented, imperative, declarative, and functional programming paradigms.
[0066] Global Object: The global object is a predefined object that serves as a placeholder for JavaScript's global functions and global properties. By using the global object, you can access all other predefined objects, functions, and properties. The global object is not a property of any object, so the global object has no name.
[0067] The embodiments of the present invention are further described below with reference to the accompanying drawings.
[0068] Reference Figure 1 , Figure 1 FIG. 1 is a flowchart of an animation implementation method provided by one embodiment of the present invention, wherein the method includes but is not limited to the following steps:
[0069] Step S100, obtaining at least one initial animation file;
[0070] It should be noted that at least one of the initial animation files can be obtained from the cloud, and after the initial animation file is obtained from the cloud, a copy is saved in the local animation repository, so the other part of the initial animation file can be directly obtained from the local animation repository.
[0071] Step S200: Receive an animation configuration parameter set, where the animation configuration parameter set includes a plurality of initial animation configuration parameters.
[0072] It is worth noting that the received animation configuration parameter set is encapsulated and packaged according to the multiple initial animation configuration parameters input. There is no need to receive the initial animation configuration parameters one by one. The operation of constructing the animation scene separately each time is complicated and affects the presentation of the animation picture. Therefore, there is no need to initialize them one by one according to the initial animation configuration parameters and the corresponding animation files, making the animation picture presentation simpler and more efficient.
[0073] Step S300, calling a pre-configured global script;
[0074] It should be noted that the pre-configured global script is generated according to the global method function input by the terminal operating system to determine the global script and global object through the global method function, and the global method function is adapted to the programming language, which is JS.
[0075] Step S400: obtaining at least one initial animation file corresponding to an animation configuration parameter set through a global script to obtain at least one target animation file;
[0076] Among them, the global script can be set to pre-configure the correspondence between the initial animation configuration parameters and the initial animation file;
[0077] It is worth noting that the animation configuration parameter set includes multiple initial animation configuration parameters, and each initial animation configuration parameter corresponds to one or more animation files. By defining a tag to define the animation file corresponding to each initial animation configuration parameter, the corresponding animation file can be called according to the received initial animation configuration parameter when using the runtime library. However, the external introduction of the runtime library through the definition tag will cause compatibility issues with lower versions of operating systems. Therefore, by obtaining at least one initial animation file corresponding to the animation configuration parameter set through a pre-configured global script, the runtime library can be used to initialize the animation according to the initial animation configuration parameters. There is no need to reference an external definition tag to register the runtime library, so there will be no compatibility issues with lower versions of operating systems.
[0078] It should be noted that the runtime library introduced in this embodiment is the JS runtime library, which is also the Javascript runtime library. Javascript is a scripting language developed from at least one of the LiveScripts of Netscape, and its main purpose is to solve the server terminal language. When the animation configuration parameter set input is in Javascript, the Javascript runtime library parses and executes the Javascript language. The animation configuration parameter set input in Javascript can then be directly parsed by the JS runtime library. The JS runtime library needs to be registered with the operating system by externally importing a definition tag. In this embodiment, the definition tag is a script tag, and the script tag is used to define the client script, that is, to define the animation file corresponding to the animation configuration parameter. The JS runtime library then completes the language conversion of the animation configuration parameter set to quickly determine the corresponding animation file. The JS runtime library can then be used to initialize the animation based on the animation configuration parameter set, quickly completing most animation scene settings. In this embodiment, the global object is the animation configuration parameter set, so that at least one initial animation file corresponding to the animation configuration parameter set can be quickly obtained through the global script. Among them, when the animation configuration parameters of the JS language are input, that is, the JS language is embedded in a special environment, by setting the global script, the implementation of the JS language or the embedded JS language can use any type of object as a global object. In this embodiment, the correspondence between the initial animation configuration parameters and the initial animation file needs to be pre-defined through the global script. Then, when the global script is called, the animation file corresponding to the animation configuration parameter set of the input JS language can be quickly found according to the animation configuration parameter set of the input JS language, so as to solve the browser compatibility problem caused by the animation configuration parameter input of the JS language.
[0079] Step S500: Obtain an animation picture to be presented according to at least one target animation file and corresponding initial animation configuration parameters.
[0080] By determining at least one initial animation file corresponding to a set of animation configuration parameters, at least one target animation file is obtained, and then the animation picture to be presented is obtained based on the at least one target animation file and the corresponding initial animation configuration parameters to complete the animation initialization operation, that is, complete most of the animation scene settings and improve the efficiency of animation picture presentation.
[0081] It should be noted that, by determining at least one initial animation file corresponding to the animation configuration parameters through a pre-configured global script to obtain at least one target animation file, the animation can use the JS runtime library to complete the animation initialization according to the initial animation configuration parameters to complete the setting of most animation scenes, without receiving the initial animation configuration parameters one by one to set the animation scenes one by one, thereby improving the efficiency of the animation initialization operation. Among them, the initial animation configuration parameters include: animation loop playback parameters, canvas width and height, loop playback start time, and loop playback stop time, wherein whether the animation loop playback function is turned on is determined according to the animation loop playback parameters. If the animation loop playback function is turned on, the loop playback start time and the loop playback stop time determine the time interval of the animation loop playback, and play it in the interface corresponding to the canvas width and height. Therefore, the animation initialization operation is completed by setting the presentation of the animation picture according to the animation configuration parameters, so that the animation picture can be presented normally according to the subsequent animation file.
[0082] Step S600: Refresh and render the animation picture to be presented, wherein the animation picture to be presented is rendered by calling a pre-configured rendering script.
[0083] It should be noted that since the animation screen is continuously rendered when it is presented, in order to ensure the best drawing efficiency of the animation, when the animation screen to be presented is refreshed, the rendering script is called to render the animation screen to be presented at the same time to ensure the best drawing efficiency of the animation screen. The animation screen will not be overdrawn due to a short drawing time interval, nor will the animation be jerked and unsmooth due to a long time interval. Therefore, the rendering script is called to render the animation screen every time the animation screen is refreshed, making the animation screen presentation smoother.
[0084] In actual practice, when calling the rendering script to render the animation to be presented, it is necessary to first obtain the execution time and canvas information of each rendering execution, determine the time interval based on the current time and the last execution time, and then calculate the relative positions of each element of the next frame of animation based on the time interval and canvas information, and render it, so that the animation screen plays smoothly without lag.
[0085] Reference Figure 2 , Figure 2 1 is a flowchart of obtaining at least one initial animation file in step S100, wherein the at least one initial animation file includes a first initial animation file. Step S100 includes but is not limited to:
[0086] S110, obtaining loading information of a first initial animation file, where the loading information of the first initial animation file is used to indicate address information of the first initial animation file;
[0087] It is worth noting that the loading information of the first initial animation file is the information generated when the first initial animation file needs to be loaded, and the loading information of the first initial animation file is used to indicate the address information of the first initial animation file. Therefore, the loading information is obtained before running the first initial animation file to grasp the address information of the first initial animation file that needs to be obtained through the loading information of the first initial animation file.
[0088] S120, obtaining animation information from a local animation repository;
[0089] It can be understood that obtaining the animation information of the local animation repository is to obtain the information of each animation file in the local animation repository, where the animation information includes any one or more of the following: a first file name, a first address information, so as to clarify the information of the animation file in the local animation repository through the first file name and the first address information.
[0090] S130 , retrieving the first initial animation file according to the loading information of the first initial animation file and the animation information in the local animation storage library.
[0091] It should be noted that the loading information of the first initial animation file is used to indicate the address information of the first initial animation file. Then, based on the loading information of the first initial animation file and the animation information of the local animation repository, it is determined whether the first initial animation file exists in the local animation repository, and whether the first initial animation file should be retrieved from the local animation repository. There is no need to obtain the first initial animation file from the animation resource server. Therefore, there is no need to create the animation file each time, and there is no need to send repeated requests frequently, which speeds up the loading of the first initial animation file and makes the animation screen presentation faster.
[0092] It can be understood that the animation information of the local animation repository includes: a first file name and a first address information, and the loading information of the first initial animation file includes: a second file name and a second address information. Among them, the first file name is the file name of the animation file in the local animation repository, the second file name is the file name of the first initial animation file, the first address information is the download address of the animation file in the local animation repository, and the second address information is the download address of the first initial animation file. By judging whether the first file name and the second file name match, and whether the first address information and the second address information match, if the first file name and the second file name match, and the first address information and the second address information match, it is determined that the local animation repository includes the first initial animation file, and the first initial animation file can be directly obtained from the local animation repository, without having to obtain it from the animation resource server every time the first initial animation file is loaded, thereby reducing traffic waste.
[0093] In some embodiments, reference Figure 3, Figure 3 yes Figure 2 Flowchart of step S130, step S130 may include but is not limited to steps S131 to S132.
[0094] Step S131: When the local animation storage library does not include the first initial animation file, sending animation resource request information to the animation resource server;
[0095] It should be noted that, based on the loading information of the first initial animation file and the animation information of the local animation repository, it is determined whether the local animation repository includes the first initial animation information. If the local animation repository does not include the first initial animation file, animation resource request information is sent to the animation resource server to re-acquire the first initial animation file by sending the animation resource request information. Therefore, each time an animation file is loaded, the loading information of the first initial animation file is first obtained, and then based on the loading information of the first initial animation file and the animation information of the local animation repository, it is determined whether the local animation repository includes the first initial animation file. Instead of directly sending the animation resource request information to the animation resource server to obtain the first initial animation file each time an animation file is loaded, there is no need to send the animation resource request information to the animation resource server each time the first initial animation file is obtained. The animation resource request information is sent to the local animation repository only after it is determined that the first initial animation file does not exist in the local animation repository. This reduces traffic waste and improves the loading speed of the first initial animation file.
[0096] Step S132: Receive the first initial animation file fed back by the animation resource server according to the animation resource request information.
[0097] It should be noted that after sending the animation resource request information to the animation resource server, the animation resource server obtains the first initial animation file that matches the animation resource request information based on the animation resource request information. Then, upon receiving the first initial animation file sent by the animation resource server, the first initial animation file can be obtained from the animation resource server when the first initial animation file is not included in the local animation repository. There is no need to send the animation resource request information to the animation resource server each time the first initial animation file is loaded, which reduces the sending of animation resource request information and speeds up the loading speed of the animation.
[0098] In some embodiments, step S130 further includes but is not limited to the following steps:
[0099] In a case where the local animation repository includes the first initial animation file and the version of the first initial animation file meets a preset requirement, the first initial animation file is obtained from the local animation repository.
[0100] It should be noted that after determining that the local animation repository includes the first initial animation file based on the loading information of the first initial animation file and the animation information of the local animation repository, it is further determined whether the version of the first initial animation file in the local animation repository meets the preset requirements. If the version of the first initial animation file meets the preset requirements, the first initial animation file is directly obtained from the local animation repository, so that the acquisition of the first initial animation file is faster.
[0101] Among them, the loading information of the first initial animation file also includes: second version information, so as to determine whether the version of the first initial animation file included in the local animation repository is the same through the second version information. If the version corresponding to the second version information is the same as the version of the first initial animation file in the local animation repository, the first initial animation file is obtained from the local animation repository. If the local animation repository includes the first initial animation file, but the version of the first animation initial animation file is lower than the version corresponding to the second version information, an animation resource request information is sent to the animation resource server to receive the first initial animation file with the same version as the second version information fed back by the animation resource server. Therefore, after determining whether the local animation repository includes the first initial animation file, it is also necessary to determine whether the version of the first initial animation file meets the preset requirements. If it meets the requirements, it is directly retrieved from the local animation repository. If it does not meet the requirements, an animation resource request information is sent to the animation resource server to obtain the first initial animation file whose version meets the preset requirements.
[0102] In some embodiments, reference Figure 4 , Figure 4 4 is a flowchart of another animation implementation method provided by an embodiment of the present disclosure. After step S500, the animation implementation method further includes but is not limited to steps S710 to S730.
[0103] Step S710: Obtain animation configuration parameter change information, where the animation configuration parameter change information is used to indicate whether the animation configuration parameters have changed during the animation processing process.
[0104] It should be noted that, when obtaining an animated image to be presented based on at least one target animation file, in order to ensure smooth presentation of the animated image, animation configuration parameter change information is obtained to determine whether any animation configuration parameters have changed during the animation processing process. Acquiring the animation configuration parameter change information primarily involves periodically collecting animation configuration parameters at preset time intervals, and comparing the animation configuration parameters at the previous preset time interval with the current animation configuration parameters to determine the animation configuration parameter change information.
[0105] Step S720: if it is determined that the animation configuration parameters have changed, determine the updated animation configuration parameters;
[0106] It should be noted that when the animation configuration parameter change information is obtained to determine that the animation configuration parameter has changed, the updated animation configuration parameter is obtained. If the currently obtained animation configuration parameter is different from the animation configuration parameter of the previous preset time interval, it is determined that the configuration parameter has changed.
[0107] In actual practice, the preset time interval is the same as the time interval for switching animation screens. Since the animation playback process is also the process of continuously switching each animation screen according to the time interval, the animation configuration parameters are collected according to the time interval for switching the animation screens to determine whether the animation configuration parameters are changed for each animation screen switch. Then, the updated animation configuration parameters are determined based on the animation configuration parameters. The presentation of the next animation screen can be continued based on the updated animation configuration parameters without affecting the smoothness of the animation screen presentation.
[0108] Step S730: Obtain an animation picture to be presented according to the updated animation configuration parameters and at least one target animation file.
[0109] It should be noted that by determining updated animation configuration parameters when the animation configuration parameters change, and then obtaining the animation picture to be presented according to the updated animation configuration parameters and at least one target animation file, the presentation of the animation picture is made smoother.
[0110] In specific practice, when the animation picture to be presented is obtained according to at least one target animation file, animation configuration parameter change information is collected according to a preset practice interval period, so as to determine that the animation configuration parameters have changed through the animation configuration parameter change information, determine the updated animation configuration parameters, and then determine the animation configuration parameters of the animation picture after the animation configuration parameters have changed according to the updated animation configuration parameters, so that after the animation picture to be presented is obtained according to at least one target animation file, the animation picture is presented smoothly, thereby improving the user experience.
[0111] In some embodiments, step S710 includes but is not limited to the following steps:
[0112] Call the preset monitoring script to monitor the changes of animation configuration parameters during the animation processing to obtain animation configuration parameter change information.
[0113] It should be noted that the changes in animation configuration parameters during the animation processing are monitored by calling a preset monitoring script to achieve automatic monitoring of changes in animation configuration parameters. The preset monitoring script is generated based on the monitoring function, so as to monitor whether there are functions such as "complete", "start", and "end" during the animation processing through the preset monitoring script, and determine the animation configuration parameter change information based on the functions such as "complete", "start", and "end".
[0114] In specific practice, the preset listening script is generated according to the listening function. In this embodiment, the listening function is the addListener function. Among them, the addListener function is to add a listening delegate in the listening list. After registering the listening function using the addListener function, the listening script is obtained. The listening script will automatically collect the animation configuration parameters to realize the monitoring of the changes in the animation configuration parameters. The changes in the animation configuration parameters are monitored by the listening script, and the changes in the animation configuration parameters are perceived in real time. If the animation configuration parameters change, the interface corresponding to the listening script obtains the latest value of the animation configuration parameters to refresh the animation screen according to the latest animation configuration parameters, so that the presentation of the animation screen is smoother. In some embodiments, the animation screen to be presented is rendered by calling a pre-configured rendering script, including but not limited to the following steps:
[0115] The pre-configured rendering script is called through the pre-set calling script to render the animation picture to be presented.
[0116] It should be noted that the rendering script is called by a pre-set calling script, so that each time the animation screen is refreshed, the rendering script can be automatically called to render the animation screen to be presented, so that the calling of the rendering script is automated, and the animation screen is presented smoothly and without lag.
[0117] In practice, a calling script is generated based on an input calling function, and in this embodiment, the calling function is the requestAnimationFrame(callback) function. The calling script is generated by the requestAnimationFrame(callback) function, and the calling script calls the rendering script at the same time as each animation screen is refreshed, so that the rendering script renders the animation screen to be presented. By matching the calling time of the rendering script with the refresh time of the animation screen, the optimal rendering efficiency of the animation screen is guaranteed, and the overdrawing caused by too short an interval will not be caused, and the animation screen will not be stuck or not smooth due to too long an interval.
[0118] In addition, the present invention also provides an animation realization device, which can realize the above animation realization method, and the device includes:
[0119] An acquisition module, used for acquiring at least one initial animation file;
[0120] A receiving module, configured to receive an animation configuration parameter set, wherein the animation configuration parameter set includes a plurality of initial animation configuration parameters;
[0121] A processing module is configured to call a pre-configured global script; obtain, through the global script, a set of animation configuration parameters corresponding to the at least one initial animation file, and obtain at least one target animation file, wherein the global script pre-defines a correspondence between the initial configuration parameters and the initial animation file;
[0122] The rendering module is used to obtain the animation picture to be rendered according to the at least one target animation file and the corresponding initial animation configuration parameters.
[0123] The rendering module is used to refresh and render the animation picture to be presented, wherein the animation picture to be presented is rendered by calling a pre-configured rendering script.
[0124] By calling a pre-configured global script through the processing module to obtain at least one initial animation file corresponding to the animation configuration parameter set to obtain at least one target animation file, there is no need to register the implementation method of the runtime library to the operating system by defining the external introduction of the tag to determine the animation file corresponding to the animation configuration parameter set. There will be no compatibility issues for low-version operating systems, and most animation scene settings are completed through animation initialization, thereby improving the efficiency of animation presentation. Since the animation screen will be continuously rendered when it is presented continuously, in order to ensure the best drawing efficiency of the animation, when the animation screen to be presented is refreshed, the rendering script is called to render the animation screen to be presented at the same time to ensure the best drawing efficiency of the animation screen, and the animation screen will not be over-drawn due to too short a drawing time interval, nor will the animation be stuck and not smooth due to too long a time interval. Therefore, the rendering script is called to render the animation screen every time the animation screen is refreshed, so that the presentation of the animation screen is smoother.
[0125] In actual practice, when calling the rendering script to render the animation to be presented, it is necessary to first obtain the execution time and canvas information of each rendering execution, determine the time interval based on the current time and the last execution time, and then calculate the relative positions of each element of the next frame of animation based on the time interval and canvas information, and render it, so that the animation screen plays smoothly without lag.
[0126] In some embodiments, the rendering module is further configured to call the rendering script through a preset calling script when refreshing the presented animation picture, so as to render the animation picture to be presented.
[0127] It should be noted that the rendering script is called by a pre-set calling script, so that each time the animation screen is refreshed, the rendering script can be automatically called to render the animation screen to be presented, so that the calling of the rendering script is automated, and the animation screen is presented smoothly and without lag.
[0128] In some embodiments, the acquisition module includes:
[0129] The first acquiring unit is used to acquire loading information of the first initial animation file, where the loading information of the first initial animation file is used to indicate address information of the first initial animation file;
[0130] The second acquiring unit is used to acquire the animation information of the local animation storage library;
[0131] The calling unit is used to call the first initial animation file according to the loading information of the first initial animation file and the animation information in the local animation storage library.
[0132] The loading information of the first initial animation file is used to indicate the address information of the first initial animation file. Then, based on the loading information of the first initial animation file and the animation information of the local animation repository, it is determined whether the first initial animation file exists in the local animation repository, and whether the first initial animation file should be retrieved from the local animation repository, eliminating the need to obtain the first initial animation file from the animation resource server. Therefore, there is no need to create the animation file each time, and there is no need to send repeated requests frequently, which speeds up the loading of the first initial animation file and makes the animation screen presentation faster.
[0133] It can be understood that the animation information of the local animation repository includes: a first file name and a first address information, and the loading information of the first initial animation file includes: a second file name and a second address information. Among them, the first file name is the file name of the animation file in the local animation repository, the second file name is the file name of the first initial animation file, the first address information is the download address of the animation file in the local animation repository, and the second address information is the download address of the first initial animation file. By judging whether the first file name and the second file name match, and whether the first address information and the second address information match, if the first file name and the second file name match, and the first address information and the second address information match, it is determined that the local animation repository includes the first initial animation file, and the first initial animation file can be directly obtained from the local animation repository, without having to obtain it from the animation resource server every time the first initial animation file is loaded, thereby reducing traffic waste.
[0134] In some embodiments, the first acquisition unit is further configured to send animation resource request information to the animation resource server when the local animation repository does not include the first initial animation file, and receive the first initial animation file fed back by the animation resource server according to the animation resource request information.
[0135] It should be noted that after sending the animation resource request information to the animation resource server, the animation resource server obtains the first initial animation file that matches the animation resource request information based on the animation resource request information. Then, upon receiving the first initial animation file sent by the animation resource server, the first initial animation file can be obtained from the animation resource server when the first initial animation file is not included in the local animation repository. There is no need to send the animation resource request information to the animation resource server each time the first initial animation file is loaded, which reduces the sending of animation resource request information and speeds up the loading speed of the animation.
[0136] In some embodiments, the first acquisition module further includes:
[0137] The third acquiring unit is configured to acquire the first initial animation file from the local animation repository if the local animation repository includes the first initial animation file and the version of the first initial animation file meets a preset requirement.
[0138] It should be noted that after determining that the local animation repository includes the first initial animation file based on the loading information of the first initial animation file and the animation information of the local animation repository, it is further determined whether the version of the first initial animation file in the local animation repository meets the preset requirements. If the version of the first initial animation file meets the preset requirements, the first initial animation file is directly obtained from the local animation repository, so that the acquisition of the first initial animation file is faster.
[0139] Among them, the loading information of the first initial animation file also includes: second version information, so as to determine whether the version of the first initial animation file included in the local animation repository is the same through the second version information. If the version corresponding to the second version information is the same as the version of the first initial animation file in the local animation repository, the first initial animation file is obtained from the local animation repository. If the local animation repository includes the first initial animation file, but the version of the first animation initial animation file is lower than the version corresponding to the second version information, an animation resource request information is sent to the animation resource server to receive the first initial animation file with the same version as the second version information fed back by the animation resource server. Therefore, after determining whether the local animation repository includes the first initial animation file, it is also necessary to determine whether the version of the first initial animation file meets the preset requirements. If it meets the requirements, it is directly retrieved from the local animation repository. If it does not meet the requirements, an animation resource request information is sent to the animation resource server to obtain the first initial animation file whose version meets the preset requirements.
[0140] In some embodiments, the animation implementation device further includes:
[0141] The parameter monitoring module is used to obtain animation configuration parameter change information, which is used to indicate whether the animation configuration parameters have changed during the animation processing;
[0142] The update module is used to determine the updated animation configuration parameters when it is determined that the animation configuration parameters have changed.
[0143] The presentation module is further configured to obtain an animation picture to be presented according to the updated animation configuration parameters and at least one target animation file.
[0144] It should be noted that by determining updated animation configuration parameters when the animation configuration parameters change, and then obtaining the animation picture to be presented according to the updated animation configuration parameters and at least one target animation file, the presentation of the animation picture is made smoother.
[0145] In specific practice, when the animation picture to be presented is obtained according to at least one target animation file, animation configuration parameter change information is collected according to a preset practice interval period, so as to determine that the animation configuration parameters have changed through the animation configuration parameter change information, determine the updated animation configuration parameters, and then determine the animation configuration parameters of the animation picture after the animation configuration parameters have changed according to the updated animation configuration parameters, so that after the animation picture to be presented is obtained according to at least one target animation file, the animation picture is presented smoothly, thereby improving the user experience.
[0146] In some embodiments, the parameter monitoring module is further used to call a preset monitoring script to monitor changes in animation configuration parameters during animation processing to obtain animation configuration parameter change information.
[0147] In specific practice, the preset listening script is generated according to the listening function. In this embodiment, the listening function is the addListener function. Among them, the addListener function adds a listening delegate in the listening list. After the listener is registered using the addListener function, the listening script is obtained. The listening script automatically collects the animation configuration parameters to monitor the changes in the animation configuration parameters. The changes in the animation configuration parameters are monitored by the listening script, and the changes in the animation configuration parameters are perceived in real time. If the animation configuration parameters change, the interface corresponding to the listening script obtains the latest value of the animation configuration parameters to refresh the animation screen according to the latest animation configuration parameters, making the presentation of the animation screen smoother.
[0148] In addition, an embodiment of the present invention further provides an electronic device, including:
[0149] Memory;
[0150] processor;
[0151] program;
[0152] The program is stored in the memory, and the processor executes the program to implement the animation implementation method of the present disclosure. The electronic device can be any smart terminal including a mobile phone, a tablet computer, a personal digital assistant (PDA), a car computer, etc.
[0153] See also Figure 5 , Figure 5 The hardware structure of an electronic device according to another embodiment is shown. The electronic device includes:
[0154] The processor 110 may be implemented as a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided by the embodiments of the present disclosure.
[0155] The memory 120 can be implemented in the form of ROM (Read Only Memory), static storage device, dynamic storage device or RAM (Random Access Memory). The memory can store an operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory and is called by the processor to execute the prediction method based on knowledge distillation in the embodiments of this disclosure.
[0156] Input / output interface 130, used for information input and output;
[0157] Communication interface 140, used to implement communication interaction between this device and other devices, which can be achieved through wired means (such as USB, network cable, etc.) or wireless means (such as mobile network, WiFi, Bluetooth, etc.);
[0158] bus 150 , which transmits information between the various components of the device (e.g., processor, memory, input / output interface, and communication interface);
[0159] The processor 110 , the memory 120 , the input / output interface 130 , and the communication interface 140 are connected to each other in communication within the device via the bus 150 .
[0160] An embodiment of the present disclosure further provides a storage medium, which is a computer-readable storage medium. The computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to enable a computer to execute the above-mentioned animation implementation method.
[0161] The memory, as a non-transient computer-readable storage medium, can be used to store non-transient software programs and non-transient computer executable programs. In addition, the memory may include a high-speed random access memory and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory may optionally include a memory remotely arranged relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
[0162] The embodiments described in the embodiments of the present disclosure are intended to more clearly illustrate the technical solutions of the embodiments of the present disclosure and do not constitute a limitation on the technical solutions provided by the embodiments of the present disclosure. Those skilled in the art will appreciate that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided by the embodiments of the present disclosure are also applicable to similar technical problems.
[0163] It will be understood by those skilled in the art that Figure 1-4 The technical solutions shown in the figures do not constitute a limitation on the embodiments of the present disclosure, and may include more or fewer steps than those shown in the figures, or a combination of certain steps, or different steps.
[0164] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, i.e., they may be located in one place or distributed across multiple network units. Some or all of the modules may be selected based on actual needs to achieve the objectives of this embodiment.
[0165] Those skilled in the art will appreciate that all or some of the steps in the methods, systems, and functional modules / units in the devices disclosed above may be implemented as software, firmware, hardware, or appropriate combinations thereof.
[0166] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequential order. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0167] It should be understood that in this application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following items" or similar expressions refers to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.
[0168] In the several embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic. For example, the division of the units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.
[0169] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.
[0170] In addition, the functional units in the various embodiments of the present application may be integrated into a single processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.
[0171] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including multiple instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store programs, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.
[0172] The preferred embodiments of the present disclosure are described above with reference to the accompanying drawings, but are not intended to limit the scope of the present disclosure. Any modifications, equivalent substitutions, and improvements made by those skilled in the art without departing from the scope and essence of the present disclosure should be within the scope of the present disclosure.
Claims
1. An animation implementation method, characterized in that: include: Get at least one initial animation file; receiving an animation configuration parameter set, the animation configuration parameter set including a plurality of initial animation configuration parameters; Calling a pre-configured global script; wherein the global script is generated according to a global method function input by the terminal operating system, and the global script pre-defines a correspondence between initial animation configuration parameters and initial animation files; Obtaining, through the global script, the animation configuration parameter set corresponding to the at least one initial animation file to obtain at least one target animation file; Obtaining an animation picture to be presented according to the at least one target animation file and the corresponding initial animation configuration parameters; Calling a preset monitoring script to monitor changes in the animation configuration parameters during the animation processing to obtain the animation configuration parameter change information, where the animation configuration parameter change information is used to indicate whether the animation configuration parameters have changed during the animation processing; In the case of determining that the animation configuration parameters have changed, determining updated animation configuration parameters; Obtaining an animation picture to be presented according to the updated animation configuration parameters and the at least one target animation file; Refreshing and rendering the animation picture to be presented, wherein a pre-configured rendering script is called by a pre-set calling script to render the animation picture to be presented; After obtaining the at least one initial animation file corresponding to the animation configuration parameter set through the global script to obtain at least one target animation file, the method further includes: The animation initialization is completed using the JS runtime library according to the initial animation configuration parameters.
2. The method according to claim 1, characterized in that The at least one initial animation file includes a first initial animation file, and obtaining the at least one initial animation file includes: Acquire loading information of the first initial animation file, where the loading information of the first initial animation file is used to indicate address information of the first initial animation file; Get animation information from the local animation repository; The first initial animation file is retrieved according to the loading information of the first initial animation file and the animation information in the local animation storage library.
3. The method according to claim 2, characterized in that The retrieving the first initial animation file according to the loading information of the first initial animation file and the animation information of the local animation storage library includes: In a case where the local animation repository does not include the first initial animation file, sending animation resource request information to an animation resource server; Receive the first initial animation file fed back by the animation resource server according to the animation resource request information.
4. The method according to claim 2, characterized in that The retrieving the first initial animation file according to the loading information of the first initial animation file and the animation information of the local animation storage library includes: In a case where the local animation repository includes the first initial animation file and a version of the first initial animation file meets a preset requirement, the first initial animation file is obtained from the local animation repository.
5. An animation realization device, characterized in that: include: An acquisition module, used for acquiring at least one initial animation file; A receiving module, configured to receive an animation configuration parameter set, wherein the animation configuration parameter set includes a plurality of initial animation configuration parameters; a processing module configured to call a pre-configured global script; obtain, through the global script, the animation configuration parameter set corresponding to the at least one initial animation file, and obtain at least one target animation file; wherein the global script is generated according to a global method function input by the terminal operating system, and the global script pre-defines a correspondence between the initial animation configuration parameters and the initial animation file; A rendering module, configured to obtain an animation picture to be rendered according to the at least one target animation file and the corresponding initial animation configuration parameters; A parameter monitoring module is used to call a preset monitoring script to monitor changes in the animation configuration parameters during the animation processing to obtain the animation configuration parameter change information, wherein the animation configuration parameter change information is used to indicate whether the animation configuration parameters have changed during the animation processing; An updating module, configured to determine updated animation configuration parameters when it is determined that the animation configuration parameters have changed; The rendering module is further configured to obtain an animation picture to be rendered according to the updated animation configuration parameters and the at least one target animation file; A rendering module, configured to refresh and render the animation picture to be presented, wherein a pre-configured rendering script is called by a pre-set calling script to render the animation picture to be presented; The processing module is further configured to: The animation initialization is completed using the JS runtime library according to the initial animation configuration parameters.
6. An electronic device, characterized in that: include: Memory; processor; program; The program is stored in the memory, and the processor executes the program to implement: The method according to any one of claims 1 to 4.
7. A storage medium, wherein the storage medium is a computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to cause a computer to execute: The method according to any one of claims 1 to 4.
Citation Information
Patent Citations
Webpage animation drawing method and device, computer equipment and storage medium
CN109658485A
Network request processing method and device, server and storage medium
CN111310005A