Webpage content display method and device based on interactive animation, equipment and medium

Abstract

The invention discloses a webpage content display method and device based on interactive animation, equipment and a medium, and the method comprises the steps: under the condition that a first page is displayed in a full screen, automatically playing Lottie animation corresponding to each first dynamic effect component on the first page based on a Lottie file associated with each first dynamic effect component in the first page; when a first user input aiming at the first page is received, an onLeave event of fullpage is monitored through a fullpage.js plug-in, and a serial number of a second page is configured in the onLeave event; based on the onLeave event, the first page is switched to a second page on the terminal screen in a target switching mode, and the target switching mode is that the first page is transitionally hidden after full-screen vertical scrolling on the terminal screen in the first direction, and the second page is transitionally displayed after full-screen vertical scrolling on the terminal screen in the first direction; and based on the Lottie file associated with each second dynamic effect component in the second page, automatically playing the Lottie animation corresponding to each second dynamic effect component in the second page.

Description

Technical Field

[0001] The present application relates to the field of Internet technology, in particular to the field of web page display technology, and in particular to a web page content display method, device, equipment and medium based on interactive animation. Background Art

[0002] With the continuous development of the Internet, Web development is also constantly evolving and changing. At present, in order to increase the fun of Web pages, various complex animation effects are implemented in combination with CSS and JS in Web pages. Animation effects can cleverly guide the user's attention, make complex operation processes intuitive and easy to understand, relieve the user's anxiety of waiting, enhance the user's sense of control, and make the user feel more smooth and comfortable during the browsing process. Therefore, animation effects, as an important means to improve user experience, are of great significance to improving user satisfaction.

[0003] However, in actual applications, when CSS and JS are combined to implement full-screen scrolling of web pages, for large websites, the content in the full-screen scrolling area may be very large, which may affect the rendering performance of the page and result in poor page animation effects. Summary of the invention

[0004] In view of this, the embodiments of the present application provide a web page content display method, device, equipment, medium and product based on interactive animation, which can improve rendering performance and page animation effects in a full-screen scrolling scenario.

[0005] In a first aspect, an embodiment of the present application provides a web page content display method based on interactive animation, which is applied to a client, and the method includes: when a first page is displayed in full screen on a terminal screen of the client, based on the Lottie file associated with each first motion effect component in the first page, automatically playing the Lottie animation corresponding to each first motion effect component on the first page; when a first user input for the first page is received, monitoring the onLeave event of the fullpage through the fullpage.js plug-in, and configuring the serial number of the second page in the onLeave event, wherein the first user input is used to control the first page to slide along a first direction, and the second page is the previous page or the next page of the first page; based on the onLeave event, directly switching the first page to the second page in a target switching manner on the terminal screen, wherein the target switching manner is that the first page is transitionally hidden after the terminal screen is vertically scrolled in full screen along the first direction, and the second page is transitionally displayed after the terminal screen is vertically scrolled in full screen along the first direction; based on the Lottie file associated with each second motion effect component in the second page, automatically playing the Lottie animation corresponding to each second motion effect component on the second page.

[0006] In some implementations of the first aspect, configuring the serial number of the second page in the onLeave event includes: setting the parameter value of index in the onLeave event to the serial number of the first page, and setting the parameter value of nextIndex to the serial number of the second page.

[0007] In some implementations of the first aspect, based on the Lottie file associated with each first motion effect component in the first page, before the Lottie animation corresponding to each first motion effect component is automatically played on the first page, it also includes: when the first page is the homepage of the website, in response to the second user input, initializing the page data of the first page and loading fullpage.js; based on the page data, displaying the first page in full screen on the terminal screen, and determining whether the Lottie object in the first page exists by calling the life cycle function; if it exists, deregistering the Lottie animation currently playing in the first page by executing the Lottie.destroy() method.

[0008] In some implementable embodiments of the first aspect, a Lottie animation corresponding to each first motion effect component is automatically played on the first page, including: in the motion effect display area on the first page, based on a pre-set playback order corresponding to each first motion effect component, the Lottie animation corresponding to each first motion effect component is looped, wherein the motion effect display area only plays one Lottie animation at the same time; when any Lottie animation is played in the motion effect display area, if a third user input is received for a target motion effect component among the first motion effect components, any Lottie animation in the motion effect display area is switched to the Lottie animation corresponding to the target motion effect component.

[0009] In some implementations of the first aspect, any Lottie animation in the motion effect display area is switched to a Lottie animation corresponding to a target motion effect component, including: switching any Lottie animation in the motion effect display area to a Lottie animation corresponding to a target motion effect component by calling the setInterval method of js.

[0010] In some implementable methods of the first aspect, based on the Lottie files associated with each first motion effect component in the first page, the Lottie animations corresponding to each first motion effect component are automatically played on the first page, including: for each first motion effect component, obtaining the json file address and motion effect configuration parameters in the Lottie file associated with the first motion effect component by calling the Lottie.loadAnimation(configData) method; when the json parameters are obtained based on the json file address, rendering the Lottie animation corresponding to the first motion effect component in combination with the json parameters and the motion effect configuration parameters; and playing the Lottie animation corresponding to the first motion effect component in the motion effect display area of ​​the first page.

[0011] In some possible implementations of the first aspect, after the first page is directly switched to the second page in a target switching manner, it also includes: resetting the Lottie animation of the first page to an initial state; when the terminal screen displays the first page again, based on the pre-set playback order corresponding to each first motion effect component, re-playing the Lottie animation corresponding to each first motion effect component in a loop.

[0012] In a second aspect, an embodiment of the present application provides a web page content display device based on interactive animation, the device comprising: a playback module, which is used to automatically play the Lottie animations corresponding to each first motion effect component on the first page based on the Lottie files associated with each first motion effect component in the first page when the first page is displayed in full screen on the terminal screen of the client; a configuration module, which is used to monitor the onLeave event of the fullpage through the fullpage.js plug-in when receiving the first user input for the first page, and configure the serial number of the second page in the onLeave event, wherein the first user input is used to control the first page to slide along the first direction, and the second page is the previous page or the next page of the first page; a page switching module, which is used to directly switch the first page to the second page in a target switching manner on the terminal screen based on the onLeave event, wherein the target switching manner is that the first page is transitionally hidden after the terminal screen is full-screen vertically scrolled along the first direction, and the second page is transitionally displayed after the terminal screen is full-screen vertically scrolled along the first direction; the playback module is also used to automatically play the Lottie animations corresponding to each second motion effect component on the second page based on the Lottie files associated with each second motion effect component in the second page.

[0013] In some implementations of the second aspect, the configuration module is specifically used to: set the parameter value of index in the onLeave event to the serial number of the first page, and set the parameter value of nextIndex to the serial number of the second page.

[0014] In some implementations of the second aspect, it also includes: an initialization module, which is used to initialize the page data of the first page and load fullpage.js in response to the second user input before automatically playing the Lottie animation corresponding to each first motion effect component on the first page based on the Lottie file associated with each first motion effect component in the first page, when the first page is the homepage of the website; a control module, which is used to display the first page in full screen on the terminal screen based on the page data, and determine whether the Lottie object in the first page exists by calling the life cycle function; if so, deregister the Lottie animation currently playing in the first page by executing the Lottie.destroy() method.

[0015] In some possible implementations of the second aspect, the playback module includes: a playback unit, which is used to loop play the Lottie animations corresponding to each first motion effect component in the motion effect display area of ​​the first page based on a pre-set playback order corresponding to each first motion effect component, wherein the motion effect display area only plays one Lottie animation at the same time; a switching unit, which is used to switch any Lottie animation in the motion effect display area to the Lottie animation corresponding to the target motion effect component if a third user input is received for a target motion effect component in each first motion effect component when any Lottie animation is played in the motion effect display area.

[0016] In some implementations of the second aspect, the switching unit is specifically used to: switch any Lottie animation in the motion effect display area to the Lottie animation corresponding to the target motion effect component by calling the setInterval method of js.

[0017] In some implementable embodiments of the second aspect, the playback module is specifically used to: for each first animation component, obtain the json file address and animation configuration parameters in the Lottie file associated with the first animation component by calling the Lottie.loadAnimation(configData) method; when the json parameters are obtained based on the json file address, render the Lottie animation corresponding to the first animation component in combination with the json parameters and the animation configuration parameters; and play the Lottie animation corresponding to the first animation component in the animation display area of ​​the first page.

[0018] In some possible implementations of the second aspect, it also includes: a reset module, which is used to reset the Lottie animation of the first page to an initial state after the first page is directly switched to the second page in a target switching manner; a playback module, which is also used to re-loop play the Lottie animation corresponding to each first motion effect component based on the pre-set playback order corresponding to each first motion effect component when the terminal screen displays the first page again.

[0019] In a third aspect, an embodiment of the present application provides an electronic device, comprising: a processor and a memory storing computer program instructions; when the processor executes the computer program instructions, the steps of the web page content display method based on interactive animation as in the first aspect are implemented.

[0020] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having computer program instructions stored thereon. When the computer program instructions are executed by a processor, the steps of the web page content display method based on interactive animation as in the first aspect are implemented.

[0021] In a fifth aspect, an embodiment of the present application provides a computer program product, which is stored in a non-volatile storage medium. When the computer program product is executed by a processor, it implements the steps of the web page content display method based on interactive animation as in the first aspect.

[0022] In a sixth aspect, an embodiment of the present application provides a chip, which includes a processor and a communication interface, wherein the communication interface and the processor are coupled, and the processor is used to run programs or instructions to implement the steps of the web page content display method based on interactive animation as in the first aspect.

[0023] The present application provides a webpage content display method, device, equipment, medium and product based on interactive animation. The first dynamic effect component and the second dynamic effect component are both associated with Lottie files. Since the Lottie file uses vector graphics and optimized data formats, when the first page and the second page render the Lottie animation based on the Lottie file, memory usage can be reduced and rendering performance can be improved. Lottie also supports hardware acceleration, which can further improve the smoothness and responsiveness of the animation playback in the first page and the second page. In addition, the present application uses the fullpage.js plug-in to monitor the onLeave event of the fullpage. The fullpage.js plug-in supports monitoring mouse scrolling, back and forth, keyboard control, and mobile phone, tablet touch and other events, and covers the monitoring events more comprehensively. Therefore, the first user input of the present application supports various flexible input methods, ensuring that when the client receives the first user input of the user controlling the first page to slide along the first direction, it can timely monitor the corresponding onLeave event through the fullpage.js plug-in and respond, ensuring that full-screen scrolling can be performed normally later. Specifically, by configuring the serial number of the second page in the onLeave event, the first page is controlled to be transitionally hidden after the terminal screen is scrolled vertically in the first direction, and the second page is controlled to be transitionally displayed after the terminal screen is scrolled vertically in the first direction, so as to realize full-screen scrolling and provide users with a more comprehensive and flexible interaction method. This application combines Lottie with fullpage.js to create an interactive web page dynamic effect that combines full-screen scrolling and complex animation. Compared with the traditional CSS and JS combination solution, this application is based on fullpage.js to avoid conflicts with other event handlers on the page, such as scroll listeners, when scrolling in full screen, and can make full-screen scrolling compatible with different browsers, and switch the first page to the second page in a target switching manner on different browsers, thereby improving the stability of page effects on different browsers; and, compared with the traditional CSS and JS combination solution to realize complex animation effects, since Lottie technology is based on JSON animation format, developers do not need to write animation code. When playing Lottie animation based on Lottie files, only JSON data needs to be loaded to realize animation effects, which reduces the difficulty of page development and implementation to a certain extent. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] In order to more clearly illustrate the technical solution of the embodiments of the present application, the following briefly introduces the drawings in the embodiments of the present application.

[0025] Figure 1 It is a flowchart of a web page content display method based on interactive animation provided by an embodiment of the present application;

[0026] Figure 2 is a flow chart of a web page content display method based on interactive animation provided by another embodiment of the present application;

[0027] Figure 3 is an exemplary schematic diagram of a web page content display interface based on interactive animation provided by an embodiment of the present application;

[0028] Figure 4 is an exemplary schematic diagram of a web page content display interface based on interactive animation provided by another embodiment of the present application;

[0029] Figure 5 It is a structural schematic diagram of a web page content display device based on interactive animation provided in an embodiment of the present application;

[0030] Figure 6 It is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0031] The principles and spirit of the present application will be described below with reference to several exemplary embodiments. It should be understood that the purpose of providing these embodiments is to make the principles and spirit of the present application clearer and more thorough, so that those skilled in the art can better understand and implement the principles and spirit of the present application. The exemplary embodiments provided herein are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments herein, all other embodiments obtained by ordinary technicians of the art without creative work are within the scope of protection of this application.

[0032] In this document, terms such as first, second, third, etc. are only used to distinguish one entity (or operation) from another entity (or operation), but not to require or imply any order or relationship between these entities (or operations).

[0033] The web page content display method based on interactive animation provided by the embodiment of the present application is described in detail below through specific embodiments and application scenarios in conjunction with the accompanying drawings.

[0034] Figure 1 It is a flow chart of a web page content display method based on interactive animation provided by an embodiment of the present application. The execution subject of the web page content display method based on interactive animation can be a client, and the client can be a PC or mobile phone with a browser installed.

[0035] Exemplarily, in an online recruitment scenario, the client can be the B-end or the C-end. As the B-end, it can log in to the online talent recruitment system, online application recruitment system, training system, etc. used by recruiting users through a browser. As the C-end, it can log in to the fresh graduate job search system, online application job search system, job recommendation system, etc. used by job seekers through a browser.

[0036] The following takes the execution subject of the web page content display method based on interactive animation as the client as an example to illustrate the web page content display method based on interactive animation of the present application. It should be noted that the above execution subjects and application scenarios do not constitute a limitation on the present application.

[0037] like Figure 1 As shown, the web page content display method based on interactive animation provided by the embodiment of the present application may include steps 110 to 140.

[0038] Step 110, when the first page is displayed in full screen on the terminal screen of the client, based on the Lottie files associated with each first motion effect component in the first page, automatically play the Lottie animation corresponding to each first motion effect component on the first page;

[0039] Step 120, when receiving the first user input for the first page, monitor the onLeave event of the fullpage through the fullpage.js plug-in, and configure the serial number of the second page in the onLeave event;

[0040] Step 130: Based on the onLeave event, the first page is directly switched to the second page in a target switching manner on the terminal screen;

[0041] Step 140: Based on the Lottie files associated with the second motion effect components in the second page, the Lottie animations corresponding to the second motion effect components are automatically played on the second page.

[0042] In the webpage content display method based on interactive animation provided by the embodiment of the present application, the first dynamic effect component and the second dynamic effect component are both associated with Lottie files. Since the Lottie file uses vector graphics and optimized data formats, when the first page and the second page render the Lottie animation based on the Lottie file, memory usage can be reduced and rendering performance can be improved. In addition, Lottie also supports hardware acceleration, which can further improve the smoothness and responsiveness of the animation playback in the first page and the second page. In addition, the present application uses the fullpage.js plug-in to monitor the onLeave event of the fullpage. The fullpage.js plug-in supports monitoring mouse scrolling, back and forth, keyboard control, and mobile phone, tablet touch and other events, and covers the monitoring events more comprehensively. Therefore, the first user input of the present application supports various flexible input methods, ensuring that when the client receives the first user input of the user controlling the first page to slide along the first direction, it can timely monitor the corresponding onLeave event through the fullpage.js plug-in and respond, ensuring that full-screen scrolling can be performed normally later. Specifically, by configuring the serial number of the second page in the onLeave event, the first page is controlled to be transitionally hidden after the terminal screen is scrolled vertically in the first direction, and the second page is controlled to be transitionally displayed after the terminal screen is scrolled vertically in the first direction, so as to realize full-screen scrolling and provide users with a more comprehensive and flexible interaction method. This application combines Lottie with fullpage.js to create an interactive web page dynamic effect that combines full-screen scrolling and complex animation. Compared with the traditional CSS and JS combination solution, this application is based on fullpage.js to avoid conflicts with other event handlers on the page, such as scroll listeners, when scrolling in full screen, and can make full-screen scrolling compatible with different browsers, and switch the first page to the second page in a target switching manner on different browsers, thereby improving the stability of page effects on different browsers; and, compared with the traditional CSS and JS combination solution to realize complex animation effects, since Lottie technology is based on JSON animation format, developers do not need to write animation code. When playing Lottie animation based on Lottie files, only JSON data needs to be loaded to realize animation effects, which reduces the difficulty of page development and implementation to a certain extent.

[0043] The specific implementation of the above steps will be described in detail below in conjunction with specific embodiments.

[0044] Involving step 110, when the first page is displayed in full screen on the terminal screen of the client, based on the Lottie files associated with each first motion effect component in the first page, the Lottie animation corresponding to each first motion effect component is automatically played on the first page.

[0045] In step 110, the first motion effect component is a page motion effect component pre-configured for the first page. Each first motion effect component is associated with a Lottie file. By executing the Lottie file, the Lottie animation corresponding to the first motion effect component can be rendered. There is a fixed user-visible view area on the terminal screen. The first page will be displayed in full screen in the fixed user-visible view area. When the user scrolls the mouse up and down or slides the screen, the size of the visible view area will not change, but the content displayed in the visible view area will have a vertical scrolling effect as a whole, causing the page to switch, and no matter how far the mouse scrolls or the user slides, the page will switch completely, that is, the first page is completely hidden. In this application, the page switching effect has nothing to do with the mouse scroll distance or the user slide distance.

[0046] In the page configuration parameters of the first page, the play order of each first motion effect component can be preset, so the Lottie animation corresponding to each first motion effect component can be automatically played in the play order on the first page.

[0047] In some embodiments, each first animation component is associated with a job search term or a recruitment term.

[0048] As a specific example, if the first page is a web page in a job search system for fresh graduates, the first animation components can be "student forum", "employment guidance", "submission progress", or "millions of positions", "precise search and promotion", "60+ industries" and other terms related to job search for fresh graduates.

[0049] In some embodiments of the present application, before the above step 110 automatically plays the Lottie animation corresponding to each first motion effect component on the first page based on the Lottie file associated with each first motion effect component on the first page, the method may further include the following steps:

[0050] When the first page is the homepage of the website, in response to the second user input, the page data of the first page is initialized and fullpage.js is loaded;

[0051] Displaying the first page in full screen on the terminal screen based on the page data, and determining whether the Lottie object in the first page exists by calling the life cycle function;

[0052] If it exists, the Lottie animation currently playing in the first page is deregistered by executing the Lottie.destroy() method.

[0053] Specifically, the second user input may be an input for opening a website in a browser, such as inputting a URL and clicking Jump. The first page may be a website page presented in a browser. If the first page is a website homepage, the page data of the first page needs to be initialized and fullpage.js needs to be loaded.

[0054] For example, the first page contains three animation components, and the playback order is animation 1, animation 2, and animation 3. In the initial presentation stage of the first page, animation 1 is selected, and animation 2 and animation 3 are unselected. Before the Lottie animation of animation 1 is executed, the life cycle function is called to determine whether the Lottie object in the first page exists. If it exists, the Lottie.destroy() method is executed to cancel or destroy the Lottie animation being executed in the first page. The Lottie animation being executed can be in a selected state or an unselected state. After that, the Lottie file of animation 1 is executed by calling the Lottie.loadAnimation(configData) method, and the Lottie animation of animation 1 is rendered.

[0055] In this way, when the website is opened for the first time, it is first determined whether there is a Lottie animation being executed on the homepage of the webpage. If so, the Lottie animation being played on the homepage of the website is directly cancelled. After cancellation, the Lottie animations corresponding to the first animation components are automatically played normally to prevent multiple animation effects from being repeated and superimposed, which would not achieve the expected animation playback effect.

[0056] In some embodiments of the present application, in the above step 110, based on the Lottie files associated with each first motion effect component in the first page, automatically playing the Lottie animation corresponding to each first motion effect component on the first page may specifically include the following steps:

[0057] For each first animation component, call Lottie.loadAnimation(configData) to obtain the json file address and animation configuration parameters in the Lottie file associated with the first animation component.

[0058] When the json parameters are obtained based on the json file address, the Lottie animation corresponding to the first animation component is rendered in combination with the json parameters and the animation configuration parameters;

[0059] In the motion effect display area of ​​the first page, the Lottie animation corresponding to the first motion effect component is played.

[0060] Specifically, configData is the corresponding configuration item of each Lottie file, and its attributes are the animation configuration parameters, which may include but are not limited to: animationData, which is the address of the Lottie json file; loop, which is a Boolean value, which is whether to loop; autoplay, which is a Boolean value. In addition, when Lottie animation is executed, it will also combine the keyframe animation configuration and animation attributes of css to achieve other animation effects.

[0061] In this way, by simply calling the Lottie.loadAnimation(configData) method, you can get the json file address and animation configuration parameters, and then get the json parameters based on the json file address, and render the Lottie animation by combining the json parameters and the animation configuration parameters, thus solving the performance problems caused by the large size of traditional GIF files or incompatibility with the Flash platform.

[0062] In some embodiments of the present application, Figure 2 is a flow chart of a web page content display method based on interactive animation provided by another embodiment of the present application. In the above step 110, the Lottie animation corresponding to each first motion effect component is automatically played on the first page, which may specifically include Figure 2 Steps 210 and 220 are shown.

[0063] Step 210, in the motion effect display area of ​​the first page, based on the preset playback order corresponding to each first motion effect component, the Lottie animation corresponding to each first motion effect component is played in a loop;

[0064] Step 220, when any Lottie animation is played in the motion effect display area, if a third user input for a target motion effect component in each first motion effect component is received, any Lottie animation in the motion effect display area is switched to a Lottie animation corresponding to the target motion effect component.

[0065] The animation display area is a fixed area pre-set in the first page, and the animation display area only plays one Lottie animation at the same time. The third user input can be a click input, a double-click input, or a long press input of the target animation component, and this application does not make specific restrictions on this.

[0066] For example, in Figure 3The first page shown can loop the Lottie animations of animation 1, animation 2, and animation 3 in the animation display area 301; if the user stays on the first page, animations 1-3 will loop the corresponding Lottie animations and css animations according to the set time interval. When the user selects the animation 3 component, the Lottie animation played in the animation display area 301 is switched to the Lottie animation of animation 3, and the Lottie animations of animation 1 and animation 2 are reset.

[0067] In an embodiment of the present application, the Lottie animations corresponding to the first motion effect components can be played in a loop on the first page in a preset playback order, and interactive animation effects can be achieved through Lottie, which are difficult to achieve through pure CSS or JavaScript in static web pages or applications.

[0068] In some embodiments of the present application, the above step 220 switches any Lottie animation in the dynamic effect display area to the Lottie animation corresponding to the target dynamic effect component, which may specifically include:

[0069] By calling the setInterval method of js, any Lottie animation in the animation display area is switched to the Lottie animation corresponding to the target animation component.

[0070] In this way, by calling the setInterval method of js, the target motion effect component can be set to the selected state, the Lottie animation corresponding to the unselected motion effect component can be automatically ended, and the Lottie animation corresponding to the target motion effect component can be automatically executed, so as to realize flexible switching of different motion effects in the motion effect display area.

[0071] In step 120, when a first user input for a first page is received, an onLeave event of fullpage is monitored through the fullpage.js plug-in, and the serial number of the second page is configured in the onLeave event.

[0072] In step 120, the first user input is used to control the first page to slide along the first direction, for example, it can be a touch screen input of sliding the screen along the first direction, or an input of rolling the mouse in the opposite direction of the first direction. In response to the first user input, the client uses fullpage to monitor the onLeave event as a forward event or a backward event; if it is a forward event, the second page is the next page of the first page; if it is a backward event, the second page is the previous page of the first page.

[0073] Exemplarily, if the first user input is an input of scrolling the mouse downward on the first page, the onLeave event monitored is a forward event, and the screen display content will switch to the next page of the first page.

[0074] In some embodiments of the present application, in step 120, the parameter value of index in the onLeave event can be set to the serial number of the first page, and the parameter value of nextIndex can be set to the serial number of the second page. In this way, flexible transition switching from the first page to the second page can be achieved.

[0075] In step 130 , based on the onLeave event, the first page is directly switched to the second page in a target switching manner on the terminal screen.

[0076] In step 130, the target switching mode is that the first page is transitionally hidden after the terminal screen is fully scrolled vertically along the first direction, and the second page is transitionally displayed after the terminal screen is fully scrolled vertically along the first direction. Transition hiding refers to the transition effect when the view switches from a visible state to a hidden state, and transition display refers to the transition effect when the view switches from a hidden state to a visible state. In actual applications, transition hiding and transition display can be customized and designed according to specific needs. For example, in mobile applications, fade-in and fade-out effects can be used to achieve hiding and display transitions; in Web applications, CSS animations or JavaScript libraries can be used to achieve richer transition effects.

[0077] For example, Figure 4 As shown, when the user scrolls the mouse up and down, the size of the visible view area 401 in the display screen will not change, but the displayed content in the visible view area 401 will have a vertical scrolling effect as a whole.

[0078] When the user opens the website, the animations of motion effects 1-3 in the first page will be automatically displayed in the visible view area 401. When the user scrolls the mouse down, no matter how far the user scrolls the mouse, the first page will automatically scroll up in full screen to transition and hide, and the second page will scroll up to transition and display. At this time, the second page is displayed in the visible view area 401, and the motion effect display area in the second page automatically plays the animations of motion effects 4-6 in sequence; if the user continues to scroll the mouse down, the second page will automatically scroll up in full screen to transition and hide, and the third page will scroll up to transition and display. At this time, the third page is displayed in the visible view area 401, and the motion effect display area in the third page automatically plays the animations of motion effects 7 and 8 in sequence.

[0079] Anyway, when the animation of the third page is automatically displayed in the visible view area 401, if the user scrolls the mouse upward, the third page will scroll and transition to hide, and the second page will scroll and transition to display; if the user continues to scroll the mouse upward, the second page will scroll and transition to hide, and the first page will scroll and transition to display.

[0080] In an embodiment of the present application, transition hiding is used to remove or hide the first page from the screen. Through transition hiding, the user can perceive the departure from the first page and smoothly transition to the next page. Through display transition, the user can perceive the entry into the second page, while providing better visual effects and user experience.

[0081] In some embodiments of the present application, the advantages of fullpage.js over traditional CSS and JS are mainly reflected in its rich functions, strong compatibility, easy operation and high scalability. Fullpage.js is a plug-in based on jQuery, which can easily create a full-screen website, support mouse scrolling, back and forth and keyboard control, as well as mobile phone and tablet touch events. In addition, it also supports CSS3 animation, making the page effect more gorgeous, providing multiple callback functions, supporting automatic adjustment when the window is scaled, and can set the scroll width, background color, scroll speed, loop options, callbacks, text alignment, etc. These functions make fullpage.js have extremely high flexibility and customizability when making full-screen scrolling pages. Fullpage.js is compatible with IE8+ and other modern browsers, thanks to its development based on jQuery, making its performance on different browsers more consistent and stable. At the same time, fullpage.js can be easily introduced through CDNJS and other channels, further improving its convenience of use. The design of fullpage.js is simple and easy to use, and even beginners can quickly get started. It supports integration with other jQuery libraries, which is convenient for functional expansion and customization. In addition, although fullpage.js mainly focuses on the display on the PC side, through reasonable design and development, responsive design can also be achieved to adapt to the display requirements of different devices.

[0082] In some embodiments of the present application, the advantages of Lottie over traditional CSS and JS are mainly reflected in its cross-platform compatibility, animation expressiveness and performance optimization. Lottie is an animation operation library compatible with cross-platform Android / IOS / Web. It has cross-platform compatibility. Developers can use the same JSON file to play animations on different platforms without having to develop animations separately for each platform. This cross-platform compatibility greatly reduces development time and cost and improves development efficiency. Lottie can support complex animation effects with strong animation expressiveness by using JSON files exported by After Effects and Bodymovin plug-ins. These animation effects may be relatively complex and time-consuming to implement in traditional CSS and JS. Lottie allows designers and developers to create high-quality animations using professional animation design software, and then integrate them into applications, thereby providing a richer and more professional user experience.

[0083] In the related art, since page animation interaction is relatively complex, if GIF animation or Flash video is directly used, the project file memory will be too large. When the user opens the page, the resource loading takes a long time, which will reduce the page performance and affect the user experience. In addition, Flash video also has platform compatibility issues.

[0084] Based on this, this application uses Lottie animation to achieve complex animation effects, and can also solve performance problems caused by traditional GIF files being too large or Flash platform incompatibility.

[0085] In some embodiments of the present application, each first motion effect component and each second motion effect component can be associated with a CSS file, and the above step 110 may also include: based on the CSS file associated with each first motion effect component in the first page, automatically playing the CSS animation corresponding to each first motion effect component on the first page; the above step 140 may also include: based on the CSS file associated with each second motion effect component in the second page, automatically playing the CSS animation corresponding to each second motion effect component on the second page.

[0086] Specifically, the client's entire page is managed by fullPage.js, and Lottie combined with CSS is used to achieve complex animation effects. These effects are difficult to achieve with pure CSS or JavaScript in static web pages or applications, and can solve at least one of the following problems:

[0087] Compatibility issues: Different browsers may support full-screen scrolling to different degrees;

[0088] Performance issues: For large websites, there may be a lot of content in the full-screen scrolling area, which may affect the rendering performance of the page;

[0089] Accessibility issues: Full-screen scrolling may affect keyboard navigation, making it difficult for some users to browse the website properly;

[0090] Event handling issues: Full screen scrolling may conflict with other event handlers on the page, such as scroll listeners;

[0091] Layout and style issues: The style and layout of fixed headers, bottom content, and full-screen scrolling areas need to be handled correctly.

[0092] In some embodiments of the present application, after the first page is directly switched to the second page in a target switching manner in step 130, the following steps may also be included:

[0093] Reset the Lottie animation of the first page to its initial state;

[0094] When the terminal screen displays the first page again, based on the preset playback order corresponding to each first motion effect component, the Lottie animation corresponding to each first motion effect component is replayed in a loop.

[0095] In an embodiment of the present application, when the first page is switched, by resetting the Lottie animation of the first page to the initial state, the next time the page is switched to the first page, it is possible to avoid the situation where the animation that was not played completely in the first page is superimposed on the animation that is currently playing in the first page, thereby ensuring the normal playback effect of the animation after returning to the first page.

[0096] Involving step 140, based on the Lottie files associated with each second motion effect component in the second page, the Lottie animations corresponding to each second motion effect component are automatically played on the second page.

[0097] In step 140, the second animation component is a page animation component pre-configured for the second page. Each second animation component may also be associated with a Lottie file. By executing the Lottie file, a Lottie animation corresponding to the second animation component may be rendered.

[0098] For each second animation component, the json file address and animation configuration parameters in the Lottie file associated with the second animation component are obtained by calling the Lottie.loadAnimation(configData) method; when the json parameters are obtained based on the json file address, the Lottie animation corresponding to the second animation component is rendered in combination with the json parameters and the animation configuration parameters; in the animation display area on the second page, the Lottie animation corresponding to each second animation component is played in a loop based on the pre-set playback order corresponding to each second animation component.

[0099] Corresponding to the method embodiment of the present application, the present application also provides a web page content display device based on interactive animation, which can be applied to a client.

[0100] Figure 5 Schematic diagram of the structure of a web page content display device based on interactive animation provided by an embodiment of the present application. Figure 5 As shown, the web page content display device 500 based on interactive animation may include: a playback module 510 , a configuration module 520 , and a page switching module 530 .

[0101] Among them, the playback module 510 is used to automatically play the Lottie animations corresponding to the first motion effect components on the first page based on the Lottie files associated with the first motion effect components in the first page when the first page is displayed in full screen on the terminal screen of the client; the configuration module 520 is used to monitor the onLeave event of the fullpage through the fullpage.js plug-in when receiving the first user input for the first page, and configure the serial number of the second page in the onLeave event, wherein the first user input is used to control the first page to slide along the first direction, and the second page is the previous page or the next page of the first page; the page switching module 530 is used to directly switch the first page to the second page in a target switching manner on the terminal screen based on the onLeave event, wherein the target switching manner is that the first page is transitionally hidden after the terminal screen is full-screen vertically scrolled along the first direction, and the second page is transitionally displayed after the terminal screen is full-screen vertically scrolled along the first direction; the playback module 510 is also used to automatically play the Lottie animations corresponding to the second motion effect components on the second page based on the Lottie files associated with the second motion effect components in the second page.

[0102] In the webpage content display device based on interactive animation provided by the embodiment of the present application, the first dynamic effect component and the second dynamic effect component are both associated with Lottie files. Since the Lottie file uses vector graphics and optimized data formats, when the first page and the second page render the Lottie animation based on the Lottie file, memory usage can be reduced and rendering performance can be improved. In addition, Lottie also supports hardware acceleration, which can further improve the smoothness and responsiveness of the animation playback in the first page and the second page. In addition, the present application uses the fullpage.js plug-in to monitor the onLeave event of the fullpage. The fullpage.js plug-in supports monitoring mouse scrolling, back and forth, keyboard control, and mobile phone, tablet touch and other events, and covers the monitoring events more comprehensively. Therefore, the first user input of the present application supports various flexible input methods, ensuring that when the client receives the first user input of the user controlling the first page to slide along the first direction, it can timely monitor the corresponding onLeave event through the fullpage.js plug-in and respond, ensuring that full-screen scrolling can be performed normally later. Specifically, by configuring the serial number of the second page in the onLeave event, the first page is controlled to be transitionally hidden after the terminal screen is scrolled vertically in the first direction, and the second page is controlled to be transitionally displayed after the terminal screen is scrolled vertically in the first direction, so as to realize full-screen scrolling and provide users with a more comprehensive and flexible interaction method. This application combines Lottie with fullpage.js to create an interactive web page dynamic effect that combines full-screen scrolling and complex animation. Compared with the traditional CSS and JS combination solution, this application is based on fullpage.js to avoid conflicts with other event handlers on the page, such as scroll listeners, when scrolling in full screen, and can make full-screen scrolling compatible with different browsers, and switch the first page to the second page in a target switching manner on different browsers, thereby improving the stability of page effects on different browsers; and, compared with the traditional CSS and JS combination solution to realize complex animation effects, since Lottie technology is based on JSON animation format, developers do not need to write animation code. When playing Lottie animation based on Lottie files, only JSON data needs to be loaded to realize animation effects, which reduces the difficulty of page development and implementation to a certain extent.

[0103] In some embodiments of the present application, the configuration module 520 is specifically used to: set the parameter value of index in the onLeave event to the serial number of the first page, and set the parameter value of nextIndex to the serial number of the second page.

[0104] In some embodiments of the present application, it also includes: an initialization module, which is used to initialize the page data of the first page and load fullpage.js in response to the second user input when the first page is the homepage of the website, before the Lottie animation corresponding to each first motion effect component is automatically played on the first page based on the Lottie file associated with each first motion effect component in the first page; a control module, which is used to display the first page in full screen on the terminal screen based on the page data, and determine whether the Lottie object in the first page exists by calling the life cycle function; if so, the Lottie animation currently playing in the first page is deregistered by executing the Lottie.destroy() method.

[0105] In some embodiments of the present application, the playback module 510 includes: a playback unit, which is used to loop-play the Lottie animations corresponding to each first motion effect component in the motion effect display area of ​​the first page based on a pre-set playback order corresponding to each first motion effect component, wherein the motion effect display area only plays one Lottie animation at the same time; and a switching unit, which is used to switch any Lottie animation in the motion effect display area to the Lottie animation corresponding to the target motion effect component if a third user input is received for a target motion effect component in each first motion effect component while playing any Lottie animation in the motion effect display area.

[0106] In some embodiments of the present application, the switching unit is specifically used to: switch any Lottie animation in the motion effect display area to the Lottie animation corresponding to the target motion effect component by calling the setInterval method of js.

[0107] In some embodiments of the present application, the playback module 510 is specifically used for: for each first animation component, obtaining the json file address and animation configuration parameters in the Lottie file associated with the first animation component by calling the Lottie.loadAnimation(configData) method; when the json parameters are obtained based on the json file address, combining the json parameters and the animation configuration parameters to jointly render the Lottie animation corresponding to the first animation component; and playing the Lottie animation corresponding to the first animation component in the animation display area of ​​the first page.

[0108] In some embodiments of the present application, it also includes: a reset module, which is used to reset the Lottie animation of the first page to an initial state after the first page is directly switched to the second page in a target switching manner; a playback module 510, which is also used to re-loop the Lottie animation corresponding to each first motion effect component based on the pre-set playback order corresponding to each first motion effect component when the terminal screen displays the first page again.

[0109] The web page content display device based on interactive animation provided in the embodiment of the present application can realize Figure 1-4 The various processes implemented by the service platform in the method embodiment can achieve the same technical effect. To avoid repetition, they will not be described here.

[0110] Figure 6 It is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application.

[0111] like Figure 6 As shown, the electronic device 600 includes a memory 601 , a processor 602 , and a computer program stored in the memory 601 and executable on the processor 602 .

[0112] In an example, the processor 602 may include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.

[0113] The memory 601 may include a read-only memory (ROM), a random access memory (RAM), a disk storage medium device, an optical storage medium device, a flash memory device, an electrical, optical or other physical / tangible memory storage device. Therefore, generally, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., a memory device) encoded with software including computer executable instructions, and when the software is executed (e.g., by one or more processors), it can be operated to perform the operations described in the card opening method in the embodiment according to the first aspect of the present application.

[0114] The processor 602 runs a computer program corresponding to the executable program code by reading the executable program code stored in the memory 601, so as to implement the card activation method in the embodiment of the first aspect.

[0115] In some examples, the electronic device 600 may further include a communication interface 603 and a bus 610. Figure 6As shown, the memory 601, the processor 602, and the communication interface 603 are connected via a bus 610 and communicate with each other.

[0116] The communication interface 603 is mainly used to realize the communication between the modules, devices, units and / or equipment in the embodiment of the present application. The communication interface 603 can also be used to access input devices and / or output devices.

[0117] The bus 610 includes hardware, software, or both, coupling the components of the electronic device 600 to each other. By way of example and not limitation, the bus 610 may include an Accelerated Graphics Port (AGP) or other graphics bus, an Enhanced Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a Hyper Transport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an InfiniBand interconnect, a Low Pin Count (LPC) bus, a Memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-E) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local Bus (VLB) bus, or other suitable buses or a combination of two or more of these. Where appropriate, the bus 610 may include one or more buses. Although embodiments of the present application describe and illustrate a particular bus, the present application contemplates any suitable bus or interconnect.

[0118] The electronic device provided in the embodiment of the present application can realize Figure 1-4 The various processes implemented by the electronic device in the method embodiment can achieve the same technical effect, and to avoid repetition, they will not be described here.

[0119] In combination with the webpage content display method based on interactive animation in the above embodiments, the present application embodiment can provide a computer storage medium for implementation. The computer storage medium stores computer program instructions; when the computer program instructions are executed by a processor, the steps of any one of the webpage content display methods based on interactive animation in the above embodiments are implemented.

[0120] In combination with the webpage content display method based on interactive animation in the above embodiment, the embodiment of the present application can provide a computer program product for implementation. The (computer) program product is stored in a non-volatile storage medium, and when the program product is executed by at least one processor, it implements the steps of any one of the webpage content display methods based on interactive animation in the above embodiment.

[0121] The embodiment of the present application further provides a chip, which includes a processor and a communication interface, the communication interface and the processor are coupled, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned embodiment of the web page content display method based on interactive animation, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0122] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0123] It should be clear that the present application is not limited to the specific configuration and processing described above and shown in the figures. For the sake of simplicity, a detailed description of the known method is omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of the present application is not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications and additions, or change the order between the steps after understanding the spirit of the present application.

[0124] The functional blocks shown in the above-described block diagram can be implemented as hardware, software, firmware or a combination thereof. When implemented in hardware, it can be, for example, an electronic circuit, an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), appropriate firmware, plug-in, function card, etc. When implemented in software, the elements of the present application are programs or code segments used to perform the required tasks. The program or code segment can be stored in a machine-readable medium, or transmitted on a transmission medium or a communication link by a data signal carried in a carrier. "Machine-readable medium" can include any medium capable of storing or transmitting information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, optical fiber media, radio frequency (RF) links, etc. The code segment can be downloaded via a computer network such as the Internet, an intranet, etc.

[0125] It should also be noted that the exemplary embodiments mentioned in this application describe some methods or systems based on a series of steps or devices. However, this application is not limited to the order of the above steps, that is, the steps can be performed in the order mentioned in the embodiment, or in a different order from the embodiment, or several steps can be performed simultaneously.

[0126] Aspects of the present disclosure are described above with reference to the flowchart and / or block diagram of the method, device (system) and computer program product according to the embodiment of the present disclosure. It should be understood that each box in the flowchart and / or block diagram and the combination of each box in the flowchart and / or block diagram can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device to produce a machine so that these instructions executed by the processor of the computer or other programmable data processing device enable the implementation of the function / action specified in one or more boxes of the flowchart and / or block diagram. Such a processor can be, but is not limited to, a general-purpose processor, a special-purpose processor, a special application processor, or a field programmable logic circuit. It can also be understood that each box in the block diagram and / or flowchart and the combination of boxes in the block diagram and / or flowchart can also be implemented by dedicated hardware that performs a specified function or action, or can be implemented by a combination of dedicated hardware and computer instructions.

[0127] The above is only a specific implementation of the present application. Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, modules and units described above can refer to the corresponding processes in the aforementioned method embodiments, and will not be repeated here. It should be understood that the protection scope of the present application is not limited to this. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in this application, and these modifications or replacements should be included in the protection scope of this application.

Claims

1. A web page content display method based on interactive animation, characterized in that: Applied to a client, the method comprises: When the first page is displayed in full screen on the terminal screen of the client, based on the Lottie files associated with each first motion effect component in the first page, automatically playing the Lottie animation corresponding to each first motion effect component on the first page; When receiving a first user input for the first page, the onLeave event of fullpage is monitored through the fullpage.js plug-in, and the serial number of the second page is configured in the onLeave event, wherein the first user input is used to control the first page to slide along a first direction, and the second page is the previous page or the next page of the first page; Based on the onLeave event, the first page is directly switched to the second page in a target switching manner on the terminal screen, wherein the target switching manner is that the first page is transitionally hidden after the terminal screen is full-screen vertically scrolled along a first direction, and the second page is transitionally displayed after the terminal screen is full-screen vertically scrolled along the first direction; Based on the Lottie files associated with each second motion effect component in the second page, the Lottie animations corresponding to each second motion effect component are automatically played on the second page.

2. The method according to claim 1, characterized in that Configure the sequence number of the second page in the onLeave event, including: Set the index parameter value in the onLeave event to the serial number of the first page, and set the nextIndex parameter value to the serial number of the second page.

3. The method according to claim 1, characterized in that Based on the Lottie files associated with the first motion effect components in the first page, before the first page automatically plays the Lottie animations corresponding to the first motion effect components, the method further includes: In the case where the first page is a website homepage, in response to a second user input, initializing page data of the first page and loading fullpage.js; Displaying the first page in full screen on the terminal screen based on the page data, and determining whether a Lottie object in the first page exists by calling a life cycle function; If it exists, the Lottie animation currently playing in the first page is deregistered by executing the Lottie.destroy() method.

4. The method according to claim 1, characterized in that: The Lottie animation corresponding to each first motion effect component is automatically played on the first page, including: In the motion effect display area of ​​the first page, based on the preset playback order corresponding to each first motion effect component, the Lottie animation corresponding to each first motion effect component is played in a loop, wherein the motion effect display area plays only one Lottie animation at the same time; When any Lottie animation is played in the motion effect display area, if a third user input is received for a target motion effect component in each of the first motion effect components, any Lottie animation in the motion effect display area is switched to a Lottie animation corresponding to the target motion effect component.

5. The method according to claim 4, characterized in that The step of switching any Lottie animation in the dynamic effect display area to the Lottie animation corresponding to the target dynamic effect component includes: By calling the setInterval method of js, any Lottie animation in the motion effect display area is switched to the Lottie animation corresponding to the target motion effect component.

6. The method according to claim 1 or 4, characterized in that: The automatically playing the Lottie animation corresponding to each first motion effect component on the first page based on the Lottie file associated with each first motion effect component in the first page includes: For each first animation component, obtain the json file address and animation configuration parameters in the Lottie file associated with the first animation component by calling Lottie.loadAnimation(configData) method; In the case of obtaining json parameters based on the json file address, combining the json parameters and the animation configuration parameters to jointly render the Lottie animation corresponding to the first animation component; In the motion effect display area of ​​the first page, the Lottie animation corresponding to the first motion effect component is played.

7. The method according to claim 1, characterized in that After directly switching the first page to the second page in a target switching manner, the method further includes: Reset the Lottie animation of the first page to the initial state; When the terminal screen displays the first page again, the Lottie animations corresponding to the first motion effect components are replayed in a loop based on the preset playback order corresponding to the first motion effect components.

8. A web page content display device based on interactive animation, characterized in that: Applied to a client, the device comprises: A playing module, configured to automatically play Lottie animations corresponding to the first motion effect components on the first page based on the Lottie files associated with the first motion effect components on the first page when the first page is displayed in full screen on the terminal screen of the client; a configuration module, configured to, upon receiving a first user input for the first page, monitor the onLeave event of fullpage through the fullpage.js plug-in, and configure the sequence number of the second page in the onLeave event, wherein the first user input is used to control the first page to slide along a first direction, and the second page is the previous page or the next page of the first page; a page switching module, configured to directly switch the first page to the second page on the terminal screen in a target switching manner based on the onLeave event, wherein the target switching manner is that the first page is transitionally hidden after the terminal screen is vertically scrolled in full screen along a first direction, and the second page is transitionally displayed after the terminal screen is vertically scrolled in full screen along the first direction; The playing module is also used to automatically play the Lottie animation corresponding to each second motion effect component on the second page based on the Lottie file associated with each second motion effect component in the second page.

9. An electronic device, characterized in that: The electronic device comprises: a processor and a memory storing computer program instructions; when the electronic device executes the computer program instructions, the method according to any one of claims 1 to 7 is implemented.

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

Images