Animation drawing method, device, storage medium and electronic device

Abstract

The present disclosure relates to the field of computer processing, and in particular to an animation drawing method, an animation drawing device, a storage medium and an electronic device. The animation drawing method comprises responding to drawing instructions of multiple target animations in the graphical user interface, obtaining animation drawing information of the multiple target animations; wherein the animation drawing information comprises the animation position of the target animation in the graphical user interface and the animation resource of the target animation; and asynchronously drawing the multiple target animations on the graphical user interface according to the animation drawing information of the multiple target animations through an animation playback container including an asynchronous thread processing mechanism. The animation drawing method provided by the present disclosure can achieve the purpose of asynchronously drawing SVGA animations.

Description

Technical Field

[0001] The present disclosure relates to the field of computer processing, and in particular to an animation drawing method, device, storage medium and electronic device. Background Art

[0002] In many scenarios of graphical user interfaces, animations are often required. For example, in a live broadcast scenario, animations such as seat frame services, pendant services, and stamp services can be played on the user seats in the voice room, all of which are displayed using SVGA.

[0003] The existing technology is to use SVGAImageView to play SVGA animation. However, when using SVGAImageView, it must be done on the main UI thread, which has a large performance loss on the main thread.

[0004] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute the prior art known to ordinary technicians in the field. Summary of the invention

[0005] The purpose of the present disclosure is to provide an animation drawing method, device, storage medium and electronic device, aiming to achieve the purpose of asynchronously drawing SVGA animation.

[0006] Other features and advantages of the present disclosure will become apparent from the following detailed description, or may be learned in part by the practice of the present disclosure.

[0007] According to one aspect of an embodiment of the present disclosure, there is provided an animation drawing method, comprising: in response to drawing instructions of multiple target animations in the graphical user interface, obtaining animation drawing information of the multiple target animations; wherein the animation drawing information includes animation positions of the target animations in the graphical user interface and animation resources of the target animations; and asynchronously drawing the multiple target animations on the graphical user interface according to the animation drawing information of the multiple target animations through an animation playback container including an asynchronous thread processing mechanism.

[0008] According to some embodiments of the present disclosure, based on the aforementioned scheme, the multiple target animations are asynchronously drawn on the graphical user interface according to the animation drawing information of the multiple target animations through an animation playback container including an asynchronous thread processing mechanism, including: constructing animation proxy classes corresponding to the multiple target animations respectively; using each animation proxy class to create drawing instructions corresponding to each target animation according to the animation drawing information corresponding to the target animation of the animation proxy class; asynchronously executing the drawing instructions corresponding to each target animation through the animation playback container including the asynchronous thread processing mechanism, so as to asynchronously draw the multiple target animations on the graphical user interface.

[0009] According to some embodiments of the present disclosure, based on the aforementioned scheme, the obtaining of animation drawing information of the multiple target animations includes: obtaining the animation position of a first target animation in the graphical user interface; the first target animation is any target animation among multiple target animations; the obtaining of the animation position of the first target animation in the graphical user interface includes: determining a target-associated object corresponding to the first target animation based on the drawing instruction of the first target animation; obtaining position information of the target-associated object in the graphical user interface, and obtaining relative position information of the first target animation and the target-associated object in the graphical user; determining the animation position of the first target animation in the graphical user interface according to the position information and the relative position information.

[0010] According to some embodiments of the present disclosure, based on the aforementioned scheme, after obtaining the animation position of the first target animation in the graphical user interface, the method also includes: storing the position information of the target-associated object corresponding to the first target animation and the relative position information between the first target animation and the target-associated object in the animation proxy class corresponding to the first target animation; when the position information of the target-associated object in the graphical user interface changes, updating the position information of the target-associated object corresponding to the first target animation in the animation proxy class.

[0011] According to some embodiments of the present disclosure, based on the aforementioned scheme, after acquiring the animation resources of the target animation, the method further includes: using a drawable resource class to convert the animation resources of the target animation into display frames; and storing the display frames of the target animation in an animation proxy class corresponding to the target animation.

[0012] According to some embodiments of the present disclosure, based on the aforementioned scheme, the animation proxy class stores the animation position and display frame corresponding to the target animation; the drawing instruction includes a single-frame drawing request for each display frame in each target animation; the using of each of the animation proxy classes to create the drawing instruction corresponding to the target animation according to the animation drawing information corresponding to the animation proxy class includes: using the animation proxy class corresponding to the first target animation to create a single-frame drawing request for each display frame corresponding to the first target animation according to the animation drawing information of the first target animation; the first target animation is any target animation among multiple target animations; the using of the animation proxy class corresponding to the first target animation to create a single-frame drawing request for each display frame corresponding to the first target animation according to the animation drawing information of the first target animation includes: based on the animation corresponding to the first target animation The display frame of the first target animation stored in the drawing proxy class extracts the current display frame, and rewrites the drawing logic of the current display frame to obtain the current drawing frame of the first target animation; and based on the animation position of the first target animation stored in the animation proxy class corresponding to the first target animation, extracts the current drawing position of the current drawing frame of the first target animation; creates a single-frame drawing request corresponding to the current drawing frame in the first target animation according to the current drawing frame and the current drawing position of the first target animation, and sends the single-frame drawing request to the animation playback container; when the animation playback container completes the drawing of the current drawing frame in the first target animation based on the single-frame drawing request, repeats the above process of creating and sending the single-frame drawing request until the single-frame drawing requests of all display frames of the first target animation are sent.

[0013] According to some embodiments of the present disclosure, based on the aforementioned scheme, the asynchronous execution of each drawing instruction through an animation playback container that includes an asynchronous thread processing mechanism includes: executing single-frame drawing requests for each display frame of the first target animation in sequence through the animation playback container; the executing single-frame drawing requests for each display frame of the first target animation in sequence through the animation playback container includes: in response to a single-frame drawing request for the current drawing frame of the first target animation sent by an animation proxy class corresponding to the first target animation, extracting the current drawing frame and the current drawing position corresponding to the single-frame drawing request through the animation playback container; deleting the display frame corresponding to the current drawing position, and drawing the current drawing frame of the first target animation at the current drawing position; and repeating the above-mentioned drawing process of the current drawing frame in sequence until all display frames of the first target animation are drawn.

[0014] According to a second aspect of an embodiment of the present disclosure, an animation drawing device is provided, comprising: a response module, for responding to drawing instructions of multiple target animations in the graphical user interface, and obtaining animation drawing information of the multiple target animations; wherein the animation drawing information includes the animation position of the target animation in the graphical user interface and the animation resource of the target animation; a drawing module, for asynchronously drawing the multiple target animations on the graphical user interface according to the animation drawing information of the multiple target animations through an animation playback container including an asynchronous thread processing mechanism.

[0015] According to a third aspect of the embodiments of the present disclosure, there is provided a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the animation drawing method in the above embodiments is implemented.

[0016] According to the fourth aspect of the embodiments of the present disclosure, an electronic device is provided, characterized in that it includes: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement the animation drawing method as in the above embodiments.

[0017] The exemplary embodiments of the present disclosure may have some or all of the following beneficial effects:

[0018] In the technical solutions provided by some embodiments of the present disclosure, when drawing instructions for multiple target animations in a graphical user interface are received, the animation drawing information of each target animation is first obtained, and then the asynchronous thread processing mechanism of the animation playback container is utilized to utilize the asynchronous thread to draw the multiple target animations according to the animation drawing information. On the one hand, the target animation can be drawn in the asynchronous thread, thereby reducing the overhead of the UI thread and optimizing the page jams; on the other hand, the asynchronous thread pool of the animation playback container can be utilized to realize the asynchronous drawing of multiple target animations, thereby reducing the overhead of position measurement and animation drawing.

[0019] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] The drawings herein are incorporated into the specification and constitute a part of the specification, showing embodiments consistent with the present disclosure, and together with the specification, are used to explain the principles of the present disclosure. Obviously, the drawings described below are only some embodiments of the present disclosure, and for ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0021] Figure 1A schematic diagram schematically illustrates a flow chart of an animation drawing method in an exemplary embodiment of the present disclosure;

[0022] Figure 2 A schematic diagram of a graphical user interface of a voice room in an exemplary embodiment of the present disclosure is schematically shown;

[0023] Figure 3 A schematic diagram schematically shows the positional relationship between an animation playback container and a voice room in an exemplary embodiment of the present disclosure;

[0024] Figure 4 A schematic diagram schematically illustrates a flow chart of an animation drawing method in an exemplary embodiment of the present disclosure;

[0025] Figure 5 A schematic diagram schematically shows the composition of an animation drawing device in an exemplary embodiment of the present disclosure;

[0026] Figure 6 A schematic diagram schematically illustrates a computer-readable storage medium in an exemplary embodiment of the present disclosure;

[0027] Figure 7 A schematic diagram schematically shows the structure of a computer system of an electronic device in an exemplary embodiment of the present disclosure. DETAILED DESCRIPTION

[0028] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be more comprehensive and complete and will fully convey the concept of the example embodiments to those skilled in the art.

[0029] In addition, the described features, structures or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced without one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known methods, devices, implementations or operations are not shown or described in detail to avoid blurring the various aspects of the present disclosure.

[0030] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities may be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0031] The flowcharts shown in the accompanying drawings are only exemplary and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps can be decomposed, and some operations / steps can be combined or partially combined, so the actual execution order may change according to actual conditions.

[0032] The technical solution of the present application can be applied to animation playback scenarios in terminal device interfaces. The terminal devices may be mobile phones, computers, or handheld terminals, etc. The animation may be SVGA animation. SVGA (Super Video Graphics Array) is an advanced video graphics array that is compatible with Android, iOS, and the web and can implement a variety of animation formats, such as widget playback animations in live broadcast scenes, seat frame playback animations, and so on.

[0033] The implementation details of the technical solution of the embodiment of the present disclosure are elaborated in detail below.

[0034] Figure 1 The flowchart of an animation drawing method in an exemplary embodiment of the present disclosure is schematically shown. Figure 1 As shown, the animation drawing method includes steps S1 to S2:

[0035] Step S1, in response to drawing instructions of multiple target animations in a graphical user interface, obtaining animation drawing information of multiple target animations; wherein the animation drawing information includes animation positions of the target animations in the graphical user interface and animation resources of the target animations;

[0036] Step S2, asynchronously drawing multiple target animations on a graphical user interface according to the animation drawing information of the multiple target animations through an animation playing container including an asynchronous thread processing mechanism.

[0037] In the technical solutions provided by some embodiments of the present disclosure, when drawing instructions for multiple target animations in a graphical user interface are received, the animation drawing information of each target animation is first obtained, and then the asynchronous thread processing mechanism of the animation playback container is utilized to utilize the asynchronous thread to draw the multiple target animations according to the animation drawing information. On the one hand, the target animation can be drawn in the asynchronous thread, thereby reducing the overhead of the UI thread and optimizing the page jams; on the other hand, the asynchronous thread pool of the animation playback container can be utilized to realize the asynchronous drawing of multiple target animations, thereby reducing the overhead of position measurement and animation drawing.

[0038] Below, each step of the animation drawing method in this example implementation will be described in more detail with reference to the accompanying drawings and embodiments.

[0039] In step S1, in response to drawing instructions of multiple target animations in a graphical user interface, animation drawing information of multiple target animations is obtained; wherein the animation drawing information includes animation positions of the target animations in the graphical user interface and animation resources of the target animations.

[0040] Specifically, in a graphical user interface, it is often necessary to draw a target animation. For example, in a live broadcast scenario, a voice room includes multiple user seats, and each seat may display multiple business functions such as seat frames, pendants, and stamps at the same time, all of which need to be animated using SVGA. Therefore, the target animation can be an SVGA animation that needs to be drawn at a seat.

[0041] Figure 2 The following schematically shows a graphical user interface diagram of a voice room in an exemplary embodiment of the present disclosure. Figure 2 The graphical user interface shown in the live broadcast scene includes 9 seats 201 to 209, among which seats 202 and 209 both include widget services. Different widget services have different positions for SVGA animation drawing. The widget at seat 202 is drawn above and below seat 202, and the widget at seat 209 is drawn at the upper right corner of seat 209.

[0042] Therefore, different seats may have different SVGA animation drawing requirements. When a seat in the voice room needs to display business, the live broadcast platform client will generate seat animation drawing instructions based on the target seat and business needs. Figure 2 The "hat" pendant seat animation of the target seat 209.

[0043] Different seats need to draw different target animations, so the live broadcast platform client can generate multiple target animation drawing instructions respectively, and the live broadcast platform background server responds to the multiple drawing instructions to obtain the animation drawing information of the target animation corresponding to each drawing instruction.

[0044] The animation drawing information may include the animation position to be drawn and the animation resources. Animation resources refer to the animation content data to be drawn, such as seat frames, pendants, stamps and other animation contents. Different services of the same seat may correspond to different animation resources. The animation position is the coordinate position information where the animation needs to be drawn on the graphical user interface.

[0045] In step S2, multiple target animations are asynchronously drawn on a graphical user interface according to the animation drawing information of the multiple target animations through an animation playing container including an asynchronous thread processing mechanism.

[0046] In one embodiment of the present disclosure, a video container is developed in advance, that is, an AudioHallAnimTextureView (animation playback container) is obtained and arranged on an upper layer of a graphical user interface.

[0047] Figure 3 A schematic diagram schematically shows the positional relationship between an animation playback container and a live broadcast room in an exemplary embodiment of the present disclosure, with reference to Figure 3 As shown, 301 is a voice room, circle 302 represents seats in the room, and an animation playing container 303 is arranged on the upper layer of the voice room 301.

[0048] Animation playback container is a video container that can package files of different formats together to generate a file. The package file can be opened by video playback software for playback.

[0049] Specifically, AudioHallAnimTextureView is implemented based on TextureView (texture view), which can realize asynchronous drawing of content streams. The drawing of SVGA animation is delegated to AudioHallAnimTextureView for processing, and the asynchronous drawing of SVGA animation can be realized through AudioHallAnimTextureView.

[0050] In addition, AudioHallAnimTextureView can also store the AnimDrawableDelegate that entrusts it to draw, so as to manage multiple SVGA animations in a unified way.

[0051] The animation playback container includes a Handler (asynchronous thread processing mechanism) built by an asynchronous thread. The Handler is used to process asynchronous messages. After receiving the drawing instruction, the asynchronous thread Handler will perform drawing operations on the thread that created the handler. It can process multiple SVGA animation playbacks simultaneously through a video container.

[0052] Compared with the prior art of using SVGAImageView video container to play SVGA animation, when using SVGAImageView, one SVGA animation must correspond to a separate SVGAImageView video container. In the method provided by the present invention, there is only one AudioHallAnimTextureView animation playback container. This View (animation playback container) can handle the animation playback of multiple SVGA at the same time. Therefore, when there are too many SVGA animations, the View's overhead in measurement, layout and drawing can be reduced to avoid page freezes.

[0053] In one embodiment of the present disclosure, after receiving a drawing instruction, animation drawing information corresponding to the instruction can be obtained, and animation drawing can be performed according to animation resource data and animation position information through an asynchronous thread.

[0054] Compared with the prior art in which animation drawing using SVGAImageView must be performed on the main thread, using the asynchronous thread created by the AudioHallAnimTextureView animation playback container to complete animation drawing can reduce the overhead of the UI thread and optimize page freezes.

[0055] In one embodiment of the present disclosure, for step S2, the animation playback container including the asynchronous thread processing mechanism is used to asynchronously draw multiple target animations on the graphical user interface according to the animation drawing information of the multiple target animations, including:

[0056] Step S21, constructing animation proxy classes corresponding to multiple target animations respectively;

[0057] Step S22, using each animation proxy class to create a drawing instruction corresponding to each target animation according to the animation drawing information of the target animation corresponding to the animation proxy class;

[0058] Step S23 , asynchronously executing the drawing instructions corresponding to each target animation through the animation playing container including the asynchronous thread processing mechanism, so as to asynchronously draw multiple target animations on the graphical user interface.

[0059] Next, steps S21 to S23 will be described in detail.

[0060] In step S21, animation proxy classes corresponding to a plurality of target animations are constructed.

[0061] Specifically, after receiving the drawing instruction of the target animation, the corresponding AnimDrawableDelegate (animation proxy class) will be created in advance for the target animation to manage the animation drawing process of the target animation. The animation proxy class belongs to the concept of "class" in the field of programming. Class is an abstract concept, which is an abstraction of a certain type of thing.

[0062] It should be noted that, in order to manage animation drawing, the animation proxy class needs to store the animation position and display frame corresponding to the target animation corresponding to the animation proxy class in advance. Therefore, after the animation proxy class is created in step S21, the animation position and display frame corresponding to the target animation also need to be stored in AnimDrawableDelegate.

[0063] ①Animation position in the animation proxy class

[0064] The animation position of the target animation can be determined by the target associated object corresponding to the target animation. Generally speaking, the animation can be drawn for the associated object on the graphical user interface, so the animation drawing position is related to the position of the associated object, and is also related to the relative position between the animation and the associated object.

[0065] by Figure 3 Taking the graphical user interface shown as an example, there are multiple seats, i.e., associated objects, arranged in a voice room. Each seat has its corresponding coordinates. The target animation drawn is for the seat, so when determining the animation position, it is necessary to determine the position of the target seat corresponding to the animation drawing instruction. In addition, it is also necessary to obtain the relative position of the SVGA animation and the seat, such as drawing on the left or right side.

[0066] Therefore, further, for any first target animation among multiple target animations, obtaining the animation position of the first target animation in the graphical user interface includes: determining the target-associated object corresponding to the first target animation based on the drawing instruction of the first target animation; obtaining the position information of the target-associated object in the graphical user interface, and obtaining the relative position information between the first target animation and the target-associated object in the graphical user; determining the animation position of the first target animation in the graphical user interface based on the position information and the relative position information.

[0067] There are two forms for obtaining the position information of the target associated object corresponding to the target animation in the graphical user interface.

[0068] One is to pre-store the position information of all associated objects in the graphical user interface, and directly extract the position information of the target object when receiving the drawing instruction. Based on the above method, when drawing the animation, you only need to obtain the relative position relationship between the animation and the associated objects in the target animation according to the drawing instruction, and you can calculate the animation position in combination with the stored positions of the associated objects, which reduces the overhead of page measurement to a certain extent and optimizes page performance.

[0069] The other is to obtain the position information of the associated object in real time according to the drawing instruction when receiving the drawing instruction. Since the position information of the associated object is not pre-stored, it is necessary to obtain the position information of the associated object and the relative position information of the target animation and the associated object when receiving the drawing instruction, and then calculate the animation position according to the obtained information.

[0070] It should be noted that the position information of the target associated object and the relative position relationship between the target animation and the target associated object need to be stored in the pre-created animation proxy class AnimDrawableDelegate, and then the animation proxy class implements the drawing management of the target animation.

[0071] Therefore, after obtaining the animation position of the target animation in the graphical user interface and constructing the animation proxy class, the method also includes: storing the position information of the target associated object corresponding to the first target animation and the relative position information between the first target animation and the target associated object in the animation proxy class corresponding to the first target animation.

[0072] In one embodiment of the present disclosure, the method further includes: when the position information of the target-associated object in the graphical user interface changes, updating the position information of the target-associated object corresponding to the first target animation in the animation proxy class.

[0073] Specifically, the layout information of associated objects in the graphical user interface may change. When the layout of associated objects changes, the position information of each associated object in the layout will also change. It is necessary to update the position information of the associated objects stored in the animation proxy class in real time to ensure that the animation position is calculated correctly and the target animation is drawn accurately.

[0074] For example, Figure 3 In the voice room shown, when the seat layout in the voice room changes, the animation agent class can be notified in time and the latest position information of the seats can be updated synchronously.

[0075] ②Display frames in animation proxy class

[0076] As for the display frames of the target animation, other tools are needed to convert the animation resources into display frames in advance, and then store the display frames in the animation proxy class.

[0077] Furthermore, after acquiring the animation resources of the target animation and constructing the animation proxy class, the method also includes: using the drawable resource class to convert the animation resources of the target animation into display frames; storing the display frames of the target animation in the animation proxy class corresponding to the target animation.

[0078] Among them, the drawable resource class refers to the CcSVGADrawable (frame animation) module, which can calculate the frame animation of the obtained animation resources of the seat animation, convert the animation resources into Drawable (display frame), and View can render it on the screen. Similar to the animation proxy class, both belong to the concept of "class" in programming.

[0079] After calculating the display frame, the CcSVGADrawable module stores the current display frame in the AnimDrawableDelegate animation proxy class for subsequent animation proxy classes to perform animation drawing.

[0080] In step S22, each animation proxy class is used to create a drawing instruction corresponding to each target animation according to the animation drawing information of the target animation corresponding to the animation proxy class.

[0081] The AnimDrawableDelegate animation proxy class stores the position where the SVGA animation needs to be displayed and the display frame to be played. Each time the SVGA is drawn, the animation proxy class creates a drawing instruction for each frame, and then delegates the drawing work to the AudioHallAnimTextureView playback container, and tells the AudioHallAnimTextureView playback container to draw the SVGA at that animation position.

[0082] In addition, a target animation includes multiple frames. Therefore, when the drawing of the target animation is completed, creating a drawing instruction of the target animation is to create a single-frame drawing request corresponding to each display frame in the target animation.

[0083] Further, in step S22, the process of converting multiple animation proxy classes into a single animation proxy class for animation proxying is as follows: using the animation proxy class corresponding to the first target animation to create a single frame drawing request for each display frame corresponding to the first target animation according to the animation drawing information of the first target animation, specifically including the following steps:

[0084] Step S221, extracting the current display frame based on the display frame of the first target animation stored in the animation proxy class corresponding to the first target animation, and rewriting the drawing logic of the current display frame to obtain the current drawing frame of the first target animation;

[0085] Step S222, extracting the current drawing position of the current drawing frame of the first target animation based on the animation position of the first target animation stored in the animation proxy class corresponding to the first target animation;

[0086] Step S223, creating a single-frame drawing request corresponding to the current drawing frame in the first target animation according to the current drawing frame and the current drawing position of the first target animation, and sending the single-frame drawing request to the animation playback container;

[0087] Step S224, when the animation playback container completes drawing of the current drawing frame in the first target animation based on the single-frame drawing request, repeat the above process of creating and sending the single-frame drawing request until the single-frame drawing requests for all display frames of the first target animation are sent.

[0088] In step S221, since the view container used for animation drawing in the present disclosure is the pre-developed AudioHallAnimTextureView animation playback container, it is necessary to rewrite the drawing logic of the Drawable display frame obtained by the CcSVGADrawable module so that it can be drawn by the animation playback container AudioHallAnimTextureView.

[0089] Therefore, the current display frame is extracted from the display frame stored in the animation proxy class, and the drawing logic of the current display frame is rewritten to obtain the current drawing frame that can be drawn by the animation playback container. It should be noted that the current display frame is the drawing logic obtained by using the CcSVGADrawable module, and the current drawing frame is the drawing logic that can be read by the animation playback container after rewriting. The content of the two frames is the same, but the drawing logic is different.

[0090] In step S222, the AnimDrawableDelegate animation proxy class extracts the pre-acquired animation position of the target animation as the current drawing position of the current drawing frame, that is, indicates the position of the animation drawing.

[0091] In step S223, a single-frame drawing request is created according to the current display frame and the current drawing position, and the single-frame drawing request is sent to the animation playback container to delegate the drawing of the content of the current display frame to the AudioHallAnimTextureView animation playback container.

[0092] In step S224, the animation playback container executes the single-frame drawing request and feeds back the drawing result to the animation playback container. If a drawing success instruction is received, the above steps are repeated to continue drawing the next frame of the animation, that is, extracting the current display frame, rewriting the drawing logic of the current display frame to obtain the current drawing frame, and creating a single-frame drawing request, and the cycle continues until the last key frame of SVGA is processed. In this way, from a visual point of view, an animation effect is formed.

[0093] In step S23, the drawing instructions corresponding to each target animation are asynchronously executed by the animation playing container including the asynchronous thread processing mechanism, so as to asynchronously draw multiple target animations on the graphical user interface.

[0094] During animation drawing, since the AnimDrawableDelegate animation proxy class delegates the animation drawing content to the AudioHallAnimTextureView animation playback container, the animation playback container is responsible for completing the drawing. Specifically, the animation playback container is responsible for executing the drawing instructions of multiple different target animations, and the drawing instructions of each target animation include single-frame drawing requests of multiple different display frames.

[0095] Further, step S23 is specifically that when the animation playback container executes the single-frame drawing request, the animation playback container sequentially executes the single-frame drawing request of each display frame of the first target animation, which specifically includes the following steps:

[0096] Step S231, in response to a single-frame drawing request of a current drawing frame of the first target animation sent by the animation proxy class corresponding to the first target animation, extracting the current drawing frame and the current drawing position corresponding to the single-frame drawing request through the animation playback container;

[0097] Step S232, deleting the display frame corresponding to the current drawing position, and drawing the current drawing frame of the first target animation at the current drawing position;

[0098] Step S233, repeating the above-mentioned drawing process of the current drawing frame in sequence until all display frames of the first target animation are drawn.

[0099] Specifically, the animation playback container responds to the single-frame drawing request sent by the animation proxy class, and the single-frame drawing request includes the frame to be drawn and the position.

[0100] Using the Canvas control in the view container, first clear the existing Drawable at the current drawing position, and then draw the current drawing frame obtained according to the single-frame drawing request at this position of the Canvas.

[0101] Based on the above method, when it is necessary to draw SVGA animation, an AnimDrawableDelegate animation proxy class will be created to manage the drawing of the SVGA animation. On the one hand, the animation proxy class is used to store relevant information about the target animation, such as display frame, animation position, etc. It can determine the display position of the SVGA animation, the start and end of the SVGA animation, and the frame Drawable of the SVGA currently being displayed; on the other hand, it is also used to delegate the drawing work to the animation playback container AudioHallAnimTextureView, and inform the animation playback container AudioHallAnimTextureView which frame of SVGA animation should be drawn at which position when drawing each frame.

[0102] At the same time, since the same animation playback container AudioHallAnimTextureView controls multiple animation proxy classes AnimDrawableDelegate at the same time, the animation playback container AudioHallAnimTextureView can draw multiple SVGA animations at the same time, reducing the overhead of the UI thread and optimizing page freezes.

[0103] Figure 4 The following is a schematic diagram of a flow chart of an animation drawing method in an exemplary embodiment of the present disclosure. Figure 4 As shown in the figure, the animation drawing process is described in detail. The specific process is as follows:

[0104] Step S401, obtaining the relative position between the SVGA animation and the target seat.

[0105] Step S402, obtaining the position of the target seat; it can be extracted from AnimDrawableDelegate.

[0106] Step S403, obtaining SVGA animation resources.

[0107] Step S404, constructing the AnimDrawableDelegate animation proxy class;

[0108] Step S405, CcSVGADrawable calculates the frame Drawable that needs to be drawn currently; that is, it calculates according to the animation resources;

[0109] Step S406, notifying AnimDrawableDelegate; that is, storing the calculated current display frame Drawable in AnimDrawableDelegate.

[0110] Step S407, notifying AudioHallAnimTextureView; that is, AnimDrawableDele-gate sends a single frame drawing request according to the current drawing frame and the current drawing position.

[0111] Step S408, clearing the image at the current drawing position;

[0112] Step S409, drawing the current drawing frame on Canvas;

[0113] Step S410, determine whether the current drawing frame is the last frame; if not, execute step S405, repeat calculation and drawing; if yes, jump to step S411 to complete drawing.

[0114] Figure 5 The following is a schematic diagram showing the composition of an animation drawing device in an exemplary embodiment of the present disclosure. Figure 5 As shown, the animation drawing device 500 may include a response module 501 and a drawing module 502. Among them:

[0115] A response module 501 is used to respond to the drawing instructions of multiple target animations in the graphical user interface and obtain animation drawing information of multiple target animations; wherein the animation drawing information includes the animation position of the target animation in the graphical user interface and the animation resource of the target animation;

[0116] The drawing module 502 is used to asynchronously draw multiple target animations on a graphical user interface according to the animation drawing information of the multiple target animations through an animation playing container including an asynchronous thread processing mechanism.

[0117] According to an exemplary embodiment of the present disclosure, the drawing module 502 includes a construction unit, an instruction unit and a drawing unit. The construction unit is used to construct animation proxy classes corresponding to multiple target animations respectively. The instruction unit is used to use each animation proxy class to create drawing instructions corresponding to each target animation according to the animation drawing information corresponding to the target animation of the animation proxy class; the drawing unit is used to asynchronously execute the drawing instructions corresponding to each target animation through an animation playback container that includes an asynchronous thread processing mechanism, so as to asynchronously draw multiple target animations on a graphical user interface.

[0118] According to an exemplary embodiment of the present disclosure, the response module 501 is also used to determine the target-associated object corresponding to the first target animation based on the drawing instruction of the first target animation; obtain the position information of the target-associated object in the graphical user interface, and obtain the relative position information of the first target animation and the target-associated object in the graphical user interface; determine the animation position of the first target animation in the graphical user interface based on the position information and the relative position information.

[0119] According to an exemplary embodiment of the present disclosure, the response module 501 is also used to store the position information of the target-associated object corresponding to the first target animation and the relative position information between the first target animation and the target-associated object in the animation proxy class corresponding to the first target animation after obtaining the animation position of the first target animation in the graphical user interface; when the position information of the target-associated object in the graphical user interface changes, the position information of the target-associated object corresponding to the first target animation in the animation proxy class is updated.

[0120] According to an exemplary embodiment of the present disclosure, the response module 501 is also used to convert the animation resources of the target animation into display frames using the drawable resource class after acquiring the animation resources of the target animation; and store the display frames of the target animation in the animation proxy class corresponding to the target animation.

[0121] According to an exemplary embodiment of the present disclosure, the animation position and display frame corresponding to the target animation are stored in the animation proxy class; the drawing instruction includes a single-frame drawing request for each display frame in each target animation; the instruction unit is also used to extract the current display frame based on the display frame of the first target animation stored in the animation proxy class corresponding to the first target animation, and rewrite the drawing logic of the current display frame to obtain the current drawing frame of the first target animation; and based on the animation position of the first target animation stored in the animation proxy class corresponding to the first target animation, extract the current drawing position of the current drawing frame of the first target animation; create a single-frame drawing request corresponding to the current drawing frame in the first target animation according to the current drawing frame and the current drawing position of the first target animation, and send the single-frame drawing request to the animation playback container; when the animation playback container completes the drawing of the current drawing frame in the first target animation based on the single-frame drawing request, repeat the above process of creating and sending the single-frame drawing request until the single-frame drawing requests for all display frames of the first target animation are sent.

[0122] According to an exemplary embodiment of the present disclosure, the drawing unit is also used to respond to a single-frame drawing request for the current drawing frame of the first target animation sent by the animation proxy class corresponding to the first target animation, extract the current drawing frame and the current drawing position corresponding to the single-frame drawing request through the animation playback container; delete the display frame corresponding to the current drawing position, and draw the current drawing frame of the first target animation at the current drawing position; repeat the above-mentioned drawing process of the current drawing frame in sequence until all display frames of the first target animation are drawn.

[0123] The specific details of each module in the above-mentioned animation drawing device 500 have been described in detail in the corresponding animation drawing method, so they will not be repeated here.

[0124] It should be noted that, although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. On the contrary, the features and functions of one module or unit described above can be further divided into multiple modules or units to be embodied.

[0125] In an exemplary embodiment of the present disclosure, a storage medium capable of implementing the above method is also provided. Figure 6 A schematic diagram schematically illustrates a computer-readable storage medium in an exemplary embodiment of the present disclosure, such as Figure 6As shown, a program product 600 for implementing the above method according to an embodiment of the present disclosure is described, which can adopt a portable compact disk read-only memory (CD-ROM) and include program code, and can be run on a terminal device, such as a mobile phone. However, the program product of the present disclosure is not limited thereto. In this document, a readable storage medium can be any tangible medium containing or storing a program, which can be used by or in combination with an instruction execution system, an apparatus or a device.

[0126] In an exemplary embodiment of the present disclosure, an electronic device capable of implementing the above method is also provided. Figure 7 A schematic diagram schematically shows the structure of a computer system of an electronic device in an exemplary embodiment of the present disclosure.

[0127] It should be noted that Figure 7 The computer system 700 of the electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0128] like Figure 7 As shown, the computer system 700 includes a central processing unit (CPU) 701, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 702 or the program loaded from the storage part 708 to the random access memory (RAM) 703. In the RAM 703, various programs and data required for system operation are also stored. The CPU 701, the ROM 702 and the RAM 703 are connected to each other through a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0129] The following components are connected to the I / O interface 705: an input section 706 including a keyboard, a mouse, etc.; an output section 707 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 708 including a hard disk, etc.; and a communication section 709 including a network interface card such as a LAN (Local Area Network) card, a modem, etc. The communication section 709 performs communication processing via a network such as the Internet. A drive 710 is also connected to the I / O interface 705 as needed. A removable medium 711, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 710 as needed so that a computer program read therefrom is installed into the storage section 708 as needed.

[0130] In particular, according to an embodiment of the present disclosure, the process described below with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication section 709, and / or installed from a removable medium 711. When the computer program is executed by a central processing unit (CPU) 701, various functions defined in the system of the present disclosure are executed.

[0131] It should be noted that the computer-readable medium shown in the embodiment of the present disclosure may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a flash memory, an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program, which may be used by an instruction execution system, device or device or used in combination with it. In the present disclosure, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, wherein a computer-readable program code is carried. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate, or transmit programs for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the above.

[0132] The flow charts and block diagrams in the accompanying drawings illustrate the possible architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the above-mentioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0133] The units involved in the embodiments described in the present disclosure may be implemented by software or hardware, and the units described may also be arranged in a processor. The names of these units do not, in some cases, constitute limitations on the units themselves.

[0134] As another aspect, the present disclosure further provides a computer-readable medium, which may be included in the electronic device described in the above embodiment; or may exist independently without being assembled into the electronic device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by an electronic device, the electronic device implements the method described in the above embodiment.

[0135] It should be noted that, although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. On the contrary, the features and functions of one module or unit described above can be further divided into multiple modules or units to be embodied.

[0136] Through the description of the above implementation, it is easy for those skilled in the art to understand that the example implementation described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the implementation of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, including several instructions to enable a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to execute the method according to the implementation of the present disclosure.

[0137] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary technical means in the art that are not disclosed in the present disclosure.

[0138] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. An animation drawing method, providing a graphical user interface through a terminal device, characterized in that: include: In response to drawing instructions of multiple target animations in the graphical user interface, acquiring animation drawing information of the multiple target animations; wherein the animation drawing information includes animation positions of the target animations in the graphical user interface and animation resources of the target animations; Construct animation proxy classes corresponding to the multiple target animations respectively; use each of the animation proxy classes to create drawing instructions corresponding to each target animation according to the animation drawing information of the target animation corresponding to the animation proxy class; asynchronously execute the drawing instructions corresponding to each target animation through an animation playback container including an asynchronous thread processing mechanism, so as to asynchronously draw the multiple target animations on the graphical user interface.

2. The animation drawing method according to claim 1, characterized in that: The step of acquiring the animation drawing information of the plurality of target animations comprises: acquiring an animation position of a first target animation in the graphical user interface; the first target animation is any target animation among the plurality of target animations; The obtaining of the animation position of the first target animation in the graphical user interface comprises: Determining a target-associated object corresponding to the first target animation based on the drawing instruction of the first target animation; Acquire position information of the target-associated object in the graphical user interface, and acquire relative position information of the first target animation and the target-associated object in the graphical user interface; The animation position of the first target animation in the graphical user interface is determined according to the position information and the relative position information.

3. The animation drawing method according to claim 2, characterized in that: After acquiring the animation position of the first target animation in the graphical user interface, the method further includes: storing the position information of the target-associated object corresponding to the first target animation and the relative position information between the first target animation and the target-associated object in the animation proxy class corresponding to the first target animation; When the position information of the target-associated object in the graphical user interface changes, the position information of the target-associated object corresponding to the first target animation in the animation proxy class is updated.

4. The animation drawing method according to claim 1, characterized in that: After acquiring the animation resource of the target animation, the method further includes: Use the drawable resource class to convert the animation resources of the target animation into display frames; The display frame of the target animation is stored in the animation proxy class corresponding to the target animation.

5. The animation drawing method according to claim 1, characterized in that: The animation proxy class stores the animation position and display frame corresponding to the target animation; the drawing instruction includes a single-frame drawing request for each display frame in each target animation; and the using of each animation proxy class to create a drawing instruction corresponding to each target animation according to the animation drawing information corresponding to the target animation of the animation proxy class includes: Using the animation proxy class corresponding to the first target animation to create a single-frame drawing request corresponding to each display frame of the first target animation according to the animation drawing information of the first target animation; the first target animation is any target animation among the multiple target animations; The step of using the animation proxy class corresponding to the first target animation to create a single-frame drawing request corresponding to each display frame of the first target animation according to the animation drawing information of the first target animation includes: Extracting a current display frame based on a display frame of the first target animation stored in the animation proxy class corresponding to the first target animation, and rewriting the drawing logic of the current display frame to obtain a current drawing frame of the first target animation; and Extracting a current drawing position of the current drawing frame of the first target animation based on the animation position of the first target animation stored in the animation proxy class corresponding to the first target animation; Creating a single-frame drawing request corresponding to the current drawing frame in the first target animation according to the current drawing frame and the current drawing position of the first target animation, and sending the single-frame drawing request to the animation playback container; When the animation playback container completes drawing of the current drawing frame in the first target animation based on the single-frame drawing request, the process of creating and sending the single-frame drawing request is repeated until the single-frame drawing requests for all display frames of the first target animation are sent.

6. The animation drawing method according to claim 5, characterized in that: The asynchronously executing each of the drawing instructions by an animation playback container including an asynchronous thread processing mechanism includes: Sequentially executing single-frame drawing requests of each display frame of the first target animation through the animation playback container; The sequentially executing the single-frame drawing requests of each display frame of the first target animation through the animation playback container includes: In response to a single-frame drawing request of a current drawing frame of the first target animation sent by the animation proxy class corresponding to the first target animation, extracting the current drawing frame and the current drawing position corresponding to the single-frame drawing request through the animation playback container; Deleting the display frame corresponding to the current drawing position, and drawing the current drawing frame of the first target animation at the current drawing position; The drawing process of the current drawing frame is repeated in sequence until all display frames of the first target animation are drawn.

7. An animation drawing device, providing a graphical user interface through a terminal device, characterized in that: include: A response module, configured to respond to drawing instructions of multiple target animations in the graphical user interface and obtain animation drawing information of the multiple target animations; wherein the animation drawing information includes animation positions of the target animations in the graphical user interface and animation resources of the target animations; A drawing module is used to construct animation proxy classes corresponding to the multiple target animations respectively; use each of the animation proxy classes to create drawing instructions corresponding to each target animation according to the animation drawing information of the target animation corresponding to the animation proxy class; asynchronously execute the drawing instructions corresponding to each target animation through an animation playback container including an asynchronous thread processing mechanism, so as to asynchronously draw the multiple target animations on the graphical user interface.

8. A computer-readable storage medium having a computer program stored thereon, wherein the program, when executed by a processor, implements the animation drawing method according to any one of claims 1 to 6.

9. An electronic device, characterized in that: include: one or more processors; A storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, enables the one or more processors to implement the animation drawing method according to any one of claims 1 to 6.

Images