Page opening method, electronic equipment, program product and storage medium

Abstract

The invention discloses a page opening method, which is applied to a display terminal and comprises the following steps: in response to an operation of opening a target page, creating a view corresponding to the target page; the target page is drawn through the view, and the drawing completion degree of the target page is monitored in the drawing process; when the drawing completion degree reaches a preset completion degree threshold value, executing the display of the transition animation; and after the transition animation is displayed, displaying the target page. The invention further provides related electronic equipment, a program product and a storage medium. According to the page opening scheme, through innovative page rendering and animation control strategies, the page loading delay perceived by a user is effectively reduced while the fluency of page switching animation is guaranteed, and therefore the user experience of page loading in an application program is greatly improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a page opening method, electronic equipment, program product and storage medium. Background Art

[0002] In mobile application development, page opening speed and smoothness are one of the key factors affecting user experience. The traditional page opening method usually includes a series of steps, such as creating a page, initializing the view, rendering content, etc. However, this process often takes a long time and may cause users to perceive obvious delays or freezes.

[0003] The content of this background technology description is only for facilitating understanding of the relevant technology in this field and is not regarded as an admission of the prior art. Summary of the invention

[0004] In this regard, the embodiment of the present application provides a page opening solution, which aims to improve the user experience of page loading in the application. The solution ensures the smoothness of the page switching animation through innovative page rendering and animation control strategies, while effectively reducing the page loading delay perceived by the user.

[0005] In a first aspect, an embodiment of the present application provides a page opening method applied to a display terminal, the method comprising:

[0006] In response to an operation of opening a target page, creating a view corresponding to the target page;

[0007] Drawing the target page through the view, and monitoring the drawing completion degree of the target page during the drawing process;

[0008] When the drawing completion reaches a preset completion threshold, a transition animation for opening the target page is generated, and the transition animation is displayed;

[0009] After the transition animation is displayed, the target page is displayed.

[0010] Optionally, the method further comprises: when the drawing completion reaches a preset completion threshold, generating a transition animation for opening the target page;

[0011] Wherein, during the generation and display process of the transition animation of the target page, the updating or rendering operation of the view corresponding to the target page is prohibited.

[0012] Optionally, the prohibiting the update or rendering operation of the view corresponding to the target page includes:

[0013] After the drawing completion reaches a preset completion threshold and before the transition animation is generated, removing the view corresponding to the target page from the view hierarchy;

[0014] After the transition animation is displayed and before the target page is displayed, the view is re-added to the view hierarchy.

[0015] Optionally, the method further comprises: before removing the view corresponding to the target page from the view hierarchy, generating a screenshot of the at least partially drawn target page.

[0016] Further optionally, generating a transition animation for opening the target page includes: generating the transition animation based on the screenshot of the target page.

[0017] Optionally, monitoring the drawing completion degree of the target page during the drawing process includes:

[0018] The drawing completion degree is determined according to the current drawing size of the target page and the screen size of the display terminal.

[0019] Optionally, determining the drawing completion degree according to the current drawing size of the target page and the screen size of the display terminal includes:

[0020] Acquire the drawing width of the target page being drawn in real time;

[0021] Acquire the drawing length of the target page being drawn in real time;

[0022] Determine the width ratio of the drawing width to the screen width of the display terminal:

[0023] Determining a length ratio between the drawing width and the screen length of the display terminal;

[0024] It is determined whether the width ratio reaches a preset width ratio threshold or whether the length ratio reaches a preset length ratio threshold.

[0025] Optionally, the preset width ratio threshold is greater than or equal to 50% and less than 100%, and the preset length ratio threshold is greater than or equal to 50% and less than 100%.

[0026] In a second aspect, an embodiment of the present application provides an electronic device, comprising: a processor and a memory storing a computer program, wherein the processor is configured to implement the method of any embodiment in the first aspect when running the computer program.

[0027] In a third aspect, an embodiment of the present application provides a program product, including a computer program, which implements the method of any embodiment of the first aspect when executed by a processor.

[0028] In a fourth aspect, an embodiment of the present application provides a storage medium having a computer program stored thereon, wherein the program, when executed by a processor, implements the method of any embodiment of the first aspect.

[0029] The inventors have noticed that in a common page opening process, it takes a certain amount of time to render after the view is created before the user can see the specific content. If the page switching animation is executed simultaneously during the rendering process, the animation may become stuck due to the long rendering time, affecting the user experience. In order to solve this problem, some technologies known to the inventors use a method of initializing and rendering the view after the animation is completed. This method intends to ensure smooth animation execution, but it will cause the user to wait for a while after the animation ends before they can see the page content, which may also lead to a poor user experience. In addition, the above-mentioned technologies usually need to be optimized separately for different types of pages, lacking versatility. For each new page type added, developers need to invest extra time and energy in optimization, which increases development costs and maintenance difficulties.

[0030] In this regard, the page opening method provided in the embodiment of the present application monitors the drawing completion during the drawing process of the target page, and generates a transition animation for opening the target page when the preset completion threshold is reached, which cleverly balances the two seemingly contradictory requirements of animation fluency and fast content presentation. The page opening method provided in the embodiment of the present application monitors and judges the rendering completion, ensuring that the display of the transition animation is executed only after the page content is fully presented, which not only ensures the animation fluency when the target page is first displayed, but also makes the user feel smoother and faster to see the actual page content, improving the user's perception of the page opening response speed. Therefore, the page opening method of the embodiment of the present application accurately monitors the drawing progress of the target page to control the generation and display timing of the transition animation, while ensuring the fluency of the page switching animation, effectively reducing the page loading delay perceived by the user, so that the user perceives a smooth and fast page loading experience, effectively improving the user experience when the page is opened. In addition, the page opening method of the embodiment of the present application provides a general solution for optimizing page opening jams, and new pages only need to be accessed according to the specifications without additional optimization.

[0031] According to the page opening method of a further embodiment of the present application, the performance and user experience of the page opening process are further improved through a series of progressive optimization measures for view rendering, animation execution and resource management. According to a further embodiment, the method effectively avoids the jamming caused by additional rendering operations during the loading and display of the transition animation by prohibiting the update and rendering of the target page view during the transition animation. More specifically, the method according to the further embodiment innovatively temporarily removes the target page view from the hierarchy before the animation is executed, and re-adds it after the animation is completed, preventing background rendering operations and ensuring that system resources are focused on animation execution. Furthermore, the method according to the further embodiment generates page screenshots in advance and creates animations based on them, so that users obtain a user experience of opening new pages faster without jamming at the perceptual level. These optimization strategies comprehensively improve the smoothness of the animation, better solve the problem of page opening jams, and thus further improve the user experience.

[0032] Other optional features and technical effects of the embodiments of the present application are partially described below, and partially can be understood by reading this document. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Hereinafter, embodiments of the present application will be described in detail with reference to the accompanying drawings. The elements shown are not limited by the proportions shown in the accompanying drawings. The same or similar reference numerals in the accompanying drawings represent the same or similar elements, wherein:

[0034] Figure 1 A first exemplary flow chart of a page opening method according to an embodiment of the present application is shown;

[0035] Figure 2 A second exemplary flow chart of a page opening method according to an embodiment of the present application is shown;

[0036] Figure 3 A third exemplary flow chart of a page opening method according to an embodiment of the present application is shown;

[0037] Figure 4 A fourth exemplary flow chart of a page opening method according to an embodiment of the present application is shown;

[0038] Figure 5 A schematic diagram of the structure of a page opening device according to an embodiment of the present application is shown;

[0039] Figure 6 A schematic diagram showing an exemplary hardware structure of a mobile terminal capable of implementing the page opening method according to an embodiment of the present application;

[0040] Figure 7 A schematic diagram showing an exemplary operating system structure of a mobile terminal capable of implementing the method according to an embodiment of the present application; and

[0041] Figure 8 A schematic diagram of an exemplary operating system structure of a mobile terminal capable of implementing the method according to an embodiment of the present application is shown. DETAILED DESCRIPTION

[0042] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with specific implementation methods and drawings. Here, the illustrative implementation methods and descriptions of the present application are used to explain the present application, but are not intended to limit the present application.

[0043] As used herein, the term "including" and its variations mean open inclusion, i.e., "including but not limited to". Unless otherwise stated, the term "or" means "and / or". The term "based on" means "based at least in part on". The terms "an example embodiment" and "an embodiment" mean "at least one example embodiment". The term "another embodiment" means "at least one additional embodiment". The terms "first", "second", etc. may refer to different or the same objects. Other explicit and implicit definitions may also be included below.

[0044] In current mobile application development, page opening speed and fluency directly affect the user experience. However, a common problem in the prior art is that page opening is stuck, which leads to a decline in user experience and even user loss. This stuck problem is more obvious in the case of complex pages or poor network conditions.

[0045] The traditional page opening method known to the inventor is usually to directly render after creating the view, and execute the page switching animation at the same time. This method easily causes animation jams, affecting the user experience. Some optimization schemes choose to initialize and render the view after the animation is executed. Although the animation is smooth, the user needs to wait for a long time to see the page content, and the experience is also not good.

[0046] To solve the above problems, an embodiment of the present application proposes a page opening method, which monitors the completion of page drawing, generates and displays transition animations at appropriate times, and optionally carefully controls the update and rendering operations of the processing view, thereby achieving a smoother and faster page opening effect, significantly improving user experience, and reducing the risk of user churn.

[0047] like Figure 1 As shown, a first flow chart of a page opening method according to an embodiment of the present application is shown, and the method is applied to a display terminal, comprising the following steps:

[0048] S110: In response to the operation of opening the target page, creating a view corresponding to the target page.

[0049] In step S110 , an operation instruction to open a target page triggered by a user may be detected and received first.

[0050] In the embodiments of the present application, the operation may include any suitable triggering interaction action performed by the user, in particular, a touch operation, including but not limited to a click operation, a sliding operation, a long press operation, and a gesture operation; however, other operations may also be conceivable, such as voice commands, operating physical buttons, etc. In some specific examples, the user may perform various click operations on the application interface to open the target page, such as clicking a navigation menu item, a list item, or a bottom navigation bar icon; or, the user may open the target page through a sliding gesture, such as sliding up and down or left and right in some applications to switch between different target pages, or performing an inward slide at the edge of the page to open the target page; or, the user may trigger the opening of the target page by long pressing an interface element (such as an icon), or, the user may use a specific gesture operation such as multi-finger pinching or spreading to open the target page (including entering the target page after closing the current page). Optionally, the operation of opening the target page can also be an operation performed outside the application of the target page. For example, the operation of opening the target page can originate from system (such as iOS or Android) level interaction, such as the user clicking on a notification in the notification bar; or, the user enters the target page through an interactive operation (such as clicking) a deep link of other applications, for example, the user enters the target page in music application B by clicking on a share card in the dialog box of social application A.

[0051] After receiving an operation instruction to open the target page, a view corresponding to the target page can be created. In some embodiments, the type and / or content of the target page can be analyzed first, and the type of view to be created can be determined based on the type and / or content of the target page. In an embodiment of the present application, the target page may include, for example, but is not limited to, a rich text page, a picture display page, an interactive form page, a list page, a map page, a media playback page, or a data visualization page. Here, pages of different page types have their specific content structure and rendering requirements, and may correspond to the creation of different types of view objects.

[0052] In an embodiment of the present application, a view refers to a basic building block of a user interface, which is responsible for drawing content on the screen and processing user input. Different views in an application can be organized into a tree structure, which can be referred to as a "view hierarchy" in an embodiment of the present application. In a view hierarchy, each view may contain multiple subviews, and may also be a subview of another view. The top-level view is usually referred to as a root view, which may represent, for example, the entire screen or application window. In an embodiment of the present application, the view corresponding to the target page refers to a subtree or branch representing the target page object in the view hierarchy, which may contain multiple subviews, which together constitute the complete content of the page, and each subview corresponds to various modules in the target page, such as controls, icons, etc.

[0053] In an embodiment of the present application, the view may have different specific implementations depending on the application of the target page applied to different mobile operating systems. In an embodiment of the present application, creating a view corresponding to the target page may include initializing an instance of an appropriate view class, setting its basic properties (such as size, position, background color, etc.), and preparing to receive specific content data. For different mobile operating systems, the corresponding view class can be used to create a view object. For example, in the Android system, the ViewGroup class or its subclasses (such as TextView, ImageView, ListView, etc.) can be used. In the iOS system, the UIView class or its subclasses can be used to create a view object.

[0054] In different specific examples, a variety of methods can be used to create views and build view hierarchies. For example, in the Android system, you can use LayoutInflater to load views from predefined XML layout files, which can directly create complex view hierarchies. For example, in the iOS system, you can directly instantiate a UIView object through code and manually add subviews, or use the Interface Builder tool to create a XIB file and load it at runtime. These methods allow developers to flexibly create and configure view hierarchies according to the specific needs of the target page, and can be further customized, such as setting background colors, adding subviews, configuring constraints, or adjusting other properties to meet the display needs of specific pages, which will not be repeated here.

[0055] When a view corresponding to the target page is created, step S120 may be executed.

[0056] S120: Drawing the target page through the view, and monitoring the drawing completion of the target page during the drawing process.

[0057] In step S120 , any appropriate drawing method of the view object created in step S110 may be called to draw the target page content.

[0058] In an embodiment of the present application, the target page content drawn in the view corresponding to the target page occurs in an off-screen buffer in the background (such as a canvas Canvas in the Android system), rather than being displayed directly on the screen. Thus, it can be ensured that in subsequent steps, a transition animation is first generated and displayed, and the content of the target page is displayed after the transition animation is displayed. Thus, in an embodiment of the present application, the target page content after drawing is completed is not immediately displayed on the screen, but waits for further processing in the display buffer.

[0059] In a specific example, in an Android system, the onDraw method can be called to draw the target page content on a canvas. This drawing process is part of the Android rendering pipeline.

[0060] In another specific example, in the iOS system, the drawing of the view can be implemented by the draw method (based on Swift language) or the drawRect method (based on Objective-C language). The drawing operation also occurs in the off-screen buffer.

[0061] In some embodiments, the drawing process generally involves multiple stages such as content loading, structure parsing, style calculation, layout calculation, and final drawing. In the content loading stage, the system obtains specific resources required for the page from local storage or the network. Subsequently, the system parses the loaded content into an internal structure suitable for this type of page, applies the corresponding style rules, calculates the final style of each element and its precise position and size in the page, and finally converts the calculated layout into pixel data in the buffer.

[0062] In an optional embodiment, a corresponding dedicated view object can be selected for drawing according to the type and / or content of the target page, including but not limited to: a rich text view object that supports complex text layout, an optimized image rendering view object, an interactive view object that supports user input, a list view object that supports efficient scrolling, a specialized map rendering view object, a media view object that supports video playback, and a visualization view object that supports chart drawing, etc.

[0063] In the embodiment of the present application, in step S120, a real-time monitoring mechanism may be started to continuously monitor the drawing progress of the target page, that is, the drawing completion degree.

[0064] In a specific example, in the Android system, ViewTreeObserver can be used to monitor the view tree drawing process. ViewTreeObserver is a class provided by the Android framework. As an observer of the view tree, it can monitor global changes of the view tree, including layout, drawing and other events. ViewTreeObserver provides a variety of monitor interfaces, including OnDrawListener, which is used to monitor drawing events. The monitor interface OnDrawListener can be added by calling the addOnDrawListener method of the observer ViewTreeObserver.

[0065] In this specific example, the pseudo code and comments for monitoring the drawing of the target page content are as follows (where the view name of the target page is mainView:

[0066] / / Get the ViewTreeObserver of the root view of the page

[0067] ViewTreeObserver observer=mainView.getViewTreeObserver();

[0068] / / Create and add OnDrawListener

[0069] observer.addOnDrawListener(new ViewTreeObserver.OnDrawListener(){

[0070] @Override

[0071] public void onDraw(){

[0072] / / Implement the monitoring logic of drawing progress here

[0073] }

[0074] });

[0075] In another specific example, in the iOS system, CADisplayLink can be used to monitor the view drawing process, but other means can be thought of and the present application is not limited thereto.

[0076] In the embodiment of the present application, the monitoring may be real-time monitoring or periodic monitoring according to a certain time interval (eg, 10 milliseconds).

[0077] In the embodiments of the present application, different drawing completion determination criteria may be used. In an optional embodiment, monitoring the drawing completion of the target page during the drawing process includes:

[0078] S120 ′ (not shown): Determine the drawing completion degree according to the current drawing size of the target page and the screen size of the display terminal.

[0079] In step S120', the current drawing size of the target page, including width and length, may be first obtained, and the screen size of the display terminal may also be obtained. Optionally, the value reflecting the current drawing completion degree may be obtained by calculating the ratio of the drawing size to the screen size.

[0080] like Figure 2 As shown, the specific implementation of monitoring the drawing completion in step S120. More specifically, step S120' may include the following steps S121 to S125:

[0081] S121: Acquire the drawing width of the target page being drawn in real time.

[0082] In step S121 , any suitable page width measurement method may be used to obtain the real-time width of the target page currently being drawn.

[0083] In a specific example, in an Android system, the difference between the getLeft() and getRight() methods can be used to obtain the actual drawing width of the target page.

[0084] The following is an example pseudo code:

[0085] int width=mainView.getLeft()-mainView.getRight();

[0086] As an alternative example, the getMeasuredWidth() method may be used to obtain the actual drawing width of the target page.

[0087] In another specific example, in the iOS system, the size of the target view in the horizontal coordinate system can be obtained by accessing the bounds property of the target view. More specifically, the current drawing width of the target view can be obtained by accessing bounds.size.width.

[0088] S122: Acquire the drawing length of the target page being drawn in real time.

[0089] Similar to step S121, in step S122, vertical dimension information of the target page may be obtained.

[0090] In step S122 , any suitable page length measurement method may be used to obtain the real-time length of the target page currently being drawn.

[0091] In a specific example, in an Android system, the difference between the getTop() and getBottom() methods can be used to obtain the actual drawing length of the target page.

[0092] The following is an example pseudo code:

[0093] int height=mainView.getBottom()-mainView.getTop();

[0094] As an alternative example, the getMeasuredHeight() method may be used to obtain the actual drawing length of the target page.

[0095] In another specific example, in the iOS system, the size of the target view in the vertical coordinate system can be obtained by accessing the bounds property of the target view. More specifically, the current drawing length of the target view can be obtained by accessing bounds.size.height.

[0096] S123: Determine a width ratio between the drawing width and the screen width of the display terminal.

[0097] In step S123, the width ratio can be calculated by comparing the drawing width of the target page with the screen width of the display terminal. This ratio can be used to measure the drawing completion degree of the target page in the horizontal direction.

[0098] In the embodiment of the present application, the screen width of the display terminal may be first obtained, which may usually be achieved by calling a method provided by the system.

[0099] In a specific example, in an Android system, a method like getScreenWidth() may be used to obtain the screen width.

[0100] The following is an example pseudo code:

[0101] int screenWidth=getScreenWidth();

[0102] In another specific example, in the iOS system, the screen width can be obtained by accessing the main screen property of the UIScreen class. The exemplary pseudo code can be:

[0103] let screenWidth=UIScreen.main.bounds.width

[0104] Accordingly, the width ratio may be determined according to the drawing width value and the screen width.

[0105] S124: Determine the length ratio between the drawing width and the screen length of the display terminal.

[0106] In step S124, the length ratio can be calculated by comparing the drawing length of the target page with the screen length of the display terminal. This ratio can be used to measure the drawing completion degree of the target page in the vertical direction.

[0107] In the embodiment of the present application, the screen length of the display terminal may be first obtained, which may usually be achieved by calling a method provided by the system.

[0108] In a specific example, in an Android system, a method similar to getScreenHeight() may be used to obtain the screen length.

[0109] The following is an example pseudo code:

[0110] int screenHeight=getScreenHeight();

[0111] In another specific example, in the iOS system, the screen length can be obtained by accessing the main screen property of the UIScreen class. An exemplary pseudo code may be:

[0112] let screenHeight=UIScreen.main.bounds.height

[0113] S125: Determine whether the width ratio reaches a preset width ratio threshold or whether the length ratio reaches a preset length ratio threshold.

[0114] In step S125 , the width ratio and / or length ratio calculated in the previous step may be compared with a preset threshold value to determine whether the drawing of the target page has reached the expected degree of completion.

[0115] In an embodiment of the present application, the preset width ratio threshold can be set to be greater than or equal to 50% and less than 100%, and the preset length ratio threshold can be set to be greater than or equal to 50% and less than 100%, that is, the ratio of occupying half of the screen to nearly occupying the entire screen. In one example, for example, the width ratio threshold can be set to 50% and the length ratio threshold can be set to 50% to determine whether the drawing has reached a sufficient degree of completion. It can be understood that the threshold can be adjusted according to specific business needs, for example, it can be set to any value within the range of greater than or equal to 50% and less than 100%. In some embodiments, the width ratio threshold and the length ratio threshold can be equal or unequal, for example, the width ratio threshold can be set to 50% and the length ratio threshold can be set to 60%, and the present application does not impose any restrictions on this.

[0116] Accordingly, in a specific example, the pseudo code for the specific implementation of step S125 is, for example:

[0117] float scale = 0.5f; / / Set 50% as the threshold

[0118] if(width>=screenWidth*scale||height>=screenHeight*scale){

[0119] / / Determine whether it is the first complete content drawing

[0120] }

[0121] As the final step of the drawing completion evaluation, S125 takes into account the width and length ratios obtained by S123 and S124. The method compares these ratios with pre-set thresholds. Typically, these thresholds can be set to 50%, but can be adjusted according to specific application needs.

[0122] In this example, scale represents the percentage of the screen occupied, and is set to 0.5, which represents a threshold of 50%. If the width ratio or height ratio reaches or exceeds this threshold, the page is considered to have completed sufficient painting.

[0123] It should be noted that at least some of steps S121 to S125 can be completed in combination, or can be completed separately. For example, an exemplary pseudo code for monitoring drawing completion is as follows:

[0124] mainView.getViewTreeObserver().addOnDrawListener(newViewTreeObserver.OnDrawListener(){

[0125] @Override

[0126] public void onDraw(){

[0127] int width=mainView.getLeft()-mainView.getRight();

[0128] int height=mainView.getBottom()-mainView.getTop();

[0129] int screenWidth=getScreenWidth();

[0130] int screenHeight=getScreenHeight();

[0131] float scale=0.5f;

[0132] if(width>=screenWidth*scale||height>=screenHeight*scale){

[0133] / / This is the first complete content drawing

[0134] }

[0135] }

[0136] });

[0137] In the above embodiment of the present application, it can be determined that a given preset completion threshold is reached when or selectively reaches a width ratio threshold or a length ratio threshold. In another embodiment, it can be determined that a given preset completion threshold is reached when both the width ratio threshold and the length ratio threshold are reached.

[0138] In the embodiment of the present application, after determining that the drawing completion degree of the target page reaches a preset completion degree threshold, the monitoring of the drawing completion degree of the target page may be stopped.

[0139] Through the drawing completion monitoring strategy disclosed in the embodiment of the present application, the method of the embodiment of the present application can predict the preparation status of the target page in advance, provide a precise start timing for generating and displaying the transition animation, and help reduce the loading time perceived by the user.

[0140] S130: When the drawing completion degree reaches a preset completion degree threshold, a transition animation is displayed.

[0141] When it is determined during the continuous monitoring process in step S120 that the current drawing completion degree reaches a preset completion degree threshold, the generated transition animation may be displayed.

[0142] In step S130, it is ensured that the execution of the transition animation is triggered only after the view has completed the first complete content drawing of the target page, thereby providing a smoother and more coherent user experience. By carefully setting a preset completion threshold (such as 50%) that is less than 100%, and taking advantage of the time difference of program execution, it can be achieved that when the animation is started (such as calling startAnimation()), the content of the target page has been completed or is nearly completed. This method can not only start preparing to display the animation in a timely manner, but also ensure that the page content is basically ready when the animation is actually displayed, effectively balancing the response speed and visual integrity.

[0143] In the specific implementation of step S130, a flag variable can also be set to record whether the complete content drawing has been performed. In each drawing callback, the flag variable is checked first. If the flag indicates that the complete drawing has been completed, it returns directly to avoid repeatedly triggering the animation logic. This ensures that the animation logic is only executed once. If it is the first complete drawing, the ratio of the size of the current drawing content to the screen size is calculated. When this ratio reaches a preset threshold (for example, 50%), it is considered that the first complete content drawing is completed. At this time, the method will update the flag variable to indicate that the complete drawing has been detected, and then trigger the execution of the animation.

[0144] An example pseudo code is shown below:

[0145] boolean hasFirstFullDraw=false;

[0146] mainView.getViewTreeObserver().addOnDrawListener(newViewTreeObserver.OnDrawListener(){

[0147] @Override

[0148] public void onDraw(){

[0149] / / If the drawing has been completed once, return directly to ensure that the logic of triggering the animation is only executed once

[0150] if (hasFirstFullDraw) {

[0151] return;

[0152] }

[0153] int width=mainView.getLeft()-mainView.getRight();

[0154] int height=mainView.getBottom()-mainView.getTop();

[0155] int screenWidth=getScreenWidth();

[0156] int screenHeight=getScreenHeight();

[0157] float scale=0.5f;

[0158] if(width>=screenWidth*scale||height>=screenHeight*scale){

[0159] / / This is the first complete content drawing

[0160] hasFirstFullDraw = true;

[0161] / / Start the animation

[0162] startAnimation();

[0163] }

[0164] }

[0165] });

[0166] The transition animation execution method of the embodiment of the present application can accurately capture the moment when the page content reaches sufficient completeness for the first time, and will neither trigger the animation too early (which may cause incomplete content to be displayed) nor trigger the animation too late (which may cause the user to wait too long). Through this precise timing control, the loading speed perceived by the user can be maximized while ensuring the visual effect.

[0167] In an exemplary embodiment, the type of transition animation can be selected according to the specific needs and design style of the application, including but not limited to: fade in and fade out, slide, zoom, flip, dissolve and push, etc. In a specific example, the fade in and fade out effect can make the new page gradually become opaque, while the old page gradually becomes transparent. In a specific example, the sliding effect can make the new page slide in from one side of the screen, while the old page slides out. In a specific example, the zoom effect can achieve the visual effect of the new page zooming from small to large, or the old page shrinking and disappearing from large to small. In a specific example, the flip effect can simulate 3D page turning, so that the new page flips into view. The dissolving effect can make the old page gradually dissolve, while the new page gradually forms. In a specific example, the push effect is that the new page pushes the old page out of view.

[0168] As some possible embodiments of the present application, this step S130 may also include dynamically selecting the type of transition animation according to the type of the target page, which falls within the scope of the present application. For example, a fade-in and fade-out effect may be selected for a picture display page, while a sliding effect may be selected for a text page. This dynamic selection mechanism can provide a more fitting visual experience according to the page content.

[0169] In some embodiments of the present application, the transition animation may also be generated based on given content or a snapshot of the target page, as described in step S130' below.

[0170] In some embodiments, as described above, the target page content after drawing is completed will be located in an off-screen buffer, and will not be displayed on the screen immediately, but will wait for further processing. Correspondingly, the rendering pipeline can be intercepted as needed after drawing is completed (or after monitoring that a predetermined drawing completion degree has been reached), and the interception operation of the rendering pipeline can be released after a given time node, such as after the display of the transition animation is completed, after the transition animation has been displayed for a predetermined length of time, or optionally after the view is re-added as described in S143 below (or after a predetermined time). For example, in the Android system, when the interception operation is released, the Android system can submit the drawing content to the SurfaceFlinger system service.

[0171] Furthermore, the embodiment of the present application also provides an optional optimized rendering jamming solution, which can address the rendering jamming problem that may occur during the animation execution process by introducing additional steps to ensure the smoothness and visual consistency of the transition animation.

[0172] like Figure 3 A further embodiment of the page opening method according to the embodiment of the present application is shown. Steps S110-S130 and S150 can be shown in the context respectively.

[0173] like Figure 3 As shown, the page opening method may also include:

[0174] S140: When the drawing completion reaches a preset completion threshold, a transition animation for opening the target page is generated, wherein during the generation and display of the transition animation of the target page, updating or rendering operations of the view corresponding to the target page are prohibited.

[0175] In this step, when the drawing completion reaches the preset completion threshold, a transition animation for opening the target page can be generated, which can trigger the transition animation at the right time to avoid incomplete content display or long user waiting time. Through this timing control, the loading experience can be further improved while taking into account the visual effect.

[0176] In this step, during the generation and display of the transition animation of the target page, the updating or rendering operation of the view corresponding to the target page can be prohibited. By prohibiting the updating or rendering operation of the view corresponding to the target page, the jamming caused by subsequent additional drawing requests is avoided.

[0177] like Figure 4 The specific implementation of step S140 is shown, including the following steps:

[0178] S141: before removing the view corresponding to the target page from the view hierarchy, generating a screenshot of at least a portion of the drawn target page.

[0179] In some embodiments, for example, in step S141, before removing the view corresponding to the target page from the view hierarchy, that is, before stopping drawing the partially drawn target page, a screenshot in the form of a bitmap can be generated for the currently partially drawn target page, which can be used for subsequent animation display to ensure that the target page content can still be presented in the transition animation after the original view is removed.

[0180] In one example, in an Android system, a screenshot bitmap containing the current content of the view corresponding to the target page (i.e., the drawing content of the target page) can be generated and returned by calling the buildDrawingCache() method of the view corresponding to the target page. The buildDrawingCache() method directly accesses the drawing cache of the view without re-rendering the entire view hierarchy.

[0181] The following is an example pseudo code:

[0182] Bitmap bitmap=mainView.buildDrawingCache();

[0183] Although not shown in the figure, it is also conceivable that step S141 ′ (not shown) is to generate a screenshot of the original target page for generating a transition animation.

[0184] Accordingly, the above-mentioned step S130 may include step S130 ′ (not shown): generating a transition animation based on the screenshot of the target page.

[0185] As a specific implementation of step S130, step S130' uses the page screenshot generated in step S141 to create a transition animation. This method can ensure that a smooth transition effect can still be generated and presented when the view corresponding to the target page is prohibited from updating or rendering operations. Optionally, the page screenshot generated in step S141' can also be used to create a transition animation.

[0186] In this step, the method first creates a new image view (ImageView) and sets it to the previously generated screenshot. Then, the appropriate animation effect is applied to this image view to achieve the desired transition animation effect.

[0187] In an example, in the Android system, this process can be achieved by creating a new ImageView instance. First, the generated screenshot is set as the image source of the ImageView. Then, the Android animation framework can be used to create the required animation effect, such as a fade-in animation. Finally, this animation is applied to the ImageView to achieve a smooth transition effect.

[0188] In another example, in iOS, a similar approach can be used. First, create a UIImageView instance and set the screenshot as its image. Then, use iOS's animation framework, such as the UIView.transition method, to achieve the desired transition effect. For example, you can create a fade-in effect by changing the alpha value of the UIImageView from 0 to 1, or use other transition animations to achieve more complex effects.

[0189] By using screenshots to generate transition animations, it is possible to ensure the continuity of visual effects while avoiding additional rendering operations that may occur during the animation execution (for example, in combination with steps S142 and S143 described below). This not only improves the smoothness of the animation, but also optimizes the use of system resources, providing users with a smoother and higher-quality page switching experience.

[0190] It will be appreciated that step S141 may be optional, which falls within the scope of the embodiments of the present application.

[0191] Next, the target page's view can be removed from the view hierarchy.

[0192] S142: After the drawing completion reaches a preset completion threshold and before the transition animation is generated, the view corresponding to the target page is removed from the view hierarchy.

[0193] In this step, by removing the view corresponding to the target page, the rendering operation during the generation and display of the transition animation can be effectively prevented.

[0194] In a specific example, in an Android system, the removal of a view can be achieved in the following manner: directly calling the removeView method of the root view (rootView) to directly remove the view (mainView) corresponding to the target page from the root view.

[0195] The following is an example pseudo code:

[0196] rootView.removeView(mainView);

[0197] In another specific example, in the iOS system, the removal of the view corresponding to the target page can be achieved by calling the removeFromSuperview method of the target view.

[0198] S143: After the transition animation is displayed and before the target page is displayed, the view is re-added to the view hierarchy.

[0199] This step S143 restores the view corresponding to the target page to the correct position in the view hierarchy, ensuring that the user can interact with the page normally after the animation ends.

[0200] In a specific example, in the Android system, the view (mainView) corresponding to the previously removed target page can be re-added to the view hierarchy by calling the addView method of the root view (rootView). That is, the mainView is reinserted into the subview list of the rootView, making it a visible and interactive interface element again.

[0201] The following is an example pseudo code:

[0202] rootView.addView(mainView);

[0203] In another specific example, in the iOS system, a similar approach can be adopted. The target view is re-added to the view hierarchy by calling the addSubview method of the parent view.

[0204] This ensures that after the transition animation ends, the user can see and interact with the complete target page.

[0205] Optionally, after removing the view corresponding to the target page from the view hierarchy, you can consider releasing non-essential resources associated with the view and reallocating those resources before adding the view back to the view hierarchy. This resource management strategy can optimize memory usage, especially when dealing with large or complex pages.

[0206] As another alternative embodiment, prohibiting the update or rendering operation of the view corresponding to the target page may include: making the view corresponding to the target page temporarily invisible and pausing the update of the view; and after the transition animation is completed, the visibility of the view and the update of the view may be restored.

[0207] In a specific example, in the Android system, the view can be temporarily hidden by setting the visibility of the target page view to an invisible state. At the same time, a special method can be called to suspend the drawing operation of the view. These operations work together to effectively prevent the view from being updated and rendered.

[0208] In another specific example, in the iOS system, a similar approach can be adopted. By setting the hidden property of the target page view to true, the view can be temporarily invisible. In addition, the real-time rendering of the view can be suspended by setting the rasterization property of the view layer.

[0209] After the transition animation is completed, the normal state of the view needs to be restored, including restoring the visibility of the view and restoring the update capability of the view. In a specific example, in the Android system, the visibility of the view can be reset to the visible state, and the drawing operation of the view can be restored. In another specific example, in the iOS system, the hidden property of the view can be set to false, and the rasterization setting of the view layer can be canceled.

[0210] As another alternative embodiment, prohibiting the update or rendering operation of the view corresponding to the target page may include: pausing the layout calculation and drawing operation of the view corresponding to the target page, and resuming these operations after the animation is completed.

[0211] S150: After the transition animation display is completed, the target page is displayed.

[0212] In step S150, it is optionally possible to detect in real time whether the transition animation started in S140 has been completely displayed, or to hide or remove the transition animation elements in response to the animation completion, while displaying the completely loaded target page.

[0213] As an optional embodiment, the integrity of the target page can be verified before displaying the target page. This mechanism can ensure that the user always sees complete and correct page content. In specific implementation, the target page can be checked first to see if it is complete. If the page is detected to be incomplete, the page loading process is re-triggered. Only after the page integrity is confirmed, the display operation is performed.

[0214] In summary, the page opening method provided in the embodiment of the present application effectively reduces the page loading delay perceived by the user while ensuring the smoothness of the page switching animation, so that the user perceives a smooth and fast page loading experience, effectively improving the user experience when opening the page.

[0215] Furthermore, the page opening method of the embodiment of the present application provides a universal solution for optimizing page opening jams, and newly added pages only need to be accessed according to the specifications without the need for additional optimization.

[0216] A further embodiment of the method innovatively removes the target page view from the hierarchy temporarily before the animation is executed, and re-adds it after the animation is completed, thereby preventing background rendering operations, ensuring that system resources are focused on animation execution, comprehensively improving animation smoothness, and better solving the problem of page opening jams, thereby further improving the user experience.

[0217] The embodiments of the present application further achieve the following effects: optimize memory usage and resource management, significantly improve application performance and stability; have strong adaptability, can be dynamically adjusted according to page type, effectively handle complex page structures, and solve potential performance bottleneck problems.

[0218] In an embodiment of the present application, a page opening device 500 is also provided, which is applied to a display terminal. The page opening device 500 may include a creation unit 510, a drawing unit 520, a monitoring unit 530, a generation unit 540 and a display unit 550.

[0219] The creation unit 510 is configured to create a view corresponding to the target page in response to an operation of opening the target page.

[0220] The drawing unit 520 is configured to draw a target page through a view.

[0221] The monitoring unit 530 is configured to monitor the drawing completion degree of the target page during the drawing process.

[0222] The generating unit 540 is configured to execute display of a transition animation after the drawing completion degree reaches a preset completion degree threshold.

[0223] The display unit 550 is configured to display the target page after the transition animation display is completed.

[0224] In the embodiments of the present application, the methods and functions that can be implemented by the above-mentioned device embodiments can refer to the description of the above-mentioned method embodiments, which will not be repeated here.

[0225] In an embodiment of the present application, an electronic device is provided, including: a processor and a memory storing a computer program, wherein the processor is configured to execute any method of the embodiment of the present application when running the computer program.

[0226] In a preferred embodiment of the present application, the electronic device is a mobile terminal, preferably a mobile phone. As an exemplary implementation scheme only, Figure 6 FIG. 4 shows a hardware structure diagram of an electronic device, such as a mobile terminal 600, according to a specific embodiment of the present invention; and Figure 7 and Figure 8 FIG. 1 shows a schematic diagram of a system structure of a specific embodiment of an electronic device, such as a mobile terminal. Figures 6 to 8 The terminal example shown can also be used to implement the client described in the solution of the embodiment of the present application.

[0227] In the illustrated embodiment, the mobile terminal 600 may include a processor 601, an external memory interface 612, an internal memory 610, a universal serial bus (USB) interface 613, a charging management module 614, a power management module 615, a battery 616, a mobile communication module 640, a wireless communication module 642, antennas 639 and 641, an audio module 634, a speaker 635, a receiver 636, a microphone 637, an earphone interface 638, a button 609, a motor 608, an indicator 607, a subscriber identification module (SIM) card interface 611, a display screen 605, a camera device 606, and a sensor module 620, etc.

[0228] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the mobile terminal 600. In other embodiments of the present application, the mobile terminal 600 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0229] In some embodiments, the processor 601 may include one or more processing units. In some embodiments, the processor 601 may include one of the following or a combination of at least two of the following: an application processor (AP), a modem processor, a baseband processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, a neural network processor (NPU), etc. Different processing units may be independent devices or integrated in one or more processors.

[0230] The controller may be the nerve center and command center of the mobile terminal 600. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0231] A memory may also be provided in the processor for storing instructions and data. In some embodiments, the memory in the processor is a cache memory. The memory may store instructions or data that the processor has just used or circulated. If the processor needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 601, and thus improves the efficiency of the system.

[0232] NPU is a neural network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and can also continuously self-learn.

[0233] The GPU is a microprocessor for image processing that connects the display screen and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics drawing. The processor may include one or more GPUs that execute program instructions to generate or change display information.

[0234] A digital signal processor (ISP) is used to process digital signals. In addition to processing digital image signals, it can also process other digital signals.

[0235] In some embodiments, the processor 601 may include one or more interfaces. The interface may include an integrated circuit (I2C) interface, an integrated circuit internal sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver and transmitter (UART) interface, a mobile industry processor interface (MIPI), a general purpose input and output (GPIO) interface, a subscriber identity module (SIM) interface, a universal serial bus (USB) interface, etc.

[0236] It is understandable that the interface connection relationship between the modules illustrated in the embodiments of the present application is only a schematic illustration and does not constitute a structural limitation on the mobile terminal. In other embodiments of the present application, the mobile terminal may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.

[0237] The wireless communication function of the mobile terminal 600 can be implemented through antennas 639 and 641, a mobile communication module 640, a wireless communication module 642, a modem processor or a baseband processor, etc.

[0238] Video codecs are used to compress or decompress digital video.

[0239] The mobile terminal 600 can implement audio functions such as music playing and recording through an audio module, a speaker, a receiver, a microphone, an earphone interface, and an application processor.

[0240] The audio module is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals.

[0241] A microphone is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can put their mouth close to the microphone and speak, inputting the sound signal into the microphone.

[0242] The sensor module 620 may include one or more of the following sensors:

[0243] The pressure sensor 623 is configured to sense the pressure signal and convert the pressure signal into an electrical signal.

[0244] The air pressure sensor 624 is used to measure the air pressure.

[0245] The magnetic sensor 625 includes a Hall sensor.

[0246] The gyro sensor 627 may be used to determine the motion posture of the mobile terminal 600 .

[0247] The acceleration sensor 628 can detect the magnitude of acceleration of the mobile terminal 600 in various directions.

[0248] The distance sensor 629 may be configured to measure distance.

[0249] The proximity light sensor 621 may include, for example, a light emitting diode (LED) and a light detector such as a photodiode.

[0250] The ambient light sensor 622 is used to sense the brightness of ambient light.

[0251] The fingerprint sensor 631 may be configured to collect fingerprints.

[0252] The touch sensor 632 may be disposed on the display screen, and the touch sensor and the display screen form a touch screen, also known as a "touch screen". The touch sensor is used to detect a touch operation applied thereto or thereabout. The touch sensor may transmit the detected touch operation to the application processor to determine the type of touch event, such as single click, double click, long press, tap, directional slide, gather, etc.

[0253] The bone conduction sensor 633 can acquire vibration signals.

[0254] The software operating system of an electronic device (computer), such as a mobile terminal, may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture.

[0255] The embodiments shown in this article take iOS and Android operating system platforms of layered architecture as examples to illustrate the software structure of the mobile terminal. However, it is conceivable that the embodiments of this article can be implemented in different software operating systems.

[0256] exist Figure 7 In the illustrated embodiment, the solution of the embodiment of the present application can adopt the iOS operating system. The iOS operating system adopts a four-layer architecture, which is, from top to bottom, a touchable layer (Cocoa Touch layer) 710, a media layer (Media layer) 720, a core service layer (Core Services layer) 730, and a core operating system layer (Core OS layer) 740. The touch layer 710 provides various commonly used frameworks for application development and most of the frameworks are related to the interface, which is responsible for the user's touch interaction operations on the iOS device. The media layer provides audio-visual technologies in the application, such as graphics and images, sound technology, video, and audio and video transmission-related frameworks. The core service layer provides the basic system services required by the application. The core operating system layer contains most of the low-level functions close to the hardware.

[0257] In the embodiment of the present application, UIKit is a user interface framework of the touchable layer 710, which can be supported by many image frameworks in the media layer 720, including but not limited to Figure 7 The core library (Core Graphics), core animation (Core Animation), open library ES (OPEN GL ES), core image (Core Image), image IO (ImageIO), and library package (GLKit) shown in.

[0258] Figure 88 is a schematic diagram of the structure of the Android operating system. The solution of the embodiment of the present application can adopt the Android operating system. The layered architecture divides the software into several layers, and the layers communicate through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, namely, the application layer 810, the application framework layer 820, the Android runtime (Runtime) and system library 830, and the kernel layer 840.

[0259] The application layer 810 may include a series of application packages.

[0260] The application framework layer 820 provides an application programming interface (API) and a programming framework for the applications of the application layer. The application framework layer includes some predefined functions.

[0261] A window manager is used to manage window programs.

[0262] Content providers are used to store and retrieve data and make it accessible to applications.

[0263] The view system includes visual controls, such as controls for displaying text, controls for displaying images, etc. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images.

[0264] The phone manager is used to provide the communication function of the mobile terminal.

[0265] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0266] The notification manager enables applications to display notification information in the status bar, which can be used to convey notification-type messages and disappear automatically after a short stay without user interaction.

[0267] Android Runtime includes core libraries and virtual machines. Android Runtime is responsible for scheduling and management of the Android system. The core library consists of two parts: one is the function to be called by the Java language, and the other is the Android core library. The application layer and the framework layer run in the virtual machine.

[0268] The system library can include multiple functional modules. The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications.

[0269] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0270] The kernel layer 840 is a layer between hardware and software. The kernel layer may include display driver, camera driver, audio interface, sensor driver, power management and GPS interface. In some embodiments of the present application, the display may call the display driver.

[0271] The systems, devices, modules or units described in the above embodiments may be implemented by an electronic device (computer) or its associated components, preferably by a mobile terminal. The mobile terminal may be, for example, a smart phone, a laptop computer, a vehicle-mounted human-computer interaction device, a personal digital assistant, a media player, a navigation device, a game console, a tablet computer, a wearable device or a combination thereof.

[0272] Although not shown, in an embodiment of the present application, a program product is provided, including a computer program, and when the computer program is executed by a processor, the method of any embodiment of the present application is implemented.

[0273] Although not shown, in an embodiment of the present application, a storage medium is provided, the storage medium storing a computer program, the computer program being configured to execute any method of the embodiments of the present application when executed.

[0274] The storage media in the embodiments of the present application include permanent and non-permanent, removable and non-removable items that can be used to store information by any method or technology. Examples of storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission medium that can be used to store information that can be accessed by a computing device.

[0275] Those skilled in the art should understand that the embodiments of the present specification may be provided as methods, systems or computer program products. Therefore, those skilled in the art may imagine that the functional modules / units or controllers and related method steps described in the above embodiments may be implemented in software, hardware or a combination of software / hardware.

[0276] Unless explicitly stated, the actions or steps of the methods, programs, and embodiments of the present application do not have to be performed in a specific order and can still achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0277] In this article, multiple embodiments of the present application are described, but for the sake of simplicity, the description of each embodiment is not exhaustive, and the same or similar features or parts between the various embodiments may be omitted. In this article, "one embodiment", "some embodiments", "example", "specific example", or "some examples" are intended to be applicable to at least one embodiment or example according to the present application, rather than all embodiments. The above terms do not necessarily mean to refer to the same embodiment or example. In the absence of mutual contradiction, those skilled in the art can combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples.

[0278] The exemplary systems and methods of the present application have been specifically shown and described with reference to the above embodiments, which are merely examples of the best modes for implementing the present systems and methods. It will be appreciated by those skilled in the art that various changes may be made to the embodiments of the systems and methods described herein when implementing the present systems and / or methods without departing from the spirit and scope of the present application as defined in the appended claims.

Claims

1. A page opening method, applied to a display terminal, characterized in that: The method comprises: In response to an operation of opening a target page, creating a view corresponding to the target page; Drawing the target page through the view, and monitoring the drawing completion degree of the target page during the drawing process; When the drawing completion reaches a preset completion threshold, a transition animation is displayed; After the transition animation is displayed, the target page is displayed.

2. The method according to claim 1, characterized in that The method further comprises: When the drawing completion reaches a preset completion threshold, generating a transition animation for opening the target page; Wherein, during the generation and display process of the transition animation of the target page, the updating or rendering operation of the view corresponding to the target page is prohibited.

3. The method according to claim 2, characterized in that The prohibiting the update or rendering operation of the view corresponding to the target page includes: After the drawing completion reaches a preset completion threshold and before the transition animation is generated, removing the view corresponding to the target page from the view hierarchy; After the transition animation is displayed and before the target page is displayed, the view is re-added to the view hierarchy.

4. The method according to claim 3, characterized in that The method further includes: before removing the view corresponding to the target page from the view hierarchy, generating a screenshot of the target page that is at least partially drawn; The generating of the transition animation for opening the target page includes: generating the transition animation based on the screenshot of the target page.

5. The method according to claim 1, characterized in that The step of monitoring the drawing completion of the target page during the drawing process includes: The drawing completion degree is determined according to the current drawing size of the target page and the screen size of the display terminal.

6. The method according to claim 5, characterized in that The determining the drawing completion degree according to the current drawing size of the target page and the screen size of the display terminal includes: Acquire the drawing width of the target page being drawn in real time; Acquire the drawing length of the target page being drawn in real time; Determine the width ratio of the drawing width to the screen width of the display terminal: Determining a length ratio between the drawing width and the screen length of the display terminal; It is determined whether the width ratio reaches a preset width ratio threshold or whether the length ratio reaches a length ratio threshold.

7. The method according to claim 6, characterized in that The preset width ratio threshold is greater than or equal to 50% and less than 100%, and the preset length ratio threshold is greater than or equal to 50% and less than 100%.

8. An electronic device, characterized in that: include: A processor and a memory storing a computer program, wherein the processor is configured to implement the method according to any one of claims 1 to 7 when running the computer program.

9. A program product comprising a computer program, wherein: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

10. A storage medium, characterized in that: The storage medium stores a computer program, and the computer program is configured to implement the method according to any one of claims 1 to 7 when executed.

Images