Animation generation method and device, computer equipment and readable storage medium

Abstract

The invention provides an animation generation method and device, computer equipment and a readable storage medium. The method comprises the following steps: importing a target image into an animation editor; in the animation editor, adding at least one shader for the target image, and setting shader parameters of the at least one shader; and packaging the target image, the shader category of the at least one shader and the shader parameters, and generating an animation resource package of a target animation, the animation resource package being used for generating the target animation during operation. At least one shader is added to the target image in the animation editor, and the shader parameters of each shader are set, so that the target animation can be generated based on the target image without changing the volume of the target image, packaging the target image, and the shader category and the shader parameters of the at least one shader; the animation resource package of the target animation is generated, and the size of the animation resource package of the target animation is reduced.

Description

Technical Field

[0001] This application relates to the field of computer technology, specifically to an animation generation method, apparatus, computer device, and readable storage medium. Background Technology

[0002] In mobile applications (APPs), many apps use complex animations to achieve better user interaction. However, existing animation implementation solutions have shortcomings in terms of versatility, performance, and implementation manpower costs. Therefore, how to implement these complex animation effects has become a challenge for the industry.

[0003] In related technologies, special effects animations frequently used in apps were initially implemented using frame sequences. However, the disadvantage of frame sequences is obvious: they increase the file size. Later, lottie animations were commonly used. But when lottie animations encounter complex animations (such as those with bloom effects), they draw the frame sequence vector by vector, further increasing the file size. Summary of the Invention

[0004] In view of the above, embodiments of this application aim to provide an animation generation method, apparatus, computer device, and readable storage medium.

[0005] In a first aspect, this application provides an animation generation method, the method comprising: importing a target image into an animation editor; adding at least one shader to the target image in the animation editor and setting shader parameters for the at least one shader; packaging the target image, the shader categories of the at least one shader, and the shader parameters to generate an animation resource package for the target animation, wherein the animation resource package is used to generate the target animation at runtime.

[0006] In one embodiment, the step of packaging the target image, the shader categories of the at least one shader, and the shader parameters to generate an animation resource package for the target animation includes: determining a first shader order when adding at least one shader to the target image; generating a shader category list of the at least one shader that conforms to the first shader order; and packaging the target image, the shader category list of the at least one shader, and the shader parameters of each shader in the shader category list to generate an animation resource package for the target animation.

[0007] In one embodiment, in the animation editor, adding at least one shader to the target image and setting the shader parameters of the at least one shader includes: performing image connectivity analysis on the target image in the animation editor to obtain at least one first independent object in the target image; adding at least one shader to each of the first independent objects and setting the shader parameters of the at least one shader; and packaging the target image, the shader categories of the at least one shader, and the shader parameters to generate an animation resource package for the target animation includes: packaging the at least one first independent object, the shader categories of the at least one shader, and the shader parameters to generate an animation resource package for the target animation.

[0008] In one embodiment, performing image connectivity analysis on the target image in the animation editor to obtain at least one first independent object in the target image includes: extracting unconnected patterns and lines in the target image in the animation editor; setting first vertices for the patterns and lines, and determining the patterns and lines with the first vertices set as at least one first independent object in the target image, wherein the first vertex is used to represent the outline of the pattern or line.

[0009] In one embodiment, before adding at least one shader to the target image and setting the shader parameters of the at least one shader in the animation editor, the method further includes: setting at least two keyframes of the target image in the animation editor; performing interpolation calculations based on the at least two keyframes to generate tween frames between the at least two keyframes; determining dynamic rendering parameters of the target image based on the at least two keyframes and the tween frames; and packaging the target image, the shader categories of the at least one shader, and the shader parameters to generate an animation resource package for the target animation, which includes: packaging the target image, the shader categories of the at least one shader, the shader parameters, and the dynamic rendering parameters to generate an animation resource package for the target animation.

[0010] In one embodiment, after packaging the target image, the shader categories of the at least one shader, and the shader parameters to generate an animation resource package for the target animation, the method further includes: in an animation running application, parsing the animation resource package of the target animation to obtain the target image, the shader categories of the at least one shader, and the shader parameters; and rendering the target image based on the shader categories of the at least one shader and the shader parameters to generate the target animation.

[0011] In one embodiment, rendering the target image and generating a target animation based on the shader category and the shader parameters of the at least one shader includes: determining a second shader order of the at least one shader based on the shader category of the at least one shader; and rendering the at least one shader on the target image according to the second shader order and using the shader parameters to generate a target animation.

[0012] In one embodiment, rendering the target image and generating a target animation based on the shader category and shader parameters of the at least one shader includes: receiving a rendering modification instruction for the at least one shader; modifying the shader category and shader parameters of the at least one shader according to the rendering modification instruction; and rendering the target image and generating a target animation based on the modified shader category and shader parameters of the at least one shader.

[0013] In one embodiment, the target image includes at least one second independent object, the second independent object having a second vertex, the second vertex being used to represent the outline of the second independent object; after modifying the shader category and the shader parameters of the at least one shader according to the rendering modification instruction, the method further includes: if the modified shader category of the at least one shader includes a target shader category, modifying the second vertex based on the target shader category; the step of rendering the target image and generating a target animation based on the modified shader category and the shader parameters of the at least one shader includes: rendering at least one second independent object with the modified second vertex set based on the modified shader category and the shader parameters of the at least one shader, and generating a target animation.

[0014] In one embodiment, adding at least one shader to the target image in the animation editor and setting the shader parameters of the at least one shader includes: in the animation editor, using a first shader library, adding at least one shader to the target image and setting the shader parameters of the at least one shader, wherein the first shader library includes the shading capabilities and shading performance of multiple first shaders; rendering the target image and generating a target animation based on the shader category of the at least one shader and the shader parameters includes: in the animation running application, using a second shader library, rendering the target image and generating a target animation based on the shader category of the at least one shader and the shader parameters, wherein the second shader library includes the shading capabilities and shading performance of multiple second shaders, and the shading capabilities and shading performance of the multiple first shaders are the same as the shading capabilities and shading performance of the multiple second shaders.

[0015] Secondly, embodiments of this application provide an animation generation apparatus, the apparatus comprising: an import module configured to import a target image into an animation editor; a setting module configured to add at least one shader to the target image in the animation editor and set shader parameters of the at least one shader; and a generation module configured to package the target image, the shader categories of the at least one shader, and the shader parameters to generate an animation resource package for the target animation, wherein the animation resource package is used to generate the target animation at runtime.

[0016] Thirdly, this application provides a computer device, including a memory and a processor, wherein the memory is used to store a computer program, and the processor is used to execute, when executing the computer program, include performing the animation generation method described in the first aspect and any of the embodiments of the first aspect.

[0017] Fourthly, this application provides a computer-readable storage medium storing program code for computer execution, the program code including an animation generation method for performing the first aspect and any one of the embodiments of the first aspect.

[0018] Fifthly, embodiments of this application provide a computer program including instructions for performing the animation generation method of the first aspect and any embodiment of the first aspect.

[0019] In this application, by adding at least one shader to the target image in the animation editor and setting the shader parameters of each shader, it is possible to ensure that the target animation can be generated based on the target image without changing the size of the target image. The target image, the shader category of at least one shader and the shader parameters are packaged to generate the animation resource package of the target animation, thereby reducing the size of the animation resource package of the target animation. Attached Figure Description

[0020] Figure 1 This is a schematic flowchart of an animation generation method provided in an embodiment of this application.

[0021] Figure 2 This is a flowchart illustrating the target animation editing process in an animation generation method provided in this application embodiment.

[0022] Figure 3 This is a flowchart of the target animation editing process in another animation generation method provided in this application embodiment.

[0023] Figure 4 This is a flowchart illustrating the processing steps of a target animation execution in an animation generation method provided in this application embodiment.

[0024] Figure 5 This is a schematic diagram of the structure of an animation generation device provided in an embodiment of this application.

[0025] Figure 6 This is a schematic structural diagram of a computer device provided in an embodiment of this application. Detailed Implementation

[0026] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0027] In this article, the term "and / or" is merely a description of the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can represent three situations: A exists alone, A and B exist simultaneously, and B exists alone.

[0028] The terms "first" and "second," etc., used in the specification and claims of this application are used to distinguish different objects, not to describe a specific order of objects. For example, "first target object" and "second target object," etc., are used to distinguish different target objects, not to describe a specific order of target objects.

[0029] In the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0030] It should be understood that the specific embodiments described herein are merely illustrative of this application and are not intended to limit this application.

[0031] In mobile applications (APPs), many apps use complex animations to achieve better user interaction. However, existing animation implementation solutions have shortcomings in terms of versatility, performance, and implementation manpower costs. Therefore, how to implement these complex animation effects has become a challenge for the industry.

[0032] In related technologies, special effects animations frequently used in apps were initially implemented using frame sequences. However, the disadvantage of frame sequences is obvious: they increase the file size. Later, lottie animations were commonly used. But when lottie animations encounter complex animations (such as those with bloom effects), they draw the frame sequence vector by vector, further increasing the file size.

[0033] To address the aforementioned technical issues, this application proposes adding at least one shader to the target image in the animation editor and setting the shader parameters for each shader. This ensures that a target animation can be generated based on the target image without changing the size of the target image. By packaging the target image, the shader category of at least one shader, and the shader parameters, an animation resource package for the target animation is generated, thereby reducing the size of the animation resource package for the target animation.

[0034] The following combination Figure 1 This application will be described in detail.

[0035] Figure 1 This is a schematic flowchart of an animation generation method provided in an embodiment of this application, in order to solve the above-mentioned technical problems. Figure 1 The schematic flowchart of the animation generation method shown includes steps S110 to S130.

[0036] Step S110: Import the target image into the animation editor.

[0037] In some embodiments, the target image may be a single image. The target image may be referred to as the original image. The target image may be in PNG format.

[0038] Optionally, the target image can be a static image or a dynamic image.

[0039] In some embodiments, the target image may contain images of related content, depending on the target animation to be generated. For example, if the target animation to be generated is a button selection animation effect, the target image may contain a button image. As another example, if the target animation to be generated is a cat transition animation effect, the target image may contain a cat image.

[0040] In some embodiments, the animation editor can be an application that allows editing animations. The application can be local or in the cloud.

[0041] Importing the target image into the animation editor makes it easier to generate a target animation with corresponding animation effects based on the target image in the animation editor.

[0042] Step S120: In the animation editor, add at least one shader to the target image and set the shader parameters of at least one shader.

[0043] In some embodiments, a shader has multiple shader types. For example, shader types may include vertex transform shaders, scaling shaders, rotation shaders, color shaders, outer emission shaders, inner emission shaders, blur shaders, and streamer shaders. These different types of shaders are described in detail below.

[0044] The vertex transformation shader is responsible for object position changes. It calculates the position movement of each vertex based on the transformation time, and its main content is in the vertex shader.

[0045] The scaling shader is responsible for object size changes. It calculates the position of each vertex based on the transformation time and scaling matrix. Its main content is in the vertex shader.

[0046] The rotation shader is responsible for object rotation. Its principle in the fragment shader is as follows: First, the center position is obtained: center = vec2(0.5, 0.5). Then, the center coordinate tc = curr - center is subtracted from the current texture coordinates (UV). Next, the rotation matrix cosA = cos(-rotation angle) and sinA = sin(-rotation angle) are calculated. Finally, rot = mat(cosA, -sinA, sinA, cosA), and the UV of the fragment is rot. tc+center.

[0047] The color shader is responsible for object color changes. It calculates the color of each pixel by interpolating based on the transformation time and vertex color. Its main content is in the fragment shader.

[0048] The outer glow shader is responsible for the outer glow of the object. It includes the outer glow color, volume, time, gradient, etc. to calculate the color of each pixel of the outer glow. Its contents are in the fragment shader, which also needs to add the vertices of the outer glow part in the OpenGL process.

[0049] The inner light shader is similar to the outer light shader, but it does not require adding extra vertices in the OpenGL process.

[0050] The blur shader is responsible for blurring the image according to parameters. It primarily works by performing a weighted average of the surrounding pixels of each pixel within the fragment, and then multiplying this average by the pixel's own color value. Its core calculation logic is sum(sampled pixel color x weight) / sum(weight). Because blurring requires sampling the surrounding colors, the OpenGL workflow directly passes the complete image to the shader to facilitate sampling based on texture coordinates.

[0051] The flow shader simulates a bright band moving across an object. Linear interpolation is used on the fragment shader, and the weights are multiplied by the flow color before being superimposed onto the original image. Note that the center position of the flow is important: flowCenter = mod(time x velocity, 1.0 + flow width) - flow width / 2.0.

[0052] In some embodiments, various types of shaders can typically be stored in a shader library. For example, multiple types of shaders can be stored in an abstract shader library. The shading capabilities and rendering of these multiple types of shaders can be obtained from the shader library.

[0053] A single shader typically does not achieve a specific, complete effect; instead, it is synthesized by assembling multiple passes.

[0054] In some embodiments, based on a preset target animation to be generated, at least one shader is added to the target image in the animation editor.

[0055] For example, if a target animation needs to be made into a cat transition animation effect, then add a glow shader and a streamer shader to the target image.

[0056] For example, if you need to create a button selection animation effect for a target image, you can add a self-illuminating shader and a streamer shader to the target image.

[0057] In some embodiments, a shader can have multiple parameters that can be set. For example, the outer glow shader can have parameters such as ripple and color set. Based on the target animation to be generated, at least one shader is added to the target image in the animation editor, and the shader parameters are set for each shader.

[0058] Step S130: Package the target image, the shader category of at least one shader, and the shader parameters to generate an animation resource package for the target animation, wherein the animation resource package is used to generate the target animation at runtime.

[0059] The target image, the shader class of at least one shader, and the shader parameters of at least one shader are used as raw materials for generating the target animation. The target image, the shader class of at least one shader, and the shader parameters of each shader are packaged together to generate an animation resource for generating the target animation. This can significantly reduce the size of the generated animation resource package.

[0060] In some embodiments, the data format of the packaged animation resource package can be binary. This facilitates quick reading of the animation resource package at runtime to run and generate the target animation.

[0061] In some embodiments, by adding at least one shader to the target image to generate the target animation, most of the computing power of the central processing unit (CPU) is transferred to the graphics processing unit (GPU), which greatly saves the computing power of the CPU and significantly reduces the size of the animation resource package in the case of complex effects or effects with lighting effects.

[0062] In some embodiments, at least one shader added to the target image exists in a specific order. For example, this order is referred to as the first shader order. Before packaging, a shader category list is generated based on the existing first shader order and the category of at least one shader. The target image, the shader category list, and the shader parameters of each shader in the shader list are packaged to generate an animation resource package for the target animation.

[0063] In some embodiments, the order in which at least one shader is added to the target image is related to the preset target animation to be generated. Adding at least one shader to the target image in sequence ensures the stability of the generated target animation.

[0064] In some embodiments, during the process of packaging an animation resource package to generate the target animation, the first shader order can be determined by directly reading the order in which at least one shader was added to the target image. This facilitates the packaging and generation of the animation resource package for the target animation based on the first shader order.

[0065] In some embodiments, after the target image is imported into the animation editor, image connectivity analysis is performed on the target image. This allows the target image to be broken down into independent objects that are easy to add at least one shader to, thereby improving the efficiency and accuracy of generating the target animation.

[0066] For example, in the animation editor, image connectivity analysis is performed on the target image to obtain at least one first independent object in the target image. Correspondingly, when adding at least one shader to the target image, it is also added separately for each first independent object, and at least one shader corresponding to each first independent object and the shader parameters of the at least one shader are determined for packaging to generate an animation resource package for the target animation.

[0067] When image connectivity analysis is performed on the target image, the packaged animation resource package includes at least one first independent object from the target image obtained through image connectivity analysis. Correspondingly, the shader class and shader parameters of at least one shader in the animation resource package correspond to each of the first independent objects.

[0068] In some embodiments, when performing image connectivity analysis on the target image, the generated animation resource package may not include the target image, but only include at least one first independent object in the target image obtained by performing image connectivity analysis on the target image.

[0069] In some embodiments, in the animation editor, a connected component analysis is performed on the target image to extract unconnected patterns and lines in the target image and set a first vertex for each pattern and line to obtain at least one first independent object.

[0070] Before extracting disconnected patterns and lines from the target image, the target image can be dilated to make independent patterns or lines more independent and related patterns or lines more related. Independent patterns and lines can then be extracted from the dilated target image.

[0071] In some embodiments, the extracted pattern or line can be represented by setting a first vertex. That is, the outline of the pattern or line is set, and the data corresponding to the outline is determined as the first vertex. The pattern or line with the first vertex set can then be used as the first independent object in the target image.

[0072] In some embodiments, after obtaining the first independent object, the first independent object can be stored for easy extraction when packaging animation resource packages later.

[0073] In this embodiment of the application, at least one first independent object is obtained by extracting unconnected patterns and lines from the target image, which facilitates the addition of at least one shader to each first independent object, improves the accuracy of adding shaders, and thus ensures the animation effect of the generated target animation.

[0074] In some embodiments, after importing the target image into the animation editor, dynamic rendering parameters can be set for the target image. These dynamic rendering parameters indicate the dynamic changes of the target image in the target animation. For example, dynamic rendering parameters could be the target image's motion trajectory, scaling matrix, transformation time, etc.

[0075] For example, the following provides an implementation method for setting dynamic rendering parameters for a target image.

[0076] In the animation editor, set at least two keyframes for the target image; perform interpolation calculations based on the at least two keyframes to generate interpolation frames between the at least two keyframes; and determine the dynamic rendering parameters of the target image based on the at least two keyframes and the interpolation frames.

[0077] In some embodiments, keyframes are image frames set based on the desired animation effect to display the complete state of the target image. Keyframes can be located at preset time points. Keyframes can be used to represent the values ​​of all attributes of the target image, such as position, rotation, scaling, transparency, and color, at key moments.

[0078] In some embodiments, tween frames are typically located between at least two keyframes and are frames calculated by an interpolation algorithm. Tween frames are used to fill the transition between keyframes, making the animation smoother and improving the efficiency of editing and generating animations.

[0079] Interpolation algorithms can be based on interpolation functions such as linear interpolation functions and easing functions to calculate the value of the interpolation frame in order to determine the interpolation frame.

[0080] Based on the parameters of the target image corresponding to the keyframes and tween frames, dynamic rendering parameters for the target image are generated.

[0081] In some embodiments, after generating the dynamic rendering parameters of the target image, the dynamic rendering parameters are stored so that they can be packaged into the animation resource package as well. For example, the dynamic rendering parameters can be stored in a BUFF.

[0082] In some embodiments, image connectivity analysis is performed on the target image to obtain at least one first independent object in the target image. Therefore, when determining the dynamic rendering parameters of the target image, the step of setting dynamic rendering parameters can be performed for each individual first independent object to generate dynamic rendering parameters for each first independent object. This allows the dynamic rendering parameters of each first independent object to be packaged simultaneously when packaging the animation resource package.

[0083] For example, keyframes and tween frames are edited for isolated patterns or lines in the target image to determine the motion trajectory, scaling matrix, transformation time, etc. of each pattern or line, and stored in BUFF for later writing into the OpenGL process to generate the target animation.

[0084] In some embodiments, after packaging and generating an animation resource package, if further editing based on the target image is required to generate a more advanced target animation, the animation resource package can be read and parsed in an animation editor to obtain the target image, the shader category of at least one shader, and the shader parameters, so as to perform further editing based on the read and parsed data.

[0085] In some embodiments, the animation asset package can be run in an animation runtime application to generate the target animation. In this case, the animation asset package of the target animation can be parsed in the animation runtime application to obtain the target image, the shader category of at least one shader, and the shader parameters contained in the animation asset package.

[0086] Based on the shader category and shader parameters of at least one shader obtained from the animation resource package, render the target image and generate the target animation.

[0087] By parsing and running the animation resource package, a closed loop is achieved between the steps of generating the animation resource package and generating the animation resource package. The resource package for the target animation is generated in the animation editor, and the resource package is parsed and run in the animation execution application to generate the target animation, providing a complete implementation process for generating the target animation. Furthermore, it significantly reduces the memory footprint during the execution of the target animation generation process.

[0088] In some embodiments, the animation application includes a rendering flow component. After parsing the target image, the shader category of at least one shader, and the shader parameters in the animation application, the parsed parameters are passed to the rendering flow component for rendering to generate the target animation.

[0089] For example, the rendering process component can be an OpenGL process component.

[0090] A rendering pipeline component can contain a rendering pipeline itself. For example, a rendering pipeline may include loading and compiling shaders based on data, preparing vertex data based on data, loading textures, rendering loops, and graphics and context recycling strategies.

[0091] The rendering process component can contain a preset rendering process, a custom rendering process, or a rendering process generated according to certain rules based on data parsed from the animation resource package.

[0092] The rendering process component can implement at least one of the following: loop control, performance control, playback control, and stop control of the target animation.

[0093] In some embodiments, the rendering process component controls at least one of the following: looping, performance, playback, and stopping of the target animation. This can be achieved by receiving control instructions sent by the upper-level management unit in the animation running application via communication, and performing at least one of the following: looping control, performance control, playback control, and stopping control on the target animation.

[0094] In some embodiments, after the target animation finishes running, the animation effect resources corresponding to the target animation can be recycled (e.g., the data can be repackaged to generate a recycled resource package). The recycling of animation effect resources can be done manually or automatically according to a preset recycling operation. Manual recycling can be implemented through an external calling interface provided by the animation running application. For example, by calling the interface to receive a resource recycling instruction, and based on the received instruction, the animation effect resources of the target animation can be recycled, thus achieving manual recycling of the animation effect resources.

[0095] In some embodiments, during the process of adding at least one shader to a target image in the animation editor, the at least one shader has an addition order, and based on this addition order, it is executed sequentially in the animation running application. The addition order of at least one shader determined from the shader categories of at least one shader in the animation running application can be referred to as a second shader order. Based on the second shader order, using shader parameters, at least one shader is rendered on the target image to generate the target animation.

[0096] In some embodiments, the second shader order is consistent with the first shader order. That is, the order in which at least one shader is added to the target image in the animation editor can be the same as the rendering order in which the target image is rendered based on at least one shader in the animation runtime application, so that the animation conception during the editing process can be reproduced at runtime.

[0097] In some embodiments, the animation application supports modification of animation effects. Modification of animation effects can include modifying at least one shader that renders the target image. For example, adding a shader (e.g., adding a transform shader). Another example is deleting a shader. Yet another example is modifying the shader parameters of one of the at least one shaders.

[0098] In some embodiments, within an animation runtime application, modifications to the animation effect can be implemented by the animation runtime application receiving a rendering modification instruction. The rendering modification instruction carries modification requirements. By modifying the shader class and shader parameters of at least one shader based on the rendering modification instruction, and then rendering the target animation based on the modified shader class and shader parameters of the at least one shader, a target animation that meets the modification requirements can be obtained.

[0099] In some embodiments, the animation application can provide an external API that allows external code to modify the animation effects. For example, rendering modification commands can be input via the API.

[0100] In some embodiments, the target image includes at least one second independent object, which has a second vertex representing the outline of the second independent object. In the animation editor, image connectivity analysis can be performed on the target image to obtain at least one independent object within the target image. In this case, the animation resource package is parsed in the animation runtime application, and the resulting data is the rendering data for at least one second independent object.

[0101] Accordingly, when there is a need to modify the shader class and shader parameters of at least one shader, the second vertex of at least one second independent object can be modified based on the modified shader class and shader parameters.

[0102] In some embodiments, the shader category that affects the second vertex of the second independent object based on shader modifications can be referred to as the target shader category. When the target shader category is included in the modified at least one shader category, the second vertex of at least one second independent object is modified based on the rendering requirements of the vertex corresponding to the target shader category, and the modified second independent object is rendered based on the modified at least one shader category and shader parameters to generate the target animation.

[0103] For example, the target shader category can be an external light shader.

[0104] In some embodiments, modifying at least one shader may be done on at least one shader corresponding to a single second independent object, and similarly, when modifying the second vertex, the second vertex of the corresponding second independent object is also modified.

[0105] In some embodiments, if image connectivity analysis is performed on the target image during the animation editor stage, at least one shader is added accordingly, and at least one independent object replaces the target image during the packaging and generation of the animation resource package, then the animation resource package may not contain the target image, but only at least one independent object from the target image. However, in order to support the playback of the global shader's shader effects in the animation runtime application, the animation resource package may contain the target image in addition to the target image itself, or the animation resource package without the target image may be passed together with the target image into the animation runtime application. This allows the characteristics between objects provided by the target image to be referenced when rendering at least one independent object based on the global shader. For example, the global shader may be a blur shader.

[0106] In some embodiments, the target image obtained in the animation running application can be the location data of the target image, and the target image can be obtained based on the location data when the animation running application needs to use the target image.

[0107] The animation effects can be dynamically modified during the runtime phase of the animation application without incurring additional overhead, achieving efficient generation of the target animation and providing greater flexibility.

[0108] In this embodiment of the application, a low-code image (target image) animation effect is implemented to generate a target animation without increasing the size of the target image as the source image.

[0109] In some embodiments, when adding at least one shader to the target image and setting the shader parameters of at least one shader during the animation editor stage, the data of the at least one shader can be used based on the shader library in the animation editor. The shader library in the animation editor stage can be referred to as the first shader library, which includes the shading capabilities and shading performance of multiple first shaders. In other words, in the animation editor, the first shader library is used to add at least one shader to the target image and set the shader parameters of at least one shader.

[0110] Accordingly, in the animation runtime application, when rendering the target image based on the shader category and shader parameters of at least one shader, this rendering operation can be performed based on a shader library. The shader library in the animation runtime application stage can be referred to as a second shader library, which includes the shading capabilities and rendering effects of multiple first shaders. In other words, in the animation runtime application, the target image is rendered and the target animation is generated using the second shader library, based on the shader category and shader parameters of at least one shader.

[0111] In some embodiments, the shading capabilities and representations of the plurality of first shaders are the same as those of the plurality of second shaders. That is, the shading capabilities and representations of the shaders provided by the shader library used in the animation editor stage and the animation runtime application stage are the same, so that at least one shader added to the target image and the shader parameters set for at least one shader in the animation editor stage can be used by the shader library to render the target image in the animation runtime application, generating the same target animation as the edited one.

[0112] In some embodiments, the first shader library, and / or the second shader library, may be stored locally. For example, the first shader library may be stored locally in the animation editor. As another example, the second shader library may be stored locally in the animation running application.

[0113] For ease of understanding, three embodiments of an animation generation method provided in this application are given below.

[0114] Example 1 See Figure 2 , Figure 2 This is a flowchart illustrating the target animation editing process in an animation generation method provided in this application. The process involves editing a transition effect within the animation editor, dividing the original image into three parts, moving each part to the center of the screen, adding a few seconds of glow, and then an exit effect. Detailed explanation follows: Step S202, Import the original image. Import the original PNG image into the animation editor to begin editing.

[0115] Step S204: Split the original image into N sub-patterns. Perform image connectivity analysis within the animation editor to automatically split the original image into N unconnected pattern images, facilitating subsequent individual editing.

[0116] Step S206: Edit the tween behavior.

[0117] Step S208: Move the pattern N pixels to the right and set a keyframe. Move pattern one to the center area, set a keyframe, and set a 1-second tween. Move pattern two to the center area, set a keyframe, and set a 1.5-second tween. Move pattern three to the center area, set a keyframe, and set a 2-second tween.

[0118] Step S210: Add various shader effects and parameters to N patterns. Add an outer glow shader to pattern two and set parameters such as ripples and color. Add a flowing light shader to pattern one and set various parameters.

[0119] Step S212: Edit the departure tween behavior.

[0120] Step S214: Move each of the N patterns N pixels to the right and set a keyframe. Move patterns one, two, and three to the rightmost exit area and set a tween.

[0121] Step S216: Add various shader effects and parameters to the N patterns. Modify the shader parameters to make them gradually fade.

[0122] Step S218: Package and release as binary. The package output is a binary data file that matches the runtime.

[0123] Example 2 See Figure 3 , Figure 3This is a flowchart illustrating the target animation editing process in another animation generation method provided in this application embodiment. A simple button selection effect is edited within the animation editor.

[0124] The detailed explanation is as follows: Step S302: Import the original image. Import the PNG into the editor and begin editing.

[0125] Step S304: Split the original image into N sub-patterns.

[0126] Step S306: Add various shader effects to the N sub-patterns. Add self-illumination and flowing light shaders to pattern 2. Multiple shaders are added here, demonstrating the capabilities of abstract shaders. The effect is not achieved by a single shader but by a combination of multiple shaders. This approach offers flexibility, scalability, and the ability to dynamically add effects at runtime.

[0127] Step S308: Set shader parameters for N patterns. Set the color of the flowing light, and set the movement direction (from left to right), movement speed, and movement frequency, etc.

[0128] Step S310, final result.

[0129] Step S312, Publish. Publish generates binary data that can be read at runtime.

[0130] Based on the solution provided in this application embodiment, there is no need to use two static images (selected and unselected) as in related technologies, which increases the number of images and prevents them from changing every frame (to change every frame, an additional lottie or sequence frame animation is required).

[0131] Example 3 See Figure 4 , Figure 4 This is a flowchart illustrating the processing steps of a target animation execution in an animation generation method provided in this application embodiment.

[0132] The runtime process involves parsing the data generated by the animation editor (animation resource package), writing the data to the shaders through the OpenGL process, and the entire OpenGL custom process. The logic of the entire runtime will be described below.

[0133] The detailed explanation is as follows: Step S402: Read binary data. This includes source image position data, split image vertex data, keyframe data, and shader data.

[0134] Step S404, OpenGL process.

[0135] Initialize OpenGL and create an OpenGL context. Select which shaders to load based on the binary data. Compile the shaders. The data preparation part involves inputting the shader parameters from the binary data into the shader `r`, such as the light flow color and direction. Load the original image and write it to the shader. A rendering loop is then executed, as it's a motion effect and requires continuous execution. Resources are cleaned up after the motion effect ends, or they can be manually cleaned up directly.

[0136] Step S406, Upper-level motion effect management.

[0137] Step S408 involves communication with OpenGL. The upper-level management is primarily responsible for communicating with OpenGL. Its main functions include controlling playback and stop, inserting additional effects, and manually invoking the recycling function.

[0138] For additional effects, such as animations that require interactivity, like a bouncing animation after a target image hits another object, you can simply call the interface to insert a vertex transform shader and input the parameters.

[0139] With the above Figure 1 Corresponding to the illustrated animation generation method embodiments, this specification also provides embodiments of animation generation apparatus. Figure 5 This is a schematic diagram of the structure of an animation generation device provided in an embodiment of this application. Figure 5 As shown, the animation generation device 500 includes: Import module 510 is configured to import the target image into the animation editor; Setting module 520 is configured to add at least one shader to the target image in the animation editor and set the shader parameters of at least one shader. The generation module 530 is configured to package the target image, the shader class of at least one shader, and the shader parameters to generate an animation resource package for the target animation, wherein the animation resource package is used to generate the target animation at runtime.

[0140] In some embodiments, the generation module 530 is further configured to determine a first shader order when adding at least one shader to the target image; generate a shader category list of at least one shader that conforms to the first shader order according to the first shader order; and package the target image, the shader category list of at least one shader, and the shader parameters of each shader in the shader category list to generate an animation resource package for the target animation.

[0141] In some embodiments, the setting module 520 is further configured to perform image connectivity analysis on the target image in the animation editor to obtain at least one first independent object in the target image; add at least one shader for each first independent object and set the shader parameters of the at least one shader; the generation module 530 is further configured to package at least one first independent object, the shader category of at least one shader and the shader parameters to generate an animation resource package for the target animation.

[0142] In some embodiments, the animation generation apparatus 500 further includes a determining module configured to set at least two keyframes of the target image in an animation editor; perform interpolation calculations based on the at least two keyframes to generate interpolation frames between the at least two keyframes; and determine dynamic rendering parameters of the target image based on the at least two keyframes and the interpolation frames. The generation module 530 is further configured to package the target image, the shader category of at least one shader, the shader parameters, and the dynamic rendering parameters to generate an animation resource package for the target animation.

[0143] In some embodiments, the animation generation apparatus 500 further includes a rendering module configured to, in an animation running application, parse the animation resource package of the target animation to obtain a target image, the shader category of at least one shader, and shader parameters; and render the target image and generate the target animation based on the shader category and shader parameters of at least one shader.

[0144] In some embodiments, the rendering module is further configured to determine a second shader order of at least one shader based on the shader category of at least one shader; and to render at least one shader on the target image according to the second shader order and using shader parameters to generate a target animation.

[0145] In some embodiments, the rendering module is further configured to receive a rendering modification instruction for at least one shader; modify the shader class and shader parameters of at least one shader according to the rendering modification instruction; and render a target image and generate a target animation based on the modified shader class and shader parameters of at least one shader.

[0146] In some embodiments, the target image includes at least one second independent object, the second independent object having a second vertex for representing the outline of the second independent object; the animation generation apparatus 500 further includes a modification module configured to modify the second vertex based on the target shader category if the shader category of the modified at least one shader includes the target shader category; the rendering module is further configured to render the at least one second independent object with the modified second vertex set based on the shader category of the modified at least one shader and shader parameters, thereby generating a target animation.

[0147] In some embodiments, the setting module 520 is further configured to add at least one shader to the target image in the animation editor using a first shader library and set the shader parameters of the at least one shader, wherein the first shader library includes the shading capabilities and shading performance of multiple first shaders; the rendering module is further configured to render the target image and generate a target animation in the animation running application using a second shader library based on the shader category and shader parameters of the at least one shader, wherein the second shader library includes the shading capabilities and shading performance of multiple second shaders, and the shading capabilities and shading performance of the multiple first shaders are the same as the shading capabilities and shading performance of the multiple second shaders.

[0148] In this application, by adding at least one shader to the target image in the animation editor and setting the shader parameters of each shader, it is possible to ensure that the target animation can be generated based on the target image without changing the size of the target image. By packaging the target image, the shader category of at least one shader and the shader parameters, a resource package for the target animation is generated, thereby reducing the size of the target animation resource package.

[0149] The above is an illustrative scheme of an animation generation device according to this embodiment. It should be noted that the technical solution of this animation generation device is similar to that described above. Figure 1 The technical solutions for the animation generation methods shown belong to the same concept. For details not described in the technical solutions for the animation generation devices, please refer to the above. Figure 1 The technical solution of the animation generation method shown is described.

[0150] Figure 6 This is a schematic structural diagram of a computer device provided in an embodiment of this application. Figure 6 The dashed lines in the diagram indicate that the unit or module is optional. The computer device 600 can be used to implement the methods described in the above method embodiments.

[0151] Computer device 600 may include one or more processors 610. The processor 610 can support the computer device 600 in implementing the methods described in the preceding method embodiments. The processor 610 may be a general-purpose processor or a special-purpose processor. For example, the processor may be a central processing unit (CPU). Alternatively, the processor may be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor or any conventional processor.

[0152] The computer device 600 may also include one or more memories 620. The memories 620 store a computer program that can be executed by the processor 610, causing the processor 610 to perform the methods described in the preceding method embodiments. The memories 620 may be independent of the processor 610 or integrated within the processor 610.

[0153] The computer device 600 may also include a transceiver 630, through which the processor 610 can communicate with other devices. For example, the processor 610 can send and receive data with other devices through the transceiver 630.

[0154] In one embodiment of this application, the aforementioned components of the computer device 600 and Figure 6 Other components not shown can also be connected to each other. It should be understood that... Figure 6 The computer device structural block diagram shown is for illustrative purposes only and is not intended to limit the scope of this application. Those skilled in the art can add or replace other components as needed.

[0155] The above is an illustrative scheme of a computer device according to this embodiment. It should be noted that the technical solution of this computer device and the technical solution of the above-described animation generation method belong to the same concept. For details not described in detail in the technical solution of the computer device, please refer to the description of the technical solution of the above-described animation generation method.

[0156] In addition, this application also proposes a computer-readable storage medium storing a computer program. When the computer program is executed by a computer, it implements the operations in the animation generation method provided in the above embodiments. The specific steps will not be described in detail here.

[0157] This application also provides a computer program product. The computer program product includes a program / instructions. When executed by a processor, the computer program / instructions implement the steps of the above-described animation generation method.

[0158] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity / operation / object from another, and do not necessarily require or imply any such actual relationship or order between these entities / operations / objects; the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or system that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or system. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or system that includes that element.

[0159] For the device embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and relevant details can be found in the description of the method embodiments. The device embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separate. Some or all of the modules can be selected according to actual needs to achieve the purpose of this application. Those skilled in the art can understand and implement this without creative effort.

[0160] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0161] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods in the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) as described above, and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, television, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0162] The above are merely embodiments of this application and do not limit the patent scope of this application. Any equivalent structural or procedural transformations made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of this application.

Claims

1. An animation generation method, characterized in that, The method includes: Import the target image into the animation editor; In the animation editor, at least one shader is added to the target image, and the shader parameters of the at least one shader are set; The target image, the shader category of the at least one shader, and the shader parameters are packaged to generate an animation resource package for the target animation, wherein the animation resource package is used to generate the target animation at runtime.

2. The method according to claim 1, characterized in that, The animation resource package that packages the target image, the shader category of the at least one shader, and the shader parameters to generate the target animation includes: Determine the first shader order when adding at least one shader to the target image; Based on the first shader order, generate a shader category list for the at least one shader that conforms to the first shader order; The target image, a list of shader categories for the at least one shader, and the shader parameters for each shader in the list of shader categories are packaged to generate an animation resource package for the target animation.

3. The method according to claim 1, characterized in that, In the animation editor, at least one shader is added to the target image, and the shader parameters of the at least one shader are set, including: In the animation editor, image connectivity analysis is performed on the target image to obtain at least one first independent object in the target image; Add at least one shader to each of the first independent objects, and set the shader parameters of the at least one shader; The animation resource package that packages the target image, the shader category of the at least one shader, and the shader parameters to generate the target animation includes: Package the at least one first independent object, the shader class of the at least one shader, and the shader parameters to generate an animation resource package for the target animation.

4. The method according to claim 3, characterized in that, The step of performing image connectivity analysis on the target image in the animation editor to obtain at least one first independent object in the target image includes: In the animation editor, unconnected patterns and lines are extracted from the target image; A first vertex is set for the pattern and line, and the pattern and line with the first vertex set is identified as at least one first independent object in the target image, wherein the first vertex is used to represent the outline of the pattern or line.

5. The method according to claim 1, characterized in that, Before adding at least one shader to the target image and setting the shader parameters of the at least one shader in the animation editor, the process further includes: In the animation editor, set at least two keyframes for the target image; Interpolation calculations are performed based on the at least two keyframes to generate interpolation frames between the at least two keyframes; Based on the at least two keyframes and the tween frames, determine the dynamic rendering parameters of the target image; The animation resource package that packages the target image, the shader category of the at least one shader, and the shader parameters to generate the target animation includes: The target image, the shader category of the at least one shader, the shader parameters, and the dynamic rendering parameters are packaged to generate an animation resource package for the target animation.

6. The method according to claim 1, characterized in that, After packaging the target image, the shader class of the at least one shader, and the shader parameters to generate the animation resource package for the target animation, the method further includes: In the animation running application, the animation resource package of the target animation is parsed to obtain the target image, the shader category of the at least one shader, and the shader parameters; Based on the shader category and shader parameters of the at least one shader, the target image is rendered to generate the target animation.

7. The method according to claim 6, characterized in that, The process of rendering the target image and generating a target animation based on the shader category and shader parameters of the at least one shader includes: Determine the second shader order of the at least one shader based on the shader category of the at least one shader; Following the second shader sequence, the at least one shader is rendered on the target image using the shader parameters to generate the target animation.

8. The method according to claim 6, characterized in that, The process of rendering the target image and generating a target animation based on the shader category and shader parameters of the at least one shader includes: Receive rendering modification instructions for the at least one shader; According to the rendering modification instructions, modify the shader class and shader parameters of the at least one shader; Based on the modified shader category and shader parameters of the at least one shader, the target image is rendered to generate the target animation.

9. The method according to claim 8, characterized in that, The target image includes at least one second independent object, the second independent object being provided with a second vertex, the second vertex being used to represent the outline of the second independent object; After modifying the shader class and shader parameters of the at least one shader according to the rendering modification instructions, the method further includes: If the target shader category is included in the shader category of the modified at least one shader, the second vertex is modified based on the target shader category; The process of rendering the target image and generating a target animation based on the modified shader class and shader parameters of the at least one shader includes: Based on the modified shader class and shader parameters of the at least one shader, at least one second independent object with the modified second vertex is rendered to generate a target animation.

10. The method according to claim 6, characterized in that, In the animation editor, adding at least one shader to the target image and setting the shader parameters of the at least one shader includes: In the animation editor, at least one shader is added to the target image using a first shader library, and the shader parameters of the at least one shader are set. The first shader library includes the shading capabilities and shading performance of multiple first shaders. The process of rendering the target image and generating a target animation based on the shader category and shader parameters of the at least one shader includes: In the animation running application, the target image is rendered and the target animation is generated using a second shader library based on the shader category and shader parameters of the at least one shader. The second shader library includes the shading capabilities and shading performance of multiple second shaders, and the shading capabilities and shading performance of the multiple first shaders are the same as the shading capabilities and shading performance of the multiple second shaders.

11. An animation generation device, characterized in that, The device includes: The import module is configured to import target images into the animation editor; The settings module is configured to add at least one shader to the target image in the animation editor and set the shader parameters of the at least one shader. The generation module is configured to package the target image, the shader category of the at least one shader, and the shader parameters to generate an animation resource package for the target animation, wherein the animation resource package is used to generate the target animation at runtime.

12. A computer device, characterized in that, It includes a memory and a processor, the memory being used to store a computer program, and the processor being used to implement the method as described in any one of claims 1 to 10 when the computer program is executed.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions that, when executed by a processor, implement the method as described in any one of claims 1 to 10.

Images