Animation playback method, device, terminal equipment and storage medium

Abstract

The present invention provides an animation playback method, device, terminal device and storage medium, and relates to the field of image processing technology. It includes: obtaining the first playback progress corresponding to the first animation frame being played in the document object model animation, and the animation playback direction for the document object model animation; determining the second playback progress based on the animation playback direction, the first playback progress and the frame interval progress of the document object model animation; generating the second animation frame corresponding to the document object model animation according to the second playback progress, and playing the second animation frame. The present invention can determine the second playback progress corresponding to the animation frame to be played next frame according to the animation playback direction, and make the target player start playing the document object model animation from the second playback progress. When playing the document object model animation, the animation playback direction can be flexibly adjusted to play the animation in reverse order, or switch between reverse order and forward order.

Description

Technical Field

[0001] The present invention relates to the field of image processing technology, and in particular to an animation playing method, device, terminal equipment and storage medium. Background Art

[0002] With the continuous advancement of technology, more and more pages are beginning to apply document object model animation to display more dynamic elements on the page and enhance the user's interactive experience.

[0003] A document object model animation usually includes animation elements and animation parameters. When playing a document object model animation, the animation parameters in the document object model animation are read and the animation elements therein are rendered frame by frame based on the animation parameters to obtain animation frames, and the animation frames are played in sequence to achieve a coherent animation effect.

[0004] However, the existing playback method can only render the animation frames according to the fixed order preset by the document object model, and cannot adjust the playback direction of the animation. Summary of the invention

[0005] The embodiments of the present invention provide an animation playing method, an apparatus, a terminal device and a storage medium to solve the problem that the playing direction cannot be adjusted when playing a document object model.

[0006] In order to solve the above-mentioned technical problems, the present invention is achieved as follows:

[0007] In a first aspect, an animation playing method is provided, the method comprising:

[0008] Obtaining a first playback progress corresponding to a first animation frame being played in a document object model animation, and an animation playback direction for the document object model animation, wherein the animation playback direction includes forward playback and reverse playback;

[0009] Determine a second playback progress based on the animation playback direction, the first playback progress and the frame interval progress of the document object model animation, wherein the frame interval progress indicates a playback progress difference between two adjacent frames in the document object model animation;

[0010] A second animation frame of the document object model animation is generated according to the second play progress, and the second animation frame is played.

[0011] Optionally, the method further comprises:

[0012] Obtaining the total animation duration and frame interval duration of the document object model animation;

[0013] The frame interval progress of the document object model animation is determined according to the total animation duration and the frame interval duration.

[0014] Optionally, the method further comprises:

[0015] Obtaining the screen refresh interval duration of the page where the document object model animation is located;

[0016] The frame interval duration is determined according to the picture refresh interval duration.

[0017] Optionally, the method further comprises:

[0018] Obtaining a preset playback frame rate for playing the document object model animation;

[0019] The frame interval duration is determined according to the preset playback frame rate.

[0020] Optionally, the method further comprises:

[0021] Obtaining the start play time of the document object model animation and the current play time corresponding to the first animation frame;

[0022] The first playback progress is determined according to the start playback time, the current playback time, and the total animation duration of the document object model animation.

[0023] Optionally, determining the second playback progress based on the animation playback direction, the first playback progress, and the frame interval progress of the document object model animation includes:

[0024] When the animation playback direction is the forward playback, calculating the second playback progress according to the sum of the first playback progress and the frame interval progress;

[0025] When the animation playback direction is the reverse playback, the second playback progress is calculated according to the difference between the first playback progress and the frame interval progress.

[0026] Optionally, generating a second animation frame of the document object model animation according to the second playback progress includes:

[0027] Obtaining a parameter mapping function corresponding to the document object model animation;

[0028] Inputting the second playback progress into the parameter mapping function to obtain the animation frame parameters output by the parameter mapping function;

[0029] The animation frame parameters and the animation elements corresponding to the document object model animation are input into a renderer to obtain a second animation frame output by the renderer.

[0030] Optionally, the method further comprises:

[0031] When the animation playing direction is the forward playing direction and the second playing progress is greater than or equal to the first progress threshold, stop playing the document object model animation;

[0032] When the animation playing direction is the reverse playing and the second playing progress is less than or equal to a second progress threshold, the document object model animation is stopped.

[0033] In a second aspect, an embodiment of the present invention further provides an animation playback device, comprising:

[0034] A first acquisition module is used to acquire a first playback progress corresponding to a first animation frame being played in a document object model animation, and an animation playback direction for the document object model animation, wherein the animation playback direction includes forward playback and reverse playback;

[0035] A first progress module, configured to determine a second play progress based on the animation play direction, the first play progress and the frame interval progress of the document object model animation, wherein the frame interval progress indicates a play progress difference between two adjacent frames in the document object model animation;

[0036] The playing module is used to generate a second animation frame of the document object model animation according to the second playing progress, and play the second animation frame.

[0037] Optionally, the device further comprises:

[0038] A second acquisition module is used to acquire the total animation duration and frame interval duration of the document object model animation;

[0039] The frame interval progress module is used to determine the frame interval progress of the document object model animation according to the total duration of the animation and the frame interval duration.

[0040] Optionally, the device further comprises:

[0041] A page acquisition module, used to acquire the screen refresh interval duration of the page where the document object model animation is located;

[0042] The first frame interval duration module is used to determine the frame interval duration according to the picture refresh interval duration.

[0043] Optionally, the device further comprises:

[0044] A frame rate acquisition module, used to acquire a preset playback frame rate for playing the document object model animation;

[0045] The first frame interval duration module is used to determine the frame interval duration according to the preset playback frame rate.

[0046] Optionally, the device further comprises:

[0047] A third acquisition module, used to acquire the start play time of the document object model animation and the current play time corresponding to the first animation frame;

[0048] The second progress module is used to determine the first play progress according to the start play time, the current play time and the total animation duration of the document object model animation.

[0049] Optionally, the first progress module includes:

[0050] A forward progress submodule, used for calculating a second playback progress according to the sum of the first playback progress and the frame interval progress when the animation playback direction is the forward playback;

[0051] The reverse progress submodule is used to calculate the second playback progress according to the difference between the first playback progress and the frame interval progress when the animation playback direction is the reverse playback.

[0052] Optionally, the playing module includes:

[0053] A function acquisition submodule, used to acquire a parameter mapping function corresponding to the document object model animation;

[0054] Animation frame parameter submodule, used for inputting the second playback progress into the parameter mapping function to obtain the animation frame parameters output by the parameter mapping function;

[0055] The animation frame submodule is used to input the animation frame parameters and the animation elements corresponding to the document object model animation into a renderer to obtain a second animation frame output by the renderer.

[0056] Optionally, the device further comprises:

[0057] A first stopping module, configured to stop playing the document object model animation when the animation playing direction is the forward playing and the second playing progress is greater than or equal to a first progress threshold;

[0058] The second stopping module is used to stop playing the document object model animation when the animation playing direction is the reverse playing and the second playing progress is less than or equal to a second progress threshold.

[0059] In a third aspect, an embodiment of the present invention further provides a terminal device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the computer program is executed by the processor, the steps of the animation playback method described in the first aspect are implemented.

[0060] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, characterized in that a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the steps of the animation playback method described in the first aspect are implemented.

[0061] In an embodiment of the present invention, a first playback progress corresponding to the first animation frame being played in the document object model animation and the animation playback direction for the document object model animation are obtained, wherein the animation playback direction includes forward playback and reverse playback; based on the animation playback direction, the first playback progress and the frame interval progress of the document object model animation, a second playback progress is determined, wherein the frame interval progress indicates the playback progress difference corresponding to two adjacent frames in the document object model animation; a second animation frame corresponding to the document object model animation is generated according to the second playback progress, and the second animation frame is played. The present invention can determine the second playback progress corresponding to the animation frame to be played next frame according to the animation playback direction, and enable the target player to play the document object model animation from the second playback progress. When playing the document object model animation, the animation playback direction can be flexibly adjusted to play the animation in reverse order, or switch between reverse playback and forward playback.

[0062] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0063] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative work.

[0064] Figure 1 is a flowchart of the steps of an animation playing method provided by an embodiment of the present invention;

[0065] Figure 2 is a flowchart of specific steps of another animation playing method provided by an embodiment of the present invention;

[0066] Figure 3 is a structural schematic diagram of an animation playback device provided by an embodiment of the present invention;

[0067] Figure 4 It is a schematic diagram of the hardware structure of a terminal device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0068] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0069] Embodiment 1

[0070] An animation playing method provided by an embodiment of the present invention is introduced in detail.

[0071] Reference Figure 1 , shows a step flow chart of an animation playing method provided by an embodiment of the present invention.

[0072] Step 101, obtaining a first play progress corresponding to a first animation frame being played in a document object model animation, and an animation play direction for the document object model animation, wherein the animation play direction includes forward play and reverse play.

[0073] Document Object Model (DOM) animation is an animation composed of animation elements and animation frame parameters, such as control animation in a web page. The document object model can be an animation element. By defining the animation frame parameters of the document object model, such as transition effect, transition time, transition function, end condition, etc., the document object model animation can be obtained. The renderer (such as browser animation renderer, cascading style sheet renderer, etc.) can use the animation frame parameters to transform and render the document object model to obtain multiple playable animation frames. By displaying the obtained animation frames, the document object model animation can be played.

[0074] In an embodiment of the present invention, the first playback progress of the first animation frame being played in the document object model animation can be obtained, wherein the first playback progress is used to indicate the progress of the first animation frame in the frames that completely constitute the document object model animation. For example, if 100 frames are required to fully play the document object model animation, and the first animation frame currently being played is the 50th frame, then the first playback progress corresponding to the first animation frame is 50%.

[0075] The play direction of the document object model animation refers to whether the document object model animation is currently being played in forward order (i.e., forward playback) or in reverse order (reverse playback). It should be noted that the play direction of the document object model animation can be a preset value or a user-defined value. For example, before the document object model animation is played, the play direction of the document object model animation can be pre-set to forward playback. When the user plays the document object model animation, the document object model animation will be played in forward order by default. When the document object model animation is playing, the user can adjust the play direction of the document object model animation through playback controls, playback instructions, etc., and set the play direction of the document object model animation to forward playback or reverse playback as needed. For example, a reverse variable can be set in the memory, and the play direction of the document object model animation can be changed by adjusting the value of reverse. Setting reverse to false indicates forward playback, and setting reverse to true indicates reverse playback.

[0076] In the embodiment of the present invention, when playing each first animation frame of the DOM animation, the current playing direction can be acquired to obtain the animation playing direction corresponding to the DOM animation at the moment of playing the first animation frame.

[0077] Step 102: determining a second playback progress based on the animation playback direction, the first playback progress and the frame interval progress of the document object model animation, wherein the frame interval progress indicates a playback progress difference between two adjacent frames in the document object model animation.

[0078] The frame interval progress of the document object model animation refers to the difference in the playback progress of two adjacent animation frames in the document object model animation. For example, if the document object model animation has 100 frames, the playback progress is 0% before the document object model animation starts playing, and the corresponding playback progress is 1% when the first frame is played, and the corresponding playback progress is 99% when the 99th frame is played, and the corresponding playback progress is 100% when the 100th frame is played. Since the 99th frame and the 100th frame are adjacent frames in the document object model animation, it can be determined that the frame interval progress of the document object model animation is 1%.

[0079] In an embodiment of the present invention, the second playback progress corresponding to the next screen frame to be played can be calculated based on the first playback progress, the frame interval progress and the animation playback direction. Specifically, the second playback progress can be obtained by adding or subtracting the frame interval progress from the first playback progress based on the animation playback direction. That is, when the animation playback direction is forward playback, the next frame should play the screen frame after the progress of the currently played screen frame in the document object model animation, and when the animation playback direction is reverse playback, in order to achieve a reverse playback effect, the next frame should play the screen frame before the progress of the currently played screen in the document object model animation.

[0080] For example, if the frame interval progress of the document object model animation is 1%, the first play progress corresponding to the current playing picture frame is 10%, and when the animation play direction is forward play, the second play progress corresponding to the next animation frame to be played is 10%+1%=11%. When the animation play direction is reverse play, the second play progress corresponding to the next animation frame to be played is 10%-1%=9%.

[0081] Step 103: Generate a second animation frame of the document object model animation according to the second play progress, and play the second animation frame.

[0082] In order to allow the user to adjust the playback direction of the document object model animation, in an embodiment of the present invention, the animation frame parameters corresponding to the second playback progress can also be determined based on the progress-parameter conversion relationship corresponding to the document object model animation, so that the animation elements of the document object model animation can be rendered according to the animation frame parameters to obtain the second animation frame.

[0083] The progress-parameter conversion relationship includes a correspondence between the play progress and the animation frame parameters. The correspondence may be in a list form, in which multiple play progresses may be defined at fixed intervals, and the animation frame parameters corresponding to each play progress may be set.

[0084] For example, the animation element of a document object model animation is a small ball, and its corresponding progress-parameter conversion relationship includes 100 play progress values ​​n%, where n is an integer in [0,100], and each play progress value corresponds to a small ball radius. For example, the play progress value 10% corresponds to a small ball radius of 1.1, the play progress value 20% corresponds to a small ball radius of 1.2, and so on. When the second play progress is 20%, the corresponding small ball radius can be determined to be 1.2 through the above progress-parameter conversion relationship. At this time, the above small ball can be rendered according to the small ball radius 1.2 to obtain the second animation frame, and the second animation frame can be played.

[0085] It should be noted that after playing the second animation frame corresponding to the second playback progress in the document object model animation, the subsequent animation frames need to be played. Therefore, after playing the second animation frame, the first animation frame being played will change. At this time, the second animation frame is the new first animation frame. The above steps can be used to calculate the new second playback progress according to the new first animation frame, and then generate a new second animation frame according to the new second playback progress, so as to achieve continuous playback of the document object model animation based on the playback direction set by the user. That is to say, in the embodiment of the present invention, each time a new animation frame is played, it is necessary to calculate the playback progress corresponding to the next animation frame to be played according to the new animation frame, and generate the next animation frame, so as to achieve continuous playback of the document object model animation.

[0086] In summary, the animation playback method proposed in the present invention includes: obtaining the first playback progress corresponding to the first animation frame being played in the document object model animation, and the animation playback direction for the document object model animation, wherein the animation playback direction includes forward playback and reverse playback; determining the second playback progress based on the animation playback direction, the first playback progress and the frame interval progress of the document object model animation, wherein the frame interval progress indicates the playback progress difference corresponding to two adjacent frames in the document object model animation; generating the second animation frame corresponding to the document object model animation according to the second playback progress, and playing the second animation frame. The present invention can determine the second playback progress corresponding to the animation frame to be played next frame according to the animation playback direction, and enable the target player to play the document object model animation from the second playback progress. When playing the document object model animation, the animation playback direction can be flexibly adjusted to play the animation in reverse order, or switch between reverse playback and forward playback.

[0087] Embodiment 2

[0088] Another animation playing method provided by an embodiment of the present invention is introduced in detail.

[0089] Reference Figure 2 , Figure 2 A flowchart of specific steps of another animation playing method provided by an embodiment of the present invention is shown in FIG. 1 , which may include the following steps:

[0090] Step 201: Obtain the total animation duration and frame interval duration of the document object model animation.

[0091] Generally, the total animation duration of the document object model animation is stored as an animation attribute in the document object model animation file. In the embodiment of the present invention, the attribute value used to describe the total animation duration can be obtained. For example, when the document object model animation is a DOM animation, the animation-duration attribute of the document object model animation can be obtained to obtain the total animation duration of the document object model animation.

[0092] In the embodiment of the present invention, the frame interval duration can be calculated by the total animation duration and total number of frames of the DOM animation. For example, if the total animation duration of the DOM animation is 5 seconds and the total number of frames is 100, the frame interval duration can be calculated to be 5 / 100=0.05 seconds.

[0093] For some document object model animations composed of graphic elements and animation frame parameters, since the animation frames are calculated based on the graphic elements and animation frame parameters during the playback process, the total number of frames cannot be obtained in advance. The frame interval duration can be determined by the method in the following sub-steps 2011 to 2012, or sub-step 2013 or sub-step 2014.

[0094] Optionally, step 201 may further include:

[0095] Sub-step 2011, obtaining the screen refresh interval duration of the page where the document object model animation is located.

[0096] Since the document object model animation is an animation object located in a browser page, application page, etc., in order to achieve the best display effect and smoothness, the frame rate of the document object model animation when it is played can be made the same as the refresh rate of the page it is located on.

[0097] Therefore, when the DOM animation starts, the refresh interval of the page it is in can be obtained. Specifically, the time points of two adjacent refreshes of the current page can be obtained, and the difference between the two time points can be calculated to obtain the refresh interval of the page where the DOM animation is located.

[0098] Furthermore, due to reasons such as computing load, the screen refresh interval of the current page is not stable. Therefore, in order to make the frame rate of the document object model animation play to adapt to the refresh rate of the current page in real time, the screen refresh interval of the current page can be re-acquired each time a new screen frame is played. Specifically, the first moment corresponding to the playback of the first animation frame can be recorded, and the second moment corresponding to the last refresh of the current page before the first animation frame is played can be recorded, and the screen refresh interval can be calculated based on the difference between the first moment and the second moment.

[0099] Sub-step 2012, determining the frame interval duration according to the picture refresh interval duration.

[0100] In an embodiment of the present invention, the above-obtained screen refresh interval duration can be directly determined as the frame interval duration, and the subsequent rendering and playing of the second animation frame according to the frame interval duration can achieve synchronization of the animation playback frame rate with the screen refresh rate of the current page.

[0101] Furthermore, since the refresh rate of the current page is generally high, resulting in a high frequency of rendering animation frames, in order to reduce the amount of computation required to play the document object model animation, the product of the screen refresh interval and the preset fixed coefficient can also be used as the frame interval. For example, when the preset fixed coefficient is 2, the frame interval is twice the screen refresh interval, and the animation frame needs to be re-rendered once every two refreshes of the current page, thereby reducing the amount of computation required to play the document object model animation.

[0102] Optionally, step 201 may further include:

[0103] Sub-step 2013, obtaining a preset playback frame rate for playing the document object model animation.

[0104] In an embodiment of the present invention, the frame interval duration can also be determined based on a preset playback frame rate set by a user or a system. Before playing the document object model animation, the user can set the preset playback frame rate as needed, such as 20 frames / second, 30 frames / second, etc., and during the playback of the document object model animation, an adjustment control for adjusting the preset playback frame rate can be provided to the user, for example, a preset playback frame rate adjustment slider can be provided to the user.

[0105] If the preset playback frame rate cannot be adjusted during the playback of the document object model animation, the preset playback frame rate can be obtained only once before playing the document object model. If the preset playback frame rate is adjustable during the playback of the document object model animation, the preset playback frame rate can be obtained once after each preset playback frame rate is adjusted or after each frame of the animation is played.

[0106] Sub-step 2014, determining the frame interval duration according to the preset playback frame rate.

[0107] After obtaining the preset playback frame rate, the reciprocal of the preset playback frame rate can be calculated and the reciprocal can be determined as the frame interval duration. For example, when the preset playback frame rate is 20 frames per second, 1 / 20, that is, 0.05, can be determined as the frame interval duration.

[0108] In an embodiment of the present invention, a plurality of methods for determining the frame interval duration for playing a document object model animation are provided. Not only can the frame interval duration be determined according to the refresh rate of the current page, but the frame interval duration can also be determined according to a preset playback frame rate. The frequency of subsequent rendering of animation frames can be adjusted according to actual needs, thereby reducing the amount of computation consumed in playing the document object model animation.

[0109] Step 202: Determine the frame interval progress of the document object model animation according to the total animation duration and the frame interval duration.

[0110] After obtaining the total animation duration and frame interval duration of the DOM animation, the frame interval progress of the DOM animation can be obtained. Specifically, the quotient of the frame interval duration and the total animation duration can be used as the frame interval progress of the DOM animation. For example, if the frame interval duration of a DOM animation is 0.05 seconds and the total animation duration is 5 seconds, then the corresponding frame interval progress is 0.05 / 5=1%.

[0111] In an embodiment of the present invention, when the document object model animation is composed of graphic elements and animation frame parameters, since its total number of frames cannot be obtained, its frame interval progress can be calculated by the frame interval duration of the document object model animation and the total animation duration. The frame interval progress calculation method has a wider scope of application.

[0112] Step 203: Obtain a first play progress corresponding to a first animation frame being played in a document object model animation, and an animation play direction for the document object model animation.

[0113] In an embodiment of the present invention, in order to render the next frame of the first animation frame, that is, the second animation frame, it is necessary to obtain the first playback progress corresponding to the first animation frame. In one embodiment, after the animation starts to play, the cumulative number of animation frames played can be recorded, and the first playback progress corresponding to the first animation frame currently being played can be determined based on the product of the number and the frame interval progress. For example, when the frame interval progress is 1% and the playback is in forward order, if the first animation frame is the 20th frame played cumulatively, the first playback progress corresponding to the first animation frame is 20%.

[0114] It should be noted that, in the embodiment of the present invention, the playback progress corresponding to the animation frame refers to the playback progress when the animation frame is played in the forward direction. If the current playback is in reverse order, the animation frame corresponding to the maximum playback progress will be played to the animation frame corresponding to the minimum playback progress. In this case, if the frame interval progress is 1% and the first animation frame is the 20th frame played cumulatively, the first playback progress corresponding to the first animation frame is 80%.

[0115] When starting to play the document object model animation, you can get the play direction of the document object model animation. If the play direction of the document object model animation is forward play, you can start playing the document object model animation from the position of 0 play progress. At this time, the first animation frame played at the beginning is the first frame of the document object model animation. If the play direction of the document object model animation is reverse play, you can start playing the document object model animation from the position of 100% play progress. At this time, the first animation frame played at the beginning is the last frame of the document object model animation.

[0116] Furthermore, if the document object model animation is in a paused state before starting to play, the document object model animation may be played starting from the play progress corresponding to the paused position.

[0117] In the embodiment of the present invention, when starting to play the document object model animation, if the playback direction is read as forward playback, a playback progress of 0 can be transmitted to the target player, so that the target player plays the first animation frame of the document object model animation from the beginning; if the playback direction is read as reverse playback, a playback progress of 100% can be transmitted to the target player, so that the target player plays the last animation frame of the document object model animation from the end. The initial playback progress set by the user, or the playback progress of the current animation pause position, can also be sent to the document object model animation frame, so that the target player starts playing the document object model animation from the initial playback progress, or the playback progress of the current animation pause position.

[0118] After the DOM animation starts playing, a first playing progress corresponding to the first animation frame being played in the DOM animation and an animation playing direction of the DOM animation can be obtained.

[0119] Optionally, step 203 may further include:

[0120] Sub-step 2031, obtaining the start play time of the DOM animation and the current play time corresponding to the first animation frame.

[0121] In the embodiment of the present invention, the first play progress may also be determined by the start play time of the DOM animation, the current play time corresponding to the first animation frame, and the total animation duration of the DOM animation.

[0122] Specifically, when starting to play the document, the current time may be recorded as the start play time, and when playing the first animation frame, the current play time may be recorded.

[0123] Sub-step 2032, determining the first play progress according to the start play time, the current play time and the total animation duration of the document object model animation.

[0124] When the animation playback direction is forward playback, the following formula 1 may be used to calculate the first playback progress corresponding to the first animation frame.

[0125]

[0126] Among them, t1 is the current playback time corresponding to the first animation frame, t0 is the starting playback time, duration is the total duration of the animation, and nowProgress is the first playback progress corresponding to the first animation frame.

[0127] When the animation playback direction is reverse playback, the following formula 2 may be used to calculate the first playback progress corresponding to the first animation frame.

[0128]

[0129] Among them, t1 is the current playback time corresponding to the first animation frame, t0 is the starting playback time, duration is the total duration of the animation, and nowProgress is the first playback progress corresponding to the first animation frame.

[0130] Step 204, when the animation playback direction is the forward playback, calculate the second playback progress according to the sum of the first playback progress and the frame interval progress.

[0131] After obtaining the first playback progress corresponding to the first animation frame in the document object model animation, you can also obtain the current playback direction of the document object model animation. If the playback direction is forward playback, you can determine the second playback progress based on the sum of the first playback progress and the frame interval progress.

[0132] For example, if the first playback progress corresponding to the first animation frame is 20%, the frame interval progress is 1%, and the current playback direction is forward, then the second playback progress is 20%+1%=21%.

[0133] Step 205, when the animation playback direction is the reverse playback, calculate the second playback progress according to the difference between the first playback progress and the frame interval progress.

[0134] If the playback direction is reverse playback, the second playback progress may be determined according to the difference between the first playback progress and the frame interval progress.

[0135] For example, if the first playback progress corresponding to the first animation frame is 20%, the frame interval progress is 1%, and the current playback direction is reverse playback, then the second playback progress is 20%-1%=19%.

[0136] In an embodiment of the present invention, the second playback progress corresponding to the next target frame that needs to be played in the document object model animation can be calculated according to the current status of the document object model animation playback, and in a subsequent step, the second playback progress is transmitted to the target player to achieve the forward and reverse playback effects of the document object model animation, without considering whether the target player has a reverse playback function, thereby improving the flexibility of playing the document object model animation.

[0137] Step 206: Generate a second animation frame of the document object model animation according to the second play progress.

[0138] This step can refer to step 103, and will not be described in detail in this embodiment of the present invention.

[0139] Optionally, step 206 may further include:

[0140] Sub-step 2061, obtaining the parameter mapping function corresponding to the document object model animation.

[0141] In the embodiment of the present invention, the progress-parameter conversion relationship can also be defined by a parameter mapping function. The parameter mapping function can be set so that the animation frame parameters change with the playback progress, so as to directly calculate the corresponding playback frame parameters according to the playback progress.

[0142] Different document object model animations may correspond to one or more different parameter mapping functions. The parameter mapping function may be bound to the corresponding document object model animation. When the document object model is played, the corresponding parameter mapping function is called.

[0143] For example, the animation element of a document object model animation is a small ball, and its corresponding progress-parameter conversion relationship may include a parameter mapping function for describing the relationship between the radius of the small ball and the change in the playback progress: Y=X+1, where X represents the playback progress and the value range of X is [0,1], and Y represents the radius of the small ball and the value range is [1,2].

[0144] Sub-step 2062: input the second play progress into the parameter mapping function to obtain the animation frame parameters output by the parameter mapping function.

[0145] For example, the animation element of a document object model animation is a small ball, and its corresponding progress-parameter conversion relationship includes a function for describing the relationship between the radius of the small ball and the change in the playback progress: Y=X+1, where X represents the playback progress, and the value range of X is [0,1], and Y represents the radius of the small ball, and the value range is [1,2]. In the process of the playback progress changing from 0 to 100%, the radius of the small ball increases from 1 to 2. When the document object model animation is played in the forward sequence, the animation effect is a small ball that gradually becomes larger, and when it is played in the reverse sequence, the animation effect is a small ball that gradually becomes smaller. During the playback of the document object model animation, if the calculated second playback progress is 10%, the animation frame parameter corresponding to the second playback progress can be calculated by the above function as a diameter of 1.1, and the diameter can be transmitted to the renderer, so that the renderer renders the small ball according to the diameter to obtain the second animation frame corresponding to the second playback progress, and plays the second animation frame.

[0146] Sub-step 2063: input the animation frame parameters and the animation elements corresponding to the document object model animation into a renderer to obtain a second animation frame output by the renderer.

[0147] Since the renderer will render all objects in the page when the page is refreshed, including the document object model animation in the page, therefore, when the frame interval is the same as the page refresh interval, the animation frame parameters can be sent to the renderer immediately after obtaining them, waiting for the renderer to render the second animation frame the next time the page is rendered, thereby achieving the effect of synchronizing the frame rate of the second animation frame with the page.

[0148] Furthermore, when rendering a document object model animation, some renderers will skip the rendering if they detect that the image animation frame parameters to be rendered are the same as the animation frame parameters of the previous frame rendering, thus avoiding the waste of resources caused by repeated rendering. Therefore, in an embodiment of the present invention, if the frame interval duration is greater than the page refresh interval duration, after obtaining the animation frame parameters, the animation frame parameters may not be sent to the renderer temporarily, but the animation frame parameters may be sent to the renderer after the duration of the first animation frame playback reaches the frame interval duration, thereby satisfying the user's need to play the document object model animation at a lower frame rate.

[0149] In an embodiment of the present invention, the energy-saving mechanism of the renderer can be utilized to enable the renderer to render animation frames of the document object model animation at a lower frequency, thereby reducing the resource consumption of the renderer in rendering animation frames of the document object model animation, and helping to improve the battery life of the mobile device.

[0150] It should be noted that after executing step 206, the second animation frame will be played, and the first animation frame being played will be updated, and the process can jump to step 203 again to re-determine the second animation frame to be played next, so that the document object model animation can be played continuously.

[0151] Step 207: When the animation playing direction is the forward playing direction and the second playing progress is greater than or equal to the first progress threshold, stop playing the document object model animation.

[0152] In the embodiment of the present invention, after the document object model animation is played in the animation playing direction, the document object model animation can also be controlled to stop playing.

[0153] Specifically, if the playback direction is forward playback, then when the document object model animation is played, the second playback progress calculated when each first animation frame is played is continuously increasing. If the second playback progress exceeds 100%, it means that the forward playback of the document object model animation has been completed, and the document object model animation can be stopped at this time.

[0154] It should be noted that the first progress threshold can be 100%, so that the document object model animation is stopped when it is played in full sequence. The first progress threshold can also be less than 100%. For example, the first progress threshold can be 10%, so that the document object model animation is stopped after 10% of the content is played in sequence, so as to realize the function of previewing the document object model animation. The above-mentioned first progress threshold can be flexibly adjusted by users and / or technicians according to actual needs, and the embodiment of the present invention does not specifically limit this.

[0155] In addition, each document object model animation can also be set with a corresponding stop playback method. When the animation needs to be stopped, the stop playback method corresponding to the document object model animation can be called. Through the stop playback method, the document object model animation can end playback in the way required by the user.

[0156] For example, the stop playback method may be to hide the document object model animation, or to call other document object model animations, or to call other pictures, etc. The embodiment of the present invention does not specifically limit the content of the stop playback method, and the stop playback method corresponding to the document object model animation can be flexibly set according to actual needs.

[0157] Step 208: When the animation playing direction is the reverse playing direction and the second playing progress is less than or equal to a second progress threshold, stop playing the document object model animation.

[0158] If the playback direction is reverse playback, then when playing the document object model animation, the second playback progress calculated when each first animation frame is played is continuously reduced. If the second playback progress is less than 0, it means that the reverse playback of the document object model animation has been completed, and the document object model animation can be stopped at this time.

[0159] It should be noted that the second progress threshold can be 0, so that the document object model animation is stopped when it is played in reverse order, and the second progress threshold can also be greater than 0. For example, the second progress threshold can be 10%, so that the document object model animation is stopped after 10% of the content is played in forward order, so as to realize the function of previewing the document object model animation. The above-mentioned first progress threshold can be flexibly adjusted by users and / or technicians according to actual needs, and the embodiment of the present invention does not specifically limit this.

[0160] In summary, another animation playback method proposed in the present invention obtains the first playback progress corresponding to the first animation frame being played in the document object model animation, and the animation playback direction for the document object model animation, wherein the animation playback direction includes forward playback and reverse playback; based on the animation playback direction, the first playback progress and the frame interval progress of the document object model animation, the second playback progress is determined, wherein the frame interval progress indicates the playback progress difference corresponding to two adjacent frames in the document object model animation; the second animation frame corresponding to the document object model animation is generated according to the second playback progress, and the second animation frame is played. The present invention can determine the second playback progress corresponding to the animation frame to be played next frame according to the animation playback direction, and enable the target player to play the document object model animation from the second playback progress. When playing the document object model animation, the animation playback direction can be flexibly adjusted to play the animation in reverse order, or switch between reverse playback and forward playback.

[0161] Embodiment 3

[0162] An animation playing device provided by an embodiment of the present invention is introduced in detail.

[0163] Reference Figure 3 , which shows a schematic diagram of the structure of an animation playback device provided by an embodiment of the present invention, such as Figure 3 As shown:

[0164] The animation playing device of the embodiment of the present invention includes: a first acquisition module 501 , a first progress module 502 and a playing module 503 .

[0165] The functions of each module and the interactions between them are introduced in detail below.

[0166] A first acquisition module is used to acquire a first playback progress corresponding to a first animation frame being played in a document object model animation, and an animation playback direction for the document object model animation, wherein the animation playback direction includes forward playback and reverse playback;

[0167] A first progress module, configured to determine a second play progress based on the animation play direction, the first play progress and the frame interval progress of the document object model animation, wherein the frame interval progress indicates a play progress difference between two adjacent frames in the document object model animation;

[0168] The playing module is used to generate a second animation frame of the document object model animation according to the second playing progress, and play the second animation frame.

[0169] Optionally, the device further comprises:

[0170] A second acquisition module is used to acquire the total animation duration and frame interval duration of the document object model animation;

[0171] The frame interval progress module is used to determine the frame interval progress of the document object model animation according to the total duration of the animation and the frame interval duration.

[0172] Optionally, the device further comprises:

[0173] A page acquisition module, used to acquire the screen refresh interval duration of the page where the document object model animation is located;

[0174] The first frame interval duration module is used to determine the frame interval duration according to the picture refresh interval duration.

[0175] Optionally, the device further comprises:

[0176] A frame rate acquisition module, used to acquire a preset playback frame rate for playing the document object model animation;

[0177] The first frame interval duration module is used to determine the frame interval duration according to the preset playback frame rate.

[0178] Optionally, the device further comprises:

[0179] A third acquisition module, used to acquire the start play time of the document object model animation and the current play time corresponding to the first animation frame;

[0180] The second progress module is used to determine the first play progress according to the start play time, the current play time and the total animation duration of the document object model animation.

[0181] Optionally, the first progress module includes:

[0182] A forward progress submodule, used for calculating a second playback progress according to the sum of the first playback progress and the frame interval progress when the animation playback direction is the forward playback;

[0183] The reverse progress submodule is used to calculate the second playback progress according to the difference between the first playback progress and the frame interval progress when the animation playback direction is the reverse playback.

[0184] Optionally, the playing module includes:

[0185] A function acquisition submodule, used to acquire a parameter mapping function corresponding to the document object model animation;

[0186] Animation frame parameter submodule, used for inputting the second playback progress into the parameter mapping function to obtain the animation frame parameters output by the parameter mapping function;

[0187] The animation frame submodule is used to input the animation frame parameters and the animation elements corresponding to the document object model animation into a renderer to obtain a second animation frame output by the renderer.

[0188] Optionally, the device further comprises:

[0189] A first stopping module, configured to stop playing the document object model animation when the animation playing direction is the forward playing and the second playing progress is greater than or equal to a first progress threshold;

[0190] The second stopping module is used to stop playing the document object model animation when the animation playing direction is the reverse playing and the second playing progress is less than or equal to a second progress threshold.

[0191] In summary, the present invention proposes an animation playback device, including: a first acquisition module, used to acquire the first playback progress corresponding to the first animation frame being played in the document object model animation in the document object model animation, and the animation playback direction for the document object model animation, wherein the animation playback direction includes forward playback and reverse playback; a first progress module, used to determine the second playback progress based on the animation playback direction, the first playback progress and the frame interval progress of the document object model animation, wherein the frame interval progress indicates the playback progress difference corresponding to two adjacent frames in the document object model animation; a playback module, used to generate the second animation frame corresponding to the document object model animation according to the second playback progress, and play the second animation frame. The present invention can determine the second playback progress corresponding to the animation frame to be played next frame according to the animation playback direction, and enable the target player to play the document object model animation from the second playback progress. When playing the document object model animation, the animation playback direction can be flexibly adjusted to play the animation in reverse order, or switch between reverse playback and forward playback.

[0192] Embodiment 4

[0193] Figure 4 A schematic diagram of the hardware structure of a terminal device for implementing various embodiments of the present invention.

[0194] The terminal device 600 includes but is not limited to: a radio frequency unit 601, a network module 602, an audio output unit 603, an input unit 604, a sensor 605, a display unit 606, a user input unit 607, an interface unit 608, a memory 609, a processor 610, and a power supply 611. Those skilled in the art will appreciate that Figure 4 The terminal device structure shown in the figure does not constitute a limitation on the terminal device, and the terminal device may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently. In the embodiment of the present invention, the terminal device includes but is not limited to a mobile phone, a tablet computer, a laptop computer, a PDA, a vehicle-mounted terminal, a wearable device, and a pedometer.

[0195] It should be understood that in the embodiment of the present invention, the radio frequency unit 601 can be used for receiving and sending signals during information transmission or communication. Specifically, after receiving downlink data from the base station, it is sent to the processor 610 for processing; in addition, uplink data is sent to the base station. Generally, the radio frequency unit 601 includes but is not limited to an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier, a duplexer, etc. In addition, the radio frequency unit 601 can also communicate with the network and other devices through a wireless communication system.

[0196] The terminal device provides users with wireless broadband Internet access through the network module 602, such as helping users to send and receive emails, browse web pages, and access streaming media.

[0197] The audio output unit 603 can convert the audio data received by the RF unit 601 or the network module 602 or stored in the memory 609 into an audio signal and output it as sound. Moreover, the audio output unit 603 can also provide audio output related to a specific function performed by the terminal device 600 (for example, a call signal reception sound, a message reception sound, etc.). The audio output unit 603 includes a speaker, a buzzer, a receiver, etc.

[0198] The input unit 604 is used to receive audio or video signals. The input unit 604 may include a graphics processor (GPU) 6041 and a microphone 6042, and the graphics processor 6041 processes the image data of a static picture or video obtained by an image capture device (such as a camera) in a video capture mode or an image capture mode. The processed image frame can be displayed on the display unit 606. The image frame processed by the graphics processor 6041 can be stored in the memory 609 (or other storage medium) or sent via the radio frequency unit 601 or the network module 602. The microphone 6042 can receive sound and can process such sound into audio data. The processed audio data can be converted into a format output that can be sent to a mobile communication base station via the radio frequency unit 601 in the case of a telephone call mode.

[0199] The terminal device 600 also includes at least one sensor 605, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor includes an ambient light sensor and a proximity sensor, wherein the ambient light sensor can adjust the brightness of the display panel 6061 according to the brightness of the ambient light, and the proximity sensor can turn off the display panel 6061 and / or the backlight when the terminal device 600 is moved to the ear. As a type of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in each direction (generally three axes), and can detect the magnitude and direction of gravity when stationary, which can be used to identify the terminal device posture (such as horizontal and vertical screen switching, related games, magnetometer posture calibration), vibration recognition related functions (such as pedometer, tapping), etc.; the sensor 605 can also include a fingerprint sensor, a pressure sensor, an iris sensor, a molecular sensor, a gyroscope, a barometer, a hygrometer, a thermometer, an infrared sensor, etc., which will not be repeated here.

[0200] The display unit 606 is used to display information input by the user or information provided to the user. The display unit 606 may include a display panel 6061, which may be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like.

[0201] The user input unit 607 can be used to receive input digital or character information, and to generate key signal input related to the user settings and function control of the terminal device. Specifically, the user input unit 607 includes a touch panel 6071 and other input devices 6072. The touch panel 6071, also known as a touch screen, can collect the user's touch operation on or near it (such as the user's operation on the touch panel 6071 or near the touch panel 6071 using any suitable object or accessory such as a finger or stylus). The touch panel 6071 may include two parts: a touch detection device and a touch controller. Among them, the touch detection device detects the user's touch orientation, detects the signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts it into the contact point coordinates, and then sends it to the processor 610, receives the command sent by the processor 610 and executes it. In addition, the touch panel 6071 can be implemented in various types such as resistive, capacitive, infrared and surface acoustic waves. In addition to the touch panel 6071, the user input unit 607 may also include other input devices 6072. Specifically, other input devices 6072 may include but are not limited to a physical keyboard, function keys (such as volume control keys, switch keys, etc.), a trackball, a mouse, and a joystick, which will not be described in detail here.

[0202] Furthermore, the touch panel 6071 may be overlaid on the display panel 6061. When the touch panel 6071 detects a touch operation on or near it, it is transmitted to the processor 610 to determine the type of touch event. Then, the processor 610 provides corresponding visual output on the display panel 6061 according to the type of touch event. Figure 4 In the figure, the touch panel 6071 and the display panel 6061 are used as two independent components to realize the input and output functions of the terminal device. However, in some embodiments, the touch panel 6071 and the display panel 6061 can be integrated to realize the input and output functions of the terminal device, which is not limited here.

[0203] The interface unit 608 is an interface for connecting an external device to the terminal device 600. For example, the external device may include a wired or wireless headset port, an external power supply (or battery charger) port, a wired or wireless data port, a memory card port, a port for connecting a device with an identification module, an audio input / output (I / O) port, a video I / O port, a headphone port, etc. The interface unit 608 may be used to receive input (e.g., data information, power, etc.) from an external device and transmit the received input to one or more elements in the terminal device 600 or may be used to transmit data between the terminal device 600 and an external device.

[0204] The memory 609 can be used to store software programs and various data. The memory 609 can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area can store data created according to the use of the mobile phone (such as audio data, a phone book, etc.), etc. In addition, the memory 609 can include a high-speed random access memory, and can also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices.

[0205] The processor 610 is the control center of the terminal device. It uses various interfaces and lines to connect various parts of the entire terminal device. By running or executing software programs and / or modules stored in the memory 609 and calling data stored in the memory 609, it executes various functions of the terminal device and processes data, thereby monitoring the terminal device as a whole. The processor 610 may include one or more processing units; preferably, the processor 610 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into the processor 610.

[0206] The terminal device 600 may also include a power supply 611 (such as a battery) for supplying power to each component. Preferably, the power supply 611 may be logically connected to the processor 610 through a power management system, thereby implementing functions such as charging, discharging, and power consumption management through the power management system.

[0207] In addition, the terminal device 600 includes some functional modules not shown, which will not be described here.

[0208] Preferably, an embodiment of the present invention further provides a terminal device, comprising: a processor 610, a memory 609, and a computer program stored in the memory 609 and executable on the processor 610. When the computer program is executed by the processor 610, each process of the above-mentioned animation playback method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be described here.

[0209] The embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, each process of the above-mentioned animation playback method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it is not repeated here. The computer-readable storage medium is, for example, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0210] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0211] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for enabling a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0212] The embodiments of the present invention are described above in conjunction with the accompanying drawings, but the present invention is not limited to the above-mentioned specific implementation modes, which are merely illustrative rather than restrictive. Under the guidance of the present invention, ordinary technicians in this field can also make many forms without departing from the scope of protection of the present invention and the claims, all of which are within the protection of the present invention.

[0213] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in the embodiments of the present invention can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0214] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0215] In the embodiments provided by the present invention, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0216] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0217] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0218] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: various media that can store program codes, such as USB flash drives, mobile hard disks, ROM, RAM, magnetic disks, or optical disks.

[0219] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed by the present invention, which should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. An animation playing method, characterized in that: The method comprises: When playing each frame of the document object model animation, obtaining a first play progress corresponding to a first animation frame being played in the document object model animation, and an animation play direction for the document object model animation, wherein the animation play direction includes forward play and reverse play; Obtaining the total animation duration and frame interval duration of the document object model animation; Determining the frame interval progress of the document object model animation according to the total animation duration and the frame interval duration; Determine a second playback progress based on the animation playback direction, the first playback progress and the frame interval progress of the document object model animation, wherein the frame interval progress indicates a playback progress difference between two adjacent frames in the document object model animation; A second animation frame of the document object model animation is generated according to the second play progress, and the second animation frame is played.

2. The method according to claim 1, characterized in that The method further comprises: Obtaining the screen refresh interval duration of the page where the document object model animation is located; The frame interval duration is determined according to the picture refresh interval duration.

3. The method according to claim 1, characterized in that The method further comprises: Obtaining a preset playback frame rate for playing the document object model animation; The frame interval duration is determined according to the preset playback frame rate.

4. The method according to claim 1, characterized in that The method further comprises: Obtaining the start play time of the document object model animation and the current play time corresponding to the first animation frame; The first playback progress is determined according to the start playback time, the current playback time, and the total animation duration of the document object model animation.

5. The method according to claim 1, characterized in that The determining the second playback progress based on the animation playback direction, the first playback progress and the frame interval progress of the document object model animation includes: When the animation playback direction is the forward playback, calculating the second playback progress according to the sum of the first playback progress and the frame interval progress; When the animation playback direction is the reverse playback, the second playback progress is calculated according to the difference between the first playback progress and the frame interval progress.

6. The method according to claim 1, characterized in that Generating a second animation frame of the document object model animation according to the second playback progress includes: Obtaining a parameter mapping function corresponding to the document object model animation; Inputting the second playback progress into the parameter mapping function to obtain the animation frame parameters output by the parameter mapping function; The animation frame parameters and the animation elements corresponding to the document object model animation are input into a renderer to obtain a second animation frame output by the renderer.

7. The method according to claim 1, characterized in that The method further comprises: When the animation playing direction is the forward playing direction and the second playing progress is greater than or equal to the first progress threshold, stop playing the document object model animation; When the animation playing direction is the reverse playing and the second playing progress is less than or equal to a second progress threshold, the document object model animation is stopped.

8. An animation playback device, characterized in that: The device comprises: A first acquisition module is used to acquire, when playing each frame of a document object model animation, a first playback progress corresponding to a first animation frame being played in the document object model animation, and an animation playback direction for the document object model animation, wherein the animation playback direction includes forward playback and reverse playback; A second acquisition module is used to acquire the total animation duration and frame interval duration of the document object model animation; A frame interval progress module, used to determine the frame interval progress of the document object model animation according to the total duration of the animation and the frame interval duration; A first progress module, configured to determine a second play progress based on the animation play direction, the first play progress and the frame interval progress of the document object model animation, wherein the frame interval progress indicates a play progress difference between two adjacent frames in the document object model animation; The playing module is used to generate a second animation frame of the document object model animation according to the second playing progress, and play the second animation frame.

9. The device according to claim 8, characterized in that The device also includes: A page acquisition module, used to acquire the screen refresh interval duration of the page where the document object model animation is located; The first frame interval duration module is used to determine the frame interval duration according to the picture refresh interval duration.

10. The device according to claim 8, characterized in that The device also includes: A frame rate acquisition module, used to acquire a preset playback frame rate for playing the document object model animation; The first frame interval duration module is used to determine the frame interval duration according to the preset playback frame rate.

11. The device according to claim 8, characterized in that The device also includes: A third acquisition module, used to acquire the start play time of the document object model animation and the current play time corresponding to the first animation frame; The second progress module is used to determine the first play progress according to the start play time, the current play time and the total animation duration of the document object model animation.

12. The device according to claim 8, characterized in that The first progress module includes: A forward progress submodule, used for calculating a second playback progress according to the sum of the first playback progress and the frame interval progress when the animation playback direction is the forward playback; The reverse progress submodule is used to calculate the second playback progress according to the difference between the first playback progress and the frame interval progress when the animation playback direction is the reverse playback.

13. The device according to claim 8, characterized in that The playback module comprises: A function acquisition submodule, used to acquire a parameter mapping function corresponding to the document object model animation; Animation frame parameter submodule, used for inputting the second playback progress into the parameter mapping function to obtain the animation frame parameters output by the parameter mapping function; The animation frame submodule is used to input the animation frame parameters and the animation elements corresponding to the document object model animation into a renderer to obtain a second animation frame output by the renderer.

14. The device according to claim 8, characterized in that The device also includes: A first stopping module, configured to stop playing the document object model animation when the animation playing direction is the forward playing and the second playing progress is greater than or equal to a first progress threshold; The second stopping module is used to stop playing the document object model animation when the animation playing direction is the reverse playing and the second playing progress is less than or equal to a second progress threshold.

15. A terminal device, characterized in that: include: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program, when executed by the processor, implements the steps of the animation playing method according to any one of claims 1 to 7.

16. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the animation playing method according to any one of claims 1 to 7 are implemented.

Images