A method and system for quickly displaying front-end animation

Abstract

The present invention discloses a method and system for quickly displaying front-end animations, the method comprising the following steps: after the loading is completed, the total progress script module sends the first scene identifier to the sub-progress scene module according to the stored scene identifier; after receiving the scene identifier, the sub-progress scene module obtains the name of the animation module corresponding to the scene identifier from itself, and plays the corresponding animation module according to the name; after the animation module plays and meets the configured conditions, the animation module informs the total progress script module of the scene identifier that has been played; after receiving the scene identifier that has been played, the total progress script module obtains the next scene identifier from itself and sends it to the sub-progress scene module, and if the received scene identifier is the last one, returns the first scene identifier. The present invention improves the efficiency of front-end animation display modification and realizes fast front-end animation display.

Description

Technical Field

[0001] The present invention relates to the field of software technology, and in particular to a method and system for quickly displaying front-end animations. Background Art

[0002] The existing front-end generally refers to the interface displayed to the user, such as the web front-end interface that users can see in a web browser. In order to improve the user experience, the existing front-end interface needs to be displayed using animation. The existing front-end animation display is generally based on the actual animation needs, the animation is set in the animation design software, and then the animation is loaded to the front-end for display. The original animation development method usually includes the steps of "animation disassembly and analysis, material preparation, static material layout development, dynamic material placement, and animation process development". The development process and development thinking also follow the progressive process of the animation, from the first step of each scene to the last step of the last scene. This animation development mode is relatively time-consuming and inefficient, and it is also easy to cause cumbersome layout and high time cost for later maintenance. This is because the step-by-step development method, each step of the animation process, may have a strong correlation with the time of subsequent animation advancement. The strong correlation of time points directly leads to: if the animation requirements change, or the presentation elements of an animation itself change (such as Figure 1 As shown in the figure, if the deduction time of scene 1 or element 1 increases by 1 second, the start time of scene 2 will inevitably overlap with the end time of scene 1), which will cause the time nodes and element positions of each subsequent link to be adjusted accordingly. In this case, each time check will cause maintenance troubles. This is also because most of the animations developed by the front-end do not have a graphical timeline like a non-linear editor for fine-tuning. The animation must be arranged in a pure code way, which also increases the complexity of maintenance to a certain extent.

[0003] The prior art has proposed a technical solution for modularizing animation, such as the Chinese patent application, application number: 202010285098.5, application name: Modular editing method, terminal, server and system for graphic animation. In this patent application, it is disclosed that: the client can directly access the pre-built graphic animation editing server, receive the interactive production data returned by the graphic animation editing server, and can directly use the modular interactive production data in the client interface through click and / or drag and drop operations, so as to complete the animation production, thereby improving the efficiency of animation production. In addition, the client can also export the interactive interface developed and created by the user to generate interactive data in json format, which is published by the graphic animation editing server as an online animation interface. This patent application provides a process for modular construction and animation generation on the server side. If the animation needs to be modified, the entire animation still needs to be modified. The significance of the patent is that modular construction is adopted during construction, which can improve the construction efficiency. However, since this patent still requires the entire animation to be rebuilt and generated, there are still problems of low efficiency and long time consumption. Summary of the invention

[0004] Therefore, it is necessary to provide a method and system for quickly displaying front-end animations to solve the problem that the existing front-end animation displays are inefficient and time-consuming when they need to be modified.

[0005] To achieve the above-mentioned purpose, the present invention provides a method for quickly displaying front-end animations, wherein the front-end pre-stores a plurality of animation modules, a total progress script module and a sub-progress scene module, the front-end interface includes an animation screen, and all animation modules are used to display animations in the animation screen. The total progress script module stores a plurality of scene identifiers of animation modules to be played arranged in sequence, and the sub-progress scene module stores the name of the animation module corresponding to each scene identifier. The method comprises the following steps:

[0006] After loading is completed, the overall progress script module sends the first scene identifier to the sub-progress scene module according to the stored scene identifier;

[0007] After receiving the scene identifier, the sub-progress scene module obtains the name of the animation module corresponding to the scene identifier from itself, and plays the corresponding animation module according to the name;

[0008] After the animation module plays and meets the configured conditions, the animation module informs the overall progress script module of the scene identifier that has completed the playback;

[0009] After receiving the scene identifier of the completed play, the overall progress script module obtains the next scene identifier from itself and sends it to the sub-progress scene module. If the received scene identifier is the last one, the first scene identifier is returned.

[0010] Furthermore, the sub-progress scene module stores a plurality of names of animation modules corresponding to each scene identifier. After receiving the scene identifier, the sub-progress scene module obtains the names of the plurality of animation modules corresponding to the scene identifier from itself, and plays the corresponding plurality of animation modules according to the names of the plurality of animation modules; after the playback of an animation module among the plurality of animation modules meets the configured conditions, the animation module informs the overall progress script module of the scene identifier whose playback is completed.

[0011] Furthermore, the multiple animation modules are located in the same area on the front-end interface and are stacked on each other, the sub-progress scene module stores sequence information of front and back occlusions of the animation modules, and the animation modules also control the front and back occlusion display of the animation modules according to the sequence information of front and back occlusions when playing.

[0012] Furthermore, the sub-progress scene module stores the delayed play time of each animation module in each scene identifier, and the sub-progress scene module plays the corresponding animation module after waiting for the delayed play time.

[0013] Furthermore, the overall progress script module stores multiple groups of scene identifiers, each group of scene identifiers contains multiple scene identifiers. After receiving the scene identifier of the completed playback, the overall progress script module obtains the next scene identifier of the group where the scene identifier is located from itself and sends it to the sub-progress scene module. If the received scene identifier is the last one of each group, the first scene identifier of the next group is returned. If the received scene identifier is the last one of the last group, the first scene identifier of the first group is returned.

[0014] Furthermore, the playback satisfies the configured condition that the playback ends.

[0015] Furthermore, the overall progress script module and the sub-progress scenario module are front-end configurable storage.

[0016] Furthermore, the overall progress script module and the sub-progress scenario module are respectively controlled by different front-end code files.

[0017] Furthermore, the front-end code file is a JS code file.

[0018] The present invention provides a system for quickly displaying front-end animations, comprising a memory and a processor, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the steps of the method described in any one of the embodiments of the present invention are implemented.

[0019] Different from the prior art, the above technical solution divides a large animation screen into multiple independent animation modules by dividing the front-end animation into multiple animation modules. If it is necessary to adjust the local animation, such as adjusting the text on a certain animation, it is only necessary to adjust the animation module, and there is no need to readjust and produce the entire animation. Moreover, the action control of the animation of the present invention is carried out through the total progress script module and the sub-progress scene module, so that the control process of the animation becomes separated from the screen and configurable. If the sequence of the animation actions is to be adjusted, it is only necessary to reconfigure the total progress script module and the sub-progress scene module to complete the new action screen. The animation display of the present invention does not care about the time of the animation playback, but only cares about the front and back connection points. After one animation scene is played, the next animation scene is played. Therefore, it is very convenient to change the animation sequence by "modifying the upper and lower connection objects of the script". In this way, there is no need to readjust and generate the entire animation, which improves the efficiency of the front-end animation display modification and realizes fast front-end animation display. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 A schematic diagram of the existing animation scene loading and display method described in the background technology;

[0021] Figure 2 A schematic diagram of a method for loading and displaying an animation scene according to a specific implementation method;

[0022] Figure 3 A schematic diagram of a browser front-end interface display according to a specific implementation method;

[0023] Figure 4 It is a schematic diagram of an animation module in an animation picture described in a specific implementation manner;

[0024] Figure 5 A flowchart of the method for front-end animation display described in a specific implementation method;

[0025] Figure 6 It is a schematic diagram of the animation module animation and a schematic diagram of the corresponding animation screen according to the specific implementation method;

[0026] Figure 7 It is a schematic diagram of the animation module transition process described in the specific implementation method.

[0027] Description of reference numerals:

[0028] 1. Browser interface,

[0029] 2. Interface bar,

[0030] 3. Animation screen,

[0031] 4. Animation module. DETAILED DESCRIPTION

[0032] In order to explain the technical content, structural features, achieved objectives and effects of the technical solution in detail, the following is a detailed description in conjunction with specific embodiments and accompanying drawings.

[0033] Reference to "embodiment" herein means that the specific features, structures or characteristics described in conjunction with the embodiment may be included in at least one embodiment of the present application. The term "embodiment" appearing in various places in the specification does not necessarily refer to the same embodiment, nor does it particularly limit its independence or association with other embodiments. In principle, in the present application, as long as there is no technical contradiction or conflict, the various technical features mentioned in the embodiments can be combined in any way to form a corresponding implementable technical solution.

[0034] Unless otherwise defined, the technical terms used in this document have the same meanings as those generally understood by those skilled in the art to which this application belongs; the use of relevant terms in this document is only for describing specific embodiments and is not intended to limit this application.

[0035] In the description of this application, the term "and / or" is a method and system for quickly performing front-end animation display to describe the logical relationship between objects, indicating that three relationships may exist, for example, A and / or B, indicating: A exists, B exists, and A and B exist at the same time. In addition, the character " / " in this article generally indicates that the front and back related objects are a method and system for quickly performing front-end animation display. The system has an "or" logical relationship.

[0036] In the present application, terms such as “first” and “second” are merely used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship of quantity, priority or sequence between these entities or operations.

[0037] Without further limitations, in this application, the words "include", "comprises", "has" or other similar expressions used in the sentences are intended to cover non-exclusive inclusion. These expressions do not exclude the presence of additional elements in the process, method or product including the elements, so that the process, method or product including a series of elements may include not only those limited elements, but also other elements not explicitly listed, or also include elements inherent to such process, method or product.

[0038] Similar to the understanding in the Examination Guidelines, in this application, expressions such as "greater than", "less than", "exceed" and the like are understood to exclude the number itself; expressions such as "above", "below", "within" and the like are understood to include the number itself. In addition, in the description of the embodiments of this application, "multiple" means more than two (including two), and similar expressions related to "multiple" are also understood in this way, such as "multiple groups", "multiple times", etc., unless otherwise clearly and specifically limited.

[0039] In the description of the embodiments of the present application, space-related expressions used, such as "center", "longitudinal", "lateral", "length", "width", "thickness", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "vertical", "top", "bottom", "inside", "outside", "clockwise", "counterclockwise", "axial", "radial", "circumferential", etc., indicate the orientation or position relationship based on the orientation or position relationship shown in the specific embodiments or drawings, and are only for the convenience of describing the specific embodiments of the present application or facilitating the reader's understanding, and do not indicate or imply that the referred device or component must have a specific position, a specific orientation, or be constructed or operated in a specific orientation, and therefore cannot be understood as a limitation on the embodiments of the present application.

[0040] Unless otherwise expressly specified or limited, in the description of the embodiments of the present application, the terms such as "install", "connect", "connect", "fix", "set", etc. used should be understood in a broad sense. For example, the "connection" can be a fixed connection, a detachable connection, or an integrated setting; it can be a mechanical connection, an electrical connection, or a communication connection; it can be a direct connection, or it can be indirectly connected through an intermediate medium; it can be the internal connection of two elements or the interaction relationship between two elements. For technicians in the technical field to which the present application belongs, the specific meanings of the above terms in the embodiments of the present application can be understood according to the specific circumstances.

[0041] The overall concept of the present invention (such as Figure 2(shown in the figure) is: by avoiding the strong association of the timeline, the problem of difficult maintenance caused by the strong association of the front-end animation is solved. In order to avoid the problem of the timeline, the present invention adopts a strong association by realizing the connection progress, and specifically adopts an animation module, a sub-progress scene module and a total progress script module to realize the association of the animation, completely avoiding the strong association based on the timeline. Among them, the animation module is only used to realize the animation interpretation process, passively wait for notification to start broadcasting, and report the progress scheduling through events after the broadcast ends. The sub-progress scene module notifies the broadcast of the next scene according to the actual progress script. The total progress script module records each scene, and even the previous node and the next node of each animation element. The animation display of the present invention does not care about the time playback duration of the animation, but only cares about the front and back connection points. Therefore, it is very convenient to achieve the change of the animation sequence by "modifying the upper and lower connection objects of the script". The addition, deletion and modification of animation elements or scenes will not affect the purpose of the "non-adjacent node" animation playback at all. Then, by configuring the script configuration file, the animation can be modified. The present invention only focuses on the adjacent relationship of animation elements, and does not care about the time of playback. This avoids the problem of strong time correlation caused by "timeline configuration", and to a certain extent, even "animation scene" can be ignored (so the simple illustration does not indicate the animation scene). After an animation is played, the scheduler is notified, and the scheduler notifies the next animation node to play according to the stored configuration file. Any order modification and element replacement only require modifying the script configuration file. This avoids animation association according to the timeline and increases the speed of animation modification and display.

[0042] See also Figures 2 to 7 This embodiment provides a method for quickly displaying front-end animations. The front-end interface is as follows: Figure 2 As shown. It can be a browser interface 1, and in some embodiments it can also be the display interface of other application APPs. The browser interface 1 generally includes an address bar for entering a browsing address and an interface bar 2 for displaying a page, and the interface bar 2 can be used to display text, pictures or animations 3. When a user uses a browser to browse, he first enters the browsing URL in the address bar and confirms it. The browser then obtains the front-end resources from the website corresponding to the URL, and then displays the obtained front-end resources on the interface bar of the browser. The front-end resources can include text, pictures, animations, control codes, etc. The user can see text, pictures or animations on the interface bar of the browser, and can implement corresponding control of the front-end resources according to the front-end control code. The control here includes detecting user actions and controlling animation display.

[0043] Before the present invention is applied, it first includes some basic preparation work, such as designing basic animation interface and action on animation design software. Then, according to the animation elements (moving or changing objects, such as moving cars, houses with flashing lights, etc.), the animation is divided into multiple animation modules 4, which are part of the entire animation picture. The division rules can be determined according to actual needs, such as Figure 3 As shown, it can be in the form of animation elements. These animation modules can be stored in the server storage location corresponding to the browsing URL, and also include the total progress script module and the sub-progress scene module. The total progress script module and the sub-progress scene module are codes for front-end control. Each animation module 4 has animation elements and animation actions. After the browser loads the browsing address, the front end will pre-store multiple animation modules, the total progress script module and the sub-progress scene module. The front-end interface includes an animation screen 3. All animation modules 4 are used to perform animation display in the animation screen 3. Each animation module has a pre-set action path and position. Of course, each animation module also has a name, that is, a file name, which is used to distinguish different animation modules. For example, the name of the animation module can be D1, D2, D3, D4. The total progress script module stores multiple scene identifiers of the animation modules to be played arranged in sequence, such as L1, L2...L10 (corresponding to Figure 2 The sub-progress scene module stores the name of the animation module corresponding to each scene identifier, such as L1 corresponding to D1, L2 corresponding to D2, etc.

[0044] like Figure 4 As shown, when the present invention starts to perform animation after loading is completed, the method includes the following steps: Step S501: After loading is completed, the overall progress script module sends the first scene identifier to the sub-progress scene module according to the stored scene identifier; for example, L1 is sent to the sub-progress scene module first. Then, step S502 is entered. After receiving the scene identifier, the sub-progress scene module obtains the name of the animation module corresponding to the scene identifier from itself, and plays the corresponding animation module according to the name; if the corresponding animation module is D1 after the sub-progress scene module receives L1, then animation module D1 is played. Figure 5 As shown, if the animation module D1 is the car in the upper left corner driving from the left to the right, the entire animation screen will show the car driving from the left to the right. In this way, the action of the entire animation screen is realized after completing an animation module action.

[0045] Then enter step S503. After the animation module plays and meets the configured conditions, the animation module informs the overall progress script module of the scene identifier that has been completed. Then enter step S504. After the overall progress script module receives the scene identifier that has been completed, it obtains the next scene identifier from itself and sends it to the sub-progress scene module. If the received scene identifier is the last one, it returns the first scene identifier. In this way, the playback of the entire animation screen can be completed. Among them, the configured conditions can be the length of time the animation module plays, the remaining time of the animation module playing, or the action of whether the animation module playing is completed. In a simple embodiment, the configured condition can be the condition that the animation module is completed. After the current animation module is completed, the overall progress script module is informed of the scene identifier that has been completed, and then the overall progress script module can proceed to the next step, that is, start playing the next node animation. In some embodiments, if the animations between animation modules need to have a sequence of actions and the time is determined, that is, when one animation module is about to be completed, the animation of the next animation module should be started at this time. Figure 6 As shown in the figure, when the car in the upper left corner is approaching the house, if there are 2 seconds left, the sub-progress scene module determines that the time of the animation module is met, and notifies the overall progress script module to complete the playback. The overall progress script module obtains the scene identifier L2 for the next playback to the sub-progress scene module, and the sub-progress scene module obtains D2 corresponding to L2 and starts playing the second animation module (such as the house lights flashing).

[0046] When the present invention is implemented, it is only necessary to configure the scene identification sequence in the total progress script module and the animation module corresponding to the scene identification sequence in the sub-progress scene module to realize the action of the entire animation. If it is necessary to change the order of the animation, it is only necessary to reconfigure the scene identification sequence and the animation module name to complete the adjustment of the action sequence of the animation. In this way, there is no need to readjust and generate the entire animation, which improves the efficiency of front-end animation display modification and realizes fast front-end animation display. When the present invention needs to adjust the animation picture, such as adjusting the text on a certain animation, it is only necessary to adjust the animation module. The adjusted animation module replaces the original animation module on the server side, and there is no need to readjust and produce the entire animation. Moreover, the action control of the animation of the present invention is carried out through the total progress script module and the sub-progress scene module, so that the control process of the animation becomes separated from the picture and configurable. If the order of the actions of the animation is to be adjusted, it is only necessary to reconfigure the total progress script module and the sub-progress scene module to complete the new action picture. The present invention only focuses on the adjacent relationship of animation elements, and does not care about the time playing duration, which avoids the problem of strong time correlation brought by "timeline configuration", and to a certain extent, even "animation scene" can be ignored (so the simple picture does not indicate the animation scene). After an animation is played, the scheduling is notified, and the scheduling notifies the next animation node to play according to the stored configuration file. Any order modification and element replacement only require modifying the script configuration file. In this way, there is no need to readjust and generate the entire animation, which improves the efficiency of front-end animation display modification and realizes fast front-end animation display.

[0047] Each scene identification of the present invention may correspond to one animation module or multiple animation modules. In the embodiment of multiple animation modules, the sub-progress scene module stores multiple names of animation modules corresponding to each scene identification. After receiving the scene identification, the sub-progress scene module will obtain the names of multiple animation modules corresponding to the scene identification from itself, and play the corresponding multiple animation modules according to the names of the multiple animation modules; after the animation module plays a certain animation module in the multiple animation modules and meets the configured conditions, it will inform the overall progress script module to complete the scene identification of the playback. As shown in the figure, the traffic light can be used as an animation module D5, and the animation modules D1 and D5 can be corresponding in the scene identification L1, so that when the car of the D1 animation module is moving, the animation module D5 of the traffic light will also start to animate, such as the traffic light changes alternately. In this way, the animation actions of different animation modules can be realized, so that the actions of the entire animation picture can be realized. If you want to modify the traffic light style, you only need to change the animation of the animation module of the traffic light, which improves the efficiency of the front-end animation display modification and realizes fast front-end animation display.

[0048] It should be noted that the above-mentioned animation module may include one animation element item, such as only one traffic light, or may include multiple animation element items, such as a car and a house. The car is moving, and the lights in the house can light up and flash, etc., wherein the animation module of multiple animation element items may also be split into multiple animation modules, and each animation module only includes one animation element item. For example, the car and the house are split into two animation modules, the car animation module and the house animation module, so that each animation element item can be controlled separately. It should also be noted that the above-mentioned multiple animation modules may be from different areas or from the same area, that is, there may be stacking. Furthermore, the multiple animation modules are in the same area on the front-end interface and are stacked on each other, and the sub-progress scene module stores the sequence information of the front and back occlusions of the animation modules. When the animation modules are played, the front and back occlusions of the animation modules are also controlled according to the sequence information of the front and back occlusions. Figure 5 As shown in the figure, the small tree in the upper left corner is an animation module, and the car is another animation module. The small tree is displayed on the upper layer, and the car is displayed on the lower layer. The small tree will block the car, so that it looks consistent with the actual situation. This blocking order information is configurable in the sub-progress scene module. You only need to configure the front and back blocking order to achieve blocking display.

[0049] In order to achieve animation delay control and thus achieve more animation effects, the sub-progress scene module stores the delayed play time of each animation module in each scene identifier, and the sub-progress scene module plays the corresponding animation module after waiting for the delayed play time. Figure 5 The upper right corner is divided into car animation module and house animation module. The action needs to be performed when the car drives to the house. The time for the car to drive to the house is 3S. You only need to configure that the playback time of the house animation module is delayed by 3S when the car animation starts. After the car animation starts for 3S, the car drives to the house and the house starts to animate, thus realizing the time control of different animations in the same scene.

[0050] In order to realize animations of more different scenes, the general progress script module stores multiple groups of scene identifiers, and each group of scene identifiers contains multiple scene identifiers. After receiving the scene identifier of the completed playback, the general progress script module obtains the next scene identifier of the group where the scene identifier is located from itself and sends it to the sub-progress scene module. If the received scene identifier is the last one in each group, the first scene identifier of the next group is returned. If the received scene identifier is the last one in the last group, the first scene identifier of the first group is returned. For example, the animation of the first group is that the car goes from left to right along the upper path, and the animation of the second group is that the car goes from left to right along the lower path. After configuration, the car can drive from the upper path to the right, and then drive from the lower path to the left, realizing the action changes of different scenes.

[0051] In all the above embodiments, the condition that the playback of the present invention meets the configuration is preferably the end of playback. That is, as long as the animation module ends the playback, it can send a playback end event to the overall progress script module. This can simplify the function and judgment of the animation module and facilitate the implementation of animation configuration. The animation module of the present invention is preferably a module for each element. In some embodiments, the background of the animation screen is stationary and can be formed by splicing one screen or multiple screens.

[0052] In the above embodiments of the present invention, the main point is that the total progress script module and the sub-progress scene module of the present invention are configurable storage in the front end, that is, by modifying the code of the front end, the animation can be quickly modified without the need to re-arrange and generate the entire animation, thereby realizing the rapid modification of the animation and the front-end display. The total progress script module and the sub-progress scene module can be in one code file. Preferably, the total progress script module and the sub-progress scene module are respectively controlled by different front-end code files. This makes it easy to distinguish and configure different code files. As long as the front-end code can achieve the configuration purpose of the present invention, preferably, the front-end code file is a JS code file. JS code is JavaScript code, which can be parsed and executed by most browsers, and the code configuration is convenient. Of course, it can also be JQuery code that encapsulates JS code.

[0053] The present invention provides a system for quickly displaying front-end animations, comprising a memory and a processor, wherein a computer program is stored on the memory, and when the computer program is executed by the processor, the steps of the method described in any one of the embodiments of the present invention are implemented. The animation display system of the present invention divides the front-end animation into multiple animation modules, so that a large animation screen is divided into multiple independent animation modules. If it is necessary to adjust the local animation, such as adjusting the text on a certain animation, it is only necessary to adjust the animation module, and there is no need to readjust and make the entire animation. Moreover, the action control of the animation of the present invention is carried out through the total progress script module and the sub-progress scene module, so that the control process of the animation becomes separated from the screen and configurable. If the sequence of the animation actions is to be adjusted, it is only necessary to reconfigure the total progress script module and the sub-progress scene module to complete the new action screen. The animation display of the present invention does not care about the time of the animation playback, but only cares about the front and back connection points. After one animation scene is played, the next animation scene is played. Therefore, the animation sequence can be easily changed by "modifying the upper and lower connection objects of the script". In this way, there is no need to readjust and generate the entire animation, which improves the efficiency of the front-end animation display modification and realizes fast front-end animation display.

[0054] It should be noted that, although the above embodiments have been described in this article, the patent protection scope of the present invention is not limited thereby. Therefore, based on the innovative concept of the present invention, changes and modifications made to the embodiments described herein, or equivalent structures or equivalent process changes made using the contents of the present invention specification and drawings, directly or indirectly applying the above technical solutions to other related technical fields, are all included in the patent protection scope of the present invention.

Claims

1. A method for quickly displaying front-end animation, characterized in that: The front end is pre-stored with multiple animation modules, a total progress script module and a sub-progress scene module. The front end interface includes an animation screen. All animation modules are used to perform animation display in the animation screen. The total progress script module stores multiple scene identifiers of animation modules to be played arranged in sequence. The sub-progress scene module stores the name of the animation module corresponding to each scene identifier. The method includes the following steps: After loading is completed, the overall progress script module sends the first scene identifier to the sub-progress scene module according to the stored scene identifier; After receiving the scene identifier, the sub-progress scene module obtains the name of the animation module corresponding to the scene identifier from itself, and plays the corresponding animation module according to the name; After the animation module plays and meets the configured conditions, the animation module informs the overall progress script module of the scene identifier that has completed the playback; After receiving the scene identifier of the completed play, the overall progress script module obtains the next scene identifier from itself and sends it to the sub-progress scene module. If the received scene identifier is the last one, the first scene identifier is returned.

2. A method for quickly displaying front-end animation according to claim 1, characterized in that: The sub-progress scene module stores a plurality of names of animation modules corresponding to each scene identifier. After receiving the scene identifier, the sub-progress scene module obtains the names of the plurality of animation modules corresponding to the scene identifier from itself, and plays the corresponding plurality of animation modules according to the names of the plurality of animation modules. After the playback of an animation module among the plurality of animation modules meets the configured conditions, the animation module informs the overall progress script module of the scene identifier that has completed the playback.

3. A method for quickly displaying front-end animation according to claim 2, characterized in that: The multiple animation modules are located in the same area on the front-end interface and are stacked on each other. The sub-progress scene module stores sequence information of front and back occlusions of the animation modules. When the animation modules are played, the front and back occlusions of the animation modules are also controlled according to the sequence information of the front and back occlusions.

4. A method for quickly displaying front-end animation according to claim 2, characterized in that: The sub-progress scene module stores the delayed play time of each animation module in each scene identifier, and the sub-progress scene module plays the corresponding animation module after waiting for the delayed play time.

5. The method for quickly displaying front-end animation according to claim 1, characterized in that: The overall progress script module stores multiple groups of scene identifiers, each group of scene identifiers contains multiple scene identifiers. After receiving the scene identifier of the completed playback, the overall progress script module obtains the next scene identifier of the group where the scene identifier is located from itself and sends it to the sub-progress scene module. If the received scene identifier is the last one of each group, the first scene identifier of the next group is returned. If the received scene identifier is the last one of the last group, the first scene identifier of the first group is returned.

6. A method for quickly displaying front-end animation according to claim 1, characterized in that: The playback satisfies the configured condition that the playback ends.

7. A method for quickly displaying front-end animation according to claim 1, characterized in that: The overall progress script module and the sub-progress scenario module are front-end configurable storage.

8. The method for quickly displaying front-end animation according to claim 1, characterized in that: The overall progress script module and the sub-progress scenario module are controlled by different front-end code files respectively.

9. A method for quickly displaying front-end animation according to claim 8, characterized in that: The front-end code file is a JS code file.

10. A system for quickly displaying front-end animations, characterized in that: The method comprises a memory and a processor, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the steps of the method according to any one of claims 1 to 9 are implemented.

Images