Page animation playing method and device and electronic equipment

Abstract

The invention provides a page animation playing method and device and electronic equipment, and relates to the technical field of animation play.The method comprises the steps that a page display action is responded, a target page is traversed, and a target node is selected from nodes of the target page based on preset animation attributes; generating a node animation attribute mapping table containing the target node and the attribute value of the animation style configured by the target node; removing the animation attribute configured by the target node, and displaying the target page on a graphical user interface; monitoring whether the target node is in a visual range corresponding to the graphical user interface; and if yes, playing the animation corresponding to the animation style at the target node based on the node animation attribute mapping table. According to the page animation playing method and device and the electronic equipment provided by the invention, the animation corresponding to the animation style can be played when the target node enters the visual range, so that the situation that a user cannot see the complete animation due to the fact that the animation is played in advance is avoided, and the user experience is effectively improved.

Description

Technical Field

[0001] The present invention relates to the technical field of animation playback, and in particular to a method, device and electronic device for playing page animation. Background Art

[0002] With the development of mobile devices and network technology, a large number of websites have added a lot of animation effects to web pages in order to enrich web page content and attract users' attention. Based on the parsing principle of web pages by the browser kernel, there is a CSS (Cascading Style Sheets) animation. The browser parses web page documents, such as html (Hypertext Markup Language) documents, into DOM (Document Object Model) trees and CSS files, and renders the page elements of each DOM node through the CSS file. Then for a certain page element, if it is specified with CSS styles in different positions, shapes, colors, etc. at different times, the page element will be rendered and displayed in different positions and forms over time according to the above CSS styles, that is, the animation effect is realized in the page.

[0003] However, CSS animations are generally pre-set on the corresponding DOM nodes. Once set, they will play immediately, even if the node is not in the visible window. This often makes it difficult for users to see the complete animation, so the user experience is not friendly. Summary of the invention

[0004] In view of this, an object of the present invention is to provide a method, device and electronic device for playing page animation to alleviate the above technical problems.

[0005] In a first aspect, an embodiment of the present invention provides a method for playing a page animation, the method comprising: responding to a page display action, traversing a target page, and selecting at least one target node from the nodes of the target page based on preset animation attributes; wherein the target node is a node configured with an animation style; generating a node animation attribute mapping table including the target node and the attribute value of the animation style configured for the target node; clearing the animation attributes configured for the target node, and displaying the target page in a graphical user interface; monitoring whether the target node is within a visible range corresponding to the graphical user interface; and if so, playing the animation corresponding to the animation style at the target node based on the node animation attribute mapping table.

[0006] In combination with the first aspect, an embodiment of the present invention provides a first possible implementation of the first aspect, wherein each of the above-mentioned target nodes is correspondingly configured with a first listening event; the step of monitoring whether the target node is within the visual range corresponding to the graphical user interface includes: responding to a scrolling operation on the target page, and during the scrolling of the target page, monitoring whether the target node is within the visual range corresponding to the graphical user interface through the first listening event.

[0007] In combination with the first possible implementation of the first aspect, an embodiment of the present invention provides a second possible implementation of the first aspect, wherein the step of monitoring whether the target node is within the visible range corresponding to the graphical user interface through the first monitoring event includes: obtaining the return value of the callback function corresponding to the first monitoring event; if the return value is a preset first return value, determining that the target node is within the visible range corresponding to the graphical user interface; wherein the first return value is the function return value configured when the target node is within the visible range corresponding to the graphical user interface; if the return value is a preset second return value, determining that the target node is not within the visible range corresponding to the graphical user interface, wherein the second return value is the function return value configured when the target node is not within the visible range corresponding to the graphical user interface.

[0008] In combination with the first aspect, an embodiment of the present invention provides a third possible implementation of the first aspect, wherein the above-mentioned node animation attribute mapping table is used to record the correspondence between the target node and the attribute values ​​of the animation style configured for the target node; the step of playing the animation corresponding to the animation style at the target node based on the node animation attribute mapping table includes: searching the node animation attribute mapping table for the animation style corresponding to the target node; adding the animation style to the target node, and triggering the target node to play the animation corresponding to the animation style.

[0009] In combination with the first aspect, an embodiment of the present invention provides a fourth possible implementation of the first aspect, wherein each of the above-mentioned target pages is configured with a second listening event; the method also includes: during the process of the target node playing the animation corresponding to the animation style, monitoring the switching operation for the target page through the second listening event; if the first switching operation is monitored, configuring a first tag for the target node to pause the playing process of the animation of the target node; wherein the first switching operation is used to switch the target page within the visible range corresponding to the graphical user interface to other pages; the first tag is used to pause the playing process of the animation of the target node.

[0010] In combination with the fourth possible implementation of the first aspect, an embodiment of the present invention provides a fifth possible implementation of the first aspect, wherein the above method also includes: if a second switching operation for the graphical user interface is monitored, configuring a second label for the target node to continue playing the animation corresponding to the animation style at the target node; wherein the second switching operation is used to switch the visual range corresponding to the graphical user interface from other pages to the target page; and the second label is used to play the animation of the target node.

[0011] In combination with the first aspect, an embodiment of the present invention provides a sixth possible implementation of the first aspect, wherein the above-mentioned step of traversing the target page and selecting at least one target node from the nodes of the target page based on preset animation attributes includes: traversing the target page, and selecting a node whose animation attribute is the preset animation attribute from the nodes of the target page as the target node.

[0012] In a second aspect, an embodiment of the present invention further provides a device for playing a page animation, the device comprising: a traversal module, for responding to a page display action, traversing a target page, and selecting at least one target node from the nodes of the target page based on preset animation attributes; wherein the target node is a node configured with an animation style; a saving module, for generating a node animation attribute mapping table containing the target node and the attribute values ​​of the animation style configured for the target node; a clearing module, for clearing the animation attributes configured for the target node, and displaying the target page in a graphical user interface; a monitoring module, for monitoring whether the target node is within a visible range corresponding to the graphical user interface; and a playing module, for playing the animation corresponding to the animation style at the target node based on the node animation attribute mapping table when the monitoring result of the monitoring module is yes.

[0013] In a third aspect, an embodiment of the present invention further provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the method described in the first aspect when executing the computer program.

[0014] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, and the computer program is executed by a processor to perform the steps of the method described in the first aspect.

[0015] The embodiments of the present invention bring the following beneficial effects:

[0016] A page animation playback method, device and electronic device provided by an embodiment of the present invention can respond to a page display action, traverse a target page, and select at least one target node configured with an animation style from the nodes of the target page based on preset animation attributes; generate a node animation attribute mapping table including the target node and the attribute value of the animation style configured for the target node; and clear the animation attribute configured for the target node, and then display the target page in a graphical user interface; monitor whether the target node is within the corresponding visible range of the graphical user interface; if so, play the animation corresponding to the animation style at the target node based on the node animation attribute mapping table, and by monitoring whether each target node is within the visible range, the animation corresponding to the animation style can be controlled to be played at the target node when the target node enters the visible range, which can avoid the situation where the user cannot see the complete animation due to the animation being played in advance, thereby effectively improving the user experience.

[0017] Other features and advantages of the present invention will be described in the following description, and partly become apparent from the description, or understood by practicing the present invention. The purpose and other advantages of the present invention are realized and obtained by the structures particularly pointed out in the description, claims and drawings.

[0018] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, preferred embodiments are given below and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without paying any creative work.

[0020] Figure 1 A flowchart of a method for playing a page animation provided by an embodiment of the present invention;

[0021] Figure 2 A flowchart of another method for playing page animation provided by an embodiment of the present invention;

[0022] Figure 3 A schematic diagram of the structure of a device for playing page animation provided by an embodiment of the present invention;

[0023] Figure 4 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0024] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the accompanying drawings. 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 those skilled in the art without creative work are within the scope of protection of the present invention.

[0025] Usually, CSS animations are pre-set on the corresponding DOM nodes and will play immediately once set, even if the node is not in the visible window. If the node is not in the visible window, when the user scrolls the web page to the node, the animation may have been played or halfway through, making it difficult for the user to see the complete animation. Or, when the user switches the browser or switches to another page, the animation will not pause, resulting in a user-unfriendly experience.

[0026] Based on this, a page animation playback method, device and electronic device provided by the embodiments of the present invention can effectively alleviate the above technical problems.

[0027] To facilitate understanding of this embodiment, a method for playing a page animation disclosed in an embodiment of the present invention is first introduced in detail.

[0028] In a possible implementation, an embodiment of the present invention provides a method for playing a page animation. Specifically, the method can be applied to an intelligent terminal configured with a graphical user interface, such as a smart phone, a tablet computer, a PDA, a desktop computer, a car computer, etc., and can control the playing process of the page animation.

[0029] Specifically, Figure 1 The flowchart of a method for playing a page animation is shown, and the method comprises the following steps:

[0030] Step S102, in response to the page display action, traverse the target page to select at least one target node from the nodes of the target page based on a preset animation attribute;

[0031] Wherein, the target page in the embodiment of the present invention includes at least one target node, and the target node is a node configured with an animation style;

[0032] The target node is the node configured with the animation style;

[0033] Step S104, generating a node animation attribute mapping table including the target node and the attribute value of the animation style configured for the target node;

[0034] Step S106, clearing the animation properties configured for the target node, and displaying the target page on the graphical user interface;

[0035] In specific implementation, the above-mentioned target page in the embodiment of the present invention usually refers to the page of the application APP installed on the smart terminal, such as shopping type, display type application APP, etc. When the user starts the application APP, the page can be displayed on the graphical user interface of the smart terminal, and the target page can be the homepage of the application APP, or any page under any category column. As long as the page contains a target node, it can be used as the target page in the embodiment of the present invention.

[0036] Furthermore, the above-mentioned node generally refers to a DOM node, and the properties of the node can be configured, such as configuring the node style, adding animation properties, etc. In the above-mentioned step S102, when traversing the target page and selecting the target node, the target page can be traversed, and based on the added animation properties, a node with an animation property of a preset animation property is selected from the nodes of the target page as the target node.

[0037] Step S108, monitoring whether the target node is within the visible range corresponding to the graphical user interface;

[0038] Step S110: If yes, play the animation corresponding to the animation style at the target node based on the node animation attribute mapping table.

[0039] Specifically, the node animation attribute mapping table in the embodiment of the present invention is used to record the correspondence between the target node and the attribute value of the animation style configured for the target node; in the above-mentioned team S110, when playing the animation corresponding to the animation style, the animation style corresponding to the target node can be searched in the node animation attribute mapping table; then the animation style is added to the target node, thereby triggering the target node to play the animation corresponding to the animation style.

[0040] Furthermore, if in the above step S108, the monitored target node is not within the corresponding visible range of the graphical user interface, the corresponding animation will not be played at the target node.

[0041] A page animation playback method provided by an embodiment of the present invention can respond to a page display action, traverse a target page, and select at least one target node configured with an animation style from the nodes of the target page based on preset animation attributes; generate a node animation attribute mapping table including the target node and the attribute value of the animation style configured for the target node; and clear the animation attribute configured for the target node, and then display the target page in a graphical user interface; monitor whether the target node is within the corresponding visible range of the graphical user interface; if so, play the animation corresponding to the animation style at the target node based on the node animation attribute mapping table, and by monitoring whether each target node is within the visible range, the animation corresponding to the animation style can be controlled to be played at the target node when the target node enters the visible range, which can avoid the situation where the user cannot see the complete animation due to the animation being played in advance, thereby effectively improving the user experience.

[0042] In actual use, the monitoring process of whether the above target node is within the visual range corresponding to the graphical user interface actually includes two situations. One is that the user scrolls the page to change the display content presented on the graphical user interface, that is, the current graphical user interface of the smart terminal has been presenting the content of the target page. At this time, the monitoring is the scrolling of the target page. The other is that the user switches the application APP displayed by the graphical user interface of the smart terminal, such as switching the application APP currently displayed in the graphical user interface from the shopping category to other applications. At this time, it will also cause the target node to be out of the visual range corresponding to the graphical user interface. At this time, the monitoring is the switching of the target page.

[0043] In the embodiment of the present invention, both the scrolling condition of the target page and the switching condition of the target page can be monitored.

[0044] Specifically, in the embodiment of the present invention, each target node is correspondingly configured with a first monitoring event; each target page is correspondingly configured with a second monitoring event to monitor the scrolling status of the target page and the switching status of the target page.

[0045] For ease of understanding, Figure 1 On the basis of Figure 2 A flowchart of another method for playing page animation is also provided, and the specific process of monitoring whether the target node is within the visual range corresponding to the graphical user interface is further explained. Figure 2 As shown, the following steps are included:

[0046] Step S202, in response to the page display action, traverse the target page to select at least one target node from the nodes of the target page based on a preset animation attribute;

[0047] Wherein, the target page in the embodiment of the present invention includes at least one target node, and the target node is a node configured with an animation style;

[0048] The target node is the node configured with the animation style;

[0049] Step S204, generating a node animation attribute mapping table including the target node and the attribute value of the animation style configured for the target node;

[0050] Step S206, clearing the animation properties configured for the target node, and displaying the target page on the graphical user interface;

[0051] The processes of the above steps S202 to S206 may refer to the processes of the above steps S102 to S106, which will not be described in detail here.

[0052] Step S208, in response to the scrolling operation on the target page, during the scrolling process of the target page, monitoring whether the target node is within the visible range corresponding to the graphical user interface through a first monitoring event;

[0053] If yes, execute step S210, if no, return to step S208;

[0054] In specific implementation, the above-mentioned first listening event is used to monitor whether the target node is within the visible range corresponding to the graphical user interface. Usually, the IntersectionObserver method can be used to configure the first listening event, that is, the IntersectionObserver method is used to monitor whether each target node is within the visible range.

[0055] Specifically, in the monitoring process of the above-mentioned step S208, if it is monitored that the user controls the scrolling of the target page, the intelligent terminal can respond to the scrolling operation, and then trigger the callback function of the IntersectionObserver method, and obtain the return value of the callback function corresponding to the first monitoring event; if the return value is the preset first return value, it is determined that the target node is within the visible range corresponding to the graphical user interface; wherein the first return value is the function return value configured when the target node is within the visible range corresponding to the graphical user interface; if the return value is the preset second return value, it is determined that the target node is not within the visible range corresponding to the graphical user interface, wherein the second return value is the function return value configured when the target node is not within the visible range corresponding to the graphical user interface.

[0056] Furthermore, after determining that the target node is within the visible range corresponding to the graphical user interface, the following steps may be further performed to play the animation at the target node.

[0057] Step S210, searching the node animation attribute mapping table for the animation style corresponding to the target node;

[0058] The node animation attribute mapping table in the embodiment of the present invention is used to record the corresponding relationship between the target node and the attribute value of the animation style configured for the target node;

[0059] Step S212, adding the animation style to the target node, and triggering the target node to play the animation corresponding to the animation style;

[0060] In specific implementation, usually, for the above target page, it is necessary to first collect the nodes configured with animation styles therein, that is, first collect the target nodes and establish the above node animation attribute mapping table, so that the animation style corresponding to the target node can be found in the node animation attribute mapping table in the above step S210.

[0061] Furthermore, in an embodiment of the present invention, when selecting at least one target node from the nodes of the target page, the selection can be automatic or manually configured by the user. When automatically selecting, all nodes in the target page can be traversed to find nodes whose node style animationName attribute is not empty or not none. At the same time, for the configuration of exclude rules, the corresponding nodes can be excluded; at the same time, the user can choose manual configuration, that is, the node that needs to be controlled to play the web page animation is determined as the target node, and the target node is configured in a target configuration item.

[0062] Furthermore, the selected target nodes can be saved in a list, and a mapping relationship between a target node and a node style animationName attribute value can be established. At the same time, the animationName attribute value of the target node can be temporarily cleared to prevent the target node from automatically animating. At this point, based on the mapping relationship between the target node and the node style animationName attribute value, the node animation attribute mapping table in the embodiment of the present invention can be generated.

[0063] Furthermore, based on the second monitoring event, it can be used to monitor the switching process of the target page. Specifically, please refer to the following steps.

[0064] Step S214, during the process of the target node playing the animation corresponding to the animation style, monitoring the switching operation for the target page through the second monitoring event;

[0065] In specific implementation, the second monitoring event can use the addEventListener method. Specifically, the visibilitychange event of the document object of the target page can be monitored through the addEventListener method to monitor the switching operation of the target page.

[0066] Step S216: if the first switching operation is monitored, a first tag is configured for the target node to pause the playing process of the animation of the target node;

[0067] Among them, the first switching operation in the embodiment of the present invention is used to switch the target page within the visible range corresponding to the graphical user interface to other pages; the first tag is used to pause the playing process of the animation of the target node.

[0068] Step S218: If a second switching operation for the graphical user interface is monitored, a second tag is configured for the target node to continue playing the animation corresponding to the animation style at the target node.

[0069] The second switching operation in the embodiment of the present invention is used to switch the visual range corresponding to the graphical user interface from other pages to the target page; and the second tag is used to play the animation of the target node.

[0070] In specific implementation, the above other pages refer to pages of other application APPs that are different from the application APP of the target page. Furthermore, for the second listening event using the addEventListener method, when the page is invisible or visible, the style of animation-play-state:paused / running can be added to all the monitored target nodes to control the pause or play of the animation. Therefore, the above first tag can be set using animation-play-state:paused, and the above second tag can be set using animation-play-state:running.

[0071] For example, taking the CSS animation playback of the page controlled by JavaScript as an example, based on the page animation playback method provided by the embodiment of the present invention, first, the nodes with CSS animation in the page can be collected as target nodes, and then each target node and the corresponding animation style of the node (i.e., the attribute value of the animation style) are recorded, and the animation of the current target node is temporarily cleared; then, the IntersectionObserver method is used to monitor whether each target node is within the visible range. When the target node enters the visible range, the previously recorded animation style is added to the target node, so that the target node immediately plays the animation corresponding to the animation style. Further, assuming that the user switches the browser at this time, or uses a smart phone to switch to another page or application APP, for the target node, animation-play-state:paused can be set as the first tag to pause the animation. When the user switches back, animation-play-state:running is set again as the second tag to continue the animation. In this way, the user can see the complete animation playback process from the beginning, and the animation is paused when the target page is not visible, and the animation continues when the target page is visible, which effectively improves the user experience.

[0072] Further, based on the above embodiment, the embodiment of the present invention also provides a device for playing page animation, such as Figure 3 A schematic diagram of the structure of a device for playing a page animation is shown, the device comprising:

[0073] The traversal module 30 is used to respond to the page display action, traverse the target page, and select at least one target node from the nodes of the target page based on a preset animation attribute; wherein the target node is a node configured with an animation style;

[0074] A saving module 32, configured to generate a node animation attribute mapping table including the target node and the attribute value of the animation style configured for the target node;

[0075] A clearing module 34, used to clear the animation attribute configured for the target node and display the target page on a graphical user interface;

[0076] A monitoring module 36, used to monitor whether the target node is within the visual range corresponding to the graphical user interface;

[0077] The playing module 38 is used to play the animation corresponding to the animation style at the target node based on the node animation attribute mapping table when the monitoring result of the monitoring module is yes.

[0078] The web page animation playback device provided in the embodiment of the present invention has the same technical features as the web page animation playback method provided in the above embodiment, and therefore can also solve the same technical problems and achieve the same technical effects.

[0079] Furthermore, an embodiment of the present invention also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above method when executing the computer program.

[0080] An 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, the steps of the above method are executed.

[0081] Furthermore, an embodiment of the present invention also provides a schematic diagram of the structure of an electronic device, such as Figure 4 As shown, it is a schematic diagram of the structure of the electronic device, wherein the electronic device includes a processor 41 and a memory 40, the memory 40 stores computer executable instructions that can be executed by the processor 41, and the processor 41 executes the computer executable instructions to implement the above method.

[0082] exist Figure 4 In the illustrated embodiment, the electronic device further includes a bus 42 and a communication interface 43 , wherein the processor 41 , the communication interface 43 and the memory 40 are connected via the bus 42 .

[0083] Among them, the memory 40 may include a high-speed random access memory (RAM), and may also include a non-volatile memory (non-volatile memory), such as at least one disk storage. The communication connection between the system network element and at least one other network element is realized through at least one communication interface 43 (which can be wired or wireless), and the Internet, wide area network, local area network, metropolitan area network, etc. can be used. The bus 42 can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. The bus 42 can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 4 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0084] The processor 41 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by the hardware integrated logic circuit in the processor 41 or the instruction in the form of software. The above processor 41 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in the embodiment of the present invention can be directly embodied as a hardware decoding processor to execute, or it can be executed by a combination of hardware and software modules in the decoding processor. The software module can be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory, and the processor 41 reads the information in the memory and completes the above method in combination with its hardware.

[0085] The page animation playback method, device and computer program product of the electronic device provided in the embodiments of the present invention include a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the method described in the previous method embodiments. The specific implementation can be found in the method embodiments and will not be repeated here.

[0086] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the device described above can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0087] In addition, in the description of the embodiments of the present invention, unless otherwise clearly specified and limited, the terms "installed", "connected", and "connected" should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection or an indirect connection through an intermediate medium, and it can be the internal communication of two components. For those skilled in the art, the specific meanings of the above terms in the present invention can be understood according to specific circumstances.

[0088] 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, a server, or a network device, etc.) to perform all or part of the steps of the methods described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc., which can store program codes.

[0089] In the description of the present invention, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc., indicating the orientation or positional relationship, are based on the orientation or positional relationship shown in the drawings, and are only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as limiting the present invention. In addition, the terms "first", "second", and "third" are used for descriptive purposes only, and cannot be understood as indicating or implying relative importance.

[0090] Finally, it should be noted that the above embodiments are only specific implementations of the present invention, which are used to illustrate the technical solutions of the present invention, rather than to limit them. The protection scope of the present invention is not limited thereto. Although the present invention is described in detail with reference to the above embodiments, those skilled in the art should understand that any person skilled in the art can still modify the technical solutions recorded in the above embodiments within the technical scope disclosed by the present invention, or can easily think of changes, or make equivalent replacements for some of the technical features therein; and these modifications, changes or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be based on the protection scope of the claims.

Claims

1. A method for playing a page animation, characterized in that: The method comprises: In response to the page display action, traverse the target page to select at least one target node from the nodes of the target page based on a preset animation attribute; wherein the target node is a node configured with an animation style; Generate a node animation attribute mapping table including the target node and attribute values ​​of the animation style configured for the target node; Clearing the animation properties configured for the target node, and displaying the target page on a graphical user interface; Monitor whether the target node is within the visible range corresponding to the graphical user interface; If yes, the animation corresponding to the animation style is played at the target node based on the node animation attribute mapping table.

2. The method according to claim 1, characterized in that Each of the target nodes is correspondingly configured with a first monitoring event; The step of monitoring whether the target node is within the visual range corresponding to the graphical user interface includes: In response to a scrolling operation on the target page, during the scrolling of the target page, whether the target node is within a visible range corresponding to the graphical user interface is monitored through the first monitoring event.

3. The method according to claim 2, characterized in that The step of monitoring whether the target node is within the visible range corresponding to the graphical user interface through the first monitoring event includes: Obtaining the return value of the callback function corresponding to the first monitoring event; If the return value is a preset first return value, determining that the target node is within the visible range corresponding to the graphical user interface; wherein the first return value is a function return value configured when the target node is within the visible range corresponding to the graphical user interface; If the return value is a preset second return value, it is determined that the target node is not within the visible range corresponding to the graphical user interface, wherein the second return value is a function return value configured when the target node is not within the visible range corresponding to the graphical user interface.

4. The method according to claim 1, characterized in that: The node animation attribute mapping table is used to record the corresponding relationship between the target node and the attribute value of the animation style configured for the target node; The step of playing the animation corresponding to the animation style at the target node based on the node animation attribute mapping table comprises: Searching the animation style corresponding to the target node in the node animation attribute mapping table; The animation style is added to the target node, and the target node is triggered to play the animation corresponding to the animation style.

5. The method according to claim 1, characterized in that Each of the target pages is correspondingly configured with a second monitoring event; The method further comprises: During the process of the target node playing the animation corresponding to the animation style, monitoring the switching operation for the target page through the second monitoring event; If a first switching operation is detected, a first tag is configured for the target node to pause the playback process of the animation of the target node; wherein the first switching operation is used to switch the target page within the visible range corresponding to the graphical user interface to other pages; and the first tag is used to pause the playback process of the animation of the target node.

6. The method according to claim 5, characterized in that The method further comprises: If a second switching operation for the graphical user interface is monitored, a second label is configured for the target node to continue playing the animation corresponding to the animation style at the target node; wherein the second switching operation is used to switch the visual range corresponding to the graphical user interface from other pages to the target page; and the second label is used to play the animation of the target node.

7. The method according to claim 1, characterized in that The step of traversing the target page to select at least one target node from the nodes of the target page based on preset animation attributes includes: The target page is traversed, and a node whose animation attribute is the preset animation attribute is selected from the nodes of the target page as a target node.

8. A device for playing page animation, characterized in that: The device comprises: A traversal module, for responding to a page display action, traversing a target page, and selecting at least one target node from the nodes of the target page based on a preset animation attribute; wherein the target node is a node configured with an animation style; A saving module, used to generate a node animation attribute mapping table including the target node and the attribute value of the animation style configured for the target node; A clearing module, used to clear the animation properties configured for the target node and display the target page on a graphical user interface; A monitoring module, used to monitor whether the target node is within the visual range corresponding to the graphical user interface; The playing module is used to play the animation corresponding to the animation style at the target node based on the node animation attribute mapping table when the monitoring result of the monitoring module is yes.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

10. 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 method described in any one of claims 1 to 7 are executed.

Images