Animation rendering method, device, computer-readable storage medium, and computer equipment

Abstract

The present application relates to an animation rendering method, device, computer-readable storage medium and computer equipment, the method comprising: obtaining an animation file in a target format; determining an animation drawing data interval obtained by decoding the animation file and meeting a static condition; caching the starting animation drawing data in the animation drawing data interval; when the animation drawing data corresponding to the frame to be played during the playback of the animation file meets the static condition, reading the cached starting animation drawing data corresponding to the frame to be played; performing animation rendering according to the read starting animation drawing data. The solution provided by the present application can reduce the amount of calculation in the rendering process and ensure the smoothness of animation playback.

Description

Technical Field

[0001] The present application relates to the field of image processing technology, and in particular to an animation rendering method, apparatus, computer-readable storage medium, and computer equipment. Background Art

[0002] With the continuous development of image processing technology and network technology, the application of animation is becoming more and more extensive. For example, setting animation on the client page can improve the viewing effect of the page. Or, when the user shoots a video through the client, he can select the corresponding animation to be synthesized with the shot video, so that the shot video has the animation effect the user wants.

[0003] When playing an animation, it is necessary to decode the corresponding animation file to obtain the animation data of the key frame, and then calculate the animation data of the animation frame to be played based on the animation data of the key frame, and then render and display it on the screen. However, in the traditional rendering scheme, it is necessary to calculate the animation data of the current animation frame to be played based on the animation data of the key animation frame and then render to obtain the rendering data, thereby increasing the amount of calculation in the rendering process, which may affect the smoothness of the animation playback. Summary of the invention

[0004] Based on this, it is necessary to provide an animation rendering method, apparatus, computer-readable storage medium and computer equipment to address the technical problem that the amount of calculation in the rendering process is large and affects the smoothness of animation playback.

[0005] An animation rendering method, comprising:

[0006] Get the animation file in the target format;

[0007] Determine an animation drawing data interval obtained by decoding the animation file and meeting a still condition;

[0008] Buffering the initial animation drawing data in the animation drawing data interval;

[0009] When the animation drawing data corresponding to the frame to be played during the playing of the animation file meets the static condition, the cached starting animation drawing data corresponding to the frame to be played is read;

[0010] Animation rendering is performed according to the read initial animation drawing data.

[0011] An animation rendering device, comprising:

[0012] File acquisition module, used to acquire animation files in target format;

[0013] A determination module, used to determine the animation drawing data interval obtained by decoding the animation file and meeting the static condition;

[0014] A data cache module, used for caching the initial animation drawing data in the animation drawing data interval;

[0015] A data reading module, used for reading cached starting animation drawing data corresponding to the frame to be played when the animation drawing data corresponding to the frame to be played during the playing of the animation file meets the static condition;

[0016] The animation rendering module is used to perform animation rendering according to the read starting animation drawing data.

[0017] A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor executes the steps of the above animation rendering method.

[0018] A computer device comprises a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the above animation rendering method.

[0019] The above-mentioned animation rendering method, device, computer-readable storage medium and computer equipment cache the starting animation drawing data of the animation drawing data that meets the still condition. When the attribute value of the corresponding animation frame is played and meets the still condition, the starting animation drawing data corresponding to the frame to be played is directly obtained from the cache, and there is no need to parse the animation file again to obtain the animation drawing data corresponding to the frame to be played, thereby avoiding a large amount of calculation, saving time in the rendering process, and making the animation playback smoother. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 A diagram showing an application environment of an animation rendering method in an embodiment;

[0021] Figure 2 A schematic diagram of a flow chart of an animation rendering method in one embodiment;

[0022] Figure 3 A schematic flow chart of steps of decoding an animation file to obtain animation drawing data and determining an animation drawing data interval in one embodiment;

[0023] Figure 4 A schematic diagram of a flow chart of a step of calculating an animation drawing data interval of an animation layer in one embodiment;

[0024] Figure 5 A schematic diagram of calculating a static interval of an animation layer in one embodiment;

[0025] Figure 6A schematic diagram of a flow chart of steps of rendering an animation according to a starting animation attribute value and an acquired animation attribute value in one embodiment;

[0026] Figure 7 A schematic diagram of a flow chart of steps of rendering an animation according to the initial group drawing data and the acquired group drawing data in one embodiment;

[0027] Figure 8 A schematic flow chart of rendering steps using shared animation drawing data when multiple applications play the same animation in one embodiment;

[0028] Fig. 9 A schematic diagram of a flow chart of animation rendering data caching and rendering steps in one embodiment;

[0029] Fig.10 A schematic diagram of a flow chart of an off-screen rendering step in an embodiment;

[0030] Fig.11 It is a flowchart of a step of saving animation rendering data of a vector image with the largest size when multiple animation layers contain the same vector image in one embodiment;

[0031] Fig.12 A schematic diagram of a flow chart of a step of calculating an animation region of a pre-synthesized attribute group in one embodiment;

[0032] Fig.13 A schematic diagram of an animation region of a pre-synthesized attribute group in one embodiment;

[0033] Fig.14 is a structural diagram of Transform2D in one embodiment;

[0034] Fig.15 It is a flowchart of a static interval division method in one embodiment;

[0035] Fig.16 A schematic diagram of rendering time consumption when the cache strategy is fully enabled in one embodiment;

[0036] Fig.17 A schematic diagram of rendering time consumption when rendering data cache is turned off in one embodiment;

[0037] Fig.18 A schematic diagram of rendering time consumption when drawing data cache is turned off in one embodiment;

[0038] Fig.19 A schematic diagram of rendering time when all cache strategies are turned off in one embodiment;

[0039] Fig. 20 is a structural block diagram of an animation rendering device in an embodiment;

[0040] Fig.21 is a structural block diagram of an animation rendering device in another embodiment;

[0041] Fig. 22 FIG. 4 is a structural block diagram of a computer device in one embodiment. DETAILED DESCRIPTION

[0042] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0043] Figure 1 FIG. 1 is an application environment diagram of an animation rendering method in an embodiment. Figure 1 , the animation rendering method is applied to an animation rendering system. The animation rendering system includes a terminal 110 and a server 120. The terminal 110 and the server 120 are connected via a network. The terminal 110 can be a desktop terminal or a mobile terminal, and the mobile terminal can be at least one of a mobile phone, a tablet computer, a laptop computer, etc. The server 120 can be implemented by an independent server or a server group consisting of multiple servers.

[0044] like Figure 2 As shown, in one embodiment, an animation rendering method is provided. This embodiment mainly applies this method to the above Figure 1 The terminal 110 in FIG. Figure 2 , the animation rendering method specifically includes the following steps:

[0045] S202, obtaining an animation file in a target format.

[0046] Among them, the target format can be PAG format, with the suffix PAG (or pag). Animation files in PAG format can be obtained by integrating resources such as text or images into a single file. In addition, animation files in PAG format use dynamic bit storage technology with extremely high compression rate. In addition, animation files in PAG format can be run across platforms, and at runtime, the text content, font size and style in the animation can be dynamically modified arbitrarily while retaining the animation effect, and the image content can be replaced to achieve rich and diverse animation content customization effects.

[0047] In one embodiment, when a trigger event is detected, the terminal obtains an animation file in a target format. The trigger event may be an external input operation instruction, such as an animation play instruction.

[0048] In one embodiment, before S202, the method may further include: after the animation file is produced by the AE (Adobe After Effects, Adobe post animation synthesis) client, the animation file in the target format is exported by the PAG export plug-in installed in the AE client. In the process of exporting the animation file in the target format, the animation file can be encoded by the target encoding method. The target encoding method can be any one of Huffman encoding, Shannon encoding, RLC (Run Length Code, run length encoding), LZW (Lenpel-Ziv & Welch) encoding, arithmetic encoding, predictive encoding, transform encoding and quantization encoding.

[0049] The installed PAG export plug-in is a plug-in developed for the AE client to export the target format. When exporting animation files on the AE client, there are at least three export methods to choose from, such as vector synthesis export, sequence frame export, and video synthesis export. It should be noted that the animation file in the target format requires the installation of a specific PAG export plug-in on the AE client.

[0050] Animation rendering can be applied to animation playback in specific application scenarios. Therefore, the method of obtaining the animation file in S202 can be divided according to the application scenario of animation playback:

[0051] Scenario 1: Play the animation on the client's display page.

[0052] In one embodiment, during the process of opening the client, the terminal obtains an animation file in a target format from a locally stored animation library; or, the terminal sends an animation acquisition instruction to the server, and receives an animation file in a target format in response to the animation acquisition instruction, so that when the client is opened, the opening animation is played on the opening page according to the animation file. The opening page of the client is a type of display page.

[0053] For example, to add animation effects to the client's opening page, you can obtain an animation file in PAG format for playing on the opening page when you open the client, so that you can play the animation on the opening page according to the animation file in PAG format, thereby increasing the animation effect of the opening page and improving the user experience.

[0054] In one embodiment, after the client is turned on, if the display page scrolls to the target position, the terminal obtains the animation file in the target format from the locally stored animation library; or, the terminal sends an animation acquisition instruction to the server, and receives the animation file in the target format in response to the animation acquisition instruction, so as to play the opening animation according to the animation file on the display page scrolled to the target position.

[0055] For example, when the client's display page scrolls to the bottom, an animation file in PAG format can be obtained for playing at the bottom of the display page, so that the user can watch the animation when the display page is scrolled to the bottom. Setting animation effects on the client display page can improve user experience.

[0056] Scenario 2: When the client plays a video or displays an image, an animation is displayed at the corresponding position of the video or image.

[0057] When shooting a video or image, if the provided animation is selected on the shooting page, the shot video or image includes the corresponding animation. In one embodiment, when a video needs to be played, the terminal selects a specified video identifier according to the input selection instruction, obtains a corresponding IP (Internet Protocol) address according to the video identifier, and obtains a video file and a corresponding animation file according to the IP address, so that when playing the video, the animation is played at a set position in the video.

[0058] S204: Determine an animation drawing data interval obtained by decoding the animation file and meeting the still condition.

[0059] Among them, the animation drawing data can be called the drawing data of the PAG animation, which can be data used to describe or draw the PAG animation content. The animation can be rendered according to the animation drawing data, and then the corresponding PAG animation content for display can be obtained by displaying it on the screen. By rendering an animation of a certain instantaneous animation drawing data in the animation drawing data interval and then displaying it on the screen, a certain frame of animation can be obtained. Therefore, the instantaneous animation drawing data is the data that constitutes a certain animation frame and has a corresponding relationship with the animation frame. The animation drawing data interval that meets the static condition can be a data interval in which the animation drawing data does not change within a period of time.

[0060] It should be noted that the animation drawing data interval that meets the static condition can be understood as the static interval of the animation drawing data, that is, the static interval of the animation layer. When the animation file has one animation layer, the animation drawing data interval is the static interval of the animation file; when the animation file has multiple animation layers, the intersection of the animation drawing data intervals is the static interval of the animation file. In the subsequent embodiments, unless otherwise specified, the animation drawing data interval is the drawing data interval that meets the static condition.

[0061] The static condition may refer to no change within a time range. For example, from a macroscopic point of view, the static condition may refer to the animation not changing within a time range during the playback process (i.e., the animation remains static within the time range). From a microscopic point of view, the static condition may refer to the animation drawing data constituting the animation frame not changing within a time range. Further, the animation drawing data is composed of group drawing data, so the static condition may refer to the group drawing data not changing within a time range. Further, the group drawing data is composed of animation attribute values, so the static condition may also refer to the animation attribute value not changing within a time range. Among them, the animation attribute value may be the color, size, font, and movement parameters of the text in the animation. The animation attribute value is related to the change of time. For example, the animation attribute value may be linearly related to time, i.e., the animation attribute value increases or decreases proportionally with time; the animation attribute value may also be Bezier-related to time, i.e., the animation attribute value changes with time in a Bezier curve; the animation attribute value may also be of the Hold type with time, i.e., the animation attribute value does not change within a time range, i.e., it meets the static condition.

[0062] It should be noted that the animation attribute value is a parameter value of the timeline attribute, and the timeline attribute may be an attribute related to the change of the animation attribute value with time.

[0063] Each animation frame in an animation file can be composed of multiple animation layers (i.e., animation layers), and animation layers can be composed of smaller animation attribute groups. There are six types of animation attribute groups, including: transform, mask within the layer, trackMatter between layers, layer style, effect, and content. The animation attribute group of the content class contains drawable elements, such as image, text, and shape, so the animation attribute group of the content class is the drawable element attribute group. The content contained in the animation attribute group can be described by the corresponding animation attribute value, or it can be said that the animation attribute value is the element in the animation attribute group. For example, when rendering graphics, the shape can be described by the two animation attribute values ​​of path information and paint information.

[0064] In one embodiment, after obtaining the animation file in the target format, the terminal can load and decode the animation file through the client to obtain the animation file object. Then, the terminal traverses the animation attribute value list on the animation file object, combines the traversed animation attribute values ​​according to the corresponding animation attribute group, and obtains the group drawing data. The terminal combines the group drawing data according to the corresponding animation layer to obtain the animation drawing data.

[0065] In one embodiment, for determining the animation drawing data interval that meets the static condition, the terminal may first find the animation attribute value interval that meets the static condition. Since the animation drawing data includes the group drawing data, and the group drawing data includes the animation attribute value, the terminal first calculates the intersection of the animation attribute value intervals in the animation attribute group, and uses the intersection of the animation attribute value intervals as the group drawing data interval that meets the static condition, and then uses the bubble algorithm to calculate the animation drawing data interval that meets the static condition.

[0066] S206: Buffer the initial animation drawing data in the animation drawing data interval.

[0067] Among them, since the animation drawing data in the animation drawing data interval does not change with time, each instantaneous animation drawing data in the animation drawing data interval is the same. In addition, there is a corresponding relationship between a certain instantaneous animation drawing data in the animation drawing data interval and the animation frame. When caching the animation drawing data, the terminal only needs to cache the starting animation drawing data in the animation drawing data interval, and the picture in the corresponding animation frame can be rendered through the starting animation drawing data.

[0068] In one embodiment, after determining the animation drawing data interval that meets the static condition, the terminal obtains the starting animation drawing data in the animation drawing data interval, and then caches the obtained starting animation drawing data, wherein the starting animation drawing data is instantaneous animation drawing data.

[0069] For example, for animation file A, assuming there are 100 frames in total, the animation of the first ten frames is static, that is, the animation drawing data of the first ten frames meets the static condition. Therefore, the terminal can obtain the animation drawing data of the first frame in the first ten frames and then cache it.

[0070] S208, when the animation drawing data corresponding to the frame to be played during the playing of the animation file meets the static condition, the cached starting animation drawing data corresponding to the frame to be played is read.

[0071] In one embodiment, during playback, the terminal detects the playback progress of the animation file in real time. If the current frame to be played is static, that is, the animation drawing data corresponding to the frame to be played meets the static condition, the starting animation drawing data corresponding to the frame to be played is read from the cache.

[0072] For example, for animation file A, assuming that there are 100 frames in total, the animation drawing data of the first ten frames meet the static condition. During the playback of animation file A, if the first frame is played and the second frame needs to be played, since the animation drawing data of the first ten frames meet the static condition, the terminal only needs to read the animation drawing data of the first frame from the cache.

[0073] In one embodiment, a corresponding identifier can be set for each animation drawing data interval. When the animation drawing data corresponding to the frame to be played during the playback of the animation file meets the static condition, the starting animation drawing data is read from the cache according to the set identifier, and the read starting animation drawing data corresponds to the frame to be played.

[0074] S210: Perform animation rendering according to the read starting animation drawing data.

[0075] In one embodiment, the terminal calls a rendering tool to render the read initial animation drawing data to obtain visual animation rendering data, and then displays the animation rendering data on the screen.

[0076] For example, the terminal calls WebGL (Web Graphics Library), or OpenGL ES (OpenGraphics Library for Embedded Systems), or OpenGL ES2.0 to render the read initial animation drawing data, and then displays the rendered animation rendering data on the screen.

[0077] As an example, for animation file A, if the first ten frames of the total 100 frames of animation are static, when caching the animation drawing data, only the animation drawing data corresponding to the first frame needs to be cached. When playing the second to tenth frames, the terminal only needs to obtain the animation drawing data corresponding to the cached first frame, render the animation drawing data corresponding to the first frame, and then obtain the animation rendering data of the 2nd to 10th frames, and then display them on the screen to obtain the animation of the 2nd to 10th frames.

[0078] In the above embodiment, the starting animation drawing data of the animation drawing data that meets the still condition is cached, and when the attribute value of the corresponding animation frame meets the still condition, the starting animation drawing data corresponding to the frame to be played is directly obtained from the cache, and there is no need to parse the animation file again to obtain the animation drawing data corresponding to the frame to be played, thereby avoiding a large amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0079] In one embodiment, Figure 3As shown, S204 may specifically include:

[0080] S302: Decode the animation file to obtain an animation file object.

[0081] The animation file object includes various data related to the animation frame, such as the animation attribute value with the smallest particle size used to describe the animation.

[0082] In one embodiment, when an animation file needs to be played, the terminal parses the animation file in the target format through the client to obtain binary animation data. The terminal reads the binary animation data bit by bit to obtain the animation file object.

[0083] In one embodiment, when more than one application in the client plays the same animation, the terminal only decodes the same animation file and caches the decoded animation file object. When more than one application plays the same animation, the animation file object can be read from the cached animation file.

[0084] For example, when the client needs to play the same animation, it only needs to load the same animation file into memory and decode it into an animation file object. When playing multiple identical animations at the same time, the cached animation file objects can be reused.

[0085] In one embodiment, when more than one application plays the same animation in the client, the terminal only decodes the same animation file to obtain the animation file object, and caches the starting animation drawing data in the animation drawing data interval that meets the static condition read from the animation file object. When more than one application plays the same animation, the starting animation drawing data corresponding to the to-be-played frame of each application can be read from the cache.

[0086] S304, reading the animation drawing data in the animation file object.

[0087] In one embodiment, the terminal traverses the animation attribute value list on the animation file object, combines the traversed animation attribute values ​​according to the corresponding animation attribute group, and obtains group drawing data. The terminal combines the group drawing data according to the corresponding animation layer to obtain animation drawing data.

[0088] S306: Determine an animation drawing data interval that meets the static condition from the read animation drawing data.

[0089] In one embodiment, for determining the animation drawing data interval that meets the static condition, the terminal may first find the animation attribute value interval that meets the static condition. Since the animation drawing data includes the group drawing data, and the group drawing data includes the animation attribute value, the terminal first calculates the intersection of the animation attribute value intervals in the animation attribute group, and uses the intersection of the animation attribute value intervals as the group drawing data interval that meets the static condition, and then uses the bubble algorithm to calculate the animation drawing data interval that meets the static condition.

[0090] In one embodiment, when an animation file is played in more than one application, the terminal determines the playback progress corresponding to each application; when the animation drawing data of the frame to be played corresponding to the playback progress meets the still condition, the cached starting animation drawing data corresponding to the playback progress and shared by more than one application is read.

[0091] In the above embodiment, the animation file object is obtained by decoding the animation file, the animation drawing data in the animation file object is read, and then the animation drawing data interval that meets the static condition in the animation file object is found, so that the starting animation drawing data in the animation drawing data interval is cached, so that when the attribute value of the corresponding animation frame meets the static condition, the starting animation drawing data corresponding to the frame to be played is directly obtained from the cache, thereby avoiding a large amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0092] In one embodiment, Figure 4 As shown, the animation file includes at least one animation layer; each animation layer includes at least two animation attribute groups; each animation attribute group includes at least two animation attribute values; S204 may specifically include:

[0093] S402: Determine the intervals of the animation attribute values ​​in the animation attribute group that meet the static condition.

[0094] There are six types of animation attribute groups, including transform, mask, trackMatter, layerStyle, effect and content. Animation attribute values ​​are elements in the animation attribute group. For mask, path information and mask mode can be used to draw it, so path information and mask mode are the animation attribute values ​​of mask. Animation attribute values ​​are values ​​related to changes in time. For example, animation attribute values ​​increase or decrease proportionally with time, or animation attribute values ​​change with time in a Bezier curve, or animation attribute values ​​do not change with time within a period of time.

[0095] It should be noted that the animation attribute value interval that meets the static condition can be understood as the static interval of the animation attribute value.

[0096] In one embodiment, the terminal searches for animation attribute values ​​that do not change over time in a time range in the animation attribute group, and the time range can be used as the animation attribute value interval that meets the static condition. It should be noted that the above time range can be a time interval measured in a specific time unit, or a time interval measured in a frame unit.

[0097] S404: Using the intersection of the animation attribute value intervals as a group drawing data interval of the animation attribute group.

[0098] The group drawing data interval can be understood as a static interval of the group drawing data, that is, a static interval of the animation attribute group.

[0099] In one embodiment, the terminal calculates the intersection between the animation attribute value intervals, takes the intersection of the animation attribute value intervals as the group drawing data interval of the animation attribute group, and then executes S406, that is, using a bubbling algorithm to calculate the animation drawing data interval of the animation layer.

[0100] In one embodiment, when there is no intersection between the animation attribute value intervals, the starting animation attribute value of each animation attribute value interval is cached. Wherein, if there is no intersection between the animation attribute value intervals, it means that at least one animation attribute value in the animation attribute group changes with time, so the animation attribute group also changes with time, that is, the animation attribute value group does not meet the static condition (that is, the animation attribute value group does not have a static interval), but at least one animation attribute value in the animation attribute value group meets the static condition, and then the animation attribute value interval that meets the static condition is found, and the starting animation attribute value of the animation attribute value interval is cached.

[0101] In one embodiment, when the animation attribute group is a drawable element attribute group, the animation attribute group includes at least two drawable elements; the drawable element includes at least two animation attribute values; the method further includes: the terminal determines the intersection of the animation attribute value intervals as the element interval of the drawable element, and calculates the intersection between the element intervals of the drawable element. S404 may specifically include: determining the intersection between the element intervals as the group drawing data interval of the animation attribute group.

[0102] Among them, the animation attribute group includes six types of animation attribute groups, such as transform, mask, trackMatter, layerStyle, effect and content. The content type of animation attribute group is an indispensable component of the animation layer. It represents the drawable elements of the animation layer, such as shape, text, solid, pre-composition (PreCompose) and image, etc., while other groups are some processing based on content, such as translation and scaling, adding masks, adding filter effects, etc. Due to the diversity of Content, it is necessary to cache specific drawable elements.

[0103] S406: Determine the intersection of the group drawing data intervals as the animation drawing data interval of the animation layer.

[0104] The animation drawing data interval can be understood as a static interval of the animation drawing data, that is, a static interval of the animation layer.

[0105] In one embodiment, the terminal calculates the intersection of each group of drawing data intervals, and determines the intersection of the group of drawing data intervals as the animation drawing data interval of the animation layer.

[0106] An animation file is composed of at least one animation layer, one animation layer corresponds to one animation drawing data, and the animation drawing data is composed of at least one group drawing data. The corresponding animation can be obtained by rendering each animation drawing data and then displaying it on the screen.

[0107] In one embodiment, when there is no intersection between the group drawing data intervals, the starting group drawing data of each group drawing data interval is cached. Wherein, if there is no intersection between the group drawing data intervals, it means that at least one group drawing data in the animation layer changes with time, so the animation layer also changes with time, that is, the group drawing data group does not meet the static condition, but at least one group drawing data in the group drawing data group meets the static condition, then the group drawing data interval that meets the static condition is found, and the starting group drawing data of the group drawing data interval is cached.

[0108] In one embodiment, when the number of animation layers in the animation file is one, the terminal uses the animation drawing data interval as the animation static interval. When the number of animation layers in the animation file is multiple, the terminal calculates the intersection between the animation drawing data intervals of each number of animation layers, and uses the intersection between the animation drawing data intervals as the animation static interval.

[0109] It should be noted that when an animation file has multiple animation layers, if there is an animation drawing data interval that meets the static condition, then during the animation drawing data interval, the image or text in the corresponding animation layer does not change (i.e., it is in a static state). When an animation file has multiple animation layers, if there is an animation static interval, then during the animation static interval, all images or text in the animation do not change (i.e., they are in a static state).

[0110] In one embodiment, if the animation file includes not only the animation layer but also the pre-synthesis property group, the pre-synthesis property group can be regarded as a sub-animation file, and the sub-animation file can include at least one animation layer and / or a nested sub-pre-synthesis property group. In calculating the static intervals of the animation layer, animation property group and animation property value in the pre-synthesis property group, reference can be made to the method of the above embodiment.

[0111] As an example, Figure 5 As shown, for an animation layer of an animation file, if the animation layer consists of three groups, namely transform, mask and content. Among them, [t1, t2] represents the static interval of transform, that is, the animation layer has not undergone any transformation (such as no translation, scaling and rotation, etc.); [m1, m2] represents the static interval of mask, that is, the animation layer has always used the same mask and the mask has not changed; [c1, c2] and [c3, c4] represent the static interval of content, that is, the animation layer has applied the same text and the same image respectively, and the text has not changed during [c1, c2], and the image has not changed during [c3, c4]. It should be noted that t1, t2, m1, m2, c1, c2, c3 and c4 can be represented by frames, for example, t1 can represent the first frame of the animation, m1 can represent the third frame of the animation, and t2 can represent the tenth frame of the animation.

[0112] For content, [c1, c2] and [c3, c4] are static intervals of content. When playing an animation file, the terminal only needs to parse the text at time c1 and the image at time c3 once, and cache and mark the parsed text and image. When the frame to be drawn for animation playback is c, and c belongs to the [c1, c2] interval, the terminal does not need to re-parse the text of frame c, but can directly obtain the group drawing data of frame c1 from the cache, and then render the text according to the group drawing data of frame c1. The rendered text is exactly the same as the text of frame c.

[0113] The above only considers the content group scenario. For an animation layer, it is usually composed of multiple groups. For example, for an animation layer that only contains three groups: transform, mask, and content, its static interval is the intersection of the transform, mask, and content static intervals. Figure 5 As shown, the static interval should have two sections: [m1,c2] and [c3,t2]. For details, please refer to Figure 5 The dotted line cuts off the part.

[0114] In the above embodiment, the animation attribute value interval that meets the static condition is first determined, and then the animation drawing data interval is calculated using a bubbling algorithm, so that the starting animation drawing data in the animation drawing data interval is cached. When the attribute value of the corresponding animation frame meets the static condition, the starting animation drawing data corresponding to the frame to be played is directly obtained from the cache, thereby avoiding a large amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0115] In one embodiment, Figure 6 As shown, the method also includes:

[0116] S602: When there is no intersection between the animation attribute value intervals, cache the starting animation attribute value of the animation attribute value interval.

[0117] The animation attribute value interval can be understood as the static interval of the animation attribute value. If there is no intersection between the animation attribute value intervals, it means that at least one animation attribute value in the animation attribute group changes with time, so the animation attribute group also changes with time, that is, there is no static interval in the animation attribute value group, but at least one animation attribute value in the animation attribute value group meets the static condition, and then find the animation attribute value interval that meets the static condition, and cache the starting animation attribute value of the animation attribute value interval.

[0118] S604, when the animation drawing data corresponding to the frame to be played during the playing of the animation file does not meet the static condition and there is no intersection between the animation attribute value intervals, the cached start animation attribute value corresponding to the frame to be played is read.

[0119] The animation drawing data interval can be understood as the static interval of the animation drawing data, that is, the static interval of the animation layer. During the playback of the animation file, the animation drawing data corresponding to the frame to be played does not meet the static condition, and there is no intersection between the animation attribute value intervals, which means that the animation drawing data corresponding to the frame to be played does not hit the corresponding static interval, and the group drawing data corresponding to the frame to be played also does not hit the corresponding static interval.

[0120] In one embodiment, when playing an animation file, if the animation drawing data corresponding to the frame to be played does not hit the static interval, S208 is executed. If the animation drawing data corresponding to the frame to be played does not hit the static interval, the terminal continues to search the small particles (i.e., group drawing data) in the animation drawing data to find out whether the group drawing data corresponding to the frame to be played hits the corresponding static interval. If it hits, the starting group drawing data corresponding to the frame to be played is obtained from the cache, and then the group drawing data corresponding to the frame to be played and in the non-static interval is parsed from the animation file object, so that the terminal can perform animation rendering according to the obtained starting group drawing data and the parsed group drawing data.

[0121] In one embodiment, if the animation drawing data corresponding to the frame to be played does not hit the corresponding still interval, and the group drawing data corresponding to the frame to be played also does not hit the corresponding still interval, the terminal continues to search the small particles (i.e., animation attribute values) in the group drawing data to find out whether the animation attribute value corresponding to the frame to be played hits the corresponding still interval. If it hits, the starting animation attribute value corresponding to the frame to be played is obtained from the cache, and then S606 is executed.

[0122] Due to the existence of the static interval, when a certain frame is played, it is necessary to traverse all animation layers. If the current frame to be played hits the static interval of the animation layer, then for the animation layer, the data of all frames in the entire static interval are the same, so the corresponding starting drawing data can be directly obtained from the cache. If the static interval of the animation layer is not hit, all groups of the animation layer are traversed again. If the static interval of the group is hit, the terminal directly uses the starting group drawing data in the static interval of the group; in addition, the group drawing data corresponding to the frame to be played and which is a non-static interval is parsed from the animation file object. If the static interval of the group is not hit, the terminal traverses all animation attribute values ​​of the group again. If the static interval of the animation attribute value is hit, the terminal directly uses the starting animation attribute value in the static interval of the animation attribute value. In addition, S606 is also executed.

[0123] S606: Obtain, from the animation file object obtained by decoding the animation file, animation attribute values ​​corresponding to the frame to be played and not meeting the still condition.

[0124] In one embodiment, when the starting animation attribute value corresponding to the frame to be played is read, the terminal also parses the animation attribute value corresponding to the frame to be played and in the non-static interval from the animation file object, so that the terminal can perform animation rendering according to the obtained starting animation attribute value and the animation attribute value obtained by parsing.

[0125] S608: Perform animation rendering according to the read starting animation attribute value and the acquired animation attribute value.

[0126] Among them, for the frame to be played, its animation drawing data can be composed of animation attribute values ​​in the static interval and animation attribute values ​​in the non-static interval. For the animation attribute values ​​in the static interval, the starting animation attribute values ​​corresponding to the frame to be played can be directly read from the cache without parsing from the animation file object.

[0127] In one embodiment, the initial animation attribute value read by the terminal and the acquired animation attribute value are converted into animation drawing data, and then animation rendering is performed according to the animation drawing data.

[0128] In the above embodiment, when the animation layer and the animation attribute group do not have a static interval, the starting animation attribute value of the animation attribute value with a static interval is cached. When the frame to be played hits the static interval of the animation attribute value, the starting animation attribute value corresponding to the frame to be played is read from the cache, and there is no need to parse the animation attribute value belonging to the static interval from the animation file object, thereby reducing the amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0129] In one embodiment, Figure 7 As shown, the method also includes:

[0130] S702 : When there is an intersection between the animation attribute value intervals but there is no intersection between the group drawing data intervals, buffer the initial group drawing data of the group drawing data interval.

[0131] The animation attribute value interval can be understood as the static interval of the animation attribute value. If there is an intersection between the animation attribute value intervals, it means that all animation attribute values ​​in the animation attribute group do not change over time, so the animation attribute group has a static interval. If the animation layer does not have a static interval, the terminal caches the starting group drawing data of the group drawing data interval.

[0132] S704, when the animation drawing data corresponding to the frame to be played during the playing of the animation file does not meet the static condition, the buffered initial group drawing data corresponding to the frame to be played is read.

[0133] The animation drawing data interval can be understood as the static interval of the animation drawing data, that is, the static interval of the animation layer. During the playback of the animation file, the animation drawing data corresponding to the frame to be played does not meet the static condition, and there is an intersection between the animation attribute value intervals, which means that the animation drawing data corresponding to the frame to be played does not hit the corresponding static interval, but at least part of the group drawing data corresponding to the frame to be played hits the corresponding static interval.

[0134] In one embodiment, when playing an animation file, if the animation drawing data corresponding to the frame to be played does not hit the static interval, S208 is executed. If the animation drawing data corresponding to the frame to be played does not hit the static interval, the terminal continues to search the small particles (i.e., group drawing data) in the animation drawing data to find out whether the group drawing data corresponding to the frame to be played hits the corresponding static interval. If it hits, the starting group drawing data corresponding to the frame to be played is obtained from the cache, and then S706 is executed.

[0135] S706: Acquire, from the animation file object obtained by decoding the animation file, group drawing data corresponding to the frame to be played and not meeting the static condition.

[0136] In one embodiment, when the starting group drawing data corresponding to the frame to be played is read, the terminal also parses the group drawing data corresponding to the frame to be played and in the non-static interval from the animation file object, so that the terminal can perform animation rendering according to the obtained starting group drawing data and the parsed group drawing data.

[0137] S708 , performing animation rendering according to the read initial group drawing data and the acquired group drawing data.

[0138] Among them, for the frame to be played, its animation drawing data can be composed of group drawing data in the static interval and group drawing data in the non-static interval. For the group drawing data in the static interval, the starting group drawing data corresponding to the frame to be played can be directly read from the cache without parsing from the animation file object.

[0139] In one embodiment, the initial group drawing data read by the terminal and the acquired group drawing data are converted into animation drawing data, and then animation rendering is performed according to the animation drawing data.

[0140] In the above embodiment, when the animation layer does not have a static interval, but the animation attribute group has a static interval, the initial group drawing data of the group drawing data with the static interval is cached. When the frame to be played hits the static interval of the group drawing data, the initial group drawing data corresponding to the frame to be played is read from the cache, and there is no need to parse the group drawing data belonging to the static interval from the animation file object, thereby reducing the amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0141] In one embodiment, Figure 8 As shown, S208 may specifically include:

[0142] S802: When the animation file is played in more than one application, determine the playback progress corresponding to each application.

[0143] Among them, more than one application playing animation files may be: the same animation needs to be played in multiple places in the client. For example, the client's video player video, and the video has an animation, and the animation also needs to be played at a certain position of the display page outside the video player (such as the video player is not in full screen mode, and the video player is fixed at the top of the display screen, and the display page is pulled to the bottom).

[0144] In one embodiment, when more than one application in the client plays the same animation, the terminal only decodes the same animation file and caches the decoded animation file object. When more than one application plays the same animation, the animation file object can be read from the cached animation file.

[0145] For example, when the client needs to play the same animation, it only needs to load the same animation file into memory and decode it into an animation file object. When playing multiple identical animations at the same time, the cached animation file objects can be reused.

[0146] In another embodiment, when more than one application plays the same animation in the client, the terminal only decodes the same animation file to obtain the animation file object, caches the starting animation drawing data in the animation drawing data interval that meets the static condition read by the animation file object, and the cached starting animation drawing data can be shared when multiple applications play. When more than one application plays the same animation, the terminal can read the starting animation drawing data corresponding to the to-be-played frames of each application from the cache.

[0147] In another embodiment, when more than one application in the client plays the same animation, the terminal only decodes the same animation file to obtain the animation file object. If the animation drawing data read from the animation file object does not meet the static condition, it is determined whether the group drawing data of the animation attribute group meets the static condition. If it does, the initial group drawing data that meets the static condition is cached, and the cached initial group drawing data can be shared by multiple applications when playing. When more than one application plays the same animation, the terminal can read the initial group drawing data corresponding to the to-be-played frame of each application from the cache.

[0148] In another embodiment, when more than one application in the client plays the same animation, the terminal only decodes the same animation file to obtain the animation file object. If the animation drawing data read from the animation file object does not meet the static condition, and the group drawing data of the animation attribute group does not meet the static condition, it is determined whether the animation attribute value meets the static condition. If it does, the starting animation attribute value that meets the static condition is cached, and the cached starting animation attribute value can be shared by multiple applications when playing. When more than one application plays the same animation, the terminal can read the starting animation attribute value corresponding to the frame to be played of each application from the cache.

[0149] S804, when the animation drawing data of the frame to be played corresponding to the playing progress meets the static condition, the cached initial animation drawing data corresponding to the playing progress and shared by more than one application is read.

[0150] The animation drawing data of the frame to be played corresponding to the playback progress meets the static condition, that is, the animation drawing data of the frame to be played corresponding to the playback progress has a static interval.

[0151] In one embodiment, when multiple applications play the same animation, the terminal records the playback progress of the animation played by each application, and then determines whether the animation drawing data corresponding to the frame to be played hits the static interval according to each playback progress. If the static interval of the animation drawing data is hit, the cached starting animation drawing data corresponding to the playback progress and shared by more than one application is read. If the static interval of the animation drawing data is not hit, the terminal traverses the group drawing data in the animation layer for constituting the animation drawing data. If the static interval of the group drawing data is hit, the starting group drawing data in the static interval can be directly used. If the static interval of the group drawing data is not hit, the terminal traverses the animation attribute values ​​in the animation attribute group for constituting the group drawing data. If the static interval of the animation attribute value is hit, the starting animation attribute value in the static interval can be directly used.

[0152] S806 , sequentially rendering the read initial animation drawing data shared by more than one application to obtain animation rendering data corresponding to each application.

[0153] In one embodiment, if neither the animation drawing data nor the group drawing data has a static interval, and the animation attribute value has a static interval, the terminal reads the starting animation attribute value shared by more than one application on the one hand, and parses the animation attribute value of the non-static interval from the shared animation file object on the other hand, converts the read starting animation attribute value and the parsed animation attribute value into animation drawing data, and then renders it.

[0154] In one embodiment, if the animation drawing data does not have a static interval but the group drawing data has a static interval, the terminal reads the initial group drawing data shared by more than one application on the one hand, and parses the group drawing data of the non-static interval from the shared animation file object on the other hand, synthesizes the read initial group drawing data and the parsed group drawing data into animation drawing data, and then renders it.

[0155] In the above embodiment, when multiple applications of the client play the same animation, the multiple applications simultaneously share the animation drawing data parsed from the same animation file, and cache the starting animation drawing data, which reduces the cache space on the one hand and reduces the amount of parsing calculations on the other hand. When the animation drawing data corresponding to each frame to be played meets the static condition, the starting animation drawing data corresponding to the frame to be played is obtained from the cache, and there is no need to parse the animation drawing data belonging to the static interval from the animation file object, thereby reducing the amount of calculations, saving time in the rendering process, and making the animation playback smoother.

[0156] In one embodiment, in addition to caching the animation drawing data, the animation rendering data can also be cached. The animation file includes vector graphics; Fig. 9 As shown, the method may also include:

[0157] S902, obtaining animation drawing data about the vector image obtained by decoding the animation file.

[0158] Among them, vector graphics, also known as object-oriented graphics, use geometric primitives such as points, lines or polygons based on mathematical equations to represent images, which will not be distorted when enlarged, reduced or rotated. Text in animation (such as graphic text) also belongs to vector graphics.

[0159] For vector graphics, when the terminal caches animation drawing data, group drawing data, or animation attribute values, it can ensure that the description data of the animation at a certain moment can be directly obtained. However, to convert these description data into animation rendering data that can be displayed on the screen, calculations are still required, especially for vector graphics described by complex path information. When rendering, the point coordinate information in the path information and the path description information between points must be parsed one by one, and then the path information can be converted into a vector graphics. The same is true for text description information. The animation drawing data caches only the path information and paint information of the text. Each time this information is rendered, the calculation amount is large and time-consuming. Therefore, when playing an animation, the animation drawing data must first be rendered into animation rendering data, and then cached. When needed, the corresponding animation rendering data can be directly read from the cache.

[0160] In one embodiment, when it is determined that the animation file includes a vector graphic, the terminal obtains animation drawing data about the vector graphic obtained by decoding the animation file, or, when the animation drawing data in the vector graphic meets the still condition, determines the animation drawing data interval that meets the still condition, and obtains the starting animation drawing data from the animation drawing data interval.

[0161] S904, performing off-screen rendering on the animation drawing data to obtain animation rendering data.

[0162] The animation rendering data may be an image texture.

[0163] In one embodiment, S904 may specifically include: the terminal performs off-screen rendering on the decoded animation drawing data to obtain animation drawing data; or the terminal performs off-screen rendering on the actual animation drawing data in the animation drawing data interval to obtain animation drawing data.

[0164] S906: Cache the animation rendering data.

[0165] In one embodiment, before caching the animation rendering data, the terminal determines the size of the animation rendering data. When the size of the animation rendering data is greater than a preset size threshold, the animation rendering data is compressed while ensuring the animation quality to reduce the size of the animation rendering data, and then cached, thereby reducing the cache size.

[0166] S908, when the frame to be played during the playback of the animation file is a vector graphics animation frame, read the cached animation rendering data corresponding to the frame to be played.

[0167] In one embodiment, when the frame to be played during the playback process is a vector graphics animation frame, the animation rendering data corresponding to the frame to be played is read from the cache; or, when the frame to be played during the playback process is a vector graphics animation frame and the animation drawing data corresponding to the frame to be played meets the still condition, the animation rendering data corresponding to the frame to be played and rendered by the starting animation drawing data in the animation drawing data interval is read from the cache.

[0168] In the above embodiment, the animation drawing data of the vector graphics is pre-rendered, and then the animation rendering data obtained by the rendering is cached. When the frame to be played during the playback process is a vector graphics animation frame, the animation rendering data corresponding to the frame to be played is read from the cache, thereby avoiding the time-consuming conversion from the animation drawing data to the animation rendering data, thereby effectively reducing the time consumption in the rendering process, which is conducive to improving the smoothness of the animation playback.

[0169] In one embodiment, Fig.10 As shown, S904 may specifically include:

[0170] S1002, determining the size of an external container for displaying a vector image.

[0171] The external container may be an external container view (View) for displaying a vector image. For example, when an animation is played on a mobile phone, the image container corresponding to the area where the vector image is displayed on the mobile phone may be called an external container.

[0172] The actual display size of the vector image depends on the size of the external container. Since the size of the animation rendering data is determined when it is cached, in order to ensure the clarity of the animation, when caching the animation rendering data, its size can be applied at the maximum scaling ratio, so that when the cached animation rendering data is applied to a smaller scene, the animation rendering data can be compressed instead of stretched, thereby effectively ensuring the clarity of the animation.

[0173] In one embodiment, during the design process, the design terminal may preset the size of the external container for displaying the vector graphics according to the size of the animation on each terminal. When playing the animation, the terminal may determine the corresponding size of the external container for displaying the vector graphics from the preset sizes according to the size of the terminal itself.

[0174] S1004: Determine a scaling ratio of the size of the animation drawing data to the size of the external container.

[0175] In one embodiment, S1004 may specifically include: determining a first size ratio between an internal container carrying an animation frame and an external container; determining a second size ratio between an animation layer and an internal container; determining a third size ratio between animation drawing data in a drawable element attribute group and the animation layer; and determining a scaling ratio according to the first size ratio, the second size ratio, and the third size ratio.

[0176] For example, for the calculation of the scaling ratio, the terminal first obtains the first size ratio S1 of the internal container carrying the animation frame and the external container; then traverses each layer layer by layer, and takes out the second size ratio S2 of the layer relative to the internal container; then traverses each child node in a tree structure until the content is found, and takes out the original width and height of the content node and the third size ratio S3 relative to the layer node; finally, the scaling ratio of the content relative to the external container is calculated as the cumulative multiplication of S1, S2 and S3. Among them, the node tree is composed of an external container, an internal container, an animation layer, a drawable element attribute group, and the animation drawing data in the drawable element attribute group.

[0177] In one embodiment, when the ratio corresponding to a node in a node tree changes, the changed zoom ratio is obtained; the node tree is composed of an external container, an internal container, an animation layer, a drawable element attribute group and animation drawing data in the drawable element attribute group; the size of the cached animation rendering data is adjusted according to the zoom ratio; or, the input zoom ratio is obtained, and the size of the cached animation rendering data is adjusted according to the input zoom ratio.

[0178] For example, when playing an animation, the terminal will hang the PAG view (PAGView) that displays the animation on other nodes, such as the last leaf node. When the size of these parent nodes changes, the PAGView will be notified and the scaling ratio will be applied to the cache of the animation rendering data. This ensures that the cached animation rendering data is optimal while ensuring clarity.

[0179] In addition, if using the maximum zoom ratio still takes up a large amount of memory, and further compressing the cached animation rendering data can still ensure the clarity of the animation without affecting the animation effect, then, based on the maximum zoom ratio, another zoom ratio can be set to reduce the size of the cache.

[0180] S1006: Create an off-screen buffer.

[0181] S1008 , in the off-screen buffer, performing animation rendering on the animation drawing data according to the size and scaling ratio of the external container to obtain animation rendering data.

[0182] In one embodiment, in order to synchronize the display of the display with the animation controller, when the electron gun scans a new line, a horizontal synchronization signal is sent when preparing to scan, and the refresh frequency of the display is the frequency generated by the synchronization signal. Then, the processor calculates the animation frame, animation width and height and other parameter values, and gives the calculated parameter values ​​to the graphics card to render to obtain animation rendering data, and the animation rendering data rendered by the graphics card is placed in the off-screen buffer. Finally, the video controller reads the animation rendering data in the off-screen buffer line by line according to the synchronization signal, and passes it to the display for display after digital-to-analog conversion.

[0183] The entire off-screen rendering process requires switching the context environment: first, switching from the current screen (On-Screen) to the off-screen (Off-Screen). After the off-screen rendering is completed, when the animation rendering data of the off-screen buffer is displayed on the screen, the terminal needs to switch the context environment from the off-screen to the current screen.

[0184] In the above embodiment, the animation drawing data of the vector image is pre-rendered to avoid the time required to convert the animation drawing data into animation rendering data during playback, thereby effectively reducing the time consumption in the rendering process and helping to improve the smoothness of animation playback.

[0185] In one embodiment, Fig.11 As shown, the method also includes:

[0186] S1102: When the animation file includes multiple animation layers, and the vector graphics included in each animation layer are the same but have different sizes, then the animation rendering data corresponding to the vector graphics with the largest size is obtained.

[0187] In one embodiment, when the animation file includes a pre-synthesized attribute group, and multiple animation layers are synthesized in the pre-synthesized attribute group, and the vector graphics contained in each animation layer are the same but different in size, the terminal obtains the animation rendering data corresponding to the vector graphics with the largest size.

[0188] S906 may specifically include: S1104, caching the animation rendering data corresponding to the vector image with the largest size.

[0189] For example, an animation has three animation layers, and the same image appears in each animation layer. Since the three animation layers all contain the same image, only one copy needs to be cached. However, the size of the animation rendering data cache needs to take into account the scaling of each animation layer and select the maximum scaling ratio. Therefore, when caching, the size of the cached animation rendering data is the maximum scaling ratio. When this animation rendering data is drawn on a smaller container or layer, the cached animation rendering data can be compressed to ensure clarity.

[0190] In the above embodiment, when the same vector image appears in multiple layers, the animation rendering data corresponding to the vector image with the largest size is cached. On the one hand, it can avoid caching three copies of the animation rendering data at the same time, thereby reducing the size of the cache. On the other hand, caching the animation rendering data with the largest size can avoid the problem of reduced image clarity caused by stretching the vector image during display.

[0191] In one embodiment, Fig.12 As shown, S906 may specifically include:

[0192] S1202: When the animation file includes a pre-synthesis attribute group, determine an animation area in the pre-synthesis attribute group that includes first target animation rendering data.

[0193] The first target animation rendering data is a portion of the data included in the animation rendering data. Fig.13As shown, the first target animation rendering data is a part of the data of the five-pointed star and the cloud.

[0194] Since animation rendering data can be understood as image texture and has size, the content contained in the animation area may only contain a part of the animation rendering data. If the size of the non-animation rendering data area in the animation area is large, the animation area needs to be optimized to avoid additional computing power during rendering.

[0195] S1204, when the size of the non-animation rendering data area included in the animation area reaches a preset condition, determining a minimum animation area including the second target animation rendering data; the first target animation rendering data is a part of the second target animation rendering data.

[0196] The second target animation rendering data includes all the data in the animation rendering data, that is, the first target animation rendering data is a part of the second target animation rendering data. The non-animation rendering data area can be a blank area or an invalid area.

[0197] Since the second target animation rendering data is to protect all the data in the animation data, a rectangular frame can be used to frame the second target animation data, and the rectangular frame is the minimum rectangular frame when framing the second target animation data, then the minimum rectangular frame is used as the minimum animation area, such as Fig.13 The dotted area in .

[0198] S1206: Determine an intersection area between the acquired animation area and the minimum animation area.

[0199] S1208: Determine the intersection area as the animation area of ​​the pre-synthesized attribute group.

[0200] In one embodiment, when determining the intersection area between the animation area and the minimum animation area, the terminal displays the intersection area as the animation area of ​​the pre-synthesized attribute group.

[0201] As an example, when the animation area of ​​the pre-synthesized attribute group contains too many invalid areas or blank areas, the terminal optimizes the boundary of the pre-synthesized attribute group, obtains the minimum rectangular area containing all animation rendering data by calculation, and then obtains the intersection of this rectangle with the boundary rectangle of the pre-synthesized attribute group to obtain the actual boundary of the pre-synthesized attribute group.

[0202] like Fig.13As shown, the animation file contains only one layer A and one pre-synthesis attribute group, where the boundary of the pre-synthesis attribute group is a small black rectangular frame C, and the actual content area is the five-pointed star and cloud part, and the other part of the five-pointed star and cloud is outside this rectangular frame. During rendering, since most of the content of this rectangular frame is blank, it can be optimized. The optimization process may include: first calculate the smallest rectangle size that contains the actual content area, and obtain the dotted rectangle A in the figure; finally, find the intersection of the rectangle A and the boundary of the pre-synthesis attribute group to obtain the thick black rectangular frame B, and the rectangular frame B is the animation area that is actually displayed.

[0203] In the above embodiment, when the animation area of ​​the pre-synthesized animation attribute group contains a large invalid area, it is necessary to redefine the animation area to ensure that the animation rendering data is included in the animation area and to minimize the invalid area, thereby avoiding the possibility of consuming additional calculations during rendering and avoiding scanning the invalid area when displaying on the screen, thereby reducing the time consumption for displaying on the screen.

[0204] As an example, for traditional animation rendering solutions, such as Lottie animation rendering, Lottie animation uses json (JavaScript Object Notation, JS object notation) format to store all animation information. During the animation playback process: first load the animation file into memory, then parse the animation file in json format, locate the playback time during playback, and extract the instantaneous animation information, that is, find the content that needs to be displayed in this instantaneous animation from the parsed json file, which can be images and text, etc. Finally, this instantaneous display content needs to be converted into rendering data that can be drawn on the screen. During the rendering process, for vector graphics, it is necessary to calculate the information of each point on the path information and draw the path, while for text, the paint and path information are read and converted.

[0205] In traditional animation rendering solutions, for the same animation, the memory data of the same animation file is not reused. If multiple identical animations are played on the screen at the same time, the same animation file will be loaded multiple times. In addition, the data of a certain moment in the animation is parsed and then converted into data to be drawn, but the static interval of the drawing data is not considered. Therefore, the starting drawing data in the static interval is not reused when converting from memory data to drawing data. Finally, it also does not consider the time it takes to convert the drawing data of the vector graphics into rendering data. For complex vector graphics, each time from drawing data to rendering data, it takes a lot of rendering time.

[0206] In view of the above problems, an embodiment of the present invention proposes a three-level cache animation rendering solution, which includes animation file cache, drawing data cache and rendering data cache. The following three cache methods are described as follows:

[0207] (1) Animation file cache

[0208] Decode the animation file and save it to memory. For the same animation file, only one decoded file object will be saved. When multiple scenes need to play this animation, they are all based on this file object, and the animation file will not be read again, avoiding multiple decoding processes. This saves a lot of unnecessary overhead, especially memory overhead. For example, when the client is started, there is a common loading animation, and all loading application scenarios will use this loading animation. Then the animation file is loaded once every time loading is added. Even if the description data of the animation file occupies a small amount of memory, when dozens of animations need this loading animation, the memory overhead is very large.

[0209] In addition, it can also save decoding time. For the same multiple loading animations, the animation file is only decoded once, which makes the time consumption less and avoids the extra time consumption caused by decoding each animation from the animation file into the memory once.

[0210] (II) Drawing Data Cache

[0211] Using the PAG animation feature, the animation static interval is divided, and the drawing data cache is performed for the static interval. Before introducing the drawing data cache, the division of the static interval is first explained as follows:

[0212] (1) Dividing the static interval

[0213] The most intuitive understanding of the so-called static interval is, for example: a PAG animation has a total duration of 2s, assuming that there are 24 frames per second. If there is no change in the time period from 1s to 1.5s, that is, the animation is static from 1s to 1.5s, then the static interval of this animation is [24,36], in frames.

[0214] Each frame of animation in an animation file can be composed of multiple layers, and the layers are composed of smaller groups. The final group is described by a series of attributes, including timeline attributes and fixed attributes. For timeline attributes, you can find a Hold type interval, that is, the static interval of the timeline attribute; for fixed attributes, the entire time period is the static interval. After finding the static interval of the timeline attribute, bubble up again. If a group contains several timeline attributes, when the static intervals of each timeline attribute have an intersection, the corresponding group's attribute value at the intersection does not change, then this intersection is the static interval of the group. Similarly, continue to bubble up, you can find the intersection of multiple group static intervals, that is, the intersection is the static interval of the layer; the intersection of multiple layer static intervals is the static interval of vector composition, so you can get the static interval of the entire animation.

[0215] The groups that make up the layer are divided into 6 categories, namely transform, mask, trackMatter, layerStyle, effect and content. Take transform as an example, it is composed of multiple keyframes. <transform2d>Each Keyframe is a record of the translation, scaling, rotation and / or transparency change information of the layer, which is saved in the PAG animation file. When parsing the PAG animation file, these Keyframes can be taken out to restore the animation trajectory of the layer. The data structure of these keyframes is finally stored in Transform2D. This Transform2D is actually described by the timeline attributes. It contains the following attributes: anchor point (anchorPoint), position (position), x-axis coordinate position (xPosition), y-axis coordinate position (yPosition), scale (scale), rotation (rotation) and transparency (opacity), such as Fig.14 As shown in the figure, position, xPosition, and yPosition describe translation information; anchorPoint and scale describe scaling information; anchorPoint and rotation describe rotation information; and opacity describes transparency information.

[0216] When parsing a PAG animation file, if the group type of a layer is transform, and the attribute value of the timeline attribute of its description information Transform2D does not change in several keyframes, then it can be understood that these frames are the static interval of this transform. To determine whether it is a static interval, it is ultimately converted into finding the Hold type interval segment of the timeline attribute, and the same is true for other groups. When finding the static interval of the parent node layer of the group, the intersection of the static intervals of all groups of this layer is calculated.

[0217] When calculating the static interval, you can calculate the static interval directly, or you can find it by looking for non-static intervals. That is, when you find the non-static interval, filter out the non-static interval to get the static interval of the entire animation. The method of finding the non-static interval to get the static interval can specifically include: starting from the root composition, the entire animation has n frames, from the first frame to the last frame of the animation (that is, [1,n]); then traverse all layers or sub-compositions in turn, and then traverse each group of the layer, and directly remove the non-static interval in the group from [1,n], so that [1,n] is cut into many small intervals. The static interval of a layer is the intersection of the static intervals of all groups of the layer. Similarly, the intersection of the static intervals of all layers is the static interval of the composition. This bubble up layer by layer until the final static interval of the root composition (that is, the entire animation) is obtained.

[0218] like Figure 5 As shown, Figure 5 A schematic diagram for finding the intersection of static intervals, where t1, t2, m1, m2, c1, c2, c3, and c4 are in frames. For a layer in the composition, the three groups of the layer are as follows during the entire animation cycle: Figure 5 As shown in the figure, in the interval [t1, t2], the layer does not undergo any translation, scaling, or rotation; in the interval [m1, m2], the layer uses the same mask and the mask does not change; in the intervals [c1, c2] and [c3, c4], the layer applies a text and an image respectively, and the text and image do not change either.

[0219] Obviously, for the content group, [c1, c2] and [c3, c4] are both static intervals of the content. When rendering the animation, you only need to parse the text at time c1 once, and parse the image at time c3 once, and save the text and image in the memory and mark them. When the frame to be drawn during animation playback is c, and c is in the interval [c1, c2], there is no need to re-parse the text of frame c. You can directly use c1 to check the marked cache and draw the text of c1. This text is exactly the same as the text of frame c.

[0220] The above is a scenario that only considers the content group. For a layer, the layer is composed of multiple groups, and its static interval is the intersection of the static intervals of all groups under the layer. Figure 5 As shown in the figure, if a layer consists of only three groups, then the layer has two static intervals: [m1,c2] and [c3,t2].

[0221] It can be seen that dividing the still interval is actually a bubbling process. First, the Hold type interval of the timeline attribute is found, and then the intersection is found to find the still interval of the group, and then the intersection is found layer by layer until the final still interval of the root composition, which is the still interval of the entire animation.

[0222] To sum up, the process of dividing the static interval is as follows:

[0223] S1502, starting from the root composition, the initial static interval is from the first frame to the last frame.

[0224] S1504, determine whether there is a sub-composition.

[0225] S1506: If there is no sub-composition, the static interval of the root composition is calculated through all layers, and then S1518 is executed.

[0226] S1508: If there is a sub-composition, then starting from the sub-composition, the initial static interval is from the start frame to the end frame of the sub-composition.

[0227] S1510, determine whether there is a layer in the sub-composition.

[0228] S1512: If there is a layer in the sub-composition, calculate the static interval of each group in the layer.

[0229] S1514, select the Hold type interval that describes the timeline attribute of the group, and then determine whether there is a layer in the sub-composition.

[0230] S1516: If the layer does not exist in the sub-composition, calculate the static interval of the layer through all groups.

[0231] S1518, calculating the static interval of the root composition.

[0232] (2) Drawing data cache

[0233] Drawing data cache refers to caching the relevant parts of the PAG file (PAGFile) object. After decoding the PAGFile object, all static intervals can be obtained by dividing the static intervals as described above. At the same time, parsing the PAGFile object can obtain the starting drawing data of the static interval, and then cache the starting drawing data. In order to reduce the cache size as much as possible and only cache the necessary drawing data, different caching strategies are made for different layers, different groups, and smaller granularity classifications.

[0234] When PAG animation draws a frame of animation, it will jump to that frame, and then draw each layer or pre-synthesized composition in turn. The essence of pre-synthesized composition is also multiple layers or compositions nested, and the final drawing is still a layer. Therefore, the granularity of drawing can be further subdivided into the drawing of specific layers. A layer can be composed of any one or more of the six types of groups. The following describes the cache strategy of each type of group:

[0235] 1) Content

[0236] Content is an essential part of a layer, representing the drawable elements of the layer, such as pictures, text, shapes, etc. Other groups almost all perform some processing based on Content, such as panning and zooming, adding masks, and adding filter effects.

[0237] The elements that Content can represent are roughly divided into: shape, text, solid, PreCompose and image. Due to the diversity of Content, it is necessary to cache specific elements. For these five elements, different data contents are cached separately:

[0238] Shape represents a shape, which can be a regular circle, rectangle, five-pointed star, etc., or an irregular shape. When rendering graphics, for the description of the shape, you only need to draw the path information and paint information to completely draw the represented graphics. Here, shape caches a custom data structure, the content of which is shape drawing (ShapePaint), and ShapePaint contains two attribute values: the path information and the paint information.

[0239] Text represents text content, that is, text. For example, a line of prompts in an animation scrolls and plays, and the prompts here use text. The information required for text rendering is similar to that of shape, and both path information and paint information are required. In addition, text can set the font type. For example, the fonts in an animation can come from different types, so the attribute value of the font type information needs to be recorded.

[0240] Solid is a special case of shape. It can represent a solid rectangle filled with color. Its description can use the width, height and fill color of the rectangle, that is, the three attribute values ​​of width, height and fill color can be cached. Solid has many application scenarios, such as graphics in simple vector animations, masks used as layers, or pre-synthesized masks.

[0241] Image represents a picture. When rendering, the specific pixel information of the picture needs to be obtained, so the pixel information of the picture is cached as the attribute value. In addition, the size of the picture display, especially when zooming, the width and height of the picture will change, and corresponding compression and stretching must be made during rendering. Therefore, the original width and height of the picture also need to be cached as attribute values.

[0242] PreCompose means pre-composition, which is composed of one or more layers, and other compositions can also be nested. In this embodiment, PreCompose is used for sub-composition application. For the cache of PreCompose, the layers included in PreCompose are traversed, and then the cache strategy of the layer is adopted for caching.

[0243] 2) Transform

[0244] Animation actually changes along the timeline, and most changes consist of at least one of translation, scaling, rotation, or fading.

[0245] In 2D space, for a rectangle, if it is a translation animation, you can determine the initial position of the rectangle (position, record the coordinates x and y), and then record the x and y axis translation distances xPoition and yPosition (floating point numbers, record the distances). Through the three information of coordinates x, y and distance, you can restore a translation animation. If it is a scaling animation, you can first determine an anchor point anchorPoint, and then add the scale information to restore it completely. If it is a rotation animation, first determine an anchor point anchorPoint, and then add the rotation information to restore the rotation animation. If it is a transparency animation that fades in and out, you can just record the opacity information.

[0246] In summary, any change in a 2D space can be recorded with a small amount of information. The information recorded by translation, scaling and rotation can be recorded using a matrix, and the transparency change can be recorded using opacity. By recording these two pieces of information, the changes in the animation can be restored, so when caching, you only need to cache the matrix and opacity as attribute values.

[0247] 3) Mask

[0248] The use of masks can use two simple graphics to form a new graphic through combination. Here, Mask represents a mask in a layer. When rendering, the mask is drawn using path information and mask mode. For example, a rectangular mask essentially needs to record the path information of the rectangle, that is, the vertex information of the rectangle, so as to restore the mask rectangle, so the path information and mask mode need to be cached.

[0249] The mask mode determines the final display, for example: Add mode means that the mask is directly added for display; Subtract mode means subtracting the masked part; Intersect mode means taking the intersection of the original image and the mask for display; Difference mode means taking the non-intersecting part of the original image and the mask for display.

[0250] 4) TrackMatter

[0251] TrackMatter is similar to Mask and is also used as a mask. The difference is that Mask is a mask within a layer, while TrackMatter uses one layer as a mask for another layer based on transparency and brightness. For TrackMatter, the path information and mode information that need to be cached are the same as Mask.

[0252] Among them, TrackMatter has the following modes: Alpha mode, which controls the display area according to the layer's opacity area; AlphaInverted mode, which controls the layer's display area according to the layer's transparency area; Luma mode and LumaInverted mode are similar to Alpha, except that the condition for controlling the display area is replaced by brightness.

[0253] 5) LayerStyle and effect

[0254] LayerStyle and effect are filters. Filters can be understood as processing pixels of an image to produce personalized effects. LayerStyle and effect can be used to support projection effects in PAG animations. The implementation depends on filter information. For example, a projection image is drawn on the original image, and the image parameters are calculated from the color, direction, and distance of the projection. Therefore, the filter information can be cached when caching.

[0255] (III) Rendering Data Cache

[0256] For vector graphics, the drawing data cache can ensure that the animation can directly obtain the drawing data at a certain moment. However, the conversion of these drawing data into rendering data that can be directly drawn still needs calculation, especially for vector graphics with complex path information. When rendering, it is necessary to parse the point coordinates of the path information one by one, as well as the path description information between points, and then draw the path information completely into a vector graphics. The same is true for text drawing data. The drawing data cache only contains the path information and paint information of the text. Each time this information is drawn, it takes time to calculate and convert. This time consumption can be solved by caching rendering data. The specific method is: after obtaining the drawing data, create an off-screen buffer, then perform off-screen rendering to obtain rendering data, cache the rendering data, and when drawing is needed, read the rendering data directly from the cache, thus saving the time consumption of converting drawing data into rendering data.

[0257] Since vector graphics can be scaled at will, the size of the vector graphics display depends on the size of the external display container View. Since the size of the texture has been determined when caching the rendering data, in order to ensure the clarity of the final animation, the texture size should be applied at the maximum scaling ratio when caching the rendering data, so that when the cached rendering data is applied to a smaller scene, the rendering data can be compressed instead of stretched, thereby ensuring clarity. To calculate this scaling ratio, first obtain the scaling ratio S1 of the external View used to carry and display the animation; then traverse each composition and layer layer by layer, and take out their scaling ratios S2; then find the scaling ratio of each node in the tree structure in turn until the content is found, and take out the original width and height of the content and the scaling ratio S3 relative to the parent node; finally, calculate the scaling ratio of the content relative to the display View, which is the cumulative multiplication of these tree-level scaling ratios S1, S2, and S3.

[0258] Due to nesting issues, the content of PreCompose type and image type will be different. For example, for an animation containing PreCompose type, an animation has 3 layers, and the same image may appear in each layer, but because they are all the same image, only one copy needs to be cached. For the size selection of the image cache, the zoom ratio of all places where the image is used should be considered, and the maximum zoom ratio should be taken. When caching, the cached texture size is the scene with the maximum zoom ratio. When this texture is drawn on a smaller View, the cached image can be directly compressed to ensure clarity.

[0259] In addition, the setCacheScale(float scale) interface for setting the size is also provided for external settings. When displaying animations, the PAGView displaying the animations is often placed in other containers. When the size of these parent containers changes, PAGView needs to be notified and the zoom ratio is applied to the rendering data cache, so that the cached rendering data is the best under the condition of ensuring clarity. In addition, if the maximum zoom ratio is still quite memory-intensive, and the cached images can still ensure clarity after compression without affecting the animation effect, you can set another zoom ratio based on the maximum zoom ratio to reduce the cache size.

[0260] The optimization of the boundary measurement of PreCompose is to calculate the minimum rectangular area that contains all the contents, and then find the intersection of this rectangle with the boundary rectangle of PreCompose to obtain the actual boundary of PreCompose. Fig.13 This is an animation consisting of only one layer A and one PreCompose. The boundary of the PreCompose is a small black rectangle. The actual content area is the five-pointed star and the cloud part, and the other part is outside the rectangle. When rendering, since most of the content of this rectangle is blank, it can be optimized. The optimization method may include: first calculate the smallest rectangle containing the actual content, and get Fig.13 The black dotted rectangular box A in the middle; finally, find the intersection of rectangular box A and the PreCompose boundary to get the black thick rectangular box B, which is the actual display area.

[0261] (IV) Rendering time comparison

[0262] For the same PAG animation "People Mountain and Sea", use the animation previewer (PAGViewer) to view the rendering time. Fig.16 This is a schematic diagram of rendering time with the cache strategy fully enabled. Fig.17 This is a schematic diagram of rendering time when rendering data cache is turned off. Fig.18 This is a schematic diagram of the rendering time when the drawing data cache is turned off. Fig.19 This is a diagram of the rendering time when the cache strategy is completely turned off.

[0263] pass Figure 16-19 It can be seen that when the cache strategy is fully turned on, the rendering time is the smallest, taking only 25ms; when the cache strategy is fully turned off, the rendering time is the largest, 1052ms, a difference of 2 orders of magnitude. Fig.17 ) and turn off the drawing data cache (that is, use the rendering data cache, such as Fig.18 ) took 863 and 184 seconds to render respectively. Although there is a difference between the two, drawing data cache and rendering data cache are two different caching strategies, which are suitable for different application scenarios, so they play different roles. The "mountains of people" animation here is just a reflection of the excellent performance of rendering data cache in complex graphics.

[0264] By adopting the above embodiment, the following beneficial effects can be achieved:

[0265] 1) The rendering time of animation can be greatly reduced. Compared with the traditional animation rendering method, the animation rendering method of the embodiment of the present invention can reduce the rendering time by 1-2 orders of magnitude. The reduction in rendering time makes the animation playback very smooth, and a good playback effect can be achieved on low-end mobile phones, especially when there are multiple animations playing on the same page on the client at the same time, if they are the same animation, the decoding time can be greatly saved.

[0266] 2) Use different cache strategies for different layers, and use different calculation rules for images and pre-synthesized compositions when calculating animation scaling ratios.

[0267] Figure 2-4 , 6-12, and 15 are flowcharts of an animation rendering method in one embodiment. It should be understood that although Figure 2-4 The steps in the flowcharts of , 6-12, and 15 are shown in sequence as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified in this document, there is no strict order restriction for the execution of these steps, and these steps can be executed in other orders. Moreover, Figure 2-4 At least part of the steps in 6-12 and 15 may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least part of the sub-steps or stages of other steps.

[0268] like Fig. 20 As shown, in one embodiment, an animation rendering device is provided, the device comprising: a file acquisition module 2002, a determination module 2004, a data cache module 2006, a data reading module 2008 and an animation rendering module 2010; wherein:

[0269] The file acquisition module 2002 is used to acquire the animation file in the target format;

[0270] The determination module 2004 is used to determine the animation drawing data interval obtained by decoding the animation file and meeting the static condition;

[0271] The data cache module 2006 is used to cache the initial animation drawing data in the animation drawing data interval;

[0272] The data reading module 2008 is used to read the cached starting animation drawing data corresponding to the frame to be played when the animation drawing data corresponding to the frame to be played during the playing of the animation file meets the static condition;

[0273] The animation rendering module 2010 is used to perform animation rendering according to the read starting animation drawing data.

[0274] In the above embodiment, the starting animation drawing data of the animation drawing data that meets the still condition is cached, and when the attribute value of the corresponding animation frame meets the still condition, the starting animation drawing data corresponding to the frame to be played is directly obtained from the cache, and there is no need to parse the animation file again to obtain the animation drawing data corresponding to the frame to be played, thereby avoiding a large amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0275] In one embodiment, the determination module 2004 is further used to: decode the animation file to obtain the animation file object; read the animation drawing data in the animation file object; and determine the animation drawing data interval that meets the static condition from the read animation drawing data.

[0276] In the above embodiment, the animation file object is obtained by decoding the animation file, the animation drawing data in the animation file object is read, and then the animation drawing data interval that meets the static condition in the animation file object is found, so that the starting animation drawing data in the animation drawing data interval is cached, so that when the attribute value of the corresponding animation frame meets the static condition, the starting animation drawing data corresponding to the frame to be played is directly obtained from the cache, thereby avoiding a large amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0277] In one embodiment, the animation file includes at least one animation layer; each animation layer includes at least two animation attribute groups; each animation attribute group includes at least two animation attribute values; the determination module 2004 is further used to: determine each animation attribute value interval that meets the static condition in the animation attribute group; use the intersection of the animation attribute value intervals as the group drawing data interval of the animation attribute group; and determine the intersection of the group drawing data intervals as the animation drawing data interval of the animation layer.

[0278] In the above embodiment, the animation attribute value interval that meets the static condition is first determined, and then the animation drawing data interval is calculated using a bubbling algorithm, so that the starting animation drawing data in the animation drawing data interval is cached. When the attribute value of the corresponding animation frame meets the static condition, the starting animation drawing data corresponding to the frame to be played is directly obtained from the cache, thereby avoiding a large amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0279] In one embodiment, Fig.21 As shown, the device further includes: an attribute value acquisition module 2012; wherein:

[0280] The data cache module 2006 is also used to cache the starting animation attribute value of the animation attribute value interval when there is no intersection between the animation attribute value intervals;

[0281] The data reading module 2008 is also used to read the cached starting animation attribute value corresponding to the frame to be played when the animation drawing data corresponding to the frame to be played during the playing of the animation file does not meet the static condition and there is no intersection between the animation attribute value intervals;

[0282] The attribute value acquisition module 212 is used to acquire the animation attribute value corresponding to the frame to be played and not meeting the static condition from the animation file object obtained by decoding the animation file;

[0283] The animation rendering module 2010 is further used to perform animation rendering according to the read starting animation attribute value and the acquired animation attribute value.

[0284] In the above embodiment, when the animation layer and the animation attribute group do not have a static interval, the starting animation attribute value of the animation attribute value with a static interval is cached. When the frame to be played hits the static interval of the animation attribute value, the starting animation attribute value corresponding to the frame to be played is read from the cache, and there is no need to parse the animation attribute value belonging to the static interval from the animation file object, thereby reducing the amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0285] In one embodiment, Fig.21 As shown, the device further includes: a data acquisition module 2014; wherein:

[0286] The data cache module 2006 is further used to cache the initial group drawing data of the group drawing data interval when there is an intersection between the animation attribute value intervals but there is no intersection between the group drawing data intervals;

[0287] The data reading module 2008 is also used to read the cached initial group drawing data corresponding to the frame to be played when the animation drawing data corresponding to the frame to be played does not meet the static condition during the playing of the animation file;

[0288] The data acquisition module 214 is used to acquire the group drawing data corresponding to the frame to be played and not meeting the static condition from the animation file object obtained by decoding the animation file;

[0289] The animation rendering module 2010 is further used to perform animation rendering according to the read initial group drawing data and the acquired group drawing data.

[0290] In the above embodiment, when the animation layer does not have a static interval, but the animation attribute group has a static interval, the initial group drawing data of the group drawing data with the static interval is cached. When the frame to be played hits the static interval of the group drawing data, the initial group drawing data corresponding to the frame to be played is read from the cache, and there is no need to parse the group drawing data belonging to the static interval from the animation file object, thereby reducing the amount of calculation, saving time in the rendering process, and making the animation playback smoother.

[0291] In one embodiment, when the animation attribute group is a drawable element attribute group, the animation attribute group includes at least two drawable elements; the drawable element includes at least two animation attribute values; Fig.21 As shown, the device further includes: an intersection calculation module 2016; wherein:

[0292] The determination module 2004 is further used to determine the intersection of the animation attribute value intervals as the element interval of the drawable element;

[0293] An intersection calculation module 2016, used to calculate the intersection between element intervals of the drawable elements;

[0294] The determination module 2004 is further configured to determine the intersection between the element intervals as the group drawing data interval of the animation attribute group.

[0295] In one embodiment, when the animation drawing data corresponding to the frame to be played during the playback of the animation file meets the still condition, the data reading module 2008 is also used to: when the animation file is played in more than one application, determine the playback progress corresponding to each application; when the animation drawing data of the frame to be played corresponding to the playback progress meets the still condition, read the cached starting animation drawing data corresponding to the playback progress and shared by more than one application.

[0296] In the above embodiment, when multiple applications of the client play the same animation, the multiple applications simultaneously share the animation drawing data parsed from the same animation file, and cache the starting animation drawing data, which reduces the cache space on the one hand and reduces the amount of parsing calculations on the other hand. When the animation drawing data corresponding to each frame to be played meets the static condition, the starting animation drawing data corresponding to the frame to be played is obtained from the cache, and there is no need to parse the animation drawing data belonging to the static interval from the animation file object, thereby reducing the amount of calculations, saving time in the rendering process, and making the animation playback smoother.

[0297] In one embodiment, the animation file includes a vector image; the data acquisition module 2014 is further used to acquire animation drawing data about the vector image obtained by decoding the animation file;

[0298] The animation rendering module 2010 is also used to perform off-screen rendering on the animation drawing data to obtain animation rendering data;

[0299] The data cache module 2006 is also used to cache the animation rendering data;

[0300] The data reading module 2008 is also used to read the cached animation rendering data corresponding to the frame to be played when the frame to be played during the playing of the animation file is a vector graphics animation frame.

[0301] In one embodiment, the animation rendering module 2010 is further used to: determine a first size ratio between an internal container carrying an animation frame and an external container; determine a second size ratio between an animation layer and an internal container; determine a third size ratio between animation drawing data in a drawable element attribute group and the animation layer; and determine a scaling ratio based on the first size ratio, the second size ratio, and the third size ratio.

[0302] In one embodiment, the animation rendering module 2010 is also used to: determine the size of an external container for displaying a vector image; determine the scaling ratio of the size of the animation drawing data relative to the size of the external container; create an off-screen buffer; and in the off-screen buffer, perform animation rendering on the animation drawing data according to the size and scaling ratio of the external container to obtain animation rendering data.

[0303] In the above embodiment, the animation drawing data of the vector graphics is pre-rendered, and then the animation rendering data obtained by the rendering is cached. When the frame to be played during the playback process is a vector graphics animation frame, the animation rendering data corresponding to the frame to be played is read from the cache, thereby avoiding the time-consuming conversion from the animation drawing data to the animation rendering data, thereby effectively reducing the time consumption in the rendering process, which is conducive to improving the smoothness of the animation playback.

[0304] In one embodiment, Fig.21 As shown, the device further includes: a zoom ratio acquisition module 2018 and a size adjustment module 2020; wherein:

[0305] The zoom ratio acquisition module 2018 is used to acquire the changed zoom ratio when the ratio corresponding to the node in the node tree changes; the node tree is composed of an external container, an internal container, an animation layer, a drawable element attribute group and animation drawing data in the drawable element attribute group;

[0306] A size adjustment module 220 is used to adjust the size of the cached animation rendering data according to the zoom ratio; or,

[0307] The zoom ratio acquisition module 2018 is also used to obtain the input zoom ratio;

[0308] The size adjustment module 2020 is also used to adjust the size of the cached animation rendering data according to the input zoom ratio.

[0309] In the above embodiment, the animation drawing data of the vector image is pre-rendered to avoid the time required to convert the animation drawing data into animation rendering data during playback, thereby effectively reducing the time consumption in the rendering process and helping to improve the smoothness of animation playback.

[0310] In one embodiment, the data acquisition module 2014 is further used to acquire the animation rendering data corresponding to the vector image with the largest size when the animation file includes multiple animation layers and the vector images included in each animation layer are the same but different in size;

[0311] The data cache module 2006 is also used to cache the animation rendering data corresponding to the vector image with the largest size.

[0312] In the above embodiment, when the same vector image appears in multiple layers, the animation rendering data corresponding to the vector image with the largest size is cached. On the one hand, it can avoid caching three copies of the animation rendering data at the same time, thereby reducing the size of the cache. On the other hand, caching the animation rendering data with the largest size can avoid the problem of reduced image clarity caused by stretching the vector image during display.

[0313] In one embodiment, the data cache module 2006 is also used for: when the animation file includes a pre-synthesized attribute group, determining the animation area in the pre-synthesized attribute group that includes the first target animation rendering data; when the size of the non-animation rendering data area included in the animation area reaches a preset condition, determining the minimum animation area that includes the second target animation rendering data; the first target animation rendering data is a part of the second target animation rendering data; determining the intersection area between the obtained animation area and the minimum animation area; and determining the intersection area as the animation area of ​​the pre-synthesized attribute group.

[0314] In the above embodiment, when the animation area of ​​the pre-synthesized animation attribute group contains a large invalid area, it is necessary to redefine the animation area to ensure that the animation rendering data is included in the animation area and to minimize the invalid area, thereby avoiding the possibility of consuming additional calculations during rendering and avoiding scanning the invalid area when displaying on the screen, thereby reducing the time consumption for displaying on the screen.

[0315] Fig. 22 The internal structure diagram of a computer device in one embodiment is shown. The computer device may specifically be Figure 1 The terminal 110 in FIG. Fig. 22 As shown, the computer device includes a processor, a memory, a network interface, an input device and a display screen connected through a system bus. Among them, the memory includes a non-volatile storage medium and an internal memory. The non-volatile storage medium of the computer device stores an operating system and may also store a computer program. When the computer program is executed by the processor, the processor can implement the animation rendering method. The internal memory may also store a computer program. When the computer program is executed by the processor, the processor can execute the animation rendering method. The display screen of the computer device may be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device may be a touch layer covered on the display screen, or a button, trackball or touchpad provided on the housing of the computer device, or an external keyboard, touchpad or mouse, etc.

[0316] Those skilled in the art will understand that Fig. 22 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0317] In one embodiment, the animation rendering device provided by the present application can be implemented in the form of a computer program. The computer program can be Fig. 22 The computer device shown in the figure is run. The memory of the computer device can store various program modules constituting the animation rendering device, such as: Fig. 20 The file acquisition module 2002, the determination module 2004, the data cache module 2006, the data reading module 2008 and the animation rendering module 2010 are shown. The computer program composed of various program modules enables the processor to execute the steps of the animation rendering method of each embodiment of the present application described in this specification.

[0318] For example, Fig. 22 The computer device shown can be Fig. 20 The file acquisition module 2002 in the animation rendering apparatus shown executes S202. The computer device may execute S204 through the determination module 2004. The computer device may execute S206 through the data cache module 2006. The computer device may execute S208 through the data reading module 2008. The computer device may execute S210 through the animation rendering module 2010.

[0319] In one embodiment, a computer device is provided, including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the above animation rendering method. The steps of the animation rendering method here may be the steps of the animation rendering method in each of the above embodiments.

[0320] In one embodiment, a computer-readable storage medium is provided, which stores a computer program. When the computer program is executed by a processor, the processor executes the steps of the above animation rendering method. The steps of the animation rendering method here can be the steps of the animation rendering method in each of the above embodiments.

[0321] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the program can be stored in a non-volatile computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0322] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0323] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. An animation rendering method, comprising: Get the animation file in the target format; Determine an animation drawing data interval obtained by decoding the animation file and meeting a still condition; The animation drawing data interval is a data interval in which the animation drawing data does not change within a period of time; Cache the initial animation drawing data in the animation drawing data interval; When the animation drawing data corresponding to the frame to be played during the playing of the animation file meets the static condition, the cached starting animation drawing data corresponding to the frame to be played is read; Animation rendering is performed according to the read initial animation drawing data.

2. The method according to claim 1, characterized in that The step of determining the animation drawing data interval obtained by decoding the animation file and meeting the static condition comprises: Decoding the animation file to obtain an animation file object; Read the animation drawing data in the animation file object; An animation drawing data section that meets the still condition is determined from the read animation drawing data.

3. The method according to claim 1, characterized in that The animation file includes at least one animation layer; each of the animation layers includes at least two animation attribute groups; each of the animation attribute groups includes at least two animation attribute values; and determining the animation drawing data interval that meets the static condition obtained by decoding the animation file includes: Determining the intervals of values ​​of each animation attribute in the animation attribute group that meet the static condition; Using the intersection of the animation attribute value intervals as the group drawing data interval of the animation attribute group; The intersection of the groups of drawing data intervals is determined as the animation drawing data interval of the animation layer.

4. The method according to claim 3, characterized in that The method further comprises: When there is no intersection between the animation attribute value intervals, caching the starting animation attribute value of the animation attribute value interval; When the animation drawing data corresponding to the frame to be played during the playback of the animation file does not meet the static condition and there is no intersection between the animation attribute value intervals, then Reading the cached starting animation attribute value corresponding to the frame to be played; Obtaining, from the animation file object obtained by decoding the animation file, an animation attribute value corresponding to the frame to be played and not meeting the still condition; Animation rendering is performed according to the read starting animation attribute value and the obtained animation attribute value.

5. The method according to claim 3, characterized in that: The method further comprises: When there is an intersection between the animation attribute value intervals but there is no intersection between the group drawing data intervals, buffering the initial group drawing data of the group drawing data intervals; When the animation drawing data corresponding to the frame to be played during the playback of the animation file does not meet the static condition, Reading the cached starting group drawing data corresponding to the frame to be played; Acquire, from the animation file object obtained by decoding the animation file, group drawing data corresponding to the frame to be played and not meeting the static condition; Animation rendering is performed according to the read initial group drawing data and the acquired group drawing data.

6. The method according to claim 3, characterized in that When the animation attribute group is a drawable element attribute group, the animation attribute group includes at least two drawable elements; the drawable element includes at least two animation attribute values; the method further includes: Determine the intersection of the animation attribute value intervals as the element interval of the drawable element; Calculating the intersection between element intervals of the drawable element; The step of using the intersection of the animation attribute value intervals as the group drawing data interval of the animation attribute group includes: An intersection between the element intervals is determined as a group drawing data interval of the animation attribute group.

7. The method according to claim 1, characterized in that When the animation drawing data corresponding to the frame to be played during the playback of the animation file meets the static condition, reading the cached starting animation drawing data corresponding to the frame to be played includes: When the animation file is played in more than one application, determining the playback progress corresponding to each application; When the animation drawing data of the frame to be played corresponding to the playing progress meets the static condition, The cached initial animation drawing data corresponding to the playback progress and shared by the more than one applications is read.

8. The method according to claim 1, characterized in that The animation file includes a vector diagram; the method further includes: Obtaining animation drawing data about the vector image obtained by decoding the animation file; Performing off-screen rendering on the animation drawing data to obtain animation rendering data; caching the animation rendering data; When the frame to be played during the playing of the animation file is a vector graphics animation frame, the cached animation rendering data corresponding to the frame to be played is read.

9. The method according to claim 8, characterized in that The performing off-screen rendering on the animation drawing data to obtain the animation rendering data comprises: Determining the size of an outer container for displaying the vector image; Determine a scaling ratio of the size of the animation drawing data relative to the size of the external container; Create an off-screen buffer; In the off-screen buffer, the animation drawing data is animatedly rendered according to the size of the external container and the scaling ratio to obtain animation rendering data.

10. The method according to claim 9, characterized in that Determining the scaling ratio of the size of the animation drawing data relative to the size of the external container comprises: Determine a first size ratio between the inner container carrying the animation frame and the outer container; Determine a second size ratio between the animation layer and the internal container; Determine a third size ratio between the animation drawing data in the drawable element attribute group and the animation layer; A scaling ratio is determined based on the first size ratio, the second size ratio, and the third size ratio.

11. The method according to claim 10, characterized in that The method further comprises: When the ratio corresponding to the node in the node tree changes, the changed zoom ratio is obtained; the node tree is composed of the external container, the internal container, the animation layer, the drawable element attribute group and the animation drawing data in the drawable element attribute group; Adjusting the size of the cached animation rendering data according to the scaling ratio; or, The input zoom ratio is obtained, and the size of the cached animation rendering data is adjusted according to the input zoom ratio.

12. The method according to claim 8, characterized in that The method further comprises: When the animation file includes multiple animation layers, and the vector graphics contained in each animation layer are the same but of different sizes, then Get the animation rendering data corresponding to the vector image with the largest size; The caching of the animation rendering data comprises: Cache the animation rendering data corresponding to the largest vector image.

13. The method according to any one of claims 1 to 12, characterized in that: After performing animation rendering according to the read starting animation drawing data, the method further includes: When the animation file includes a pre-synthesis attribute group, determining an animation area in the pre-synthesis attribute group that includes first target animation rendering data; When the size of the non-animation rendering data area contained in the animation area reaches a preset condition, a minimum animation area containing second target animation rendering data is determined; the first target animation rendering data is a part of the second target animation rendering data; Determine an intersection area between the acquired animation area and the minimum animation area; The intersection area is determined as an animation area of ​​the pre-synthesized attribute group.

14. An animation rendering device, characterized in that: The device comprises: File acquisition module, used to acquire animation files in target format; A determination module, used to determine an animation drawing data interval obtained by decoding the animation file and meeting the static condition; the animation drawing data interval is a data interval in which the animation drawing data does not change within a period of time; A data cache module, used for caching the initial animation drawing data in the animation drawing data interval; A data reading module, used for reading cached starting animation drawing data corresponding to the frame to be played when the animation drawing data corresponding to the frame to be played during the playing of the animation file meets the static condition; The animation rendering module is used to perform animation rendering according to the read starting animation drawing data.

15. The device according to claim 14, characterized in that The determination module is further used to decode the animation file to obtain an animation file object; read the animation drawing data in the animation file object; and determine the animation drawing data interval that meets the static condition from the read animation drawing data.

16. The device according to claim 14, characterized in that The animation file includes at least one animation layer; each of the animation layers includes at least two animation attribute groups; each of the animation attribute groups includes at least two animation attribute values; The determination module is further used to determine each animation attribute value interval that meets the static condition in the animation attribute group; use the intersection of the animation attribute value intervals as the group drawing data interval of the animation attribute group; and determine the intersection of the group drawing data intervals as the animation drawing data interval of the animation layer.

17. The device according to claim 16, characterized in that The device also includes: The data caching module is further configured to cache the starting animation attribute value of the animation attribute value interval when there is no intersection between the animation attribute value intervals; The data reading module is further configured to read the cached starting animation attribute value corresponding to the frame to be played when the animation drawing data corresponding to the frame to be played during the playing of the animation file does not meet the static condition and there is no intersection between the animation attribute value intervals; An attribute value acquisition module, used to acquire, from the animation file object obtained by decoding the animation file, an animation attribute value corresponding to the frame to be played and not meeting the still condition; The animation rendering module is further used to perform animation rendering according to the read starting animation attribute value and the acquired animation attribute value.

18. The device according to claim 16, characterized in that The device also includes: The data caching module is further configured to cache the initial group drawing data of the group drawing data interval when there is an intersection between the animation attribute value intervals but there is no intersection between the group drawing data intervals; The data reading module is further used for reading the cached starting group drawing data corresponding to the frame to be played when the animation drawing data corresponding to the frame to be played during the playing of the animation file does not meet the static condition; A data acquisition module, used for acquiring, from the animation file object obtained by decoding the animation file, group drawing data corresponding to the frame to be played and not meeting the static condition; The animation rendering module is further used to perform animation rendering according to the read initial group drawing data and the acquired group drawing data.

19. The device according to claim 16, characterized in that When the animation attribute group is a drawable element attribute group, the animation attribute group includes at least two drawable elements; the drawable elements include at least two animation attribute values; the device further includes: The determining module is further configured to determine the intersection of the animation attribute value intervals as the element interval of the drawable element; An intersection calculation module, used for calculating the intersection between element intervals of the drawable elements; The determining module is further configured to determine the intersection between the element intervals as the group drawing data interval of the animation attribute group.

20. The device according to claim 14, characterized in that The data reading module is also used to determine the playback progress corresponding to each application when the animation file is played in more than one application; when the animation drawing data of the frame to be played corresponding to the playback progress meets the still condition, the cached starting animation drawing data corresponding to the playback progress and shared by the more than one application is read.

21. The device according to claim 14, characterized in that The animation file includes a vector diagram; the device also includes: A data acquisition module, used for acquiring animation drawing data about the vector image obtained by decoding the animation file; The animation rendering module is further used to perform off-screen rendering on the animation drawing data to obtain animation rendering data; The data caching module is further used to cache the animation rendering data; The data reading module is further used to read cached animation rendering data corresponding to the frame to be played when the frame to be played during the playing process of the animation file is a vector graphics animation frame.

22. The device according to claim 21, characterized in that The animation rendering module is also used to determine the size of an external container used to display the vector graph; determine the scaling ratio of the size of the animation drawing data relative to the size of the external container; create an off-screen buffer; and in the off-screen buffer, perform animation rendering on the animation drawing data according to the size of the external container and the scaling ratio to obtain animation rendering data.

23. The device according to claim 22, characterized in that The animation rendering module is further used to determine a first size ratio between the internal container carrying the animation frame and the external container; and determine a second size ratio between the animation layer and the internal container; Determine a third size ratio between the animation drawing data in the drawable element attribute group and the animation layer; and determine a scaling ratio according to the first size ratio, the second size ratio and the third size ratio.

24. The device according to claim 23, characterized in that The device also includes: A zoom ratio acquisition module, used for acquiring the changed zoom ratio when the ratio corresponding to the node in the node tree changes; the node tree is composed of the external container, the internal container, the animation layer, the drawable element attribute group and the animation drawing data in the drawable element attribute group; a size adjustment module, used to adjust the size of the cached animation rendering data according to the scaling ratio; or, The zoom ratio acquisition module is further used to acquire an input zoom ratio and adjust the size of the cached animation rendering data according to the input zoom ratio.

25. The device according to claim 21, characterized in that The device also includes: A data acquisition module, used for acquiring the animation rendering data corresponding to the vector image with the largest size when the animation file includes multiple animation layers and the vector images included in the animation layers are the same but different in size; The data cache module is also used to cache the animation rendering data corresponding to the vector image with the largest size.

26. The device according to any one of claims 14 to 25, characterized in that The device also includes: The data cache module is further used to, when the animation file includes a pre-synthesis attribute group, determine an animation area in the pre-synthesis attribute group that includes first target animation rendering data; when the size of a non-animation rendering data area included in the animation area reaches a preset condition, determine a minimum animation area that includes second target animation rendering data; the first target animation rendering data is a part of the second target animation rendering data; determine an intersection area between the acquired animation area and the minimum animation area; and determine the intersection area as the animation area of ​​the pre-synthesis attribute group.

27. A computer-readable storage medium storing a computer program, wherein when the computer program is executed by a processor, the processor is caused to perform the steps of the method according to any one of claims 1 to 13.

28. A computer device comprising a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the method according to any one of claims 1 to 13.

Images