Animation playing method, animation generating method, device and electronic equipment

Abstract

The embodiment of the application discloses an animation playing method, an animation generating method, an animation generating device and an electronic device. The animation with special effects is played by video decoding of video resources, so that the image file in RGB or RGBA format does not need to be converted, the memory occupied when playing the animation is reduced, the time consumption of animation special effect rendering is shortened, the efficiency of animation playing is improved, the storage space occupied when playing the target animation is also reduced. Moreover, the reduced transparent image corresponding to the original transparent image is included in the spliced image, and the reduced transparent image is restored to the original transparent image according to the first size information of the original color image when the frame image is synthesized, so that the package size of the video resource is effectively reduced, the storage space occupied by the video resource is reduced, and the method can be widely applied to technical fields such as multimedia, image processing and cloud computing.

Description

Technical Field

[0001] This application relates to the field of multimedia technology, and in particular to an animation playback method, animation generation method, apparatus, and electronic device. Background Technology

[0002] Frame animation is a common type of multimedia content. Its principle is to draw different animation frames along a timeline, playing them continuously to create an animation. Currently, it is generally based on image resources of common formats to generate corresponding animation effects.

[0003] However, current graphics processing units (GPUs) do not support direct rendering of ordinary image resources. The image resources need to be converted to RGB or RGBA format before the animation effects are rendered. Since RGB or RGBA format resource packages occupy a large amount of space, the memory occupied when playing the animation also increases, thereby reducing the efficiency of animation playback. Summary of the Invention

[0004] The following is an overview of the subject matter described in detail herein. This overview is not intended to limit the scope of the claims.

[0005] This application provides an animation playback method, animation generation method, apparatus, and electronic device that can improve the efficiency of animation playback.

[0006] On one hand, embodiments of this application provide an animation playback method, including:

[0007] Obtain the video resources of the target animation;

[0008] The video resource is subjected to video decoding processing to obtain a stitched image corresponding to multiple animation frames in the target animation. The stitched image includes original color images and reduced transparent images that are stitched together. The size of the reduced transparent image is smaller than the size of the original color image.

[0009] Extract the first size information of the original color image from the video resource, and extract the original color image and the reduced transparent image from the stitched image;

[0010] The reduced transparent image is enlarged according to the first size information to obtain the original transparent image. The original color image and the corresponding original transparent image are then combined to obtain the frame image corresponding to the animation frame.

[0011] Play the target animation based on each of the aforementioned frame images.

[0012] On the other hand, embodiments of this application also provide an animation generation method, including:

[0013] Frame images of multiple animation frames in the target animation are obtained, and each frame image is separated to obtain the original transparent image and original color image corresponding to each frame image;

[0014] The original transparent image is reduced in size to obtain a reduced transparent image corresponding to the original transparent image. The reduced transparent image is then stitched together with the corresponding original color image to obtain a stitched image corresponding to each animation frame.

[0015] The spliced ​​image corresponding to multiple animation frames is subjected to video encoding processing to generate video resources of the target animation;

[0016] Determine the first size information of the original color image and add the first size information to the video resource.

[0017] On the other hand, embodiments of this application also provide an animation playback device, including:

[0018] The resource acquisition module is used to acquire the video resources of the target animation;

[0019] The video decoding module is used to perform video decoding processing on the video resource to obtain a stitched image corresponding to multiple animation frames in the target animation. The stitched image includes original color images and reduced transparent images that are stitched together. The size of the reduced transparent image is smaller than the size of the original color image.

[0020] The image extraction module is used to extract the first size information of the original color image from the video resource, and to extract the original color image and the reduced transparent image from the stitched image;

[0021] An image compositing module is used to enlarge the reduced transparent image according to the first size information to obtain the original transparent image, and to compose the original color image and the corresponding original transparent image to obtain the frame image corresponding to the animation frame.

[0022] A playback module is used to play the target animation based on each of the frame images.

[0023] Furthermore, the video resource includes multiple information storage units for storing media information, each of which is configured with a first unit label indicating the type of the information storage unit. The image extraction module is specifically used for:

[0024] Retrieve the preset second unit label;

[0025] Based on the matching relationship between the second unit tag and the first unit tag, a target storage unit is determined from the plurality of information storage units;

[0026] The first size information of the original color image is extracted from the target storage unit.

[0027] Furthermore, the image extraction module is specifically used for:

[0028] Multiple stitched images are stitched together according to a preset order to obtain a merged image;

[0029] Determine the vertex coordinate information corresponding to the original color image and the reduced transparent image in the merged image;

[0030] Based on the vertex coordinate information, the original color image and the reduced transparent image corresponding to the stitched image are extracted from the merged image.

[0031] Furthermore, the image extraction module is specifically used for:

[0032] Extract the vertex coordinate information of the original color image and the reduced transparent image in the merged image from the video resources;

[0033] Alternatively, the second size information of the reduced transparent image can be extracted from the video resource, the vertex coordinate information of the original color image in the merged image can be determined based on the first size information, and the vertex coordinate information of the original color image in the merged image can be determined based on the second size information.

[0034] Furthermore, the image extraction module is specifically used for:

[0035] Based on the vertex coordinate information, determine the first target region corresponding to the original color image and the second target region corresponding to the reduced transparent image from the merged image;

[0036] Extract all pixels in the first target region to obtain the original color image;

[0037] Extract all pixels in the second target region to obtain the reduced transparent image.

[0038] Furthermore, the image synthesis module is specifically used for:

[0039] Obtain the first transparency channel value of the first pixel in the original transparent image;

[0040] Adjust the second transparency channel value of the second pixel in the original color image according to the first transparency channel value to obtain the frame image corresponding to the animation frame;

[0041] The position of the first pixel in the original transparent image corresponds to the position of the second pixel in the original color image.

[0042] Furthermore, the playback module is specifically used for:

[0043] Call the external texture generation component in the target operating system;

[0044] Based on the external texture generation component, each frame image is converted into corresponding external texture data, and the external texture data is cached in the graphics processor;

[0045] Call the texture rendering component in the UI development framework;

[0046] Based on the texture rendering component, the external texture data is obtained from the graphics processor, the external texture data is rendered to obtain a rendered image, and the target animation is played based on the rendered image.

[0047] Furthermore, the playback module is specifically used for:

[0048] Generate a texture identifier corresponding to the external texture data, send the texture identifier to the texture rendering component, and cache the external texture data and the corresponding texture identifier in the graphics processor;

[0049] Obtain the texture identifier, and obtain the external texture data from the graphics processor based on the texture identifier.

[0050] On the other hand, embodiments of this application also provide an animation generation apparatus, including:

[0051] The image separation module is used to acquire frame images of multiple animation frames in the target animation, perform separation processing on each frame image, and obtain the original transparent image and original color image corresponding to each frame image;

[0052] The image stitching module is used to reduce the size of the original transparent image to obtain a reduced transparent image corresponding to the original transparent image, and stitch the reduced transparent image with the corresponding original color image to obtain a stitched image corresponding to each animation frame;

[0053] The video encoding module is used to perform video encoding processing on the spliced ​​image corresponding to multiple animation frames to generate video resources of the target animation;

[0054] An information adding module is used to determine the first size information of the original color image and add the first size information to the video resource.

[0055] Furthermore, the video resource includes multiple information storage units for storing media information, each of which is configured with a first unit label indicating the type of the information storage unit. The information adding module is specifically used for:

[0056] The second unit label receives the input;

[0057] Based on the matching relationship between the second unit tag and the first unit tag, a target storage unit is determined from the plurality of information storage units;

[0058] The first size information is written to the target storage unit.

[0059] Furthermore, the information adding module is also used for:

[0060] Multiple stitched images are stitched together according to a preset order to obtain a merged image;

[0061] Determine the vertex coordinate information of the original color image and the reduced transparent image in the merged image;

[0062] Add the vertex coordinate information to the video resource.

[0063] On the other hand, embodiments of this application also provide an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the above-described animation playback method or animation generation method.

[0064] On the other hand, embodiments of this application also provide a computer-readable storage medium storing a program that is executed by a processor to implement the above-described animation playback method or animation generation method.

[0065] On the other hand, embodiments of this application also provide a computer program product, which includes a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to perform the animation playback method or animation generation method described above.

[0066] The embodiments of this application include at least the following beneficial effects: By acquiring the video resources of the target animation, decoding the video resources to obtain a stitched image, separating the original color image and the original transparent image corresponding to each animation frame of the target animation from the stitched image, and then merging the original color image and the original transparent image to obtain a frame image with animation effects, compared with using image resources to play animations with effects, the embodiments of this application use video decoding of video resources to play animations with effects, which does not require converting to RGB or RGBA format image files, thereby reducing the memory occupied when playing the animation, shortening the time spent rendering animation effects, improving the efficiency of animation playback, and also reducing the storage space occupied when playing the target animation. Furthermore, since the stitched image includes a reduced transparent image corresponding to the original transparent image, when synthesizing the frame image, the reduced transparent image is restored to the original transparent image according to the first size information of the original color image, which can effectively reduce the package size of the video resources and reduce the storage space occupied by the video resources.

[0067] Other features and advantages of this application will be set forth in the following description and will be apparent in part from the description or may be learned by practicing the application. The objectives and other advantages of this application may be realized and obtained by means of the structures particularly pointed out in the description, claims and drawings. Attached Figure Description

[0068] The accompanying drawings are used to provide a further understanding of the technical solutions of this application and constitute a part of the specification. They are used together with the embodiments of this application to explain the technical solutions of this application and do not constitute a limitation on the technical solutions of this application.

[0069] Figure 1 A schematic diagram of an implementation environment provided for an embodiment of this application;

[0070] Figure 2 A schematic diagram illustrating another implementation environment provided for an embodiment of this application;

[0071] Figure 3 A flowchart illustrating the animation generation method provided in this application embodiment;

[0072] Figure 4 This is a schematic diagram of the structure of the stitched image provided in the embodiments of this application;

[0073] Figure 5 This is a schematic diagram of the structure of the video resources provided in the embodiments of this application;

[0074] Figure 6 This is a schematic diagram of the structure of the merged image provided in an embodiment of this application;

[0075] Figure 7A flowchart of video resource processing provided for embodiments of this application;

[0076] Figure 8 A flowchart illustrating the animation playback method provided in this application embodiment;

[0077] Figure 9 A flowchart illustrating the use of video resources provided in this application embodiment;

[0078] Figure 10 A schematic diagram of the underlying processing flow of the animation playback method provided in the embodiments of this application;

[0079] Figure 11 A comparative diagram showing the storage space occupied by the Lottie animation library solution provided in this application embodiment and the video resources in this application embodiment;

[0080] Figure 12 A comparative diagram showing the memory usage during playback of the target animation provided in this application embodiment;

[0081] Figure 13 This is a schematic diagram of the structure of the animation playback device provided in the embodiments of this application;

[0082] Figure 14 This is a schematic diagram of the structure of the animation generation apparatus provided in the embodiments of this application;

[0083] Figure 15 This is a structural block diagram of the terminal provided in the embodiments of this application;

[0084] Figure 16 This is a structural block diagram of the server provided in an embodiment of this application. Detailed Implementation

[0085] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0086] To facilitate understanding of the technical solutions provided in the embodiments of this application, some key terms used in the embodiments of this application will be explained below:

[0087] H.264: H.264 is a highly compressed digital video codec standard proposed by the Joint Video Team (JVT), which is composed of the ITU-T Video Coding Experts Group (VCEG) and the ISO / IEC Moving Picture Experts Group (MPEG).

[0088] Animation effects: Special visual effects created by adjusting the transparency information of animation frames.

[0089] Currently, animation effects are generally generated based on image resources in common formats, such as PNG and JPG. However, current graphics processors do not support direct rendering of ordinary image resources; they must first be converted to RGB or RGBA format before rendering the animation effects. RGB corresponds to the three primary color channels of an image: R (red), G (green), and B (blue). RGBA adds a transparency channel (A) to the RGB format. Because RGB or RGBA format resource packages occupy a large amount of space, the memory usage during animation playback also increases, thus reducing animation playback efficiency.

[0090] Based on this, embodiments of this application provide an animation playback method, an animation generation method, an apparatus, and an electronic device, which can improve the efficiency of animation playback.

[0091] Reference Figure 1 , Figure 1 This is a schematic diagram of an implementation environment provided in an embodiment of this application, which includes a first terminal 101.

[0092] Specifically, the first terminal 101 has an application installed for playing animations. In one possible implementation, this application could be a video processing application, a game application, or a video playback application, etc. Taking a game application as an example, the first terminal 101 acquires the video resources of the target animation, which are stored locally on the first terminal 101 after the game application is installed. Then, the video resources are decoded to obtain a stitched image corresponding to multiple animation frames in the target animation. The first size information of the original color image is extracted from the video resources. The original color image and a reduced transparent image are extracted from the stitched image. The reduced transparent image is enlarged according to the first size information to obtain the original transparent image. The original color image and the corresponding original transparent image are synthesized to obtain the frame image corresponding to the animation frame. The target animation is then played based on each frame image.

[0093] Additionally, refer to Figure 2 , Figure 2 This is a schematic diagram of another implementation environment provided by an embodiment of this application. The implementation environment includes a second terminal 201 and a server 202, wherein the second terminal 201 and the server 202 are connected through a communication network.

[0094] Server 202 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0095] In addition, server 202 can also be a node server in a blockchain network.

[0096] Specifically, the second terminal 201 has an application installed for playing animations. The second terminal 201 sends a request to the server 202 to obtain the video resources of the target animation, and the server 202 sends the video resources of the target animation to the second terminal 201 according to the request. Then, the target animation is played using a processing method similar to that of the first terminal 101 described above.

[0097] The first terminal 101 and the second terminal 201 mentioned above can be smartphones, tablets, laptops, desktop computers, smart speakers, smartwatches, vehicle terminals, etc., but are not limited to these. The second terminal 201 and the server 202 can be directly or indirectly connected through wired or wireless communication methods, and this embodiment of the application does not impose any limitations.

[0098] The methods provided in this application can be applied to various technical fields, including but not limited to multimedia, image processing, cloud computing, and other technical fields.

[0099] The generation principle of the target animation video resources in this embodiment will be explained below. The target animation video resources can be generated in the application provider's electronic device, which can be a terminal or a server. Based on Figure 1 In the implementation environment shown, the video resources for generating the target animation are packaged into the application. Once the application is installed on the first terminal 101, the video resources for the target animation are stored locally on the first terminal 101. Based on... Figure 2 In the implementation environment shown, the video resources for generating the target animation are sent to the second terminal 201.

[0100] Reference Figure 3 , Figure 3 This is a flowchart illustrating the animation generation method provided in the embodiments of this application. The animation generation method can be executed by a terminal or a server, and includes, but is not limited to, the following steps 301 to 304.

[0101] Step 301: Obtain frame images of multiple animation frames in the target animation, separate each frame image to obtain the original transparent image and original color image corresponding to each frame image.

[0102] In this embodiment, the frame image is an image used to play the target animation. The frame image is an image with animation effects and contains RGBA information. After separating the frame image, the original transparent image and the original color image corresponding to the frame image can be obtained, and the original transparent image and the original color image have the same size. The original color image is the image with color information corresponding to the current animation frame, that is, the original color image contains RGB information; the original transparent image is the image with transparency information corresponding to the current animation frame, that is, the original transparent image contains A information. Corresponding animation effects can be generated through the transparency information.

[0103] In one possible implementation, all frame images in the target animation can be separated to obtain the original transparent image and original color image corresponding to all frame images. In this case, it indicates that all animation frames in the target animation have animation effects. Alternatively, some frame images in the target animation can be separated to obtain the original transparent image and original color image corresponding to some frame images. In this case, it indicates that only some animation frames in the target animation have animation effects.

[0104] In one possible implementation, the FFMPEG tool can be used to separate all the frame images in the target animation.

[0105] Step 302: Reduce the size of the original transparent image to obtain a reduced transparent image corresponding to the original transparent image. Then, stitch the reduced transparent image with the corresponding original color image to obtain the stitched image corresponding to each animation frame.

[0106] In one possible implementation, the original transparent image can be reduced in size according to a preset reduction factor. For example, the preset reduction factor could be 2x, and if the original transparent image is 2cm x 2cm, then the reduced transparent image would be 1cm x 1cm. Alternatively, the original transparent image can be reduced in size according to preset size information. For example, if the preset size information is 1cm x 1cm, then regardless of the original transparent image's size, the final reduced transparent image will be 1cm x 1cm. It is understood that the preset reduction factor and preset size information can be determined according to actual needs, and this application embodiment does not limit them.

[0107] In one possible implementation, the scaled-down transparent image can be stitched onto any one of the four sides of the original color image: top, bottom, left, or right, as shown in the reference. Figure 4 , Figure 4 This is a schematic diagram of the structure of the stitched image provided in the embodiments of this application. Figure 4 The example illustrates a case where a scaled-down transparent image is stitched to the right of the original color image, but the embodiments of this application do not limit the specific location of the scaled-down transparent image.

[0108] It should be noted that when stitching a scaled-down transparent image with its corresponding original color image, black elements can be added to the empty positions. That is, the color of the pixels corresponding to the empty positions can be set to black, so that the shape of the stitched image remains rectangular, making the structure of the stitched image more complete.

[0109] In one possible implementation, the FFMPEG tool can be used to stitch a reduced transparent image with its corresponding original color image.

[0110] Step 303: Perform video encoding processing on the stitched image corresponding to multiple animation frames to generate video resources for the target animation.

[0111] In one possible implementation, the H.264 encoding standard can be used to perform video encoding processing on the stitched image corresponding to multiple animation frames, thereby effectively improving the compression ratio and resulting in a lower storage space footprint for the video resource after video encoding processing. The format of the obtained video resource can be common video formats such as MP4 and MKV, and this application embodiment is not limited thereto.

[0112] Step 304: Determine the first size information of the original color image and add the first size information to the video resource.

[0113] Adding the first size information to the video resource facilitates the subsequent restoration of the shrunk transparent image to the original transparent image based on the first size information during target animation playback, thereby generating special effects during target animation playback. By generating video resources for the target animation, video decoding can be used to play the target animation with special effects. Compared to using image resources to play animations with special effects, this embodiment uses video decoding of video resources to play animations with special effects, eliminating the need to convert to RGB or RGBA format image files. This reduces the memory occupied during animation playback, shortens the rendering time of animation effects, improves animation playback efficiency, and also reduces the storage space occupied when playing the target animation.

[0114] Furthermore, since the original transparent image is first reduced in size to obtain the corresponding reduced transparent image when generating the stitched image, and then the first size information is added to the video resource, compared with directly stitching the original transparent image and the original color image, the size of the video resource package can be effectively reduced, and the storage space occupied by the video resource can be reduced.

[0115] In one possible implementation, the video resource includes multiple information storage units for storing media information, each information storage unit being configured with a first unit label indicating the type of the information storage unit. Taking MP4 format as an example, see [reference]. Figure 5 , Figure 5 This is a schematic diagram of the structure of the video resource provided in an embodiment of this application. The information storage unit, also known as a BOX, is used to store the data of the video resource. Based on Figure 5 The structure of the video resource shown above, in step 304, determines the first size information of the original color image and adds the first size information to the video resource. Specifically, it can receive the input second unit tag, determine the target storage unit from multiple information storage units according to the matching relationship between the second unit tag and the first unit tag, and write the first size information into the target storage unit.

[0116] Specifically, when generating video resources for the target animation, the second unit label can be manually input. This second unit label is used to confirm which information storage unit the first size information is stored in. After obtaining the first size information of the original color image, the preset second unit label can be matched with each first unit label of the video resource to confirm the target storage unit where the first size information is stored. Once the target storage unit is confirmed, the first size information is written as data into the target storage unit.

[0117] For example, the second unit label can be the type field of the information storage unit, and the target storage unit can be an information storage unit of user-extended type, with the corresponding value of the type field being UUID. It is understood that the second unit label can be determined according to actual needs, and this application embodiment does not impose any limitations.

[0118] By writing the first size information into the target storage unit, it is easier to extract the first size information again during subsequent video decoding. Furthermore, when the target storage unit is a user-extended type information storage unit, writing the first size information will not affect the original animation data of the video resource, which helps to improve the stability of subsequent animation playback.

[0119] In one possible implementation, the first size information can be written to the target storage unit using the Bento4 tool.

[0120] In one possible implementation, after generating the video resource, multiple stitched images can be stitched together according to a preset order to obtain a merged image. The vertex coordinate information of the original color image and the reduced transparent image in the merged image is determined, and the vertex coordinate information is added to the video resource.

[0121] In one possible implementation, the preset order can be the order of the animation frames corresponding to the stitched images in the timeline of the target animation, or it can be the numbering order after manually numbering each stitched image. Specifically, refer to... Figure 6 , Figure 6 This is a schematic diagram of the structure of the merged image provided in the embodiment of this application. The stitching process of multiple stitched images can be performed by using an M*N matrix stitching method, where M and N are positive integers and can be determined according to the specific number of stitched images. Figure 6 The example shown uses four stitched images. Figure 6 In the example shown, M=4 and N=1. Of course, in other implementations, M=N=2, etc., are also possible, and this application does not limit the implementation.

[0122] The vertex coordinate information refers to the specific vertex coordinates of the original color image and the reduced transparent image in the merged image. The original color image and the reduced transparent image are generally rectangular, therefore the vertex coordinate information includes the coordinates of all four vertices. For example, if the reduced transparent image is reduced by a factor of 3, Figure 6 The vertex coordinates of the first original color image are Z1(0,0), Z2(0,0.75), Z3(0.75,0), and Z4(0.75,0.75), respectively. The vertex coordinates of the first scaled-down transparent image are Z5(0.76,0.5), Z6(1.01,0.5), Z7(0.76,0.75), and Z8(1.01,0.75), respectively. The vertex coordinates of subsequent original color images and scaled-down transparent images follow the same pattern, and will not be repeated here. It is understood that the origin of the coordinates can be any vertex of the original color image or any vertex of the scaled-down transparent image; this embodiment of the application does not limit this selection.

[0123] In one possible implementation, adding vertex coordinate information to the video resource can be done in a manner similar to that used for the first size information, i.e., using unit tags to identify the specific target storage unit where the vertex coordinate information is stored. It is understood that the vertex coordinate information and the first size information can be stored in the same storage unit or in different storage units. When the vertex coordinate information and the first size information are stored in different storage units, it is beneficial to distinguish between the vertex coordinate information and the first size information.

[0124] In one possible implementation, the splicing order and method can be further added to the video resource to facilitate determining the corresponding splicing order and method when playing the target animation. For example, the splicing order and method can be represented by specific strings, which are used to determine the splicing order and method during playback. Alternatively, the splicing order and method can be pre-set as strings in the application. The correspondence between strings and splicing order, and between strings and splicing methods, can be pre-set in the application in the form of tables. Using strings allows for quick and easy confirmation of the corresponding splicing order and method.

[0125] By adding vertex coordinate information to the video resource, the vertex coordinate information can be extracted from the video resource again when playing the target animation. Then, the original color image and the reduced transparent image can be separated from the stitched image based on the vertex coordinate information, which helps to improve the efficiency of extracting the original color image and the reduced transparent image corresponding to the stitched image from the merged image.

[0126] In one possible implementation, without adding vertex coordinate information to the video resource, the second size information of the scaled-down transparent image can be further added to the video resource. This allows the vertex coordinate information of the original color image in the merged image to be determined based on the first size information and the second size information when playing the target animation.

[0127] The following example illustrates the principle of the animation generation method provided in this application.

[0128] Reference Figure 7 , Figure 7 The video resource processing flowchart provided in this application embodiment is as follows:

[0129] 1. First, use the FFMPEG tool to separate the frame image corresponding to the animation frame into the original color image and the original transparent image, and reduce the size of the original transparent image to obtain the reduced transparent image;

[0130] 2. Use the FFMPEG tool to stitch the original color image and the reduced transparent image to obtain a stitched image;

[0131] 3. Process the frame images corresponding to each animation frame with special effects according to steps 1 and 2 above;

[0132] 4. Based on each stitched image, video encoding is performed using the FFMPEG tool to generate video resources. The first size information of the original color image is then added to the video resources using the Bento4 tool.

[0133] The following explains the playback principle of the target animation in the embodiments of this application.

[0134] based on Figure 1 or Figure 2 The implementation environment shown is based on... Figure 8 , Figure 8 This is a flowchart illustrating the animation playback method provided in an embodiment of this application. The animation playback method can be... Figure 1 The first terminal 101 shown or Figure 2 The second terminal 201 shown executes the animation playback method, which includes, but is not limited to, the following steps 801 to 805.

[0135] Step 801: Obtain the video resources for the target animation.

[0136] The target animation is the animation to be played, and its video resource is a video format resource, such as common video formats like MP4. This application embodiment does not limit this. The video resource can be generated by the aforementioned animation generation method. The video resource can be stored locally on the terminal or sent to the terminal by a server; this application embodiment does not limit this either.

[0137] Step 802: Perform video decoding on the video resources to obtain a stitched image corresponding to multiple animation frames in the target animation.

[0138] Among them, reference Figure 4 A stitched image consists of original color images and scaled-down transparent images stitched together.

[0139] In one possible implementation, after video decoding, an image containing YUV information can be obtained. YUV is a color model similar to RGB, where "Y" represents luminance (or luminance), i.e., grayscale value, and "U" and "V" represent chrominance (or chroma), which describes the color and saturation of the image and is used to specify the color of a pixel. Then, the YUV information can be converted into RGB information to obtain the original color image containing RGB information. The conversion formula can be determined according to different color gamut requirements, and the corresponding conversion formula is used to convert YUV information into RGB information. It is understood that in other embodiments, after video decoding, the original color image containing RGB information can also be directly obtained, depending on the specific video encoding method.

[0140] The size of the reduced transparent image is smaller than that of the original color image. The reduced transparent image is obtained by reducing the size of the original transparent image corresponding to the original color image. The stitched image is obtained by stitching the original color image and the corresponding reduced transparent image together. For details, please refer to the previous description of the stitched image, which will not be repeated here.

[0141] Step 803: Extract the first size information of the original color image from the video resource, and extract the original color image and the reduced transparent image from the stitched image.

[0142] Specifically, when generating video resources for the target animation, the first size information of the original color image can be added to the video resources, and then extracted when playing the target animation. Extracting the original color image and the reduced transparent image from the stitched images applies to all animation frames with special effects. For example, if there are 10 stitched images, then there will also be 10 original color images and 10 reduced transparent images.

[0143] Step 804: Enlarge the reduced transparent image according to the first size information to obtain the original transparent image, and synthesize the original color image and the corresponding original transparent image to obtain the frame image corresponding to the animation frame.

[0144] Specifically, the reduced transparent image is enlarged based on the first size information, that is, the reduced transparent image is enlarged to the same size as the original color image, meaning the original transparent image and the original color image have the same size. Since there are multiple original color images and reduced transparent images, merging the original color image and the corresponding original transparent image means merging the original color image and the original transparent image corresponding to the same stitched image. Since each stitched image corresponds to an animation frame, the final result is the frame image of each animation frame.

[0145] Step 805: Play the target animation based on each frame image.

[0146] By acquiring the video resources of the target animation, decoding the video resources to obtain a stitched image, and separating the original color image and original transparent image corresponding to each animation frame of the target animation from the stitched image, the original color image and original transparent image can be merged to obtain a frame image with animation effects. Compared with using image resources to play animations with effects, this embodiment of the application uses video decoding of video resources to play animations with effects. It does not need to convert to RGB or RGBA format image files, thereby reducing the memory occupied when playing the animation, shortening the time of animation effect rendering, improving the efficiency of animation playback, and also reducing the storage space occupied when playing the target animation.

[0147] Furthermore, since the stitched image includes a scaled-down transparent image corresponding to the original transparent image, the scaled-down transparent image is restored to the original transparent image based on the first size information of the original color image when synthesizing the frame image. Compared with the stitched image including the original color image and the original transparent image, this can effectively reduce the size of the video resource package and reduce the storage space occupied by the video resource.

[0148] In one possible implementation, the video resource includes multiple information storage units for storing media information. Each information storage unit is configured with a first unit label for indicating the type of information storage unit. In step 803 above, extracting the first size information of the original color image from the video resource can specifically involve obtaining a preset second unit label, determining a target storage unit from the multiple information storage units based on the matching relationship between the second unit label and the first unit label, and extracting the first size information of the original color image from the target storage unit.

[0149] The information storage unit can be referred to in the preceding explanation and will not be repeated here. Similarly, the second unit label is used to identify which information storage unit the first size information is specifically stored in. After obtaining the first size information of the original color image, the preset second unit label can be matched with the first unit labels of each video resource to identify the target storage unit where the first size information is specifically stored. After identifying the target storage unit, the first size information of the original color image can be extracted from the target storage unit.

[0150] Among them, based on Figure 1 In the implementation environment shown, the second unit label can be preset in an application used for animation playback; based on Figure 2 In the implementation environment shown, the second unit tag can be pre-set in the application used for animation playback, or it can be carried in the video resource when the server sends the video resource of the target animation.

[0151] In one possible implementation, in step 803 above, the original color image and the reduced transparent image are extracted from the stitched image. Specifically, multiple stitched images can be stitched together in a preset order to obtain a merged image. The vertex coordinate information corresponding to the original color image and the reduced transparent image in the merged image is determined. Based on the vertex coordinate information, the original color image and the reduced transparent image corresponding to the stitched image are extracted from the merged image.

[0152] The preset order in which multiple images are stitched together during animation playback corresponds to the preset order in which the target animation is generated. This preset order can be pre-set as a string in the application or carried as a string by the video resources. Similarly, the stitching method of multiple images corresponds to the stitching method in which the target animation is generated. This stitching method can also be pre-set as a string in the application or carried as a string by the video resources.

[0153] Similarly, the preset order can be the order of the animation frames corresponding to the stitched images in the timeline of the target animation, or it can be the numbering order after manually numbering each stitched image. The stitching method of the stitched images can refer to the aforementioned principles, and will not be repeated here.

[0154] In one possible implementation, the vertex coordinate information corresponding to the original color image and the reduced transparent image in the merged image can be extracted from the video resource. There are multiple original color images and multiple reduced transparent images, and correspondingly, the vertex coordinate information corresponds to different original color images and reduced transparent images. By extracting the vertex coordinate information from the video resource, and then separating the original color image and the reduced transparent image from the stitched image based on the vertex coordinate information, the efficiency of extracting the original color image and the reduced transparent image corresponding to the stitched image from the merged image is improved.

[0155] In addition to extracting the vertex coordinates of the original color image and the reduced transparent image from the video resource, determining the vertex coordinates of the original color image and the reduced transparent image in the merged image can also be achieved by extracting the second size information of the reduced transparent image from the video resource, using the first size information to determine the vertex coordinates of the original color image in the merged image, and using the second size information to determine the vertex coordinates of the original color image in the merged image. Specifically, any vertex of the original color image can be used as a reference, and the vertex coordinates of other vertices can be determined based on the first size information. Since the reduced transparent image and the original color image are stitched together, after determining the origin, the vertex coordinates of the reduced transparent image can be determined by combining the second size information. Alternatively, any vertex of the reduced transparent image can be used as a reference, and the vertex coordinates of other vertices can be determined based on the second size information. Since the reduced transparent image and the original color image are stitched together, after determining the origin, the vertex coordinates of the original color image can be determined by combining the first size information.

[0156] In one possible implementation, based on vertex coordinate information, the original color image and the scaled-down transparent image corresponding to the stitched image are extracted from the merged image. Specifically, based on vertex coordinate information, a first target region corresponding to the original color image and a second target region corresponding to the scaled-down transparent image are determined from the merged image. All pixels in the first target region are extracted to obtain the original color image, and all pixels in the second target region are extracted to obtain the scaled-down transparent image.

[0157] Specifically, since the vertex coordinate information includes the coordinates of the four vertices of the image, the first target region corresponding to the original color image and the second target region corresponding to the scaled-down transparent image can be determined based on the vertex coordinates. Both the first and second target regions are rectangular areas. Furthermore, since there are multiple original color images and scaled-down transparent images, different original color images correspond to different first target regions, and different scaled-down transparent images correspond to different second target regions. By dividing the first and second target regions based on vertex coordinate information, the positions of the original color images and scaled-down transparent images in the merged image can be accurately determined. Then, by using pixel-level sampling, the original color images and scaled-down transparent images can be extracted from the stitched image, effectively improving the extraction accuracy of the original color images and scaled-down transparent images.

[0158] The preceding section described the principle of obtaining a merged image by stitching together multiple images, and then extracting the original color image and the reduced transparent image from the merged image. In one possible implementation, edge segmentation can be performed on different stitched images. Specifically, for each stitched image, the edge between the original color image and the reduced transparent image can be detected first, and then the stitched image can be segmented into the original color image and the reduced transparent image based on this edge. Here, the edge is identified by detecting locations with abrupt changes in grayscale levels or structure; the edge between the original color image and the reduced transparent image can be detected based on grayscale values.

[0159] In one possible implementation, the original color image and the corresponding original transparent image are synthesized to obtain the frame image corresponding to the animation frame. Specifically, the first transparency channel value of the first pixel in the original transparent image can be obtained, and the second transparency channel value of the second pixel in the original color image can be adjusted according to the first transparency channel value to obtain the frame image corresponding to the animation frame.

[0160] In this image, the position of the first pixel in the original transparent image corresponds to the position of the second pixel in the original color image. Both the original transparent image and the original color image contain multiple pixels. Since they are the same size, the first pixel in the original transparent image corresponds one-to-one with the second pixel in the original color image. For example, the first pixel in the second row and second column of the original transparent image corresponds to the second pixel in the second row and second column of the original color image. Because the original color image carries the color information (RGB information, red channel information, green channel information, blue channel information) for each second pixel, and the original transparent image carries the transparency information (A information, alpha channel information) for each first pixel, the second transparency channel value of the second pixel in the original color image can be adjusted based on the first transparency channel value to obtain the frame image corresponding to the animation frame. For example, if the original transparent image includes A1, A2...An, and the original color image includes B1, B2...Bn, then the frame image obtained after compositing the original transparent image and the original color image is H1, H2...Hn. By adjusting the second transparency channel value of the second pixel in the original color image according to the first transparency channel value, the resulting frame image can display transparency effects, thereby improving the visual expressiveness of the target animation.

[0161] In one possible implementation, inter-frame information between two adjacent frame images can be determined based on parameters such as the color change of pixels, inter-frame correlation, and eigenvalue gradient changes. An interpolated image is then generated between the two adjacent frame images based on this inter-frame information, and the difference image is added between the corresponding two frame images. Based on the above example, the image sequence of each animation frame in the target animation is H1, C1, H2, C2, H3...Hn. Adding an interpolated image between two frame images can expand the frame images, thereby reducing the pixel differences between the corresponding frame images of each animation frame, resulting in a more delicate display of the target animation and better animation effects.

[0162] In one possible implementation, OpenGL instructions can be used to synthesize the original color image and the corresponding original transparent image.

[0163] The following example illustrates the principle of obtaining frame images provided in the embodiments of this application.

[0164] Reference Figure 9 , Figure 9 The flowchart for video resource usage provided in this application embodiment is as follows:

[0165] 1. Use FFMPEG to decode the video resources to obtain a stitched image corresponding to multiple animation frames.

[0166] 2. Separate the stitched images of each animation frame to obtain the original color image and the reduced transparent image;

[0167] 3. Extract the first size information of the original color image from the video resource, restore the scaled-down transparent image to the original transparent image based on the first size information, and combine the original color image and the original transparent image into the frame image corresponding to each animation frame.

[0168] In one possible implementation, the application for playing the target animation provided in this application embodiment is an application based on a UI development framework, namely Flutter. Flutter is a cross-platform mobile development framework. Applications developed based on Flutter can run on terminals based on mainstream operating systems such as iOS or Android. Flutter is a very popular cross-platform technology solution at present, and more and more development and products use Flutter to implement application development.

[0169] Currently, common animation solutions in Flutter are generally based on the Lottie animation library, an open-source tool developed by Airbnb that adds animation effects to native applications. Lottie renders animation effects based on image resources, resulting in a relatively large memory footprint during animation playback. Alternatively, it can be implemented using GIF (Graphics Interchange Format) images, but GIFs do not support transparency effects and have lower image quality.

[0170] Based on this, the embodiments of this application improve the playback of the target animation on the basis of Flutter. In step 805 above, the target animation is played based on each frame image. Specifically, this can be done by calling the external texture generation component in the target operating system; based on the external texture generation component, each frame image is converted into corresponding external texture data, and the external texture data is cached in the graphics processor; the texture rendering component in the interface development framework is called; based on the texture rendering component, the external texture data is obtained from the graphics processor, the external texture data is rendered to obtain the rendered screen, and the target animation is played based on the rendered screen.

[0171] Specifically, the target operating system can be a mainstream operating system such as iOS or Android, and this application embodiment is not limited to any particular one. The external texture generation component is a component of the native layer of the target operating system, used to convert frame images into corresponding external texture data. By using the external texture generation component of the target operating system's native layer, processing is performed directly at the native layer of the target operating system, which helps improve the efficiency and quality of texture data generation. Then, the external texture data is cached in the graphics processor for use by the texture rendering component in Flutter, achieving asynchronous processing of the target animation rendering. Next, the texture rendering component in Flutter is called to retrieve the external texture data from the graphics processor for rendering. Because Flutter has high performance and smooth operation, it helps improve the rendering efficiency and playback smoothness of the target animation. This application embodiment, through the interactive processing between the target operating system, Flutter, and the graphics processor, can improve the efficiency of texture data generation and target animation rendering, achieving an overall optimization effect for playing the target animation.

[0172] In one possible implementation, the external texture data is cached in the graphics processor. Specifically, a texture identifier corresponding to the external texture data can be generated, the texture identifier can be sent to the texture rendering component, and the external texture data and the corresponding texture identifier can be cached in the graphics processor. Correspondingly, the external texture data can be obtained from the graphics processor. Specifically, the texture identifier can be obtained, and the external texture data can be obtained from the graphics processor based on the texture identifier.

[0173] The texture identifier, or texture ID, is used to identify different external texture data. Different external texture data correspond to different texture identifiers. The texture identifiers of external texture data can be generated randomly, or the texture identifiers corresponding to different external texture data can be determined according to the generation order of the external texture data. The external texture generation component generates texture identifiers and sends them to the texture rendering component, so that the texture rendering component can obtain the corresponding texture data from the graphics processor based on the texture identifiers. This can improve the accuracy of texture data acquisition and improve the stability of target animation playback.

[0174] The external texture generation component generates texture identifiers corresponding to the external texture data. This can be done by pre-generating and sending these identifiers to the texture rendering component before converting each frame image into the corresponding external texture data. Subsequently, when generating the external texture data, the pre-generated texture identifiers can be cached accordingly. Alternatively, the corresponding texture identifiers can be generated simultaneously with the external texture data.

[0175] The external texture data and texture identifier are cached in the graphics processor so that the texture rendering component can obtain the corresponding external texture data from the graphics processor based on the texture identifier.

[0176] The following examples, using the interaction between the target operating system, Flutter, and the image processor, illustrate the principle of the animation playback method provided in this application. (Refer to...) Figure 10 , Figure 10 This is a schematic diagram of the underlying processing flow of the animation playback method provided in the embodiments of this application. The animation playback method includes, but is not limited to, the following steps 1001 to 1011.

[0177] Step 1001: Build a texture rendering component in the Flutter layer;

[0178] Step 1002: Build an external texture generation component in the Android native layer;

[0179] Step 1003: Generate a texture identifier based on the external texture generation component and return the texture identifier to the Flutter layer;

[0180] Step 1004: Obtain the texture identifier based on the texture rendering component;

[0181] Step 1005: Start playback processing based on Flutter;

[0182] Step 1006: Load video resources based on the Android native layer;

[0183] Step 1007: Decode the video resources based on the Android native layer to obtain the original color image and the original transparent image;

[0184] Step 1008: Call the external texture generation component to perform native rendering based on the original color image and the original transparent image to obtain external texture data;

[0185] Step 1009: Output the external texture data to the graphics processor for caching;

[0186] Step 1010: Call the texture rendering component to read external texture data from the graphics processor;

[0187] Step 1011: Rendering complete.

[0188] In step 1006, the video resources can be loaded into memory for subsequent decoding.

[0189] In step 1007, the video resource is decoded to obtain the original color image and the original transparent image, which follows the principles described above and will not be repeated here. After obtaining the original color image and the original transparent image, they can be input into the external texture generation component.

[0190] In step 1008, the external texture generation component performs native rendering based on the original color image and the original transparent image, that is, the original color image and the original transparent image are combined into a frame image, and then the frame image is converted into the corresponding external texture data.

[0191] It is understandable that in step 1007, after obtaining the original color image and the original transparent image, the original color image and the original transparent image can be combined into a frame image, and then the frame image can be input to the external texture generation component. Accordingly, for the external texture generation component, it is only necessary to convert the frame image into the corresponding external texture data.

[0192] In step 1009, the texture identifier corresponding to the external texture data is cached in the graphics processor.

[0193] In step 1011, the external texture generation component renders the external texture data with the specified texture identifier to the terminal screen, thereby playing the target animation.

[0194] Reference Figure 11 , Figure 11 The diagram shows a comparison of the storage space occupied by the Lottie animation library solution provided in this application embodiment and the video resources in this application embodiment. It can be seen that the storage space occupied by the Lottie animation library solution is 1.72M, while the storage space occupied by the video resources in this application embodiment is 647K. Therefore, the storage space occupied by the video resources in this application embodiment is smaller.

[0195] Additionally, refer to Figure 12 , Figure 12 This diagram illustrates the comparison of memory usage during target animation playback according to embodiments of this application. It shows that, based on the Lottie animation library solution, the total memory usage before playing the target animation is 269.9M, and the total memory usage during playback is 375.3M, meaning the memory usage for playing the target animation is 375.3M - 269.9M = 105.4M. However, based on the animation playback method provided in this embodiment, the total memory usage before playing the target animation is 372.6M, and the total memory usage during playback is 385.6M, meaning the memory usage for playing the target animation is 385.6M - 372.6M = 13M. Therefore, the animation playback method in this embodiment can significantly reduce memory usage during target animation playback.

[0196] In summary, the animation playback method provided in this application can reduce the memory occupied when playing animations, improve the stability of application operation, and reduce the probability of application crashes; at the same time, it can also reduce the storage space occupied when playing target animations and reduce the overall storage space occupied by the application.

[0197] The animation playback method provided in this application can be applied to different scenarios, and specific examples are given below.

[0198] When the application playing the target animation is a game application, the target animation can be a scene displayed within the game, such as the game start animation, game end animation, or animation during gameplay. The video resource of the target animation can be part of the game application; after the game application is installed on the terminal, the video resource of the target animation is extracted from the game application's installation package and stored locally on the terminal. Alternatively, after the game application is installed on the terminal, upon entering the game, it can connect to the game server to download the video resource of the target animation and store it locally on the terminal. The terminal can retrieve the corresponding video resource in response to animation playback commands. These commands can be generated based on the user's actions or automatically generated according to the application's runtime logic. For example, an animation playback command can be generated in response to a user's click, or automatically generated when an end animation needs to be played after the game ends. After the terminal obtains video resources based on the game application, it performs video decoding processing on the video resources to obtain a stitched image corresponding to multiple animation frames in the target animation. The first size information of the original color image is extracted from the video resources. The original color image and the reduced transparent image are extracted from the stitched image. The reduced transparent image is enlarged according to the first size information to obtain the original transparent image. The original color image and the corresponding original transparent image are synthesized to obtain the frame image corresponding to the animation frame. The target animation can be played based on each frame image.

[0199] When the application playing the target animation is a video playback application, it can be used to play local or online animations. When playing local animations, the video playback application directly reads the video resources stored locally. When playing online animations, the video playback application retrieves the video resources from the server. In this case, the animation playback command is a play click operation by the end user. Similarly, after the terminal obtains the video resources based on the video playback application, it performs video decoding processing on the video resources to obtain a stitched image corresponding to multiple animation frames in the target animation. The first size information of the original color image is extracted from the video resources. The original color image and the reduced transparent image are extracted from the stitched image. The reduced transparent image is enlarged according to the first size information to obtain the original transparent image. The original color image and the corresponding original transparent image are synthesized to obtain the frame image corresponding to the animation frame. The target animation can then be played based on each frame image.

[0200] When the application playing the target animation is a video processing application, it can actually be used to generate the video resources for the aforementioned target animation. Specifically, the video processing application acquires frame images of multiple animation frames from the target animation, separates each frame image to obtain the corresponding original transparent image and original color image, reduces the size of the original transparent image to obtain a reduced transparent image, and stitches the reduced transparent image with the corresponding original color image to obtain a stitched image corresponding to each animation frame. Video encoding is then performed on the stitched image corresponding to multiple animation frames to generate the video resources for the target animation. The first size information of the original color image is determined and added to the video resources. After generating the video resources, the playback effect of the target animation can be previewed in the video processing application. At this time, the animation playback command is the user's animation preview operation, and the terminal then plays the target animation based on the video playback application.

[0201] It is understood that although the steps in the above flowcharts are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated in this embodiment, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the above flowcharts may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages in other steps.

[0202] It should be noted that in various specific embodiments of this application, when processing data related to the characteristics of the target object, such as target object attribute information or attribute information sets, is required, the permission or consent of the target object will be obtained first. Furthermore, the collection, use, and processing of this data will comply with the relevant laws, regulations, and standards of the relevant countries and regions. In addition, when embodiments of this application need to obtain target object attribute information, separate permission or consent from the target object will be obtained through pop-up windows or redirection to a confirmation page. Only after obtaining the separate permission or consent of the target object will the necessary target object-related data for the normal operation of the embodiments of this application be obtained.

[0203] Additionally, refer to Figure 13 , Figure 13 This is a schematic diagram of the structure of the animation playback device provided in the embodiments of this application. The animation playback device 1300 includes:

[0204] Resource acquisition module 1301 is used to acquire video resources of the target animation;

[0205] The video decoding module 1302 is used to perform video decoding processing on video resources to obtain a stitched image corresponding to multiple animation frames in the target animation. The stitched image includes original color images and reduced transparent images that are stitched together. The size of the reduced transparent image is smaller than the size of the original color image.

[0206] The image extraction module 1303 is used to extract the first size information of the original color image from the video resource, and to extract the original color image and the reduced transparent image from the stitched image;

[0207] The image synthesis module 1304 is used to enlarge the reduced transparent image according to the first size information to obtain the original transparent image, and synthesize the original color image and the corresponding original transparent image to obtain the frame image corresponding to the animation frame.

[0208] The playback module 1305 is used to play the target animation based on each frame image.

[0209] Furthermore, the video resource includes multiple information storage units for storing media information, each information storage unit being configured with a first unit label indicating the type of information storage unit. The image extraction module 1303 is specifically used for:

[0210] Retrieve the preset second unit label;

[0211] Based on the matching relationship between the second unit label and the first unit label, the target storage unit is determined from multiple information storage units;

[0212] Extract the first size information of the original color image from the target storage unit.

[0213] Furthermore, the image extraction module 1303 is specifically used for:

[0214] Multiple images are stitched together according to a preset order to obtain a merged image.

[0215] Determine the vertex coordinates of the original color image and the scaled-down transparent image in the merged image;

[0216] Based on the vertex coordinate information, the original color image and the scaled-down transparent image corresponding to the stitched image are extracted from the merged image.

[0217] Furthermore, the image extraction module 1303 is specifically used for:

[0218] Extract the vertex coordinates of the original color image and the scaled-down transparent image from the video resources and place them in the merged image.

[0219] Alternatively, extract the second size information of the scaled-down transparent image from the video resource, determine the vertex coordinate information of the original color image in the merged image based on the first size information, and determine the vertex coordinate information of the original color image in the merged image based on the second size information.

[0220] Furthermore, the image extraction module 1303 is specifically used for:

[0221] Based on vertex coordinate information, determine the first target region corresponding to the original color image and the second target region corresponding to the scaled-down transparent image from the merged image;

[0222] Extract all pixels in the first target region to obtain the original color image;

[0223] Extract all pixels in the second target region to obtain a scaled-down transparent image.

[0224] Furthermore, the image synthesis module 1304 is specifically used for:

[0225] Get the first transparency channel value of the first pixel in the original transparent image;

[0226] Adjust the second transparency channel value of the second pixel in the original color image according to the first transparency channel value to obtain the frame image corresponding to the animation frame;

[0227] The position of the first pixel in the original transparent image corresponds to the position of the second pixel in the original color image.

[0228] Furthermore, the playback module 1305 is specifically used for:

[0229] Call the external texture generation component in the target operating system;

[0230] Based on the external texture generation component, each frame image is converted into corresponding external texture data, and the external texture data is cached in the graphics processor;

[0231] Call the texture rendering component in the UI development framework;

[0232] Based on the texture rendering component, external texture data is obtained from the graphics processor, the external texture data is rendered to obtain the rendered image, and the target animation is played based on the rendered image.

[0233] Furthermore, the playback module 1305 is specifically used for:

[0234] Generate a texture identifier corresponding to the external texture data, send the texture identifier to the texture rendering component, and cache the external texture data and the corresponding texture identifier in the graphics processor;

[0235] Obtain the texture identifier and retrieve external texture data from the graphics processor based on the texture identifier.

[0236] The aforementioned animation playback device 1300 and animation playback method are based on the same inventive concept. They employ video decoding of video resources to play animations with special effects, eliminating the need to convert to RGB or RGBA format image files. This reduces memory usage during animation playback, shortens the rendering time of animation effects, and improves playback efficiency. It also reduces storage space usage when playing the target animation. Furthermore, since the stitched image includes a scaled-down transparent image corresponding to the original transparent image, the scaled-down transparent image is restored to the original transparent image based on the first size information of the original color image during frame image synthesis. This effectively reduces the file size of the video resources and lowers storage space usage.

[0237] Additionally, refer to Figure 14 , Figure 14 This is a schematic diagram of the structure of the animation generation apparatus provided in the embodiments of this application. The animation generation apparatus 1400 includes:

[0238] The image separation module 1401 is used to acquire frame images of multiple animation frames in the target animation, perform separation processing on each frame image, and obtain the original transparent image and original color image corresponding to each frame image;

[0239] The image stitching module 1402 is used to reduce the size of the original transparent image to obtain a reduced transparent image corresponding to the original transparent image, and stitch the reduced transparent image with the corresponding original color image to obtain the stitched image corresponding to each animation frame.

[0240] The video encoding module 1403 is used to perform video encoding processing on the stitched image corresponding to multiple animation frames to generate video resources of the target animation;

[0241] The information adding module 1404 is used to determine the first size information of the original color image and add the first size information to the video resource.

[0242] Furthermore, the video resource includes multiple information storage units for storing media information. Each information storage unit is configured with a first unit label indicating the type of the information storage unit. The information adding module 1404 is specifically used for:

[0243] The second unit label receives the input;

[0244] Based on the matching relationship between the second unit label and the first unit label, the target storage unit is determined from multiple information storage units;

[0245] Write the first size information to the target storage unit.

[0246] Furthermore, the information adding module 1404 is also used for:

[0247] Multiple images are stitched together according to a preset order to obtain a merged image.

[0248] Determine the vertex coordinates of the original color image and the scaled-down transparent image in the merged image;

[0249] Add vertex coordinate information to the video resource.

[0250] The animation generation device 1400 and the animation generation method described above are based on the same inventive concept. By generating video resources of the target animation, the target animation with special effects can be played by video decoding. Compared with playing animations with special effects by using image resources, this embodiment of the application plays animations with special effects by video decoding of video resources. It does not require converting to RGB or RGBA format image files, thereby reducing the memory occupied when playing the animation, shortening the time spent rendering animation effects, improving the efficiency of animation playback, and also reducing the storage space occupied when playing the target animation.

[0251] The electronic device provided in this application embodiment for executing the above-described animation playback method or animation generation method can be a terminal, as shown below. Figure 15 , Figure 15The structural block diagram of the terminal provided in this application embodiment includes: a radio frequency (RF) circuit 1510, a memory 1515, an input unit 1630, a display unit 1540, a sensor 1550, an audio circuit 1560, a wireless fidelity (WiFi) module 1570, a processor 1580, and a power supply 1590, etc. Those skilled in the art will understand that... Figure 15 The terminal structure shown does not constitute a limitation on the mobile phone and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0252] RF circuit 1510 can be used to receive and transmit signals during information transmission or calls. In particular, it receives downlink information from the base station and processes it with processor 1580; in addition, it transmits uplink data to the base station.

[0253] The memory 1515 can be used to store software programs and modules, and the processor 1580 executes various functions and data processing of the mobile phone by running the software programs and modules stored in the memory 1515.

[0254] The input unit 1530 can be used to receive input numeric or character information, and to generate key signal inputs related to the settings and function control of the mobile phone. Specifically, the input unit 1530 may include a touch panel 1531 and other input devices 1532.

[0255] The display unit 1540 can be used to display input or provided information, as well as various menus of the mobile phone. The display unit 1540 may include a display panel 1541.

[0256] Audio circuitry 1560, speaker 1561, and microphone 1562 provide an audio interface.

[0257] In this embodiment, the processor 1580 included in the terminal can execute the animation playback method or animation generation method of the previous embodiment.

[0258] The electronic device provided in this application embodiment for executing the above-described animation playback method or animation generation method can also be a server, see reference. Figure 16 , Figure 16The structural block diagram of the server provided in this application embodiment shows that the server 1600 can vary significantly due to different configurations or performance. It may include one or more Central Processing Units (CPUs) 1622 (e.g., one or more processors) and a memory 1632, and one or more storage media 1630 (e.g., one or more mass storage devices) for storing application programs 1642 or data 1644. The memory 1632 and storage media 1630 can be temporary or persistent storage. The program stored in the storage media 1630 may include one or more modules (not shown in the diagram), each module including a series of instruction operations on the server 1600. Furthermore, the CPU 1622 may be configured to communicate with the storage media 1630 and execute the series of instruction operations in the storage media 1630 on the server 1600.

[0259] Server 1600 may also include one or more power supplies 1626, one or more wired or wireless network interfaces 1650, one or more input / output interfaces 1658, and / or one or more operating systems 1641, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.

[0260] The processor in Server 1600 can be used to execute animation playback methods or animation generation methods.

[0261] This application also provides a computer-readable storage medium for storing program code, which is used to execute the animation playback method or animation generation method of the foregoing embodiments.

[0262] This application also provides a computer program product, which includes a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to perform the animation playback method or animation generation method described above.

[0263] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented, for example, in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatuses.

[0264] It should be understood that in this application, "at least one (item)" means one or more, and "more than" means two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent three cases: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one (item) of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0265] It should be understood that in the description of the embodiments of this application, "multiple" means two or more, "greater than", "less than", "exceeding" etc. are understood to exclude the number itself, and "above", "below", "within" etc. are understood to include the number itself.

[0266] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, or indirect coupling or communication connection between apparatuses or units, and may be electrical, mechanical, or other forms.

[0267] The units described as separate components may or may not be physically separate. 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 the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0268] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0269] If the integrated unit is implemented as 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 this application, in essence, 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. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0270] It should also be understood that the various implementation methods provided in this application can be combined arbitrarily to achieve different technical effects.

[0271] The above provides a detailed description of the preferred embodiments of this application. However, this application is not limited to the above-described embodiments. Those skilled in the art can make various equivalent modifications or substitutions without departing from the spirit of this application. All such equivalent modifications or substitutions are included within the scope defined by the claims of this application.

Claims

1. An animation playback method, characterized in that, include: Acquire video resources for the target animation, wherein the video resources include multiple information storage units for storing media information, and each information storage unit is configured with a first unit label for indicating the type of the information storage unit; The video resource is subjected to video decoding processing to obtain a stitched image corresponding to multiple animation frames in the target animation. The stitched image includes original color images and reduced transparent images that are stitched together. The size of the reduced transparent image is smaller than the size of the original color image. Obtain a preset second unit label; determine a target storage unit from multiple information storage units based on the matching relationship between the second unit label and the first unit label; extract the first size information of the original color image from the target storage unit, and extract the original color image and the reduced transparent image from the stitched image, wherein the target storage unit is the information storage unit of the user extended type; The reduced transparent image is enlarged according to the first size information to obtain the original transparent image. The original color image and the corresponding original transparent image are then combined to obtain the frame image corresponding to the animation frame. The target animation is played based on each of the frame images.

2. The animation playback method according to claim 1, characterized in that, The step of extracting the original color image and the reduced transparent image from the stitched image includes: Multiple stitched images are stitched together according to a preset order to obtain a merged image; Determine the vertex coordinate information corresponding to the original color image and the reduced transparent image in the merged image; Based on the vertex coordinate information, the original color image and the reduced transparent image corresponding to the stitched image are extracted from the merged image.

3. The animation playback method according to claim 2, characterized in that, The process of determining the vertex coordinate information corresponding to the original color image and the reduced transparent image in the merged image includes: Extract the vertex coordinate information of the original color image and the reduced transparent image in the merged image from the video resources; Alternatively, the second size information of the reduced transparent image can be extracted from the video resource, the vertex coordinate information of the original color image in the merged image can be determined based on the first size information, and the vertex coordinate information of the original color image in the merged image can be determined based on the second size information.

4. The animation playback method according to claim 2, characterized in that, The step of extracting the original color image and the reduced transparent image corresponding to the stitched image from the merged image based on the vertex coordinate information includes: Based on the vertex coordinate information, determine the first target region corresponding to the original color image and the second target region corresponding to the reduced transparent image from the merged image; Extract all pixels in the first target region to obtain the original color image; Extract all pixels in the second target region to obtain the reduced transparent image.

5. The animation playback method according to claim 1, characterized in that, The process of synthesizing the original color image and the corresponding original transparent image to obtain the frame image corresponding to the animation frame includes: Obtain the first transparency channel value of the first pixel in the original transparent image; Adjust the second transparency channel value of the second pixel in the original color image according to the first transparency channel value to obtain the frame image corresponding to the animation frame; The position of the first pixel in the original transparent image corresponds to the position of the second pixel in the original color image.

6. The animation playback method according to any one of claims 1 to 5, characterized in that, Playing the target animation based on each of the frame images includes: Call the external texture generation component in the target operating system; Based on the external texture generation component, each frame image is converted into corresponding external texture data, and the external texture data is cached in the graphics processor; Call the texture rendering component in the UI development framework; Based on the texture rendering component, the external texture data is obtained from the graphics processor, the external texture data is rendered to obtain a rendered image, and the target animation is played based on the rendered image.

7. The animation playback method according to claim 6, characterized in that: The step of caching the external texture data to the graphics processor includes: Generate a texture identifier corresponding to the external texture data, send the texture identifier to the texture rendering component, and cache the external texture data and the corresponding texture identifier in the graphics processor; The step of obtaining the external texture data from the graphics processor includes: Obtain the texture identifier, and obtain the external texture data from the graphics processor based on the texture identifier.

8. An animation generation method, characterized in that, include: Frame images of multiple animation frames in the target animation are obtained, and each frame image is separated to obtain the original transparent image and original color image corresponding to each frame image; The original transparent image is reduced in size to obtain a reduced transparent image corresponding to the original transparent image. The reduced transparent image is then stitched together with the corresponding original color image to obtain a stitched image corresponding to each animation frame. Video encoding processing is performed on the stitched image corresponding to multiple animation frames to generate video resources of the target animation. The video resources include multiple information storage units for storing media information, and each information storage unit is configured with a first unit label for indicating the type of the information storage unit. Determine the first size information of the original color image, and receive the input second unit label; determine the target storage unit from the plurality of information storage units according to the matching relationship between the second unit label and the first unit label; The first size information is written into the target storage unit, which is the information storage unit of the user extended type.

9. The animation generation method according to claim 8, characterized in that, The animation generation method further includes: Multiple stitched images are stitched together according to a preset order to obtain a merged image; Determine the vertex coordinate information of the original color image and the reduced transparent image in the merged image; Add the vertex coordinate information to the video resource.

10. An animation playback device, characterized in that, include: The resource acquisition module is used to acquire video resources of the target animation. The video resources include multiple information storage units for storing media information. Each information storage unit is configured with a first unit label for indicating the type of the information storage unit. The video decoding module is used to perform video decoding processing on the video resource to obtain a stitched image corresponding to multiple animation frames in the target animation. The stitched image includes original color images and reduced transparent images that are stitched together. The size of the reduced transparent image is smaller than the size of the original color image. An image extraction module is used to obtain a preset second unit label; determine a target storage unit from multiple information storage units based on the matching relationship between the second unit label and the first unit label; extract the first size information of the original color image from the target storage unit; and extract the original color image and the reduced transparent image from the stitched image. The target storage unit is the information storage unit of the user-extended type. An image compositing module is used to enlarge the reduced transparent image according to the first size information to obtain the original transparent image, and to compose the original color image and the corresponding original transparent image to obtain the frame image corresponding to the animation frame. A playback module is used to play the target animation based on each of the frame images.

11. An animation generation device, characterized in that, include: The image separation module is used to acquire frame images of multiple animation frames in the target animation, perform separation processing on each frame image, and obtain the original transparent image and original color image corresponding to each frame image; The image stitching module is used to reduce the size of the original transparent image to obtain a reduced transparent image corresponding to the original transparent image, and stitch the reduced transparent image with the corresponding original color image to obtain a stitched image corresponding to each animation frame; A video encoding module is used to perform video encoding processing on the spliced ​​image corresponding to multiple animation frames to generate video resources of the target animation. The video resources include multiple information storage units for storing media information, and each information storage unit is configured with a first unit label for indicating the type of the information storage unit. The information addition module is used to determine the first size information of the original color image and receive the input second unit label; Based on the matching relationship between the second unit tag and the first unit tag, a target storage unit is determined from the plurality of information storage units; The first size information is written into the target storage unit, which is the information storage unit of the user extended type.

12. An electronic device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the animation playback method according to any one of claims 1 to 7, or the animation generation method according to any one of claims 8 to 9.

13. A computer-readable storage medium storing a program, characterized in that, When the program is executed by the processor, it implements the animation playback method according to any one of claims 1 to 7, or the animation generation method according to any one of claims 8 to 9.

14. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the animation playback method according to any one of claims 1 to 7, or the animation generation method according to any one of claims 8 to 9.

Images