WO2020233056A1

WO2020233056A1 - H5 page-based animation display method, apparatus and device, and storage medium

Info

Publication number: WO2020233056A1
Application number: PCT/CN2019/120918
Authority: WO
Inventors: 王冬扬
Original assignee: 深圳壹账通智能科技有限公司
Priority date: 2019-05-21
Filing date: 2019-11-26
Publication date: 2020-11-26
Also published as: CN110297996A; CN110297996B

Abstract

An H5 page-based animation display method, apparatus and device, and a storage medium. The method comprises: acquiring device information about a display terminal, and display information about an H5 page for displaying an application to be displayed (S10); adjusting the display information about the H5 page according to a target page adjustment policy to acquire target display information (S40); detecting whether a page element corresponding to said application contains an animation element, if so, acquiring an animation sequence corresponding to the animation element; then performing animation display on the animation element according to the target display information and the animation sequence (S70). As the display information about the H5 page is adjusted, to obtain target display information conforming to the current terminal page, and meanwhile, when it is detected that an animation element exists in the page of said application, the animation is displayed according to the adjusted target display information and the animation sequence of the animation element, the display effect of the page elements is ensured, and stuttering and frame loss during the execution of the animation element is avoided.

Description

Animation display method, device, equipment and storage medium based on H5 page To

This application claims the priority of a Chinese patent application filed with the Chinese Patent Office on May 21, 2019, the application number is 201910426696.7, and the invention title is "H5 page-based animation display method, device, equipment and storage medium", and its entire content Incorporated in the application by reference

Technical field

This application relates to the technical field of software applications, and in particular to an animation display method, device, equipment and storage medium based on H5 pages.

Background technique

With the rapid development of computer software technology, various applications (Apps) have become an indispensable part of people's lives. These apps provide convenience for people's daily life. Due to the wide variety of apps and different functions, due to network traffic and device memory considerations, it is impossible for users to download all functional apps to their mobile phones for use. Therefore, many App service providers use their own apps to pass HTML5 pages (referred to as H5 pages) are provided to users to avoid users' worries about downloading App and consuming network traffic. However, most of the H5 pages with similar application functions in the market are simple imitations, and the imitation effect is not good, and there are many defects such as slow opening speed, animation execution stalls, and page display effects on different models.

Summary of the invention

The main purpose of this application is to provide an animation display method, device, device and storage medium based on H5 page, which aims to solve the problem of slow opening speed, slow animation execution, page elements, and page elements based on H5 page development. Technical problem of poor display effect.

In order to achieve the above objective, this application provides an animation display method based on H5 page, the method includes the following steps:

Obtain the device information of the display terminal and the display information of the H5 page displayed by the application to be displayed;

Extract the terminal identifier corresponding to the display terminal from the device information;

Using the terminal identifier as a key object to search for a target page adjustment strategy corresponding to the key object in a pre-built key-value pair of the terminal identifier and the page adjustment strategy;

Adjusting the display information of the H5 page according to the target page adjustment strategy to obtain target display information;

Obtaining element attributes of all page elements corresponding to the application to be displayed, and detecting whether there are animation tags in the element attributes;

If it exists, determine that the page element contains an animation element, preload the animation element, and determine the animation sequence corresponding to the animation element according to the loading result;

The animation element is animatedly displayed according to the target display information and the animation sequence.

In addition, in order to achieve the above object, this application also proposes an animation display device based on H5 page, the device includes:

The information acquisition module is used to acquire the device information of the display terminal and the display information of the H5 page displayed by the application to be displayed;

A rule adjustment module, configured to extract a terminal identifier corresponding to the display terminal from the device information;

The rule adjustment module is further configured to use the terminal identifier as a key object to find a target page adjustment strategy corresponding to the key object in a pre-built key-value pair of the terminal identifier and the page adjustment strategy;

The rule adjustment module is further configured to adjust the display information of the H5 page according to the target page adjustment strategy to obtain target display information;

The animation acquisition module is used to acquire the element attributes of all page elements corresponding to the application to be displayed, detect whether there is an animation tag in the element attribute, and if it exists, determine that the page element contains an animation element. Preloading, and determining the animation sequence corresponding to the animation element according to the loading result;

The animation execution module is used to perform animation display on the animation element according to the target display information and the animation sequence.

In addition, in order to achieve the above purpose, this application also proposes an animation display device based on H5 pages, the device including: a memory, a processor, and computer-readable instructions stored on the memory and executable by the processor , Wherein when the computer-readable instructions are executed by the processor, the steps of the H5 page-based animation display method as described above are implemented.

In addition, in order to achieve the above object, this application also proposes a storage medium storing computer-readable instructions, where the computer-readable instructions are executed by a processor to implement the H5 page-based The animation shows the steps of the method.

The details of one or more embodiments of the application are set forth in the following drawings and description. Other features and advantages of this application will become apparent from the description, drawings and claims.

Description of the drawings

FIG. 1 is a schematic structural diagram of an H5 page-based animation display device in a hardware operating environment related to a solution of an embodiment of the present application;

2 is a schematic flowchart of the first embodiment of the animation display method based on H5 page of this application;

FIG. 3 is a schematic flowchart of a second embodiment of an animation display method based on an H5 page of this application;

4 is a schematic flowchart of a third embodiment of an animation display method based on an H5 page of this application;

FIG. 5 is a structural block diagram of the first embodiment of the animation display device based on the H5 page of this application.

The realization, functional characteristics, and advantages of the purpose of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings.

Detailed ways

It should be understood that the specific embodiments described herein are only used to explain the application, and not used to limit the application.

Referring to FIG. 1, FIG. 1 is a schematic structural diagram of an H5 page-based animation display device in a hardware operating environment involved in a solution of an embodiment of the application.

As shown in Figure 1, the H5 page-based animation display device may include: a processor 1001, such as a central processing unit (Central Processing Unit, CPU), communication bus 1002, user interface 1003, network interface 1004, memory 1005. Among them, the communication bus 1002 is used to implement connection and communication between these components. The user interface 1003 may include a display screen (Display) and an input unit such as a keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface and a wireless interface. The network interface 1004 may optionally include a standard wired interface and a wireless interface (such as a wireless fidelity (WIreless-FIdelity, WI-FI) interface). The memory 1005 may be a high-speed random access memory (Random Access Memory, RAM) memory, can also be a stable non-volatile memory (Non-Volatile Memory, NVM), such as disk storage. Optionally, the memory 1005 may also be a storage device independent of the foregoing processor 1001.

Those skilled in the art can understand that the structure shown in FIG. 1 does not constitute a limitation on the animation display device based on the H5 page, and may include more or less components than shown in the figure, or a combination of certain components, or different Component arrangement.

As shown in FIG. 1, the memory 1005 as a storage medium may include an operating system, a data storage module, a network communication module, a user interface module, and computer readable instructions.

In the H5 page-based animation display device shown in FIG. 1, the network interface 1004 is mainly used for data communication with a network server; the user interface 1003 is mainly used for data interaction with users; this application is based on the H5 page animation display device The processor 1001 and the memory 1005 may be set in an animation display device based on the H5 page. The animation display device based on the H5 page calls the computer readable instructions stored in the memory 1005 through the processor 1001, and executes the instructions provided in the embodiments of the present application. The animation display method based on H5 page.

An embodiment of the present application provides an animation display method based on an H5 page. Referring to FIG. 2, FIG. 2 is a schematic flowchart of a first embodiment of an animation display method based on an H5 page in this application.

In this embodiment, the H5 page-based animation display method includes the following steps:

Step S10: Obtain device information of the display terminal and display information of the H5 page to be displayed by the application to be displayed;

It should be noted that the execution subject of the method in this embodiment may be a browser client (hereinafter referred to as a browser) loaded on a display terminal (for example, a smart phone, a tablet computer, or a personal computer). The device information may be device attribute information or parameters of the display terminal, such as operating system type (IOS or Android), screen resolution, terminal identification (such as hardware identification number, international mobile equipment identification code), etc. The H5 page display information is the display standard parameters used to display the application page of the application, such as the aspect ratio of the display area, the page aspect ratio, font format, font size, etc.

In a specific implementation, when the browser receives the application start instruction input by the user, in response to the start instruction, obtain the device information of the display terminal where the application to be displayed is located, and the information of the H5 page that displays the application to be displayed. Display information.

Step S20: Extract the terminal identifier corresponding to the display terminal from the device information;

It should be understood that the terminal identifier may be a character that can characterize the uniqueness of the terminal device, such as a device hardware identification code, a factory serial number, etc., and of course, may also be a device model.

It should be noted that due to the different models of display terminals, their corresponding display parameters are also different. In order to improve the display efficiency of the application page, R&D personnel can pre-set different models of different devices (such as Huawei-12345, Xiaomi-12345) , IPhone-12345, etc.) Configure the page adjustment strategy of the corresponding H5 page, and then establish a mapping relationship between the terminal ID and the page adjustment strategy, so that the browser can extract the terminal ID corresponding to the display terminal from the device information. According to the mapping relationship, the corresponding page adjustment strategy is quickly obtained.

Step S30: Use the terminal identifier as the key object to search for the target page adjustment strategy corresponding to the key object in the pre-built key-value pair of the terminal identifier and the page adjustment strategy;

It should be noted that, considering that key-value pairs are easy to maintain and easy for developers to modify the configuration, in this embodiment, the mapping relationship is preferably implemented by key-value pairs, such as "key =value", where "key" is a key object, which may be the terminal identifier; "value" is a value object, which may be a page adjustment strategy corresponding to the terminal identifier.

In a specific implementation, the browser can use the acquired terminal identifier as the key object to find the target page adjustment strategy corresponding to the key object in the pre-built key-value pair of the terminal identifier and the page adjustment strategy, and the target page adjustment strategy has been achieved. Quick search for page adjustment strategies.

Step S40: Adjust the display information of the H5 page according to the target page adjustment strategy to obtain target display information;

It should be understood that, due to different models of different types of display terminals, the corresponding device hardware parameters or attributes are also different. If the browser loads the application page corresponding to the App directly on the H5 page without adapting it according to the device attributes of the display terminal, it will cause the page displayed on the H5 page to appear stuck, not smooth or even display asymmetrical Happening.

In order to avoid the above situation, the browser in this embodiment can compare the obtained device information with the H5 page display information, obtain the display parameters that differ between the two to determine the corresponding target page adjustment strategy, and then according to the corresponding The target page adjustment strategy of the H5 page adjusts the display parameters in the H5 page display information to obtain target display information that is adapted to the current H5 page. For example, in the display parameters of the H5 page of an application, developers may add height to the html and body of the page: 100%, and this parameter setting will cause the page sliding stuck problem on IOS, but the target page adjustment strategy configuration corresponding to this kind of problem can be through the height of body and html: Remove 100%, or add to the scrolling canvas container: -webkit-overflow-scrolling: touch or add: body to the body {overflow-x: hidden} to overcome the above-mentioned shortcomings.

In a specific implementation, after the browser obtains the target page adjustment strategy, it can adjust the H5 page display information according to the target page adjustment strategy to obtain the target display information. For example, in the target page adjustment strategy, the actual page aspect ratio of the displayed page is 2:3, and the preset page aspect ratio in the H5 page display information is 2.5:3. At this time, the browser can change the preset page The value of the aspect ratio is modified to the value corresponding to the actual page aspect ratio to complete the information adjustment.

Step S50: Obtain element attributes of all page elements corresponding to the application to be displayed, and detect whether there are animation tags in the element attributes;

It should be understood that most of the application page elements will have built-in animation elements to improve user experience. In this embodiment, the browser may first detect whether the page element corresponding to the application to be displayed contains an animation element, if it does, obtain the animation sequence corresponding to the animation element, and then execute the animation element according to the animation sequence to avoid When the animation element is executed, freezes and frame loss occur.

Specifically, the browser may obtain the element attributes of all page elements corresponding to the application to be displayed, and detect whether there are animation tags (such as video tags, flash tags, gif tags) in the element attributes.

Step S60: if it exists, determine that the page element contains an animation element, preload the animation element, and determine the animation sequence corresponding to the animation element according to the loading result;

It should be understood that the so-called animation is actually a splicing of pictures frame by frame, and these pictures form an animation effect when they are played continuously. In the JS (JavaScript) language, by assigning a uniform resource locator (URL) of the image to the source file (src) attribute of the image object, the loading of the image can be started.

Further, in order to achieve accurate acquisition of the animation sequence of the animation elements in this solution, the browser can first arbitrarily select a canvas container, preload the animation elements, and preload the animation elements by calling the preset RequestAnimationFrame function. The execution situation during the loading process is monitored to obtain the loading result; then the animation frame sequence contained in the loading result is read, and the animation sequence corresponding to the animation element is determined according to the animation frame sequence. Wherein, the pre-loading may be to load each frame of pictures in the animation element into the selected canvas container one by one in the order of execution of the animation.

Step S70: Perform animation display on the animation element according to the target display information and the animation sequence.

It should be noted that under normal circumstances, there may be multiple animation elements that need to be displayed in the H5 page (such as JS animation, CSS animation). The JS animation is JavaScript Animation, JavaScript animation can control animation during animation playback, such as "start, pause, playback, terminate, cancel" and other operations can be achieved, but its disadvantage is that JavaScript runs in the main thread of the browser, and when the main thread When there are other tasks such as JavaScript scripts, style calculations, layouts, and drawing tasks that need to be run, they will interfere with the execution of the animation and cause the thread to block, resulting in frame loss and animation freezes. Similarly, CSS (Cascading Style Sheets, refers to cascading style sheets) The advantage of animation is that the browser can optimize the animation, but its disadvantage is that CSS animation can only be paused, cannot find a specific time point in the animation, cannot reverse the animation halfway, nor can it transform Time scale, as well as adding callback functions at specific locations or binding playback events, and no progress report.

In order to overcome the above shortcomings, the browser in this embodiment adaptively adjusts the H5 page display information to obtain the target display information, and then displays the page elements in the application page to be displayed according to the target display information. At the same time, in order to ensure the execution effect of the animation elements, the browser in this embodiment will also call the RequestAnimationFrame function to monitor the display process of the animation elements, so that the animation elements are displayed one by one according to the animation sequence acquired in advance, preventing animation The picture freezes or drops frames.

In this embodiment, the display information of the H5 page is adjusted according to the device information to obtain target display information that matches the current terminal page. At the same time, when an animation element is detected in the application page to be displayed, the adjusted target display information and animation The animation sequence of the element displays the animation, which not only guarantees the display effect of the page elements, but also avoids the stalling and frame loss during the execution of the animation elements.

Referring to FIG. 3, FIG. 3 is a schematic flowchart of a second embodiment of the animation display method based on the H5 page of this application.

Based on the above first embodiment, in this embodiment, after the step S30, the method further includes:

Step S301: when the target page adjustment strategy corresponding to the key object is not found, read the display parameters corresponding to the display device from the device information;

It should be understood that if the browser does not find the target page adjustment strategy corresponding to the key object in the pre-built key-value pair, it indicates that the developer may not configure the corresponding page adjustment strategy for the display terminal in advance. Then, the display parameters corresponding to the display device can be read from the device information, and then the H5 page display information can be adjusted in real time according to the read display parameters.

Step S302: Determine the actual page aspect ratio corresponding to the H5 page according to the display parameters, and adjust the preset page aspect ratio in the H5 page display information based on the actual page aspect ratio to obtain a target display information.

In a specific implementation, after obtaining the display parameters corresponding to the display device, the browser can determine the actual page aspect ratio corresponding to the current H5 page according to the data in the display parameters, and then compare the actual page aspect ratio based on the actual page aspect ratio. Adjust the preset page aspect ratio in the H5 page display information.

Of course, the above page aspect ratio is only one of the more important parameters in the display information of the H5 page in this embodiment. In this embodiment, the browser can also compare other page elements corresponding to the H5 page, such as font format and font, according to the display parameters. The size is adjusted adaptively, and the adjustment principle and the above-mentioned page aspect ratio adjustment method type are not repeated here.

In this embodiment, when the target page adjustment strategy corresponding to the key object is not found, the display parameters corresponding to the display device are read from the device information; the actual page aspect ratio corresponding to the H5 page is determined according to the display parameters, and is based on the actual page width and height Adjust the preset page aspect ratio in the H5 page display information to obtain the target display information, so as to achieve the smooth acquisition of the target display information and ensure the display effect of the page elements.

Referring to FIG. 4, FIG. 4 is a schematic flowchart of the third embodiment of the animation display method based on the H5 page of this application.

Based on the foregoing embodiments, in this embodiment, the step of reading the animation frame sequence contained in the loading result and determining the animation sequence corresponding to the animation element according to the animation frame sequence includes:

Step S601: Read the animation frame sequence contained in the loading result and the screen refresh rate corresponding to the display terminal;

It should be understood that the frame rate (Frame rate) is the frequency (rate) at which the image continuously appears on the display in units of frames, in Hz (hertz). The screen refresh rate is also called the screen refresh rate. For example, the 120Hz high refresh rate display means that the physical refresh rate of the display is limited to 120 frames per second. The lower the refresh rate, the more flickering, pause, and jitter the image will be. , The faster the glasses fatigue; the higher the refresh rate, the better the stability of the displayed image (picture).

Normally, the screen refresh rate of the display terminal defaults to 60Hz. In order to ensure the smoothness of the screen, the callback function of the page display in this type of display terminal needs to be executed every 16.7ms, but in actual situations not all display terminals correspond to The screen refresh rate is 60Hz. If the difference in the screen refresh rate of the display terminal is not considered, the callback function is still executed in a time period of 16.7ms, which may cause the animation effect to freeze and drop frames, which affects the user experience.

Considering the above situation, after reading the animation frame sequence contained in the loading result, the browser in this embodiment will also obtain the screen refresh rate corresponding to the display terminal to determine the time period when the callback function is executed.

Step S602: Determine the execution period of the RequestAnimationFrame function according to the screen refresh rate;

It should be understood that in general, the RequestAnimationFrame function can be used to determine the timing of execution of the callback function. For example, if the screen refresh rate is 60Hz, then the callback function will be executed every 16.7ms. If the screen refresh rate is 75Hz, the time period when the callback function is executed is 1000/75=13.3ms. In other words, the RequestAnimationFrame function can make the callback function execute at the same pace as the system refresh, so as to ensure that the callback function is executed only once in each refresh interval of the screen, so that it will not cause frame loss or animation. Caton problem.

In a specific implementation, the browser can determine the execution cycle of the RequestAnimationFrame function when the callback function is executed according to the acquired screen refresh rate. Wherein, the execution cycle=1000/screen refresh rate.

Step S603: Obtain the time node corresponding to each frame of animation in the animation frame sequence when it is executed, and determine the animation frame set corresponding to each execution cycle according to the execution cycle and the execution time node;

It should be understood that the animation frame sequence is the corresponding execution sequence when each frame of animation is executed. After obtaining a piece of animation, the browser can determine the corresponding time node when each frame of animation is executed according to the total duration of the animation. For example, animation a includes three frames of pictures "Picture 1, Picture 2 and Picture 3" , And the total duration of animation a is 3 seconds, if the frame rate is 1Hz, the execution cycle is 1000/1=1000ms=1 second, then the corresponding time nodes when "Picture 1, Picture 2 and Picture 3" are executed It is "00:00:01, 00:00:02, and 00:00:03".

Further, after acquiring the time node corresponding to each frame of animation in the animation frame sequence, the browser can determine the animation frame set corresponding to each execution cycle according to the currently determined execution cycle and the execution time node. For example, if the browser currently determines that the execution period is 3 seconds, "Picture 1, Picture 2 and Picture 3" will be executed in the same execution period, that is, the animation frame set includes Picture 1, Picture 2, and Picture 3." Three collection elements. For another example, the animation frame sequence b contains picture 1~ 48. When the screen refresh rate is 60Hz, there are four animation frame sets corresponding to each execution cycle (16.7ms) of animation frame sequence b: picture 0~12, picture 13~24, picture 25~36 and picture 37~48 When the execution cycle is 13.3ms, the corresponding animation frame set may be reduced to three: picture 0~16, picture 16~32 and picture 33~48.

Step S604: Obtain the execution time period corresponding to each animation frame set, and determine the animation sequence corresponding to the animation element according to the execution time period.

In specific implementation, after obtaining the animation frame set corresponding to each execution cycle, the execution period corresponding to each animation frame set can be determined according to the total duration of the animation, and then the animation element corresponding to the animation element can be determined according to the execution period. Animation sequence.

Further, in order to ensure a smooth animation effect, the browser in this embodiment can also call the RequestAnimationFrame function so that the JS animation and CSS animation contained in the animation element are executed synchronously, that is, the animation actions that can be combined are combined in the same rendering cycle for screen rendering And show.

Further, considering that when the existing H5 page simulates the App product page, the user cannot switch the page by sliding left and right on the display screen, so this embodiment can also implement the routing class by using the transition& component in the Vue plug-in The effect of sliding the Tab left and right. Specifically, two classes (classes), v-enter and v-enter-active, can be added to page elements through the transition& component. When the page switches to the next frame, the v-enter class is deleted. After the transition is over, Then delete v-enter-active, so as to realize the left and right sliding switch of the page, and there is no jam.

This embodiment reads the animation frame sequence contained in the loading result and the screen refresh rate corresponding to the display terminal; determines the execution cycle of the RequestAnimationFrame function according to the screen refresh rate; obtains the corresponding time node when each frame of animation in the animation frame sequence is executed, Determine the animation frame set corresponding to each execution cycle according to the execution cycle and execution time node; obtain the execution time period corresponding to each animation frame set, and determine the animation sequence corresponding to the animation element according to the execution time period, effectively avoiding the time when the animation element is executed. The situation of pauses and dropped frames improves the user experience.

In addition, the embodiment of the present application also proposes a storage medium, and the storage medium may be a non-volatile readable storage medium.

The storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the steps of the animation display method based on the H5 page as described above are realized.

For the method implemented when the computer-readable instruction is executed, refer to the various embodiments of the animation display method based on the H5 page of this application, which will not be repeated here.

Referring to FIG. 5, FIG. 5 is a structural block diagram of the first embodiment of the animation display device based on the H5 page of this application.

As shown in FIG. 5, the H5 page-based animation display device proposed in the embodiment of the present application includes:

The information acquisition module 501 is used to acquire the device information of the display terminal and the display information of the H5 page displayed by the application to be displayed;

The rule adjustment module 502 is configured to extract the terminal identifier corresponding to the display terminal from the device information;

The rule adjustment module 502 is further configured to use the terminal identifier as a key object to search for a target page adjustment strategy corresponding to the key object in a pre-built key-value pair of the terminal identifier and the page adjustment strategy;

The rule adjustment module 502 is further configured to adjust the display information of the H5 page according to the target page adjustment strategy to obtain target display information;

The animation acquisition module 503 is used to acquire the element attributes of all page elements corresponding to the application to be displayed, detect whether there is an animation tag in the element attribute, and if it exists, determine that the page element contains an animation element. The element is preloaded, and the animation sequence corresponding to the animation element is determined according to the loading result;

The animation execution module 504 is configured to perform animation display on the animation element according to the target display information and the animation sequence.

Based on the first embodiment of the animation display device based on the H5 page of the present application, a second embodiment of the animation display device based on the H5 page of the present application is proposed.

In this embodiment, the rule adjustment module 502 is further configured to read the display parameters corresponding to the display device from the device information when the target page adjustment strategy corresponding to the key object is not found; The display parameter determines the actual page aspect ratio corresponding to the H5 page, and adjusts the preset page aspect ratio in the H5 page display information based on the actual page aspect ratio to obtain target display information.

Further, the animation acquisition module 503 is configured to preload the animation elements, call the preset RequestAnimationFrame function to monitor the execution of the animation element preloading process, to obtain the loading results; The animation frame sequence contained in the loading result is determined, and the animation sequence corresponding to the animation element is determined according to the animation frame sequence.

Further, the animation acquisition module 503 is configured to read the animation frame sequence contained in the loading result and the screen refresh rate corresponding to the display terminal; determine the execution period of the RequestAnimationFrame function according to the screen refresh rate; Acquire the time node corresponding to each frame of animation in the animation frame sequence when it is executed, determine the animation frame set corresponding to each execution cycle according to the execution cycle and the execution time node; obtain the execution period corresponding to each animation frame set , And determine the animation sequence corresponding to the animation element according to the execution period.

Further, the animation execution module 504 is configured to display the page element according to the target display information; call the RequestAnimationFrame function to monitor the display process of the animation element, so that the animation element is The animation sequence is displayed one by one.

For other embodiments or specific implementations of the animation display device based on the H5 page of the present application, reference may be made to the foregoing method embodiments, which will not be repeated here.

Claims

An animation display method based on H5 page, wherein the method includes:

Obtain the device information of the display terminal and the display information of the H5 page displayed by the application to be displayed;

Extract the terminal identifier corresponding to the display terminal from the device information;

Using the terminal identifier as a key object to search for a target page adjustment strategy corresponding to the key object in a pre-built key-value pair of the terminal identifier and the page adjustment strategy;

Adjusting the display information of the H5 page according to the target page adjustment strategy to obtain target display information;

Obtaining element attributes of all page elements corresponding to the application to be displayed, and detecting whether there are animation tags in the element attributes;

If it exists, determine that the page element contains an animation element, preload the animation element, and determine the animation sequence corresponding to the animation element according to the loading result;

The animation element is animatedly displayed according to the target display information and the animation sequence.
The method of claim 1, wherein after the step of using the terminal identifier as a key object to find the target page adjustment strategy corresponding to the key object in the pre-built key-value pair of the terminal identifier and the page adjustment strategy , The method further includes:

When the target page adjustment strategy corresponding to the key object is not found, read the display parameters corresponding to the display device from the device information;

The actual page aspect ratio corresponding to the H5 page is determined according to the display parameters, and the preset page aspect ratio in the H5 page display information is adjusted based on the actual page aspect ratio to obtain target display information.
The method of claim 1, wherein the step of preloading the animation element and determining the animation sequence corresponding to the animation element according to the loading result comprises:

Preloading the animation element, calling a preset RequestAnimationFrame function to monitor the execution of the animation element preloading process to obtain the loading result;

The animation frame sequence contained in the loading result is read, and the animation sequence corresponding to the animation element is determined according to the animation frame sequence.
5. The method of claim 3, wherein the step of reading the animation frame sequence contained in the loading result and determining the animation sequence corresponding to the animation element according to the animation frame sequence comprises:

Reading the animation frame sequence contained in the loading result and the screen refresh rate corresponding to the display terminal;

Determine the execution cycle of the RequestAnimationFrame function according to the screen refresh rate;

Acquiring the time node corresponding to each frame of animation in the animation frame sequence when being executed, and determining the animation frame set corresponding to each execution cycle according to the execution cycle and the execution time node;

Acquire the execution period corresponding to each animation frame set, and determine the animation sequence corresponding to the animation element according to the execution period.
5. The method according to claim 4, wherein the step of displaying the animation elements according to the target display information and the animation sequence comprises:

Displaying the page element according to the target display information;

The RequestAnimationFrame function is called to monitor the display process of the animation elements, so that the animation elements are displayed one by one according to the animation sequence.
An animation display device based on H5 page, wherein the device includes:

The information acquisition module is used to acquire the device information of the display terminal and the display information of the H5 page displayed by the application to be displayed;

A rule adjustment module, configured to extract a terminal identifier corresponding to the display terminal from the device information;

The rule adjustment module is further configured to use the terminal identifier as a key object to find a target page adjustment strategy corresponding to the key object in a pre-built key-value pair of the terminal identifier and the page adjustment strategy;

The rule adjustment module is further configured to adjust the display information of the H5 page according to the target page adjustment strategy to obtain target display information;

The animation acquisition module is used to acquire the element attributes of all page elements corresponding to the application to be displayed, detect whether there is an animation tag in the element attribute, and if it exists, determine that the page element contains an animation element. Preloading, and determining the animation sequence corresponding to the animation element according to the loading result;

The animation execution module is used to perform animation display on the animation element according to the target display information and the animation sequence.
The apparatus according to claim 6, wherein the rule adjustment module is further configured to read the display device corresponding to the display device from the device information when the target page adjustment strategy corresponding to the key object is not found. Display parameters; determine the actual page aspect ratio corresponding to the H5 page according to the display parameters, and adjust the preset page aspect ratio in the H5 page display information based on the actual page aspect ratio to obtain the target display information.
The device of claim 6, wherein the animation acquisition module is further configured to preload the animation elements, call a preset RequestAnimationFrame function to monitor the execution of the animation element preloading process, and Obtain the loading result; read the animation frame sequence contained in the loading result, and determine the animation sequence corresponding to the animation element according to the animation frame sequence.
The device according to claim 8, wherein the animation acquisition module is further configured to read the animation frame sequence contained in the loading result and the screen refresh rate corresponding to the display terminal; determine according to the screen refresh rate The execution cycle of the RequestAnimationFrame function; obtain the time node corresponding to each frame of the animation in the animation frame sequence when it is executed, and determine the animation frame set corresponding to each execution cycle according to the execution cycle and the execution time node; The execution period corresponding to each animation frame set, and the animation sequence corresponding to the animation element is determined according to the execution period.
8. The device of claim 8, wherein the animation execution module is further configured to display the page elements according to the target display information; call the RequestAnimationFrame function to monitor the display process of the animation elements, So that the animation elements are displayed one by one according to the animation sequence.
An animation display device based on H5 pages, wherein the device includes: a memory, a processor, and computer-readable instructions stored on the memory and executable by the processor, wherein the computer-readable instructions are When the processor executes, the following steps are implemented:

Obtain the device information of the display terminal and the display information of the H5 page displayed by the application to be displayed;

Extract the terminal identifier corresponding to the display terminal from the device information;

Using the terminal identifier as a key object to search for a target page adjustment strategy corresponding to the key object in a pre-built key-value pair of the terminal identifier and the page adjustment strategy;

Adjusting the display information of the H5 page according to the target page adjustment strategy to obtain target display information;

Obtaining element attributes of all page elements corresponding to the application to be displayed, and detecting whether there are animation tags in the element attributes;

If it exists, determine that the page element contains an animation element, preload the animation element, and determine the animation sequence corresponding to the animation element according to the loading result;

The animation element is animatedly displayed according to the target display information and the animation sequence.
The device according to claim 11, wherein after the step of using the terminal identifier as the key object to find the target page adjustment strategy corresponding to the key object in the pre-built key-value pair of the terminal identifier and the page adjustment strategy , The method further includes:

When the target page adjustment strategy corresponding to the key object is not found, read the display parameters corresponding to the display device from the device information;

The actual page aspect ratio corresponding to the H5 page is determined according to the display parameters, and the preset page aspect ratio in the H5 page display information is adjusted based on the actual page aspect ratio to obtain target display information.
11. The device of claim 11, wherein the step of preloading the animation element and determining the animation sequence corresponding to the animation element according to the loading result comprises:

Preloading the animation element, calling a preset RequestAnimationFrame function to monitor the execution of the animation element preloading process to obtain the loading result;

The animation frame sequence contained in the loading result is read, and the animation sequence corresponding to the animation element is determined according to the animation frame sequence.
The device according to claim 13, wherein the step of reading the animation frame sequence contained in the loading result and determining the animation sequence corresponding to the animation element according to the animation frame sequence comprises:

Reading the animation frame sequence contained in the loading result and the screen refresh rate corresponding to the display terminal;

Determine the execution cycle of the RequestAnimationFrame function according to the screen refresh rate;

Acquiring the time node corresponding to each frame of animation in the animation frame sequence when being executed, and determining the animation frame set corresponding to each execution cycle according to the execution cycle and the execution time node;

Acquire the execution period corresponding to each animation frame set, and determine the animation sequence corresponding to the animation element according to the execution period.
The device according to claim 14, wherein the step of performing animation display on the animation element according to the target display information and the animation sequence comprises:

Displaying the page element according to the target display information;

The RequestAnimationFrame function is called to monitor the display process of the animation elements, so that the animation elements are displayed one by one according to the animation sequence.
A storage medium, wherein computer readable instructions are stored on the storage medium, and when the computer readable instructions are executed by a processor, the following steps are implemented:

Obtain the device information of the display terminal and the display information of the H5 page displayed by the application to be displayed;

Extract the terminal identifier corresponding to the display terminal from the device information;

Using the terminal identifier as a key object to search for a target page adjustment strategy corresponding to the key object in a pre-built key-value pair of the terminal identifier and the page adjustment strategy;

Adjusting the display information of the H5 page according to the target page adjustment strategy to obtain target display information;

Obtaining element attributes of all page elements corresponding to the application to be displayed, and detecting whether there are animation tags in the element attributes;

If it exists, determine that the page element contains an animation element, preload the animation element, and determine the animation sequence corresponding to the animation element according to the loading result;

The animation element is animatedly displayed according to the target display information and the animation sequence.
The storage medium according to claim 16, wherein the step of using the terminal identifier as a key object to find the target page adjustment strategy corresponding to the key object in a pre-built key-value pair of the terminal identifier and the page adjustment strategy After that, the method further includes:

When the target page adjustment strategy corresponding to the key object is not found, read the display parameters corresponding to the display device from the device information;

The actual page aspect ratio corresponding to the H5 page is determined according to the display parameters, and the preset page aspect ratio in the H5 page display information is adjusted based on the actual page aspect ratio to obtain target display information.
15. The storage medium of claim 16, wherein the step of preloading the animation element and determining the animation sequence corresponding to the animation element according to the loading result comprises:

Preloading the animation element, calling a preset RequestAnimationFrame function to monitor the execution of the animation element preloading process to obtain the loading result;

The animation frame sequence contained in the loading result is read, and the animation sequence corresponding to the animation element is determined according to the animation frame sequence.
15. The storage medium of claim 18, wherein the step of reading the animation frame sequence contained in the loading result and determining the animation sequence corresponding to the animation element according to the animation frame sequence comprises:

Reading the animation frame sequence contained in the loading result and the screen refresh rate corresponding to the display terminal;

Determine the execution cycle of the RequestAnimationFrame function according to the screen refresh rate;

Acquiring the time node corresponding to each frame of animation in the animation frame sequence when being executed, and determining the animation frame set corresponding to each execution cycle according to the execution cycle and the execution time node;

Acquire the execution period corresponding to each animation frame set, and determine the animation sequence corresponding to the animation element according to the execution period.
22. The storage medium of claim 19, wherein the step of displaying the animation elements according to the target display information and the animation sequence comprises:

Displaying the page element according to the target display information;

The RequestAnimationFrame function is called to monitor the display process of the animation elements, so that the animation elements are displayed one by one according to the animation sequence. To