Display method, graphical interface and associated apparatus

Abstract

Disclosed in the present application are a display method, a graphical interface, and a related apparatus. The method comprises: detecting an operation which acts on a first interface element to start a first application; displaying an icon starting animation and a starting page animation, wherein the icon starting animation comprises the process of gradually changing from the first interface element to an icon starting page, and the starting page animation comprises the process of gradually changing from a first image to a first page; and displaying a second image of the starting page animation at a first moment, and then, displaying a window starting animation at a second moment, wherein the window starting animation comprises the process of gradually changing from a third image to a second page of the first application, the content of the third image comprises the content of the second image, the content of the first page is the same as that of the second page, and the content of the second page comprises the content of the third image. It can be seen that after a user triggers the starting of an application, the user can view a starting animation of the gradual transition from an interface element to an application window, thereby avoiding excessively abrupt picture switching, and improving the visual experience of the user.

Description

Display method, graphic interface and related device

[0001] This application claims priority to the Chinese patent application with application number 202410334858.5 filed with the State Intellectual Property Office of China on March 21, 2024, and priority to the Chinese patent application with invention name “Display method, graphic interface and related devices”, as well as priority to the Chinese patent application with application number 202410387359.2 filed with the State Intellectual Property Office of China on March 30, 2024, and priority to the Chinese patent application with invention name “Display method, graphic interface and related devices”, all of which are incorporated by reference into this application. Technical Field

[0002] The present application relates to the field of terminals, and in particular to display methods, graphical interfaces, and related devices. Background Art

[0003] To provide users with a better visual experience, an app often displays a startup animation when it starts, where the app window expands from small to large. However, this animation requires the app window to be ready. In other words, if the app window isn't ready, the animation won't appear. Therefore, if the app window isn't ready in time when the app starts, the animation might disappear or the user might wait a long time before seeing it, impacting the user's visual experience.

[0004] Therefore, how to improve the above situation that occurs when starting an application is a problem that needs to be solved urgently. Summary of the Invention

[0005] The present application provides a display method, a graphical interface and related devices, which realize that when starting an application, the gap before the display window startup animation is filled by displaying icon startup animation and startup page animation, thereby improving the user's visual experience.

[0006] In a first aspect, an embodiment of the present application provides a display method, the method comprising: an electronic device detects a first operation acting on a first interface element, the first operation being used to start a first application; in response to the first operation, the electronic device displays a first startup animation and a second startup animation, the first startup animation comprising a process of gradually changing from the first interface element to the icon startup page, the second startup animation comprising a process of gradually changing from the first image to the first page, wherein the content of the first page comprises the content of the first image, and the position and size of the image frames of the first startup animation and the second startup animation at the same moment are the same; at a first moment, the electronic device displays the second image of the second startup animation; at a second moment, the electronic device displays a window startup animation, the second moment being located after the first moment, the window startup animation comprising a process of gradually changing from a third image to the second page of the first application, wherein the content of the first page and the second page are the same, the content of the second page comprises the content of the third image, and the content of the third image comprises the content of the second image.

[0007] By implementing the method provided in the first aspect, the icon startup animation can be started to make a transition before the window startup animation is displayed, so as to avoid the user having to wait too long before seeing the response of the electronic device after starting the application. In addition, in order to avoid the abrupt switch between the icon startup animation and the window startup animation, the startup page animation can be displayed before the window startup animation is displayed, so as to achieve the animation effect of gradually transitioning the display interface elements to the content in the application window during the process of starting the application, thereby enhancing the user's visual experience.

[0008] In combination with the first aspect, in one implementation, the first startup animation includes a change process in which screen transparency increases, and the second startup animation includes a change process in which screen transparency decreases.

[0009] It can be seen that the transparency of the icon startup animation gradually increases, which can make the icon startup animation gradually disappear during the playback process, and the transparency of the startup page animation gradually decreases, which can make the startup page animation gradually appear during the playback process, thereby visually showing the effect of the interface elements gradually transitioning to the application startup page.

[0010] In combination with the first aspect, in one implementation, a first startup animation is displayed on a first layer, and a second startup animation is displayed on a second layer; wherein, the first layer is above the second layer, and the first startup animation includes a process of increasing screen transparency; or, the first layer is below the second layer, and the second startup animation includes a process of decreasing screen transparency.

[0011] In other words, you can use the up-down relationship of layers, combined with the transparency change of an animation, to achieve the effect that the icon startup animation gradually disappears during playback and the startup page animation gradually appears during playback.

[0012] In combination with the first aspect, in one implementation, the window startup animation is displayed on a third layer, and the third layer is located above the first layer and the second layer.

[0013] In this way, when the electronic device displays the window startup animation, the icon startup animation and the startup page animation in the lower layer can be blocked to complete the startup of the application.

[0014] In combination with the first aspect, in one implementation, the position, size, and display content of the image frames of the second startup animation and the window startup animation at the same moment are the same.

[0015] That is to say, when the window startup animation is displayed, the startup page animation can remain displayed, and the image frame position, size and display content of the startup page animation and the window startup animation at the same time are the same, so that when the window startup animation appears, it can continue to play based on the startup page animation to ensure a smooth transition of the screen.

[0016] In combination with the first aspect, in one implementation, during the display process of the second startup animation and the window startup animation, the displayed content gradually increases and the size of the displayed content gradually increases.

[0017] The window startup animation of the startup page animation gradually increases the displayed content during the display process, and the size of the displayed content gradually changes, so that the startup animation displayed by the electronic device can include a screen magnification effect of gradually transitioning from the size of the application icon to the page size.

[0018] In combination with the first aspect, in one implementation, the method also includes: in response to the first operation, the electronic device starts drawing the application window of the first application; after the electronic device displays the first startup animation and the second startup animation, before displaying the window startup animation, the method also includes: the electronic device completes the drawing of the application window of the first application.

[0019] The application window of the first application may be drawn by the first application in the electronic device.

[0020] It can be seen that since it takes a certain amount of time to prepare the application window of the first application, before the application window is ready, the icon startup animation and the startup page animation can be displayed to fill the gap before the window startup animation is displayed.

[0021] In combination with the first aspect, in one implementation, the first page is an application startup page image preset by the first application, or the first page is drawn by the electronic device based on the first information of the first application, or the first page is a screenshot of the page of the first application before it last exited to the background, or the first page is a screenshot of the main page of the first application.

[0022] In combination with the first aspect, in one implementation, after the electronic device displays the fourth image of the window startup animation, the displayed window startup animation includes a process of changing from the fifth image to the third page, the content of the second page includes the content of the fourth image, the size of the fifth image is greater than or equal to the size of the fourth image, the content of the third page includes the content of the fifth image, the third page is the main page of the first application, and the second page and the third page are different.

[0023] That is, when the electronic device displays the window startup animation corresponding to the application window, the page displayed in the window startup animation may change, so that when the application is completed, the main page of the application can be finally displayed.

[0024] In combination with the first aspect, in one implementation, before the electronic device detects the first operation, the first application is not running in the background of the electronic device, and after the window startup animation ends, the method also includes: the electronic device displays the main page of the first application in the application window of the first application; or, before the electronic device detects the first operation, the first application is running in the background of the electronic device, and after the window startup animation ends, the method also includes: the electronic device displays the page displayed by the first application before it last retreated to the background in the application window of the first application.

[0025] That is to say, the first operation applied to the first interface element can be used to implement a cold start or a hot start of an application. If it is used to implement a cold start of an application, then after the window startup animation ends, the electronic device can display the main page of the first application. If it is used to implement a hot start of an application, then after the window startup animation ends, the electronic device can display the page that the first application was displayed before it last retreated to the background.

[0026] In combination with the first aspect, in one implementation, the first interface element includes a first foreground layer and a first background layer, the icon startup page includes a second foreground layer and a second background layer, and before the electronic device displays the first startup animation, the method also includes: the electronic device enlarges the first foreground layer based on the first ratio to obtain the second foreground layer; the electronic device enlarges the first background layer based on the second ratio to obtain the second background layer, wherein the size of the second background layer is the same as the size of the first page; the electronic device generates an image frame of the first startup animation based on the second foreground layer and the second background layer; the first startup animation is used to show the process of enlarging the first foreground layer to the second foreground layer, and the process of enlarging the first background layer to the second background layer.

[0027] It can be seen that the first interface element is split into a foreground layer and a background layer to obtain the foreground layer and the background layer in the image frame of the first startup animation respectively. The first startup animation displayed by the electronic device may include a process of separately enlarging the foreground layer and the background layer in the first interface element, thereby avoiding the problem of image distortion during the enlargement of the first interface element as a whole, and also realizing a smooth transition from the first interface element to the application page in appearance.

[0028] In conjunction with the first aspect, in one implementation, the first ratio is different from the second ratio.

[0029] That is to say, in the first startup animation, the magnification ratios of the foreground layer and the background layer of the first interface element are different, which can make the picture magnification effect in the first startup animation more vivid and rich.

[0030] In combination with the first aspect, in one implementation, the width of the first interface element after being magnified using the first ratio is equal to the width of the second background layer.

[0031] That is to say, in the icon startup animation displayed by the electronic device, the foreground layer of the first interface element can always maintain a relatively large display size, making the animation display effect more beautiful.

[0032] In combination with the first aspect, in one implementation, the icon startup page includes a second foreground layer and a second background layer. Before the electronic device displays the first startup animation, the method also includes: the electronic device enlarges the first interface element based on a third ratio to obtain the second foreground layer; the electronic device generates an image frame of the first startup animation based on the second foreground layer and the second background layer, wherein the second background layer includes a first picture, the size of the first picture is the same as the size of the first page, and the first startup animation is used to show the process of enlarging the first interface element to the second foreground layer, as well as the appearance and enlargement process of the first picture.

[0033] That is to say, when the electronic device detects that the user acts on the first interface element to launch the first application, the icon startup animation displayed by the electronic device may include the enlargement process of the first interface element and the enlargement process of the newly added background image, thereby avoiding the problem of image distortion of the first interface element as a whole during the enlargement process, and also realizing a smooth transition from the first interface element to the application page in appearance.

[0034] In combination with the first aspect, in one implementation, the first picture is a solid color background picture of a first color, and the first color includes any one of the following situations: the first color is a preset color, the first color is a color contained in the first interface element, or the color value of the first color is the color value * coefficient of the color contained in the first interface element; or, the first picture is a gradient background picture that transitions from the second color to the third color, wherein the second color and / or the third color is obtained based on the color contained in the first interface element; or, the first picture includes a first area, a second area and a third area, the dividing line between the first area and the second area is the upper boundary of the second foreground layer, the dividing line between the second area and the third area is the lower boundary of the second foreground layer, the color of the first area is the fourth color contained in the upper boundary of the first interface element, the color of the second area is the fifth color contained in the lower boundary of the first interface element, and the color contained in the third area is a gradient color transitioning from the fourth color to the fifth color.

[0035] Among them, the first picture can be a solid color background picture or a gradient background picture, or a partial area can be displayed as a solid color and a partial area can be displayed as a gradient. Among them, the solid color background picture can mean that the picture of the first startup animation is more neat and clean, and the gradient background picture can make the picture of the first startup animation richer and more vivid. Displaying partial areas as solid colors and partial areas as gradients can make the foreground and background colors of the icon startup page more harmonious and unified.

[0036] In combination with the first aspect, in one implementation, the width of the second foreground layer is equal to the width of the second background layer.

[0037] That is to say, in the icon startup animation displayed by the electronic device, the first interface element can always maintain a relatively large display size, making the animation display effect more beautiful.

[0038] In combination with the first aspect, in one implementation, the electronic device generates image frames of the first startup animation based on the second foreground layer and the second background layer, specifically including: the electronic device generates image frames of the first startup animation by setting animation properties of the second foreground layer and the second background layer, and the animation properties of the image frames displayed at different times of the first startup animation are different, and the animation properties include one or more of the following: displacement, scaling, cropping, rounded corners or transparency.

[0039] In combination with the first aspect, in one implementation, before the electronic device displays the first startup animation, the method further includes: the electronic device drawing the first page.

[0040] That is to say, the electronic device can separate the drawing of the first page from the multiple tasks of application startup in advance. In this way, the electronic device can draw the first page with the same content as the application startup page in advance before the application window is ready, so that it can display the startup page animation in parallel with the icon startup animation, avoiding the sudden switch from the application icon to the application startup page after the application window is ready, reducing the visual jump of the screen, and achieving a smooth transition from the application icon to the application startup page.

[0041] In combination with the first aspect, in one implementation, before the electronic device displays the window startup animation, the method also includes: the electronic device passes the animation attributes of the second startup animation to the application window of the first application, the animation attributes including one or more of the following: displacement, scaling, cropping, rounded corners or transparency; the electronic device draws the image frame of the window startup animation according to the animation attributes of the second startup animation.

[0042] In this way, in the window startup animation displayed by the electronic device, the enlargement process of the application window can maintain the enlargement process of the icon in the icon startup animation, or the enlargement process of the first page in the startup page animation continues to change.

[0043] In combination with the first aspect, in one implementation, the second startup animation stops displaying when the electronic device displays the window startup animation.

[0044] In this way, the power consumption of the electronic device can be reduced, and the workload of the electronic device when displaying the startup animation can be reduced.

[0045] In combination with the first aspect, in one implementation, during the process of the electronic device displaying the first startup animation and the second startup animation, the method also includes: the electronic device detects a second operation; the second operation is used to exit the first application; in response to the second operation, the electronic device plays back the image frames in the displayed first startup animation and the second startup animation, or the electronic device continues to display M frames of the first startup animation and the second startup animation, and then plays back the image frames in the displayed first startup animation and the second startup animation, and in the M frames of the image that continue to be displayed, as time goes by, the playback speed of the M frames of the image gradually decreases, and the playback speed of the first L frames of the image played back gradually increases.

[0046] During the process of the electronic device displaying the first startup animation, the electronic device can also detect the user's interruption of the first startup animation, and replay the displayed image frame to realize the display of the exit animation during the application exit process, or first start playing the first startup animation, and then replay the displayed image frame in reverse. In this way, it can avoid the occurrence of animation mutations after the user interrupts the animation, so that the animation can transition smoothly and improve the fluency of the animation.

[0047] In combination with the first aspect, in one implementation, it is characterized in that, in the process of the electronic device displaying the first startup animation, the second startup animation and the window startup animation, the method also includes: when the electronic device displays the sixth image in the first startup animation, the seventh image in the second startup animation, and the eighth image in the window startup animation, the electronic device detects a second operation, and the second operation is used to exit the first application; in response to the second operation, the electronic device displays the first exit animation, the second exit animation and the third exit animation, the first exit animation includes a process of changing from the sixth image to the first interface element, the second exit animation includes a process of changing from the seventh image to the first image, and the third exit animation includes a process of changing from the eighth image to the third image.

[0048] In this way, the electronic device can switch from the startup animation to the exit animation based on the user's operation of exiting the application, and display the zooming process from the application page to the application icon, thereby improving the user's visual experience.

[0049] In combination with the first aspect, in one implementation, during the process of the electronic device displaying the first startup animation and the second startup animation, the method also includes: when the electronic device displays the ninth image in the first startup animation and the tenth image in the second startup animation, the electronic device detects a third operation, and the third operation is a sliding operation; when the third operation is the operation of pressing and holding the screen and sliding up, the electronic device can display the first exit animation and the second exit animation as the screen is pressed and slid up, the first exit animation includes the process of changing from the ninth image to the first interface element, and the second exit animation includes the process of changing from the tenth image to the first image; or when the third operation is the operation of pressing and holding the screen and sliding down, the electronic device can display the process of gradually changing from the ninth image to the icon startup page, and the process of gradually changing from the tenth image to the first page as the screen is pressed and slid down.

[0050] In this way, the electronic device controls the display of the startup animation based on the user's sliding operation, and flexibly changes the display direction of the image frame in the current startup animation based on the direction of the user's sliding.

[0051] In combination with the first aspect, in one implementation, the first interface element includes any one of the following: an application icon, a service card, a widget, a notification bar, and a historical task in a multitasking interface.

[0052] In combination with the first aspect, in one implementation, the first startup animation and the second startup animation are created by a system unit in the electronic device, and the system unit is different from the first application.

[0053] It can be seen that the display method provided in the embodiment of the present application can avoid users waiting for a long time to view the response made by the application startup by adding an icon startup animation and a startup page animation by the system before displaying the application window provided by the application, thereby visually speeding up the application startup speed.

[0054] In a second aspect, an embodiment of the present application provides an electronic device comprising a memory, one or more processors, and one or more programs; when the one or more processors execute the one or more programs, the electronic device implements the method described in the first aspect or any one of the implementation methods of the first aspect.

[0055] In a third aspect, an embodiment of the present application provides a computer-readable storage medium comprising instructions, which, when executed on an electronic device, causes the electronic device to execute the method described in the first aspect or any one of the implementations of the first aspect.

[0056] In a fourth aspect, an embodiment of the present application provides a computer program product, which, when executed on a computer, enables the computer to execute the method described in the first aspect or any one of the implementations of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0057] FIG1 is a schematic diagram of an application startup page provided in an embodiment of the present application;

[0058] 2A-2G show some user interfaces involved in the startup animation displayed when the electronic device 100 according to an embodiment of the present application starts an application;

[0059] 3A-3I show other user interfaces involved in the startup animation displayed when the electronic device 100 according to an embodiment of the present application starts an application;

[0060] FIG4 is a schematic diagram of an icon startup page generated by the electronic device 100 according to an embodiment of the present application;

[0061] FIG5 is a schematic diagram of the relationship between the icon layer, the startup page layer, and the application window layer provided in an embodiment of the present application;

[0062] FIG6 is a schematic diagram of the boundaries of multiple frames of images involved in the startup animation provided in an embodiment of the present application;

[0063] FIG7 is a schematic diagram of multiple frames of an icon startup animation, a startup page animation, and a window startup animation provided in an embodiment of the present application;

[0064] FIG8 is a schematic diagram of an electronic device 100 generating an image frame corresponding to a time T4 for an icon startup animation according to an embodiment of the present application;

[0065] 9A-9D are related user interfaces involved when the electronic device 100 starts an application through a service card according to an embodiment of the present application;

[0066] 10A-10G are user interfaces displayed when the electronic device 100 detects a user exiting an application after launching the application according to an embodiment of the present application;

[0067] FIG11 shows image frames corresponding to the icon exit animation and the window exit animation generated by the electronic device 100 according to an embodiment of the present application at times T10-T16;

[0068] 12A-12E and 13A-13E are related user interfaces when the electronic device 100 according to an embodiment of the present application detects a user exiting an application during displaying a startup animation;

[0069] FIG14 is a block diagram of the software structure of the electronic device 100 provided in an embodiment of the present application;

[0070] FIG15 is a schematic diagram of a spring curve provided in an embodiment of the present application;

[0071] FIG16 is a diagram illustrating the interaction of internal modules of the electronic device 100 that displays a startup animation when an application is started, according to an embodiment of the present application;

[0072] FIG17 is a schematic diagram of a flow chart of a display method provided in an embodiment of the present application;

[0073] FIG18 is a schematic diagram of generating an icon startup page according to an embodiment of the application;

[0074] FIG19 is a schematic diagram of a process for generating an icon startup page using the color of a first interface element according to an embodiment of the present application;

[0075] FIG20 is a schematic diagram of four endpoints for extracting the color of a first interface element provided in an embodiment of the present application;

[0076] Figures 21 to 25 are various schematic diagrams of the icon startup page provided in embodiments of the present application;

[0077] FIG26 is a timing comparison diagram of an application startup method and an application startup method provided in an embodiment of the present application;

[0078] FIG27 is a diagram illustrating an internal module interaction of the electronic device 100 according to an embodiment of the present application, in which an exit animation is displayed after the user interrupts the application startup process;

[0079] FIG28 is a schematic flow chart of another display method provided in an embodiment of the present application;

[0080] FIG29 is a schematic diagram of the hardware structure of the electronic device 100 provided in an embodiment of the present application. DETAILED DESCRIPTION

[0081] The following is a clear and detailed description of the technical solutions in the embodiments of the present application in conjunction with the accompanying drawings. In the description of the embodiments of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in the text is only a description of the association relationship between related objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0082] In the following, the terms "first" and "second" are used for descriptive purposes only and should not be understood to imply or suggest relative importance or implicitly indicate the number of the technical features indicated. Therefore, the features defined as "first" and "second" may explicitly or implicitly include one or more of the features. In the description of the embodiments of this application, unless otherwise specified, "plurality" means two or more.

[0083] The term "user interface (UI)" in the following embodiments of this application refers to a medium interface for interaction and information exchange between an application or operating system and a user, which realizes the conversion between the internal form of information and the form acceptable to the user. The user interface is a source code written in a specific computer language such as Java and extensible markup language (XML). The interface source code is parsed and rendered on an electronic device and finally presented as content that the user can recognize. The commonly used form of user interface is graphical user interface (GUI), which refers to a user interface related to computer operations that is displayed in a graphical manner. It can be a visual interface element such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets, etc. displayed on the display screen of an electronic device.

[0084] An embodiment of the present application provides a display method, which can detect a first operation performed by a user on a first interface element, the first operation is used to start a first application, and display an icon startup animation and a startup page animation, wherein the icon startup animation includes a process of gradually changing from the first interface element to the icon startup page, and the startup page animation includes a process of gradually changing from a first image to a first page, the content of the first page may include the content of the first image, and the second image of the startup page animation is displayed at a first moment. Thereafter, a window startup animation can be displayed at a second moment, and the window startup animation includes a process of gradually changing from a third image to the second page of the first application; wherein the content of the third image may include the content of the second image, the content of the first page and the second page are the same, and the content of the second page may include the content of the third image.

[0085] The icon startup animation includes a change process of increasing screen transparency, and / or the startup page animation includes a change process of decreasing screen transparency.

[0086] Exemplarily, the first interface element may refer to an application icon, a service card, a widget, a notification bar, a historical task in a multitasking interface, or the like.

[0087] In this embodiment of the present application, there are two situations in which application startup may occur:

[0088] 1) Application cold start

[0089] For example, if the electronic device detects that there is no process of the application in the background when the application is started, the system will recreate a new process and assign it to the application. This startup method is called a cold start.

[0090] For example, launching an app for the first time after installation, or launching an app after clearing its background data, are both considered cold starts.

[0091] 2) Application hot start

[0092] For example, if the electronic device detects that a process of the application exists in the background when the electronic device detects an operation to start the application, the system does not need to recreate a new process to assign to the application. This startup method is called a hot start.

[0093] For example, when an application has been opened and the electronic device returns to the desktop or other applications through the user pressing the back key, home key, etc., and the application is started again within a preset time, the startup is considered an application hot start.

[0094] The first page can have the same content as the first application's launch page. The application launch page is the first page displayed after the application is launched. This page can exist in the following situations:

[0095] Case 1: The application startup page is preset by the application in advance

[0096] Application developers can pre-set the application startup page image to be displayed when the application is started. In this way, when the application is started, the electronic device can directly obtain the application startup page image from the resources corresponding to the application and use it as the first page to play the startup page animation.

[0097] In an embodiment of the present application, the pre-set application startup page image can be consistent with the first frame displayed after the application is started.

[0098] For example, the resources corresponding to the application can be obtained by using the resource identifier corresponding to the application through the PackageMangerService interface.

[0099] Case 2: The application startup page is drawn based on the relevant information of the application

[0100] The application startup page may be drawn by the electronic device according to relevant information of the application.

[0101] The relevant information may include: application icon, application name, application slogan, splash screen background color, application brand image, etc. In this way, when the application is started, the electronic device can obtain the relevant information from the resources corresponding to the application, and then draw the first page according to the preset rules, thereby playing the startup page animation.

[0102] The preset rules may indicate the position, size, layout, etc. of the relevant information drawn on the page.

[0103] In an embodiment of the present application, the relevant information and the preset rules may be consistent with the relevant information and the preset rules in the first frame content displayed after the application is started.

[0104] For example, the application-related information can be obtained through resource tags such as Window_windowSplashScreenBrandingImage, Window_windowSplashScreenBackground, Window_windowSplashScreenIconBackgroundColor, and Window_windowSplashscreenContent, and then the position information corresponding to each element can be obtained by reading the corresponding splash_screen_view.xml file to draw the first page using the application-related information.

[0105] Case 3: The app launch page is a screenshot of the default home page displayed when the app is first opened

[0106] Considering that some applications may not have pre-set application launch page images, or may not be able to obtain relevant application information to draw the application launch page, the electronic device can save a screenshot of the default home page displayed when the application is first opened after the application is first launched, and use it as the first page. In this way, the next time the application is cold-started, the launch page animation can be played based on the home page screenshot, showing the animation effect of the application icon gradually transitioning to the application home page.

[0107] In an embodiment of the present application, the main page screenshot may be consistent with the first frame displayed after the application is started.

[0108] Case 4: The app launch page is a screenshot of the page before the app last exited to the background

[0109] If the application is running in the background and the user is detected to start the application, after the electronic device hot-starts the application, the page displayed is the page that the application was displayed before it last went to the background. Therefore, the application startup page may also refer to a screenshot of the page before the application last went to the background. After the electronic device detects the user's operation of starting the application, it can gradually display the application icon to the page that was displayed before the application last went to the background.

[0110] For example, each time an application exits, it can take a screenshot of the application interface and store the screenshot information in a designated storage directory. In the application hot start scenario, if you need to obtain the first page, you can access the screenshot in the designated storage directory through the interface provided by PackageManagerService and use it as the first page to draw the first page. The above methods for obtaining screenshots of the main page will not be further described.

[0111] In an embodiment of the present application, the page screenshot may be consistent with the first frame displayed after the application is started.

[0112] In some implementations, the above cases 1-3 may be application startup pages used during a cold start of the application, and case 4 may be application startup pages used during a hot start of the application. It is understood that the above cases 1-3 may also be application startup pages used during a hot start of the application, and the above case 4 may also be application startup pages used during a cold start of the application, and this embodiment of the application does not limit this.

[0113] For example, FIG1 takes the launched application "Game Center" as an example, and shows a schematic diagram of the application launch page that may exist in the above-mentioned various situations. Among them:

[0114] The application startup page shown in (a) of FIG1 may be an implementation of an application startup page picture preset in advance for the application mentioned in the above-mentioned situation 1.

[0115] The application launch page shown in (b) of FIG1 may be an implementation of the application launch page drawn by the electronic device based on the application-related information mentioned in the above-mentioned scenario 2. For example, the background color of the application launch page may be determined according to the color of the application icon, the foreground pattern of the application launch page may be determined according to the pattern of the application icon, and the text displayed at the bottom of the application launch page may be determined according to the name of the application.

[0116] The application startup page shown in (c) of FIG1 may be an implementation of a screenshot of the home page displayed by default when the application mentioned in the above situation 3 is opened for the first time.

[0117] The application startup page shown in (d) of FIG1 can be an implementation method of taking a screenshot of the page before the application mentioned in the above situation 4 was last retreated to the background.

[0118] It is understandable that Figure 1 is only an illustrative example and does not constitute a limitation on the embodiments of the present application. In addition, in other embodiments of the present application, the startup page of the application may exist in other situations, and the embodiments of the present application do not limit the startup page of the application.

[0119] It can be seen that since the display of the window startup animation needs to wait for the drawing of the application window, this method can enable the icon startup animation to make the transition before displaying the window startup animation, so as to avoid the user waiting too long after starting the application to see the response of the electronic device. In addition, in order to avoid the abrupt switch between the icon startup animation and the window startup animation, before displaying the window startup animation, a first page with the same content as the application startup page can be drawn, and the process of the first page gradually appearing and gradually enlarging can be displayed to achieve the animation effect of the interface elements gradually transitioning to the application startup page, thereby enhancing the user's visual experience.

[0120] The following uses a screenshot of a game center application, an application icon as the first interface element, and a homepage displayed by default when the application is first opened as an example, and describes, in conjunction with Figures 2A to 2G, some user interfaces involved in displaying a startup animation when the electronic device 100 launches the application. The startup animation includes: icon startup animation, startup page animation, and window startup animation.

[0121] FIG. 2A illustrates an exemplary user interface 10 for an application menu on an electronic device 100 .

[0122] As shown in FIG2A , the user interface 10 may include a status bar 101, a time and weather indicator 102, and one or more application icons 103. The status bar 101 may include one or more signal strength indicators for mobile communication signals, one or more signal strength indicators for wireless high-fidelity (WiFi) signals, a battery status indicator, and a time indicator. The time and weather indicator 102 may be used to indicate the current time and weather type. The one or more application icons 103 may be used to display one or more application icons. The one or more application icons 103 may include an application icon 103A. The application icon 103A may be used to trigger the opening of a Game Center application.

[0123] For example, when the electronic device 100 detects a user operation on the application icon 103A, such as a click operation, in response to the operation, the electronic device 100 may open the game center application and display the startup animation of FIG. 2A-FIG .

[0124] It can be understood that Figures 2A-2G take the game center application as an example to show the relevant user interface displayed by the electronic device 100 when the application is started. In other embodiments of the present application, any other application can also be used as an example, and the animation displayed when the application is started is similar. The embodiments of the present application do not limit the applications started by the user.

[0125] For example, in addition to detecting an operation on an application icon to start an application, the electronic device 100 can also detect an operation on other interface elements to trigger the start of an application. For a description of other interface elements, please refer to the relevant content of Figures 9A-9D below, which will not be expanded here.

[0126] As shown in Figures 2A-2G, the startup animation can be displayed as a switching process from the application icon 103A shown in Figure 2A to the image 01 shown in Figure 2B, to the image 02 shown in Figure 2C, to the image 03 shown in Figure 2D, to the image 04 shown in Figure 2E, to the image 05 shown in Figure 2F, and to the image 06 shown in Figure 2G.

[0127] As can be seen from the startup animation shown in Figures 2A to 2G, the startup animation shows the process of the application icon enlarging from the icon size to the application page size, and, during the process of enlarging the application icon, it also shows the process of the content of the first page enlarging in parallel with the enlargement of the application icon. Moreover, during the process of enlarging the application icon and the first page, the content of the application startup page gradually appears, realizing a smooth transition from the application icon to the application startup page, and finally transitioning to the application startup page continuing to enlarge to the application page size, completing the startup of the application.

[0128] Exemplarily, in an internal implementation, after the electronic device 100 detects the user operation of launching the application shown in FIG2A , the electronic device 100 may trigger the launch of the application, start preparing the application window, and draw the application launch page, and then display the animation effect of the application icon and the application launch page being enlarged in parallel, that is, the icon launch animation and the launch page animation, and then after the application window is ready, display the window launch animation of the application window gradually enlarging, and the trend of the application window enlarging will continue to enlarge following the enlarging trend of the icon launch animation or the launch page animation, ensuring the transition from the icon launch animation or the launch page animation to the window launch animation.

[0129] In the process of displaying the startup animation on the electronic device 100, the icon startup animation and the startup page animation can be displayed in a superimposed manner. In addition, during the playback of the startup animation, the transparency of the icon startup animation can be gradually increased, and / or, as the first page is gradually enlarged, the transparency of the startup page animation can be gradually reduced.

[0130] Furthermore, if the application window is ready after displaying image 04 shown in FIG2E , the subsequent images shown in FIG2F - FIG2G may include a window startup animation corresponding to the application window. The window startup animation may include a process of further enlarging the content of the application startup page, and the screen content of the startup page animation may be consistent with the window startup animation.

[0131] Among them, since the screen content of the window startup animation is consistent with the startup page animation, after the window startup animation is displayed, a smooth transition from the startup page animation to the window startup animation can be achieved, which is displayed as an animation process in which part or all of the content of the application startup page is gradually enlarged to the size of the application page.

[0132] Among them, after the application window is ready, the electronic device 100 can directly switch the startup page animation to the window startup animation, or the electronic device 100 can continue to display the window startup animation overlaid on top of the icon startup animation and the startup page animation.

[0133] That is to say, the icon startup animation is a transition animation displayed in the process of the electronic device 100 preparing the application window, which avoids the user waiting for the electronic device 100 to prepare the application window after starting the application. In this way, a "click-to-respond" experience can be visually created for the user, which speeds up the startup speed of the application from the user's perspective. In addition, the first page can also be drawn in advance by the electronic device 100 before the application window is ready, so that it can display the startup page animation in parallel with the icon startup animation, avoiding the sudden switch from the application icon to the application startup page after the application window is ready, reducing the visual jump of the screen, and achieving a smooth transition from the application icon to the application startup page.

[0134] It is understandable that the startup animation displayed by the electronic device 100 is not limited to the multi-frame images shown in Figures 2A to 2G. When the electronic device 100 starts an application, the startup animation displayed may also include more or fewer multi-frame images.

[0135] In an embodiment of the present application, when the electronic device 100 displays the window startup animation, the page that is initially displayed may be different from the page that is displayed when the application startup is completed, that is, the full-screen page is displayed. For example, if the "Game Center" application first displays a game-related promotional animation when it is started, and then displays the home page, then in the window startup animation that gradually enlarges the application window, the application window may first display the relevant screen of the promotional animation, and after the promotional animation is finished playing, the home page is displayed in the application window. In this case, the application startup page may refer to the first frame of the promotional animation.

[0136] In addition, it should be noted that, since the electronic device 100 displays the window startup animation after the application window is ready, the timing of displaying the window startup animation by the electronic device 100 is not limited to the above-mentioned example of displaying the window startup animation after the electronic device 100 displays image 04 shown in FIG2E . For example, if the electronic device 100 completes drawing the application window after displaying image 03 shown in FIG2D , image 04 shown in FIG2E can be drawn from the first frame of the window startup animation, image 05 shown in FIG2F can be drawn from the second frame of the window startup animation, and image 06 shown in FIG2G can be drawn from the third frame of the window startup animation.

[0137] In the embodiment of the present application, as can be seen from Figures 2A to 2D , the icon activation animation shows the process of separately enlarging the foreground layer and background layer of the application icon 103A shown in Figure 2A . The foreground layer of the application icon 103A is enlarged proportionally, while the background layer of the application icon 103A gradually enlarges from a quadrilateral with equal width and height to a quadrilateral with a width smaller than height.

[0138] It can be seen that the icon startup animation shown in FIG. 2A to FIG. 2G is suitable for an application icon that is a layered icon that can be split into a foreground layer and a background layer.

[0139] In another possible implementation, in the icon startup animation displayed by the electronic device 100, the foreground layer and the background layer of the application icon may also be maintained as a whole and scaled up in equal proportions.

[0140] The following takes the application as a music application, the first interface element as the application icon, and the application startup page as an application startup page picture preset in advance as an example, and combines Figures 3A-3I to describe the other user interfaces involved in displaying the startup animation when the electronic device 100 starts the application.

[0141] 3A shows an exemplary user interface 10 for an application menu on the electronic device 100. For a detailed description of the user interface 10, please refer to the relevant content in FIG2A and will not be repeated here.

[0142] As shown in Figure 3A, the one or more application icons 103 in the user interface 10 may further include an application icon 103B. The application icon 103B may be used to trigger the opening of a music application.

[0143] For example, when the electronic device 100 detects a user operation on the application icon 103B, such as a click operation, in response to the operation, the electronic device 100 may open the music application and display the startup animation of FIG. 3A to FIG. 3G .

[0144] It can be understood that Figures 3A-3G take the music application as an example to show the relevant user interface displayed by the electronic device 100 when the application is started. In other embodiments of the present application, any other application can also be used as an example, and the animation displayed when the application is started is similar. The embodiments of the present application do not limit the applications started by the user.

[0145] For example, in addition to detecting an operation on an application icon to start an application, the electronic device 100 can also detect an operation on other interface elements to trigger the start of an application. For a description of other interface elements, please refer to the relevant content of Figures 9A-9D below, which will not be expanded here.

[0146] As shown in Figures 3A-3G, the startup animation can be displayed as a switching process from the application icon 103B shown in Figure 3A to the image 11 shown in Figure 3B, to the image 12 shown in Figure 3C, to the image 13 shown in Figure 3D, to the image 14 shown in Figure 3E, to the image 15 shown in Figure 3F, and to the image 16 shown in Figure 3G.

[0147] As can be seen from the startup animation shown in Figures 3A to 3G, the startup animation shows the process of the application icon gradually enlarging from the icon size to the application page size, and, in the process of enlarging the application icon, it also shows the process of part or all of the content of the first page enlarging in parallel with the enlargement of the application icon. In addition, in the process of enlarging the application icon and the first page, the application icon gradually disappears and the application startup page gradually appears, achieving a smooth transition from the application icon to the application startup page, and finally transitioning to the application startup page continuing to enlarge to the application page size, completing the startup of the application.

[0148] In the internal implementation, after the electronic device 100 detects the user operation of starting the application shown in Figure 3A, the electronic device 100 can trigger the startup of the application, start preparing the application window, and draw the application startup page, and then display the animation effect of the application icon and the application startup page being enlarged in parallel, that is, the icon startup animation and the startup page animation, and then after the application window is ready, display the window startup animation of the application window gradually enlarging, and the trend of the application window enlarging will continue to enlarge following the enlargement trend of the icon startup animation or the startup page animation, ensuring the transition from the icon startup animation or the startup page animation to the window startup animation.

[0149] Exemplarily, during the process of displaying the startup animation on the electronic device 100, the icon startup animation and the startup page animation may be displayed in a superimposed manner. In addition, during the playback of the startup animation, the transparency of the icon startup animation may be gradually increased, and / or the transparency of the startup page animation may be gradually decreased.

[0150] Furthermore, if the application window is ready after displaying image 13 shown in FIG3D , the subsequent images shown in FIG3E - FIG3G may include a window startup animation corresponding to the application window. The window startup animation may include the process of further enlarging the application startup page, and the screen content of the startup page animation may be consistent with the window startup animation.

[0151] Among them, since the screen content of the window startup animation is consistent with the startup page animation, after the window startup animation is displayed, a smooth transition from the startup page animation to the window startup animation can be achieved, which is displayed as an animation process in which the application startup page gradually enlarges to the application page size.

[0152] For example, after the application window is ready, the electronic device 100 may directly switch the startup page animation to the window startup animation, or the electronic device 100 may continue to display the window startup animation overlaid on top of the icon startup animation and the startup page animation.

[0153] It is understandable that the startup animation displayed by the electronic device 100 is not limited to the multi-frame images shown in Figures 3A to 3G. When the electronic device 100 starts an application, the startup animation displayed may also include more or fewer multi-frame images.

[0154] Furthermore, since the image 16 shown in FIG3G is not the main page of the application, after the electronic device 100 displays FIG3G , the electronic device 100 may display the user interface 40 shown in FIG3H , which may be used to display the main page of the music application, such as the music playback page.

[0155] It is understandable that, since the application launch page in the launch page animation shown in Figures 3A-3G is not the main page of the music application, after the application window is drawn, the content in the application window will switch from the application launch page to the main page, and the application will be finally started. Then, if the electronic device 100 has completed drawing the main page of the music application, that is, the user interface 40 shown in Figure 3H, during the process of displaying the window launch animation, the electronic device 100 can update the application launch page displayed in the application window to the main page during the process of displaying the window launch animation, that is, during the process of enlarging the application window, and display the process of the main page continuing to enlarge to the size of the application page.

[0156] For example, assuming that image 14 shown in Figure 3E is one of the frames in the window startup animation, if the electronic device 100 draws the main page of the application after displaying image 14 shown in Figure 3E, the electronic device 100 can switch the display content in the currently enlarged application window to the main page of the application, that is, the electronic device 100 can display image 15' shown in Figure 3I and continue to display the process of enlarging the main page until the size of the application window is enlarged to the size of the display area of ​​the electronic device 100, for example, displaying the user interface 40 shown in Figure 3H.

[0157] In addition, as can be seen from FIG. 3A to FIG. 3D , the icon startup animation shows the process of enlarging the application icon 103B shown in FIG. 3A , and the process of the background layer below the layer where the application icon 103B is located starting from nothing and then gradually enlarging.

[0158] It can be seen that the icon startup animation shown in FIG. 3A to FIG. 3G is applicable to the case where the application icon is a non-layered icon that cannot be separated into a foreground layer and a background layer.

[0159] In some embodiments, in the icon startup animation shown in Figures 3A-3D, the background layer that appears from nothing can also have a transparency transition animation. For example, during the transition from image 12 shown in Figure 3C to image 13 shown in Figure 3D, the transparency of the background layer in the icon startup animation gradually decreases. In this way, after the user clicks the icon to launch the application, in addition to being able to see the startup page animation gradually appear from nothing, the user can also see the icon gradually enlarged and the icon's background layer gradually reveal a continuously enlarging background board, and the background board gradually transitions to the shape of the application window. This can avoid sudden changes in the background layer during the icon startup animation and improve the visual effect.

[0160] Exemplarily, if the application icon acted upon by the user when the electronic device 100 launches an application, such as the application icon 103A shown in FIG2A , can be split into a foreground layer and a background layer, then the icon startup animation displayed by the electronic device 100 can be an animation process in which the foreground layer and the background layer of the icon shown in FIG2A-FIG2D are enlarged separately. If the application icon acted upon by the user when the electronic device 100 launches an application, such as the application icon 103B shown in FIG3A , cannot be split into a foreground layer and a background layer, then the icon startup animation displayed by the electronic device 100 can be an animation process in which the icon shown in FIG3A-FIG3D and the newly added background layer are enlarged separately.

[0161] It can be understood that when the electronic device 1000 starts an application, the application icon used by the user can be split into a foreground layer and a background layer, and the electronic device 1000 can also display the icon and the newly added background layer separately enlarged icon startup animation. The embodiment of the present application does not limit this.

[0162] To facilitate understanding of icon startup animation, startup page animation, and window startup animation, the following describes the relevant principles involved in icon startup animation, startup page animation, and window startup animation in conjunction with Figures 4, 5, 6, 7, and 8.

[0163] In short, the implementation principle of icon startup animation is: create an icon startup page based on the application icon, and create multiple frames of the icon startup animation by setting the animation properties of the icon startup page (displacement, scaling, transparency, rounded corners, cropping, etc.).

[0164] Similarly, the implementation principle of the startup page animation is: first obtain the first page, and create multiple frames of the startup page animation by setting the animation properties of the first page.

[0165] FIG. 4 is a schematic diagram of an icon startup page generated by the electronic device 100 .

[0166] For example, if the application icon is a layered icon, that is, the application icon can be split into a foreground layer and a background layer, the icon launch page created by the electronic device 100 can refer to the image A shown in (a) of Figure 4. The foreground layer of image A is obtained based on the foreground layer of the application icon, wherein the foreground layer of the application icon can be enlarged to obtain the foreground layer of image A, and the background layer of image A is obtained based on the background layer of the application icon, wherein the background layer of the application icon can be enlarged and cropped to obtain the background layer of image A. The size of image A is the same as the size of the application page displayed after the electronic device 100 completes the launch of the application.

[0167] Exemplarily, the magnification factor of the foreground layer of the application icon can be determined in the following manner: the magnification factor can make the width of the application icon the same as the width of the background layer of image A, or the length the same as the length of the background layer of image A after being magnified at the magnification factor.

[0168] In the embodiment of the present application, the width of the foreground layer of image A may be less than or equal to the width of the background layer of image A.

[0169] In this way, when the electronic device 100 displays the icon startup animation, the foreground layer of the application icon can maintain a relatively large size, which can provide the user with a better visual experience.

[0170] For example, if the application icon is a non-layered image, that is, the application icon cannot be split, the icon launch page created by the electronic device 100 may refer to the image B shown in (b) of Figure 4. The foreground layer of image B is the application icon magnified a certain number of times, and the background layer of image B is a preset image. The size of image B is the same as the size of the application page displayed after the electronic device 100 completes the application launch.

[0171] For example, in the foreground layer of image B, the magnification factor of the application icon can be determined based on the width of the background layer of image B. This magnification factor can ensure that, after the application icon is magnified at this magnification factor, its width is the same as the width of the background layer of image B. In this way, when the electronic device 100 displays the icon startup animation, the foreground layer of the application icon can maintain a relatively large size, thereby providing a better visual experience for the user.

[0172] In some embodiments, the foreground layer in image A or image B may be centered above the background layer.

[0173] In addition, it should be noted that if image A or image B is a rectangle with a width greater than its height, the magnification factor of the foreground layer of the application icon in image A should be such that after the application icon is magnified by the magnification factor, its height is the same as the height of the background layer of image A; the magnification factor of the application icon in image B should be such that after the application icon is magnified by the magnification factor, its height is the same as the height of the background layer of image B.

[0174] It is understandable that if the application icon is a layered icon, the icon startup page created by the electronic device 100 may also be the image B shown in (b) of FIG. 4 .

[0175] It can be seen that in the internal implementation, after the electronic device 100 detects the user's startup operation on the application icon, the electronic device 100 can generate an icon startup page based on the application icon, and obtain multiple images by setting the animation properties of the icon startup page. These multiple images are the multiple frames of images in the image startup animation.

[0176] Similarly, for the startup page animation, after the electronic device 100 detects the user's startup operation on the application icon, the electronic device 100 can draw the first page, which has the same display content as the application startup page. For example, the application startup page may refer to the application startup page shown in (a) or (b) or (c) or (d) in Figure 1, and then by setting the animation properties of the first page, multiple images are obtained. The multiple images are the multiple frames of images in the startup page animation.

[0177] In addition, during the process of the electronic device 100 displaying the icon startup animation and the startup page animation, if the application window is ready, the electronic device 100 can display the window startup animation corresponding to the application window.

[0178] For example, FIG5 is a schematic diagram of the layer relationship among the icon layer, the startup page layer, and the application window layer provided in an embodiment of the present application.

[0179] As shown in FIG5 , the electronic device 100 may display an icon startup animation in the icon layer, may display a startup page animation in the startup page layer, and may display a window startup animation in the application window layer.

[0180] As can be seen from Figure 5, the icon layer can be located below the launch page layer, and the launch page layer can be located below the application window layer. Among them, the application window layer can be located above the icon layer and the launch page layer. After the electronic device 100 prepares the application window, the application window can be displayed above the icon layer and the launch page layer, and the window startup animation corresponding to the application window can be played, making the window startup animation visible.

[0181] In addition, in conjunction with the images shown in Figures 2A-2D or Figures 3A-3D, it can be seen that during the process of displaying the icon startup animation and the startup page animation on the electronic device 100, the icon layer may have an animation with gradually increasing transparency, and / or the startup page layer may have an animation with gradually decreasing transparency. In this way, from the user's perspective, the transparency of the icon layer gradually increases, causing the image of the icon startup animation to gradually fade until it disappears, and the transparency of the startup page layer gradually decreases, causing the image of the startup page animation to gradually appear until it is fully displayed.

[0182] It is understandable that the startup page layer can also be located below the icon layer. Furthermore, in this case, the startup page layer can always be in a display state with a transparency of 0, and the icon layer can have an animation with gradually increasing transparency. In this way, from the user's perspective, it can still show the transition effect of the icon startup animation gradually disappearing and the startup page animation gradually appearing. Alternatively, the application window layer can also be located below the startup page layer. Alternatively, the icon layer can also be located above the application window layer. It can be seen that the layer relationship shown in Figure 5 is only an example, and the embodiment of the present application does not limit the layer relationship of the icon layer, the startup page layer, and the application window layer.

[0183] To ensure that the startup animation shows a smooth transition from the app icon to the app page, at the same time, the scaling property animation, displacement property animation, cropping property animation, rounded corner property animation and other property animations of the icon layer, startup page layer and application window layer should be consistent.

[0184] For example, FIG6 shows a schematic diagram of boundaries of multiple frames of images involved in starting an animation.

[0185] Figure 6 illustrates the boundaries of the seven frames involved in the startup animation from time T0 to T6. Time T0 corresponds to the moment when the electronic device 100 detects the user's startup operation on the application icon. The boundary corresponding to time T0 is the boundary of the application icon on the desktop. Time T6 and thereafter correspond to the moment when the electronic device 100 fully opens the application and displays the application page in full screen. The boundary corresponding to time T6 is the boundary of the application page.

[0186] In the internal implementation, the electronic device 100 can obtain multiple frames of images by setting the size, position, rounded corners, cropping and other properties of the icon startup page in the icon layer, so that the boundaries of the multiple frames of images are the boundaries of the multiple frames of images involved in T0-T6. Similarly, the electronic device 100 can obtain multiple frames of images by setting the size, position, rounded corners, cropping and other properties of the first page, so that the boundaries of the multiple frames of images are the boundaries of the multiple frames of images involved in T0-T6. In addition, after the electronic device 100 draws the application window at a certain node between T0-T6, for example, between T4-T5, it can set the size, position, rounded corners, cropping and other properties of the application window according to the boundary corresponding to T5-T6 to obtain multiple frames of images.

[0187] For example, the electronic device 100 displays the image frames corresponding to the icon startup animation and the startup page animation at T0-Tx (x=0, 1, 2, 3, 4, 5) in sequence. At the current time Tx+1, the application window is ready, and the electronic device 100 can start displaying the image frames corresponding to the window startup animation at Tx+1-T6 at time Tx+1.

[0188] It is understandable that the electronic device 100 can display one frame of the startup animation while drawing the image corresponding to the subsequent moment during the process of displaying the startup animation, or the electronic device 100 can first draw the multiple frames of images involved in the startup animation, and then directly display these multiple frames of images in chronological order during the process of displaying the startup animation.

[0189] FIG7 is a schematic diagram of multiple frames of an icon startup animation, a startup page animation, and a window startup animation provided in an embodiment of the present application.

[0190] 7 shows image frames corresponding to the icon startup animation, startup page animation, and window startup animation generated by the electronic device 100 at time T0-T6. The positions and sizes of these multiple image frames correspond to the positions and sizes of the frames shown at multiple moments in FIG.

[0191] As shown in Figure 7, assuming that the application window is drawn between T4 and T5, the icon startup animation may include multiple frames of images from T0 to T6, the startup page animation may include multiple frames of images from T0 to T6, and the window startup animation may include multiple frames of images from T5 to T6.

[0192] Exemplarily, the multi-frame images of the icon startup animation can always maintain the minimum transparency (alpha=1). The multi-frame images of the startup page animation can have a process of gradually decreasing transparency from large to small, for example, alpha changes from 0 to 1, wherein the transparency of the image frame corresponding to the startup page animation at time T0 is the largest and can be in a completely invisible state, and the transparency of the image frame corresponding to the startup page animation at time T6 is the smallest and can be in a completely visible state. At the same time, the image frames in the window startup animation and the image frames in the startup page animation can maintain the same transparency.

[0193] In the internal implementation, taking the application window being drawn between T4 and T5 as an example, the electronic device 100 can pass the animation properties of the startup page animation after T4, including parameters such as displacement, scaling, transparency, rounded corners, cropping, etc., to the application window, so that the window startup animation corresponding to the application window can maintain the same animation effect as the startup page animation.

[0194] It can be seen that image 01 in FIG2B can be the image frame in the icon startup animation and the image frame in the startup page animation at the T1 moment shown in FIG7 , and the image is obtained by superimposing the image frame according to the layer relationship shown in FIG5 , image 02 in FIG2C can be the image frame in the icon startup animation and the image frame in the startup page animation at the T2 moment shown in FIG7 , and the image is obtained by superimposing the image frame according to the layer relationship shown in FIG5 , image 03 in FIG2D can be the image frame in the icon startup animation and the image frame in the startup page animation at the T3 moment shown in FIG7 , and the image is obtained by superimposing the image frame according to the layer relationship shown in FIG5 , and image 04 in FIG2E 04 is the image obtained by superimposing the image frames in the icon startup animation and the image frames in the startup page animation at time T4 shown in Figure 7 according to the layer relationship shown in Figure 5. Image 05 in Figure 2F is the image obtained by superimposing the image frames in the icon startup animation, the image frames in the startup page animation, and the image frames in the window startup animation at time T5 shown in Figure 7 according to the layer relationship shown in Figure 5. Image 06 in Figure 2G is the image obtained by superimposing the image frames in the icon startup animation, the image frames in the startup page animation, and the image frames in the window startup animation at time T6 shown in Figure 7 according to the layer relationship shown in Figure 5.

[0195] It is understandable that during the application startup process, the first few frames of the startup animation may only display image frames of the icon startup animation, excluding image frames of the startup page animation. In this case, in the first few moments before the startup animation starts playing, the image frames of the startup page animation may not be drawn, or the transparency of the image frames of the startup page animation may be at the maximum value and be invisible.

[0196] Optionally, since the transparency of the image frame in the startup page animation gradually decreases during the playback of the startup animation until the transparency of the image frame drops to 0 and is in a fully visible state, if at a certain moment in T0-T6, such as moment T3, the image frame of the startup page animation is already in a fully visible state, the electronic device 100 may no longer draw or display the image frame in the icon startup page animation after moment T3. Preferably, while the startup animation is playing, the image frame in the startup page animation is in a fully visible state and blocks the image frame in the icon startup animation. The electronic device 100 can still continue to display the image frame in the icon startup animation. This can avoid restarting the process corresponding to the icon startup animation when the user exits the application during the playback of the startup animation, causing the icon exit animation to freeze.

[0197] Optionally, after the application window is drawn, the electronic device 100 may no longer draw or display the image frames in the startup page animation corresponding to the subsequent moment. In this way, the power consumption of the electronic device 100 can be reduced and the workload of the electronic device 100 when displaying the startup animation can be reduced.

[0198] It should be noted that the multiple frames of the startup animation shown in FIG7 are merely illustrative. In the actual application startup process, more or fewer image frames may be included. In addition, the timing of the completion of the application window drawing is not limited to the time between T4 and T5 shown in FIG7. For example, if the application window is drawn between T3 and T4, the window startup animation drawn by the electronic device 100 also includes the image frame corresponding to the T4 time, and the image frame is the same as the image frame in the startup page animation corresponding to the T4 time.

[0199] To facilitate understanding of the process of generating each frame of an image in the icon startup animation, FIG8 shows a schematic diagram of the electronic device 100 generating an image frame corresponding to the icon startup animation at time T4.

[0200] Among them, in an embodiment of the present application, for an attribute animation, the animation attributes that need to be calculated in a frame of an image include but are not limited to the X-direction scaling ratio (scaleX) and the Y-direction scaling ratio (scaleY) in the scale attribute, the X-direction displacement (translateX) and the Y-direction displacement (translateY) in the translate attribute, the cropping value (crop left), the cropping value (crop top), the cropping value (crop right), and the cropping value (crop bottom) from the left border in the cropping attribute, the transparency (alpha) attribute, and the rounded corner attribute (cornerRadius).

[0201] As can be seen from the schematic diagram shown in FIG8 , the image frame corresponding to the icon startup animation at time T4 is equivalent to scaling the foreground layer and the background layer of the application icon by a certain proportion.

[0202] Exemplarily, the magnification ratios of the foreground layer and the background layer may be the same or different. Preferably, the magnification ratios of the foreground layer and the background layer are different, so that a more beautiful visual magnification effect can be achieved during icon magnification.

[0203] For example, if the foreground layer and the background layer have different magnification ratios, the magnification ratio of the foreground layer can be such that, after the application icon is magnified using the magnification ratio, the width of the application icon after magnification is the same as the width of the magnified background layer, or the length of the application icon after magnification is the same as the length of the magnified background layer. In this way, the foreground layer of the application icon can be displayed at a maximum size during the icon startup animation.

[0204] It is understood that for an icon launch animation in which the application icon and the newly added background layer are enlarged separately, the enlargement ratio of the application icon in any frame of the icon launch animation can be such that the enlarged width of the application icon is the same as the width of the background layer, or the enlarged length of the application icon is the same as the length of the enlarged background layer. This ensures that the application icon can maintain a large display size as much as possible during the icon launch animation.

[0205] After obtaining the enlarged foreground and background layers, the corner radius is set according to cropping region 1, and the enlarged image is cropped and translated to obtain the image frame corresponding to time T4. Cropping region 1 is the boundary size of the startup animation corresponding to time T4.

[0206] In addition, it should be noted that when the background layer of the image frame is obtained by using the background layer of the application icon, the area of ​​the enlarged background layer of the application icon should exceed the range of the cropping area 1, and the background layer of the image frame is obtained by cropping the enlarged background layer using the cropping area 1. In this way, the edges of the image frame of the icon startup animation generated by the electronic device 100 will not have white edges, making the image displayed during the icon startup animation more beautiful.

[0207] It is understandable that FIG8 only focuses on describing the generation details of the image frame corresponding to the icon startup animation at time T4. The generation details of the image frames corresponding to other times are similar and will not be repeated here.

[0208] The above Figures 2A-2G, 3A-3I, 4, 5, 6, 7, and 8 describe the icon startup animation, startup page animation, and window startup animation involved when the electronic device 100 detects a user startup operation on an application icon.

[0209] In other embodiments of the present application, the electronic device 100 may also trigger the launch of an application and display an icon launch animation, a startup page animation, and a window launch animation in other ways. For example, the electronic device 100 may trigger the launch of an application and display an icon launch animation, a startup page animation, and a window launch animation by detecting an operation on an interface element such as a service card, a widget, a notification bar, or a historical task in a multitasking interface.

[0210] Among them, the interface elements for the operations are different, and the icon startup animations are different.

[0211] A service card is a form of interface display for an application. A service card is displayed on the desktop and is used to display important information about the application and provide some of the application's functions. The electronic device 100 can detect a user operation on the service card, such as a click operation, to trigger the opening of the application corresponding to the service card.

[0212] For example, when the electronic device 100 detects a user operation on a service card, triggering the launch of an application, the electronic device 100 can display an icon startup animation of the service card that gradually enlarges, and superimpose a startup page animation that enlarges in parallel with the service card on the icon startup animation, and the transparency of the startup page animation gradually decreases during the display process. Afterwards, after the application window is ready, the window startup animation continues to be displayed following the enlargement process of the startup page animation, completing the animation display during the application startup process.

[0213] Widgets can be considered as small application plug-ins, small tools that users can create or freely download, and they include various practical functions such as entertainment, work, and learning. For example, referring to FIG2A , the time and weather indicator 102 is a widget. Electronic device 100 can detect user actions on the widget, such as clicks, and trigger the opening of the application corresponding to the widget.

[0214] For example, when the electronic device 100 detects a user operation on a widget, triggering the launch of an application, the electronic device 100 can display an icon startup animation in which the widget gradually enlarges, and superimpose a startup page animation that enlarges in parallel with the widget on the icon startup animation, and the transparency of the startup page animation gradually decreases during the display process. Afterwards, after the application window is ready, the window startup animation continues to be displayed following the enlargement process of the startup page animation, completing the animation display during the application startup process.

[0215] The notification bar is used to push application messages, and the notification bar can be displayed in a drop-down menu or a lock screen interface, etc. The electronic device 100 can detect a user operation on the notification bar, such as a click operation, to trigger the opening of the application corresponding to the notification bar.

[0216] For example, when the electronic device 100 detects a user operation on the notification bar, triggering the launch of an application, the electronic device 100 can display an icon startup animation in the notification bar that gradually enlarges, and superimpose a startup page animation that enlarges in parallel with the notification bar on the icon startup animation, and the transparency of the startup page animation gradually decreases during the display process. Afterwards, after the application window is ready, the window startup animation continues to be displayed following the enlargement process of the startup page animation, completing the animation display during the application startup process.

[0217] The multitasking interface can be used to display one or more application history tasks, which can be displayed as screenshots of application pages that the user has opened in the past. The electronic device 100 can detect a user operation, such as a click operation, on one of the history tasks in the multitasking interface, and trigger the opening of the application corresponding to the screenshot.

[0218] For example, when the electronic device 100 detects a user operation on a historical task of one of the applications in the multitasking interface, triggering the launch of the application, the electronic device 100 can display an icon startup animation in which a screenshot of the application page is gradually enlarged, and superimpose a startup page animation that is enlarged in parallel with the screenshot on the icon startup animation, and the transparency of the startup page animation gradually decreases during the display process. Afterwards, after the application window is ready, the window startup animation continues to be displayed following the enlargement process of the startup page animation, completing the animation display during the application startup process.

[0219] Exemplarily, taking the service card as an example, FIG. 9A to FIG. 9D show the relevant user interfaces involved when the electronic device 100 launches an application through the service card.

[0220] As shown in FIG9A , the user interface 10 may include a service card 104. The service card 104 may be used to display songs played in a music application, and the electronic device 100 may detect user operations on the service card 104 to switch the playing song, pause the playing of a song, or start the playing of a song.

[0221] When the electronic device 100 detects a user operation on the service card 104, such as a click operation, in response to the operation, the electronic device 100 triggers the launch of the music application and displays the launch animation shown in Figures 9A-9D.

[0222] As shown in FIG. 9A to FIG. 9D , the startup animation may be displayed as a switching process from the service card 104 shown in FIG. 9A , to the image 21 shown in FIG. 9B , to the image 22 shown in FIG. 9C , and to the image 23 shown in FIG. 9D .

[0223] As can be seen from the startup animation shown in Figures 9A to 9D, the startup animation shows the process of the service card enlarging from the service card size to the application page size, and, in the process of enlarging the service card, the first page showing the same content as the application startup page follows the enlargement of the service card, and in the process of parallel enlargement, and, in the process of enlarging the service card and the first page, the application startup page gradually appears, realizing a smooth transition from the service card to the application startup page, and finally transitioning to the application startup page to continue to enlarge to the application page size, completing the startup of the application.

[0224] In the internal implementation, after the electronic device 100 detects the user operation of starting the application shown in Figure 9A, the electronic device 100 can trigger the startup of the application, start preparing the application window, and draw the first page, and then display the animation effect of the service card and the first page being enlarged in parallel, that is, the icon startup animation and the startup page animation. For example, the image 21 shown in Figure 9B is the image obtained by superimposing the image frames of the icon startup animation and the startup page animation at the same time. Then, after the application window is ready, the window startup animation of the application window is displayed, and the trend of the application window enlarging will continue to enlarge following the enlargement trend of the icon startup animation or the startup page animation. Assuming that the electronic device 100 completes the drawing of the application window after displaying the image 21 shown in Figure 9B, the image 22 shown in Figure 9C and the image 23 shown in Figure 9D can be the image frames of the window startup animation.

[0225] In addition, it can be seen from image 21 shown in Figure 9B that the image frame of the icon startup animation is composed of the foreground layer where the service card is located and a newly added solid color background layer. It can be seen that the icon startup animation shows the enlargement process of the service card 104, and the process of a newly added background layer enlarging from a size similar to the service card to the size of the application page.

[0226] It should be noted that, during the enlargement of the service card, the image frame of the icon startup animation can be drawn by removing the color of the edge pixels.

[0227] It is understandable that the startup animation displayed by the electronic device 100 is not limited to the multiple-frame images shown in Figures 9A to 9D above. The icon startup animation, startup page animation, and window startup animation can all include more or fewer image frames.

[0228] As can be seen from Figures 9A-9D, users can trigger the opening of an application through a service card, and a transition animation is displayed from the service card to the application page. This way, after the user launches the application, they can view the response made by the electronic device 100 to the user's operation of launching the application through the service card without having to wait for a long time, thus improving the user's visual experience.

[0229] In addition, it should be noted that when the user triggers the opening of an application through a service card, the electronic device 100 can generate an icon startup page based on the service card, and then generate multiple frames of an icon startup animation. Among them, if the service card can be divided into a foreground layer and a background layer, an icon startup page similar to image A shown in (a) of Figure 4 can be created, and an icon startup animation is generated through the icon startup page. If the service card cannot be divided, an icon startup page similar to image B shown in (b) of Figure 4 can be created, and an icon startup animation is generated through the icon startup page. The display effect of the icon startup animation can be seen in Figures 9A to 9D above.

[0230] It's understandable that if the service card can be split into a foreground layer and a background layer, an icon launch page similar to Image B shown in Figure 4 (b) can also be created, and the icon launch animation can be generated through this icon launch page. In addition, the principles for launching applications and displaying icon launch animations by acting on other interface elements are similar and will not be elaborated here.

[0231] The electronic device 100 can detect the user's operation of exiting the application and trigger the exit of the application. The electronic device 100 can display an exit animation when exiting the application. In addition, the electronic device 100 can display different exit animations based on the timing of the user's operation.

[0232] The following describes the relevant user interfaces involved when the electronic device 100 exits an application in conjunction with Figures 10A-10G, Figure 11, Figures 12A-12E, and Figures 13A-13E.

[0233] 10A-10G illustrate user interfaces displayed when the electronic device 100 detects a user exiting an application after launching the application.

[0234] 10A shows a user interface 20 displayed after the electronic device 100 completes the launch of an application. For example, the user interface 20 may be a home page displayed by default after the game center application is launched.

[0235] As shown in FIG10A , when the electronic device 100 detects a user's operation to exit an application, such as an upward swipe from the bottom of the user interface 20, the electronic device 100 may exit the game center application in response to the operation and display the exit animation shown in FIG10A to FIG10G during the process of exiting the application. The exit animation may include a window exit animation, a startup page exit animation, and an icon exit animation.

[0236] As shown in Figures 10A-10G, the exit animation can be displayed as the user interface 20 (image 06) shown in Figure 10A, to image 05 shown in Figure 10B, to image 04 shown in Figure 10C, to image 03 shown in Figure 10D, to image 02 shown in Figure 10E, to image 01 shown in Figure 10F, and to the application icon 103A shown in Figure 10G.

[0237] It can be seen from the exit animation shown in Figures 10A to 10G that the exit animation shows the transition process from the application page to the application icon on the desktop.

[0238] 2A to 2G , it can be seen that when the electronic device 100 starts the game center application, the electronic device 100 displays images 01 to 06 in chronological order, starting from the application icon 103A shown in FIG. 2A .

[0239] That is, if the electronic device 100 has completed the startup of the application and displays the home page of the application, and detects that the user has exited the application, the electronic device 100 can reversely display multiple frames of the startup animation displayed during startup.

[0240] In some embodiments, the electronic device 100 may also detect a user exiting an application during the process of displaying the startup animation. In this case, the electronic device 100 may reversely display multiple frames of the currently displayed startup animation to complete the display of the application's exit animation.

[0241] Furthermore, if the electronic device 100 detects the user's operation of exiting the application while displaying the startup animation, the operation at this time is equivalent to triggering the interruption of the exit animation. In order to ensure that the electronic device 100 can smoothly transition from the startup animation to the exit animation, the electronic device 100 can continue to play forward a few frames of the startup animation after detecting the user's operation of exiting the application, and then switch to the exit animation. And, optionally, in the process of the electronic device 100 continuing to play forward a few frames of the startup animation, the speed of the continued playback of the few frames of the startup animation can gradually slow down as time goes by. In this way, it is possible to avoid sudden changes in the animation after the user interrupts the animation, so that the animation can transition smoothly and the fluency of the animation is improved.

[0242] In some embodiments, if the electronic device 100 detects a user exiting an application while displaying other pages of the application, that is, after the electronic device 100 starts the application, the user can switch pages. When the home page of the application is switched to other pages, and then the user exiting the application is detected, then in response to the operation, the electronic device 100 can display an exit animation that gradually shrinks from the currently displayed page to disappear and switches to the desktop.

[0243] Furthermore, if the application icon of the application is displayed on the desktop switched by the electronic device 100, in addition to displaying the animation of gradually shrinking and disappearing the currently displayed page, the electronic device 100 can also display the animation of the application icon gradually switching to the desktop during the page shrinking process and returning to the desktop.

[0244] Optionally, the exit animation displayed by the electronic device 100 may further include a hand-following animation, that is, the first multiple frames of images in the exit animation displayed by the electronic device 100 may also follow the sliding trajectory when the user triggers the exit of the application to follow the hand movement. Taking the exit animation shown in Figures 10A to 10G as an example, if the sliding operation shown in Figure 10A is to slide to the upper left, then image 05 shown in Figure 10B and image 04 shown in Figure 10C can be positioned closer to the left side of the display screen relative to the current display. In this way, from a holistic perspective, the image frames in the exit animation will show that they first move to the left following the hand, and then move to the right toward the position of the application icon 103A shown in Figure 10G. In this way, the user's operational fun when exiting the application can be enhanced, and the user's visual experience can be improved.

[0245] As can be seen from Figures 10A-10G, whether after the startup animation ends or during the startup animation playback, if the electronic device 100 detects that the user exits the application, the electronic device 100 can directly display multiple frames of the currently playing startup animation in reverse.

[0246] In some embodiments, if the electronic device 100 detects an operation to exit the application and the application window has been drawn, the electronic device 100 can directly display the exit animation from the application window to the application icon, that is, the window exit animation and the icon exit animation, without displaying the animation related to the first page.

[0247] For example, the exit animation may have the following two situations:

[0248] Case 1: the first few frames of the exit animation may be image frames in a window exit animation in which the application window gradually shrinks, and the last few frames may be image frames in an icon exit animation in which the application icon gradually shrinks.

[0249] In this way, the exit animation can show that the application page in the application window gradually shrinks to the size of the application icon, and after shrinking to a certain extent, switches to the relevant screen of the application icon and continues to shrink to the size of the application icon.

[0250] Case 2: Each frame image of the exit animation, or multiple intermediate frames of the image, can be obtained by superimposing the image frames of the window exit animation and the icon exit animation at the same moment.

[0251] For example, the transparency of the previous frame image in the window exit animation may be lower than that of the next frame image, and / or the transparency of the previous frame image in the icon exit animation may be higher than that of the next frame image.

[0252] In this way, the exit animation can show the animation of the application page gradually transitioning to the application icon, and during the transition process, the application page gradually disappears and the application icon gradually appears.

[0253] Exemplarily, FIG11 shows image frames corresponding to the icon exit animation and the window exit animation generated by the electronic device 100 at times T10-T16 respectively.

[0254] In the above case 1, the exit animation can be displayed as the image frame corresponding to the window exit animation at T10-Ty (y=10, 11, 12, 12, 14, 15), and the icon exit animation at Ty +1 -Image frame corresponding to T16.

[0255] In the above scenario 2, the multiple image frames in Figure 11 can have different levels of transparency. For example, at times T10-T16, the transparency of the image frames of the icon exit animation decreases, while the transparency of the image frames of the window exit animation increases. Therefore, the image frames of the exit animation at times T10-T16 are the superposition of the transparent image frames of the icon exit animation and the window exit animation at times T10-T16.

[0256] It can be understood that if the electronic device 100 detects the user's operation to exit the application when displaying the application window size shown at time Tm (m=11, 12, 13, 14, 15), and the application window has been drawn at time Tm, the electronic device 100 can display the exit animation drawn by the image frame after time Tm.

[0257] 12A-12E and 13A-13E show the relevant user interfaces involved when the electronic device 100 detects the user exiting the application during the process of displaying the startup animation.

[0258] Among them, Figures 12A-12E show the relevant user interfaces involved when the electronic device 100 detects the user exiting the application and the application window is ready, and Figures 13A-13E show the relevant user interfaces involved when the electronic device 100 detects the user exiting the application and the application window is not ready.

[0259] It should be understood that Figures 12A-12E and Figures 13A-13E are based on the example of the electronic device 100 displaying the image 04 shown in Figure 2E during the process of displaying the startup animation, and describe the relevant user interface displayed by the electronic device 100 when detecting the user's operation of exiting the application. In other embodiments of the present application, the electronic device 100 may also detect the user's operation of exiting the application when displaying other image frames of the startup animation, trigger the exit of the application, and display the exit animation. This embodiment of the present application is not limited to this.

[0260] As shown in Figure 12A, when the electronic device 100 detects the user's operation of exiting the application, such as sliding upward from the bottom of the user interface 10, in response to the operation, the electronic device 100 suppresses the launch of the game center application and displays the exit animation shown in Figures 12A-12E.

[0261] In internal implementation, when the electronic device 100 detects the user's operation of exiting the application, the electronic device 100 can determine whether the current application window is ready.

[0262] When the application window is ready, the electronic device 100 can switch from the currently displayed image frame to the return animation of the application content in the application window to the icon, that is, switch from image 04 shown in Figure 12A to image 31 shown in Figure 12B, which displays the content of the application startup page, and the size of image 31 is smaller than that of image 04.

[0263] Afterwards, the electronic device 100 displays the content in the application startup page to the icon of the application icon returning to the desktop animation, that is, the electronic device 100 can switch from image 31 shown in Figure 12B to image 32 shown in Figure 12C, which displays at least part of the content of the application startup page and at least part of the icon startup page. Moreover, compared with image 31, the content of the application startup page displayed in image 32 is more transparent, and the size of image 32 is smaller than that of image 31.

[0264] Furthermore, the electronic device 100 switches from image 32 shown in Figure 12C to image 33 shown in Figure 12D, in which image 33 displays both the content of the application launch page and at least part of the content of the icon launch page. Moreover, compared with image 32, the content of the application launch page displayed in image 33 has higher transparency, and the size of image 33 is smaller than that of image 32.

[0265] Furthermore, the electronic device 100 may switch from the image 33 shown in FIG. 12D to the application icon 103A located on the desktop shown in the image 12E.

[0266] As can be seen from Figures 12A to 12D, when the electronic device 100 is displaying the startup animation and has not yet displayed the window startup animation, it detects that the user has exited the application. If the electronic device 100 has currently prepared the application window, the electronic device 100 can switch to displaying the animation of the application icon in the application window returning to the desktop.

[0267] Optionally, the exit animation displayed by the electronic device 100 may also include a hand-following animation, that is, the first multiple frames of images in the exit animation displayed by the electronic device 100 may also follow the sliding trajectory when the user triggers the exit of the application to follow the hand movement. Referring to Figure 12A, the user's operation to exit the application is to slide to the upper right at the bottom of the user interface 10. In the user interface 10 shown in Figures 12A-12C, when switching from image 04 to image 31, and from image 31 to image 32, there is also a trajectory moving to the upper right (see the dotted line with an arrow shown in Figures 12B and 12C). Afterwards, the electronic device 100 displays the movement process from image 32 to image 33 and then to the application icon 103A as shown in Figures 12C-12E (see the dotted line with an arrow shown in Figures 12D and 12E).

[0268] In some embodiments, in order to ensure that the electronic device 100 can smoothly transition from the startup animation to the exit animation, the electronic device 100 can continue to play a few frames of the startup animation after detecting the user's operation to exit the application, and then switch to the exit animation, and as time goes by, the speed of the continued playback of the few frames of images can be gradually slowed down. In this way, it is possible to avoid sudden changes in the animation after the user interrupts the animation, so that the animation can transition smoothly and improve the fluency of the animation. The scenes shown in Figures 13A to 13E below are similar and will not be repeated below.

[0269] As shown in Figure 13A, when the electronic device 100 detects the user's operation to exit the application, such as sliding upward from the bottom of the user interface 10, in response to the operation, the electronic device 100 suppresses the launch of the game center application and displays the application's exit animation.

[0270] In internal implementation, when the electronic device 100 detects the user's exit from the application, the electronic device 100 can determine whether the current application window is ready. If the application window is not ready, the electronic device 100 can directly reversely display the multiple frames of the currently displayed icon startup animation.

[0271] Furthermore, the exit animation displayed by the electronic device 100 may optionally include a hand-following animation, i.e., the first few frames of the exit animation displayed by the electronic device 100 may follow the sliding trajectory of the user when the user triggers the exit of the application. In this case, the exit animation displayed by the electronic device 100 may refer to the user interface shown in Figures 13A-13E.

[0272] Specifically, after the electronic device 100 detects the user's operation of exiting the application, the electronic device 100 can switch from image 04 shown in Figure 13A to image 41 shown in Figure 13B, and when image 04 switches to image 41, there is a trajectory moving toward the upper right corner (see the dotted line with an arrow shown in Figure 13B). Afterwards, the electronic device 100 switches to image 42 shown in Figure 13C, and when image 41 switches to image 42, there is a trajectory moving upward (see the dotted line with an arrow shown in Figure 13C). Afterwards, the electronic device 100 switches to image 43 shown in Figure 13D, and when image 42 switches to image 43, there is a trajectory moving downward (see the dotted line with an arrow shown in Figure 13D). Afterwards, the electronic device 100 switches to application icon 103A shown in Figure 13E, and when image 43 switches to application icon 103A, there is a trajectory moving downward (see the dotted line with an arrow shown in Figure 13E).

[0273] It can be seen that the electronic device 100 displays the hand-following animation of the image frame in the user interface 10 shown in Figures 13A-13C, and then displays the image frame shown in Figures 13C-13E to the icon return to desktop animation of the application icon on the desktop.

[0274] Further optionally, under the premise that the exit animation displayed by the electronic device 100 includes a hand-following animation, the electronic device 100 can determine whether the application window is ready after the hand-following animation ends. If the application window is not ready, the electronic device 100 can continue to display the image frame shown in Figures 13C-13E to the icon of the application icon on the desktop to return to the desktop animation. If the application window is ready, the electronic device 100 can switch to the content in the application window to the icon of the application icon to return to the desktop animation. For example, after displaying the user interface 10 of Figure 13C, the electronic device 100 displays the user interface 10 shown in Figures 12D-12E.

[0275] As can be seen from Figures 13A to 13E, when the electronic device 100 detects the user's operation of exiting the application while displaying the startup animation, if the electronic device 100 is not currently ready for the application window, the electronic device 100 can directly display multiple frames of images in the currently displayed icon startup animation in reverse.

[0276] It can be understood that the above Figures 10A-10G, 12A-12E, and 13A-13E list the exit animations displayed when the electronic device 100 exits the application in various scenarios. The embodiments of the present application do not limit the exit animations of the electronic device 100 in different scenarios.

[0277] In addition, the above Figures 10A-10G, 12A-12E, and 13A-13E all describe the exit animation by taking the icon startup animation drawn by splitting the application icon into a foreground layer and a background layer as an example. In this case, the icon exit animation includes the process of shrinking the foreground layer and the background layer of the icon separately. In addition, the icon exit animation may also include the process of gradually shrinking the icon in the foreground layer and gradually shrinking the newly added background layer until it disappears. In this case, the exit animation of the application can be the process of reverse display of the image frames shown in Figures 3A-3G.

[0278] When the icon exit animation includes an animation in which the icon in the foreground layer gradually shrinks and a newly added image in the background layer gradually shrinks and disappears, the newly added image in the background layer may also include a transparency transition animation, such as gradually increasing the transparency of the background layer as the icon exit animation plays. In this way, the icon exit animation viewed by the user may include an animation process in which the icon in the foreground layer gradually shrinks and an animation process in which the background layer shrinks and fades out.

[0279] It should be noted that designing the icon exit animation as an animation process in which the icon in the foreground layer gradually shrinks and the newly added image in the background layer gradually shrinks until it disappears can avoid the problem of vertical stretching of the icons displayed in the icon exit animation and causing image distortion.

[0280] In other embodiments of the present application, the icon exit animation displayed by the electronic device 100 may only include one layer where the icon is located, and the problem of icon screen distortion may be ignored. After detecting the user's operation to exit the application, the icon exit animation corresponding to the size of the application window is displayed, in which the vertically stretched icon gradually shrinks to the size of the icon on the desktop. In this case, when the electronic device 100 detects the user's operation to exit the application, the electronic device 100 triggers the currently displayed application window to gradually shrink to the size of the icon on the desktop, and in the process of shrinking the application window, an icon aligned with the size of the application window is displayed in the application window. In this way, the user can view the animation process of the vertically stretched icon gradually shrinking and transitioning to the icon on the desktop, and will not view additional redundant layers. For special-shaped icons, that is, icons with polygonal boundaries, controlling the icon to be stretched to align with the window to display the icon exit animation can also avoid the sudden change of the screen when the application window with a rectangular boundary shape transitions to the icon with a polygonal boundary shape during the application exit process, thereby ensuring a smooth transition of the screen.

[0281] Furthermore, in some embodiments, while the electronic device 100 is displaying the exit animation, the electronic device 100 may also detect an operation by the user to start an application and restart the application. In this case, the electronic device 100 may interrupt the exit animation and continue to display the icon startup animation or the window startup animation. Taking FIG10D as an example, if the electronic device 100 is displaying the exit animation and detects an operation by the user to start an application when the image 03 shown in FIG10D is displayed, for example, a click operation on the image 03, in response to the operation, the electronic device 100 switches from the user interface 10 shown in FIG10D to the user interfaces shown in FIG2E-FIG2G in sequence.

[0282] Further optionally, when the electronic device 100 detects that the user has interrupted the exit animation, in order to ensure a smooth transition from the exit animation to the startup animation, the electronic device 100 may continue to play a few frames of the exit animation after detecting that the user intends to exit the animation, and then switch to the startup animation. The speed of the continued playback of the few frames may be gradually slowed down over time. In this way, a sudden change in the animation after the user intends to stop the animation can be avoided, and the animation can transition smoothly, thereby improving the fluency of the animation.

[0283] In addition, it should be noted that the exit animations shown in Figures 10A-10G, Figures 12A-12E, and Figures 13A-13E are all described using the example of the icon launch animation displayed when the user acts on the application icon to launch the application. In other embodiments of the present application, when the application is launched through an interface element such as a service card, widget, notification bar, multi-tasking interface, etc., the exit animation may include an animation in which the content of the application window transitions to the interface element, or an image frame in the icon launch animation generated based on the interface element transitions to the animation of the interface element, etc. For example, if the electronic device 100 launches a music application through a user action on the service card 104 shown in Figures 9A-9D, if the electronic device 100 detects the user's operation to exit the application when the image 22 shown in Figure 9C is displayed, the electronic device 100 may sequentially display the user interface 10 shown in Figures 9C to 9B to 9A.

[0284] The electronic device can be a portable terminal device equipped with iOS, Android, Microsoft or other operating systems, such as a mobile phone, tablet computer, wearable device, etc., and can also be a non-portable terminal device such as a laptop computer with a touch-sensitive surface or touch panel, a desktop computer with a touch-sensitive surface or touch panel. The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a microservice architecture, or a cloud architecture. The embodiment of the present invention takes the Android system with a layered architecture as an example to illustrate the software structure of the electronic device 100.

[0285] FIG14 is a block diagram of the software structure of the electronic device 100 provided in an embodiment of the present application.

[0286] A layered architecture divides software into several layers, each with distinct roles and responsibilities. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers: application layer, application framework layer, system runtime layer, and kernel layer, from top to bottom.

[0287] As shown in FIG. 14 , the application layer may include a desktop launcher (Launcher).

[0288] Launcher is usually called the desktop of Android system, which mainly includes the following functions:

[0289] 1) As the launcher of the Android system, you can start the application through the Launcher;

[0290] 2) As an application manager, it can be used to manage applications, such as deleting or displaying applications;

[0291] 3) As the device's desktop UI, it can be used to display application icons, widgets, change wallpapers, etc.

[0292] The Launcher may include but is not limited to three modules: launching applications, window animation, and view animation.

[0293] The application startup module can be used to detect the user's operation of starting the application and execute the startup of the application.

[0294] Window animation can be used to create animations for application startup and application exit, that is, animation tasks such as the application window startup animation and window exit animation mentioned above.

[0295] View animation can be used to create desktop background, desktop sliding animation, as well as icon startup animation and icon exit animation when launching an application, startup page animation and other animation tasks. In addition, View animation can be used to create icon views in icon startup animation and icon exit animation, as well as the first page view involved in startup page animation.

[0296] It's important to note that animation tasks created in window animation require creating a window before the animation can be played in the window, while animation tasks created in view animation do not require creating a window. Instead, animation playback can be achieved by creating a view. In other words, when the application starts, you can use view animation to create icon startup animation and startup page animation without waiting for the application window to be ready. By directly creating a view, you can quickly respond to the user's application startup operation by displaying the icon startup animation and startup page animation after detecting the operation.

[0297] In some embodiments, the window animation may further include a SurfaceView module, which may be used to create an application window for playing window startup animation and window exit animation. In addition, the window animation may also be used to create an animation task for an icon startup animation. In this case, the window animation may also include icon startup and icon exit modules. The electronic device 100 may create an icon window through the SurfaceView module, and generate an icon startup animation by setting the properties of the icon window. In this way, the electronic device 100 does not need to use an application window when drawing the icon startup animation corresponding to the icon, and does not have to wait for the creation of the application window. After detecting the user's operation to start the application, the icon startup animation can be quickly displayed.

[0298] It should be noted that if the electronic device 100 creates an animation task of the icon startup animation through window animation, it itself carries the cropping and rounded corner attribute animation. However, if the animation task of the icon startup animation is created through View animation, since it does not carry the cropping and rounded corner attribute animation itself, it is necessary to add the cropping and rounded corner attribute animation so that the electronic device 100 can use the cropping and rounded corner attribute animation to generate multiple frames of images in the icon startup animation.

[0299] The application framework layer can provide an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer can include some predefined functions.

[0300] As shown in FIG14 , the application framework layer may include interface modules and system services.

[0301] The interface module enables the transfer of low-level capabilities between the application layer and the system runtime layer. Specifically, View animations can call the RenderThread (RT) animation engine through the interface module to perform calculation, drawing, and rendering of View animations. Window animations can call the SurfaceFlinger graphics compositor through the interface module to perform calculation, drawing, and rendering of window animations.

[0302] The system service can be used to monitor the status of the application window when the application is started, that is, to monitor whether the application window is drawn.

[0303] The RT animation engine and SurfaceFlinger are located in the system runtime layer (Native).

[0304] The RT animation engine can be used to determine the animation properties of a view, including size, position, clipping, rounded corners, transparency, etc., thereby generating displacement animation, scaling animation, clipping animation, transparency animation, etc. for the view, and obtaining multiple frames of images in the icon startup animation and startup page animation. In addition, the RT animation engine can also be used to pass the animation properties of the image frames in the startup page animation to the window property animation in SurfaceFlinger after the application window is drawn, so that the animation properties of the window startup animation and the startup page animation are consistent.

[0305] SurfaceFlinger may include multiple modules: window attribute animation, window attribute spring animation, View attribute spring animation, attribute calculation and rendering, and layer synthesis engine.

[0306] Window property animation can be used to generate displacement animation, scaling animation, cropping animation, transparency animation, etc. for the window based on the animation properties of the window.

[0307] In some embodiments, the window attribute animation may include modules such as container animation driver and update window. The container animation driver can be used to create a window container animation. The window container animation can be started synchronously when the icon startup animation is started, to ensure that when switching to the window startup animation, the properties of the window startup animation are consistent with the icon startup animation, so as to achieve a smooth transition from the icon startup animation to the window startup animation during the application startup process. The update window can be used to update the application window to the container animation when the application window is ready during the application startup process, thereby achieving the display of the content in the application window (such as the application startup page), that is, achieving the display of the window startup animation. In this case, the RT animation engine does not need to pass the animation properties of the startup animation to the window attribute animation after the application window is drawn.

[0308] The window property Spring Animation can be used to determine the spring curve of a window's startup or exit animation (for example, window startup animation and window exit animation) when the animation is interrupted by the user. This spring curve can be used to avoid sudden changes in the animation and ensure a smooth transition.

[0309] View property spring animation can be used to determine the spring curve of the animation when the animation is interrupted by the user during the playback of the view's startup animation and exit animation (for example, icon startup animation, icon exit animation, and startup page animation).

[0310] The spring curve can be used to adjust and optimize property values ​​in the startup animation or exit animation, including: scaleX and scaleY in the scale property, translateX and translateY in the translate property, crop left, crop top, crop right, crop bottom in the crop property, transparency (alpha) property, and so on.

[0311] The spring curve is used to enable, when the electronic device 100 detects a user interruption during animation playback, to continue playing the animation for a period of time and then interrupt the animation, for example, to reverse the animation. Furthermore, while the animation is being played, the speed of the maintained animation can be gradually slowed down over time, and while the animation is being played back, the speed of the reversed animation can be gradually accelerated over time.

[0312] For ease of understanding, taking the scenario of application startup as an example, after the electronic device 100 detects the user's operation of launching the application, the electronic device 100 starts playing the startup animation in response to the operation, that is, the animation of the icon gradually enlarging and transitioning to the application startup page. If the electronic device 100 detects the user's operation of exiting the application during the process of playing the startup animation, the electronic device 100 can continue to play a few frames of the startup animation, that is, continue to play the animation of the icon transitioning to the application startup page, and then display the exit animation, that is, display the animation of the application startup page transitioning to the icon and shrinking. And as time goes by, the playback speed of the few frames of the startup animation that continue to be played gradually slows down, and the playback speed of the exit animation gradually speeds up.

[0313] For example, FIG15 shows a schematic diagram of a spring curve provided in an embodiment of the present application.

[0314] As shown in Figure 15, curve 1 is the original curve when there is no user interruption operation, curve 2 is the animation curve in some animation interruption mechanisms when there is a user interruption operation, and curve 3 is the spring curve in the interruption mechanism provided by this application.

[0315] If there is no user interruption during the electronic device 100 playing the animation, the animation can be played according to curve 1, that is, the animation is gradually played over time.

[0316] In some animation interruption mechanisms, if the electronic device 100 detects a user interruption operation (see the interruption point indicated in Figure 15) during the animation playback, the electronic device 100 plays the animation according to curve 2, that is, the animation playback is immediately interrupted at the interruption point and the played animation is played in reverse.

[0317] In the interruption mechanism provided in the embodiment of the present application, if the electronic device 100 detects a user interruption operation (see the interruption point indicated in Figure 15) during the animation playback, the electronic device 100 plays the animation according to curve 3, that is, within a period of time after the interruption point, the animation continues to be played according to the trend of the electronic device 100 playing the animation forward, and the played animation is played back after the time exceeds the limit.

[0318] It can be seen from the spring curve shown in Figure 15 that the interruption mechanism provided in the embodiment of the present application ensures that after the user triggers the interruption animation, the animation will not undergo a sudden change immediately, so that the animation can transition smoothly and improve the fluency of the animation.

[0319] It will be understood that the spring curve shown in FIG15 is merely an exemplary description and does not constitute a limitation to the embodiments of the present application.

[0320] The property calculation module can be used to calculate the animation property values ​​of the window and / or view, namely the scaleX and scaleY in the aforementioned scale property, the translateX and translateY in the translation property, the crop left, crop top, crop right, crop bottom in the crop property, the transparency (alpha) property, and so on.

[0321] The rendering module can be used to draw and render each frame of the window animation.

[0322] The layer composition engine can be used to perform layer composition on each layer corresponding to each frame of the rendered image, obtain each frame of the animation to be displayed, and cache each frame of the image.

[0323] The kernel layer is the layer between hardware and software. The kernel layer may include display drivers.

[0324] The display driver can be used to drive the display screen to display each frame of the animation.

[0325] It is understandable that multiple modules such as window attribute animation, window attribute spring animation, View attribute spring animation, attribute calculation and rendering can also be located in the RT animation engine, or the View animation can also call SurfaceFlinger through the interface module, and use SurfaceFlinger to implement the drawing and rendering of View animations such as startup page animation, icon startup animation, and icon exit animation. In other words, icon startup animation, icon exit animation, startup page animation, window startup animation, and window exit animation can be implemented by the RT animation engine or by SurfaceFlinger.

[0326] The following uses the application startup process shown in Figures 2A to 2G to exemplify the workflow involved in the software architecture block diagram of the electronic device 100.

[0327] When the electronic device 100 detects that the user performs a startup operation on the application icon, in response to the operation, the electronic device 100 can trigger the startup of the application by starting the application module, obtain the startup page of the application, notify the View animation to create the animation task of the icon view and the first page view, and the window animation to create the animation task of the application window. Before the application window is drawn, the View animation can call the RT animation engine through the interface module to draw the image frames in the icon startup animation and the startup page animation, and synthesize the image frames in the icon startup animation and the startup page animation through the layer synthesis engine to obtain the image frames in the startup animation to be displayed, and drive the display screen to display through the display driver module.

[0328] Afterwards, when the system service detects that the application window is drawn, the window animation can call SurfaceFlinger through the interface module to start drawing the window startup animation corresponding to the application window. In addition, the RT animation engine can pass the animation properties of the image frame to be displayed by the startup page animation at the next moment to SurfaceFlinger, and SurfaceFlinger draws the window startup animation with the same animation properties as the startup page animation. After that, the layer synthesis engine synthesizes the image frames of the icon startup animation, startup page animation and window startup animation at the same time to obtain the image frame to be displayed in the startup animation, and drives the display screen to display through the display driver module.

[0329] It should be noted that, due to the animation task of the icon view created by the View animation, the icon startup animation corresponding to the icon view can be quickly played without creating a window. Therefore, after the electronic device 100 detects the user's startup operation on the application icon, the electronic device 100 can quickly respond to the operation and start playing the icon startup animation.

[0330] In addition, since the electronic device 100 can obtain the content of the application startup page after launching the application and before the window is drawn, obtain the first page with the same content as the application startup page, and play the startup page animation, after the application window is drawn, play the window startup animation, and realize the process of displaying the application icon to the application startup page in advance before the application window is drawn, the limitation that the electronic device 100 can only display the application content in the application window after the application window is drawn is lifted, and a smoother transition of the application icon to the application startup page during the application startup process is realized.

[0331] As can be seen from Figure 14, the icon startup animation is controlled by the launcher side, avoiding cross-process overhead, and the drawing of the icon startup animation is not restricted by the application window. The icon startup animation does not need to wait until the application window is drawn before it can be played, ensuring that the electronic device 100 can quickly display the icon startup animation after detecting the user's operation to start the application. And when drawing the image frame in the icon startup animation, SurfaceFlinger takes over, eliminating the dependence on the AT solution and expanding the scope of scenario. In addition, the drawing of the application startup page is extracted in advance, and the first page identical to the application startup page screen is pre-drawn and controlled by the launcher side, which removes the restriction between the application startup page and the application window. Before the application window is ready, the startup page animation corresponding to the first page is displayed in advance, slowing down the speed of the screen change during the application startup process.

[0332] FIG16 is a diagram showing the internal module interactions of the electronic device 100 provided in an embodiment of the present application, which displays a startup animation when an application is started.

[0333] Among them, the display of the startup animation by the electronic device 100 when the application is started mainly involves the interaction between the UI thread, RT thread, System_server, and SurfaceFlinger.

[0334] The UI thread, also known as the main thread, is created by the system when an application starts. The UI thread is responsible for distributing events (such as drawing events) to UI components. The RT thread is used to draw icon startup animations and startup page animations. System_server provides system services, such as drawing the application's startup page when the application starts. SurfaceFlinger is used to calculate, draw, and render animations.

[0335] As shown in Figure 16, when the application starts, the main internal implementations involved include:

[0336] S11. The UI thread detects a user operation to start an application.

[0337] The user operation may include a user operation on an interface element such as an application icon, a service card, a widget, a notification bar, a multi-tasking interface, etc., such as a click operation.

[0338] S12. The UI thread draws the first page.

[0339] In the embodiment of the present application, the content of the first page is the same as that of the application startup page.

[0340] The application launch page may refer to the first page displayed after the application is launched. After the UI thread detects the user action of launching the application, the first page may be pre-drawn before the application window is ready.

[0341] Among them, the application startup page can be preset by the application in advance, and the UI thread can extract the application startup page from the application resources, or the application startup page can be drawn according to the relevant information of the application, or the application startup page can be a screenshot of the page before the application last retreated to the background, or the application startup page can be a screenshot of the main page displayed by default when the application is first opened.

[0342] S13. The UI thread calls the Startactivity() method.

[0343] The StartActivity() method can be used to start a new Activity, thereby starting the application.

[0344] S14. The UI thread initializes the animation content.

[0345] S15.UI thread creates the icon layer.

[0346] The icon layer is the layer where the icon view is located. The icon layer may include a foreground layer and a background layer. The electronic device 100 may display an icon startup animation in the icon layer.

[0347] For example, the icon layer can be located below the application window layer. In this way, when the electronic device 100 prepares the application window and starts playing the window startup animation, the window startup animation can be superimposed on the layer where the icon startup animation is located to achieve switching display from the icon startup animation to the window startup animation.

[0348] S16. The UI thread creates the startup page layer.

[0349] The startup page layer is the layer where the first page view is located. The electronic device 100 can display a startup page animation in the startup page layer.

[0350] Exemplarily, the startup page layer can be located above the icon layer. In addition, the startup page animation can have a transparency animation with gradually decreasing transparency during playback. In this way, when the electronic device 100 plays the startup page animation and the icon startup animation at the same time, it can present an animation effect of the icon gradually transitioning to the application startup page. In addition, the startup page layer can be located below the application window layer. In this way, when the electronic device 100 prepares the application window and starts playing the window startup animation, the window startup animation can be directly displayed above the layer where the startup page animation is located, realizing the switching display from the startup page animation to the window startup animation.

[0351] S17.The UI thread creates an icon through the RT thread to start the animation.

[0352] S18.RT thread playback icon starts animation.

[0353] S19.The UI thread creates the startup page animation through the RT thread.

[0354] The S20.RT thread plays the startup page animation.

[0355] It is understood that step S18 and step S20 can be performed simultaneously, that is, the electronic device 100 can play the icon startup animation and the startup page animation simultaneously. Alternatively, the electronic device 100 can first perform step S18 and then perform step S20, that is, the electronic device 100 can first play the icon startup animation and then play the startup page animation. The embodiment of the present application performs step S18 and step S20 in the order in which they are performed.

[0356] S21. The UI thread requests the System_server to start the application window animation.

[0357] This window startup animation can be used to show the process of gradually enlarging the application page content when the application starts. Among them, the window startup animation must be displayed in the user interface after the application window is ready.

[0358] S22.System_server draws the application startup page.

[0359] Among them, after the user triggers the startup of the application, the System_server can start preparing the application window and draw the application startup page in the application window.

[0360] S23.System_server notifies the UI thread that the application window is ready.

[0361] The S24.RT thread passes the animation properties of the startup page animation to SurfaceFlinger.

[0362] Among them, the RT thread can pass the animation properties of the startup page animation to SurfaceFlinger after the application window is ready, so that SurfaceFlinger can create a window startup animation according to the animation properties of the startup page animation, so that the animation properties of the window startup animation are consistent with the animation properties of the startup page animation.

[0363] It is understandable that the present embodiment does not limit the execution order of step S24, and step S24 can be executed before or after any of steps S19-S23. In other words, after obtaining the animation properties of the startup page animation, the RT thread can directly pass them to SurfaceFlinger, so that SurfaceFlinger can directly use the animation properties of the current startup page animation to draw the window startup animation after the application window is ready, to ensure that the startup page animation and the window startup animation are displayed continuously.

[0364] S25. The UI thread starts the animation through the SurfaceFlinger playback window.

[0365] It can be understood that if the window startup animation starts playing before the application startup page is drawn, the window will not be visible at this time. The window startup animation will be visible until the application startup page is drawn. If the window startup animation starts playing after the application startup page is drawn, it will be visible when the window startup animation starts playing.

[0366] It can be seen that after the electronic device 100 starts the application, it can draw the first page through the UI thread to realize preloading of the first page before the window drawing is completed, and remove the dependence on System_server, so as to realize playing the icon startup animation and the startup page animation before the window drawing is completed, and then add the window startup animation to the playback after the application window is ready, so that during the application startup process, the electronic device 100 can display the animation process of gradually transitioning from the application icon to the startup page of the application.

[0367] FIG17 is a flow chart of a display method provided in an embodiment of the present application.

[0368] S301. The electronic device 100 detects a first operation acting on a first interface element, where the first operation is used to start a first application.

[0369] The first interface element may refer to an application icon of the first application, a service card, a widget, a notification bar, a historical task in a multitasking interface, and other interface elements.

[0370] The first operation may include a click operation, a sliding operation, etc. on the first interface element. The embodiment of the present application does not limit the operation method of the first operation.

[0371] Exemplarily, the first interface element may refer to the application icon 103A shown in FIG. 2A , and the first operation may refer to a click operation on the application icon 103A shown in FIG. 2A .

[0372] Exemplarily, the first interface element may also refer to the application icon 103B shown in FIG. 3A , and the first operation may refer to a click operation on the application icon 103B shown in FIG. 3A .

[0373] Exemplarily, the first interface element may also refer to the service card 104 shown in FIG. 9A , and the first operation may refer to a click operation on the service card 104 .

[0374] It should be noted that before the electronic device 100 detects the first operation acting on the first interface element, the electronic device 100 does not display the content of the first application. Therefore, after the electronic device 100 detects the user operation acting on the first interface element, the electronic device 100 needs to start the first application and draw the application window of the first application so as to display the content of the first application in the application window.

[0375] S302. In response to the first operation, the electronic device 100 displays an icon startup animation and a startup page animation, wherein the icon startup animation includes a process of gradually changing from a first interface element to an icon startup page, and the startup page animation includes a process of gradually changing from a first image to a first page, wherein the content of the first page includes the content of the first image, and the icon startup animation and the startup page animation have the same image frame position and size at the same moment.

[0376] It should be noted that the content of the first page is the same as the content of the application startup page, wherein the application startup page refers to the first page displayed after the application is started.

[0377] In some embodiments, the content of the first page may include part or all of the content of the first image.

[0378] Regarding the startup method of the first application, the application startup page may have the following situations:

[0379] 1) If the user operation mentioned in step S301 is used to trigger a cold start of the application, the application startup page may refer to an application startup page image preset in advance by the first application, or an application startup page drawn by the electronic device 100 based on relevant information of the first application, or a screenshot of the main page of the first application.

[0380] The cold start of the application means that before the electronic device 100 detects the user operation mentioned in step S301, there is no process of the first application in the background, that is, the first application is not running in the background.

[0381] 2) If the user operation mentioned in step S301 is used to trigger a hot start of an application, the application start page may refer to a screenshot of the page before the first application was last returned to the background.

[0382] The hot start of an application means that before the electronic device 100 detects the user operation mentioned in step S301, there is a process of the first application in the background, that is, the first application is running in the background.

[0383] For detailed descriptions of the application startup page, application cold start, and application hot start, please refer to the previous content and will not be repeated here.

[0384] For example, taking the first application as a game center application, the application startup page may refer to the image shown in (a) or (b) or (c) or (d) in FIG. 1 .

[0385] In addition, it should be noted that the electronic device 100 can draw the application startup page through the UI thread of the desktop, so that the electronic device 100 can separate the action of drawing the application startup page from the application startup process, so that the drawing of the application startup page does not need to be restricted by the drawing of the application window. The electronic device 100 can draw the application startup page before the application window is drawn, so that the startup page animation can be played before the window startup animation.

[0386] Exemplarily, the image startup animation may include a process of gradually enlarging from the first interface element to the icon startup page, and the startup page animation may include a process of gradually enlarging from the first image to the first page.

[0387] The electronic device 100 may display an icon startup animation on a first layer and a startup page animation on a second layer.

[0388] The first layer can be located above the second layer, and the icon startup animation can include a process of changing in which the screen transparency increases; or, the first layer can be located below the second layer, and the startup page animation can include a process of changing in which the screen transparency decreases; or, the icon startup animation can include a process of changing in which the screen transparency increases and the startup page animation can include a process of changing in which the screen transparency decreases.

[0389] In one implementation, the first layer can be located below the second layer. The transparency of the image frame of the icon startup animation can always be maintained at 0, and the startup page animation can include image 1 and image 2. During the startup page animation display process, image 1 can be displayed before image 2, and the transparency of image 1 can be higher than that of image 2. In this way, during the display of the icon startup animation and the startup page animation, an animation effect of the first interface element gradually enlarging and disappearing, and an animation effect of the first page gradually enlarging and appearing can be presented.

[0390] For example, taking the application icon 103A shown in Figure 2A as the first interface element, the multi-frame images of the icon startup animation and the startup page animation can refer to the multi-frame images shown in T0-T6 in Figure 7, wherein the first interface element may refer to the image frame shown by the icon startup animation at time T0, the icon startup page may refer to the image frame shown by the icon startup animation at time T6, the first image may refer to the image frame shown by the startup page animation at time T1, and the first page may refer to the image frame shown by the startup page animation at time T6.

[0391] Exemplarily, if the icon startup animation and the startup page animation are displayed in superposition, referring to Figures 2A-2G, assuming that the application window has not been drawn when the electronic device 100 displays Figure 2E, image 01 shown in Figure 2B, image 02 shown in Figure 2C, image 03 shown in Figure 2D, and image 04 shown in Figure 2E are all images obtained by superimposing the image frames of the icon startup animation and the startup page animation at the same time, or, referring to Figures 3A-3G, assuming that the application window has not been drawn when the electronic device 100 displays Figure 3D, image 11 shown in Figure 3B, image 12 shown in Figure 3C, and image 13 shown in Figure 3D are all images obtained by superimposing the image frames of the icon startup animation and the startup page animation at the same time.

[0392] In a specific implementation, the electronic device 100 can generate an icon startup page through the first interface element, and determine the image frame in the icon startup animation by setting the animation properties of the icon startup page. The size of the icon startup page is the same as the size of the page displayed after the first application is launched.

[0393] The animation properties may include but are not limited to one or more of the following: scaling, displacement, cropping, transparency, rounded corners, etc.

[0394] Similarly, the electronic device 100 may determine the image frames in the startup page animation by setting the animation properties of the first page.

[0395] Among them, except for transparency, at the same moment, the animation attribute values ​​of the image frame in the icon startup animation and the image frame in the startup page animation can be kept consistent, so that at the same moment, the image frames of the icon startup animation and the startup page animation can have the same display position and display size, that is, the superimposed display of the image frames of the icon startup animation and the image frames of the startup page animation is achieved.

[0396] Among them, for the icon startup page of the first interface element, there may be the following two situations:

[0397] Case 1: the foreground layer of the icon launch page is the foreground layer of the first interface element magnified by a first ratio, and the background layer of the icon launch page is determined according to the background layer of the first interface element magnified by a second ratio.

[0398] For example, taking the first interface element as the application icon 103A in FIG. 2A , the icon startup page may refer to the image A shown in (a) in FIG. 4 .

[0399] The first ratio may be different from the second ratio. In this way, the icon startup page is determined according to the foreground layer and the background layer of the first interface element magnified at different ratios.

[0400] The first ratio and the second ratio can be set by a developer and preset in the electronic device 100. The developer can configure the first ratio and the second ratio according to the visual effect of the screen in the icon startup page.

[0401] Preferably, the first ratio should make the width of the first interface element after being enlarged by the first ratio equal to the width of the icon launch page, or the length of the first interface element after being enlarged by the first ratio equal to the length of the icon launch page.

[0402] In the process of determining the background layer of the icon launch page using the background layer of the first interface element, in addition to enlarging the background layer of the first interface element using the second ratio, it also includes cropping the enlarged background layer to obtain the background layer of the icon launch page. Moreover, the size of the background layer of the enlarged first interface element needs to exceed the range of the cropped area. Among them, the size of the cropped area can be the size of the image displayed after the first application is launched. This is because the background layer of the first interface element may not match the shape of the background layer of the icon launch page after enlarging, so the background layer of the enlarged first interface element needs to be cropped. For example, when the application icon 103A shown in Figure 2A is enlarged to the image A shown in (a) of Figure 4, the background layer of the application icon 103A is a rounded rectangle, and the background layer of image A is a non-rounded rectangle. It can be seen that after the background layer of the application icon 103A is enlarged, it needs to be cropped to obtain the background layer of the icon launch page.

[0403] In addition, it should be noted that when the background layer of the first interface element is enlarged, the second ratio can exist in the following two situations:

[0404] a) The second scale may include different magnification ratios on the X and Y axes

[0405] In this case, when the background layer of the first interface element is magnified, the magnification ratios on the X axis and the Y axis are different.

[0406] For example, enlarging application icon 103A in FIG2A to obtain image A shown in FIG4(a) , since the background layer of application icon 103A is a rectangle with equal width and height, while image A is a rectangle with a height greater than its width, when the background layer of the first interface element is enlarged, the enlargement ratio on the Y-axis can be greater than the enlargement ratio on the X-axis.

[0407] As you can see, this situation applies to the case where the background layer of the first interface element is a solid color. This is because when the foreground layer of the first interface element is enlarged, even if the horizontal and vertical magnification ratios are different, causing the background layer of the first interface element to stretch horizontally or vertically, there will be no image distortion.

[0408] b) The second scale may include only one magnification scale

[0409] In this case, when the background layer of the first interface element is magnified, the magnification ratios on the X axis and the Y axis are the same.

[0410] Taking the image A shown in (a) of Figure 4 obtained by enlarging the application icon 103A in Figure 2A as an example, since the background layer of the application icon 103A is a rectangle with equal width and height, if the application icon 103A is enlarged proportionally, the background layer of the application icon 103A will still be a rectangle with equal width and height after enlargement. Therefore, after enlarging the application icon 103A, the background layer of the icon startup page can also be obtained by cropping.

[0411] As can be seen, this situation is applicable to the case where the background layer of the first interface element is a non-pure color background. In this way, the background layer of the first interface element can be proportionally enlarged to avoid the problem of horizontal or vertical stretching of the background layer of the first interface element, which causes image distortion.

[0412] Case 2: The foreground layer of the icon launch page is the first interface element magnified to the third scale, and the background layer of the icon launch page is the first image

[0413] For example, taking the first interface element as the application icon 103B shown in FIG. 3A , the icon startup page may refer to the image B shown in (b) of FIG. 4 .

[0414] The third ratio can be set by the developer and preset in the electronic device 100. The developer can configure the third ratio according to the visual effect of the screen in the icon startup page.

[0415] Preferably, the third ratio should make the width of the first interface element after being enlarged by the third ratio equal to the width of the icon launch page, or the length of the first interface element after being enlarged by the third ratio equal to the length of the icon launch page.

[0416] Exemplarily, the first picture may exist in the following situations:

[0417] a) The first image has a solid background of the first color

[0418] In this case, the first color can be determined by any of the following methods:

[0419] a-1) The first color is a preset color

[0420] For example, the color is white, yellow, black, and the like.

[0421] a-2) The first color is the primary color of a certain area in the first interface element

[0422] In this case, the first color is the color contained in the first interface element. For example, if the central area of ​​the first interface element is mainly red, the first color is red.

[0423] a-3) The first color is the main color of a certain area in the first interface element * coefficient

[0424] Exemplarily, the coefficient may refer to an RGB coefficient.

[0425] In this case, the first color is determined based on the color contained in the first interface element. For example, if the central area of ​​the first interface element is primarily red, the first color is light red. For another example, if the central area of ​​the first interface element is primarily blue, the first color is dark blue.

[0426] It is understandable that the electronic device 100 may also determine the first color in other ways, and the embodiment of the present application does not limit this.

[0427] b) The first image has a gradient background

[0428] Exemplarily, the first image includes a gradient region transitioning from a first color to a third color.

[0429] In this case, the colors used for the gradient background can refer to:

[0430] b-1) Preset colors

[0431] That is, when the electronic device 100 generates the first picture, the preset color may be used to generate the first picture.

[0432] b-2) Color determined based on the color of the first interface element

[0433] The color may refer to the color contained in the first interface element, or may refer to the color obtained by correcting the color in the first interface element.

[0434] That is, when the electronic device 100 generates the first picture, the color in the first interface element can be used to generate the first picture.

[0435] b-3) Randomly generated colors

[0436] That is, when the electronic device 100 generates the first picture, the first picture may be generated using randomly generated colors.

[0437] It is understandable that the electronic device 100 can determine the gradient color in the first picture by combining any one or more of the preset colors, the colors in the first interface element, and randomly generated colors.

[0438] In addition, in other embodiments of the present application, the color of the first image may include a gradient of two different colors from left to right, or a gradient of two different colors from inside to outside, or a gradient of three different colors from left to right. The embodiments of the present application do not limit the gradient parameters of the first image, such as the gradient direction and the number of gradient colors.

[0439] If the first image has a gradient background, all display areas of the first image may be gradient colors, or the first image may be composed of areas containing gradient colors and areas containing solid colors.

[0440] In some embodiments, if the first image is composed of an area containing a gradient color and an area containing a solid color, the first image may be composed of a first area, a second area, and a third area, wherein the boundary between the first area and the second area may be the upper boundary of the first interface element magnified to a third scale, and the boundary between the second area and the third area may be the lower boundary of the first interface element magnified to a third scale. The first area and the third area may be solid color areas, wherein the color of the first area is the color contained in the upper boundary of the first interface element (hereinafter referred to as color 1), and the color of the third area is the color contained in the lower boundary of the first interface element (hereinafter referred to as color 2). The color of the third area may be a gradient from color 1 to color 2.

[0441] FIG18 is a schematic diagram of generating an icon startup page provided in an embodiment of the application.

[0442] As shown in Figure 18, the icon launch page consists of an application icon in the foreground layer, magnified at a third scale, and a first image in the background layer. The first image consists of a first region, a second region, and a third region. Assuming the upper border of the application icon is white and the lower border is gray, the first region is white, the third region is gray, and the second region is a gradient transition from white at the top to gray at the bottom.

[0443] In other embodiments, if all display areas of the first image are gradient colors, the gradient colors can be determined based on the two colors in the first interface element. In this case, a detailed description of how the electronic device 100 determines the icon startup page can be found in the subsequent Figures 19-25, which will not be expanded here.

[0444] From the two cases of the above icon startup page, it can be seen that case 1 is applicable to the first interface element that can be split into a foreground layer and a background layer, and case 2 is applicable to the first interface element that cannot be split into a foreground layer and a background layer.

[0445] Then, before the electronic device 100 generates the icon startup page, the electronic device 100 can determine whether the first interface element is a layered icon. If the first interface element is a layered icon, it means that the first interface element can be split into a foreground layer and a background layer, so the above-mentioned situation 1 can be used to generate the icon startup page. If the first interface element is a non-layered icon, it means that the first interface element cannot be split into a foreground layer and a background layer, so the above-mentioned situation 2 can be used to generate the icon startup page.

[0446] It should be understood that whether the first interface element is a layered icon can be determined by the designer who develops and designs the first interface element. In addition, if the first interface element is a layered icon, the icon startup page can also be generated in the manner of the above-mentioned situation 2.

[0447] It can be seen that if the method of the above-mentioned situation 1 is adopted to generate the icon startup page, the icon startup animation may include: the process of enlarging the foreground layer of the first interface element to the foreground layer of the icon startup page, and the process of enlarging the background layer of the first interface element to the background layer of the icon startup page; if the method of the above-mentioned situation 2 is adopted to generate the icon startup page, the icon startup animation may include: the process of enlarging the first interface element to the foreground layer of the icon startup page, and the process of appearing and enlarging the first picture.

[0448] In addition, the icon startup page and the first page can exist in the following two situations:

[0449] 1) The icon launch page and the first page are views created by the View animation in the launcher

[0450] 2) The icon launch page and the first page are both images drawn in the window created by SurfaceView in the launcher

[0451] In either case 1 or 2, when launching an application, the electronic device 100 does not need to wait for the creation of the application window. After detecting the user operation on the first interface element, it can quickly launch the icon startup animation corresponding to the icon launch page and the startup page animation corresponding to the first page. For a detailed description of launcher, View animation, and SurfaceView, please refer to the relevant description of Figure 14 above, which will not be repeated here.

[0452] In addition, the electronic device 100 can implement the creation and playback of icon startup animation and startup page animation through the RT thread of the desktop, so that the creation and playback of icon startup animation and startup page animation do not need to be restricted by the drawing of the application window. In this way, the electronic device 100 can display the icon startup animation and startup page animation in advance before the application window is drawn, which can avoid the user waiting for a long time to view the response made by the application startup, and visually speed up the application startup speed.

[0453] Exemplarily, the icon startup animation and the startup page animation may be created by a system unit in the electronic device 100 , which is different from the first application.

[0454] In the embodiment of the present application, the icon startup animation can also be called the first startup animation, and the startup page animation can also be called the second startup animation.

[0455] S303. The electronic device 100 displays the second image of the startup page animation at a first moment, and displays the window startup animation at a second moment. The second moment is located after the first moment, and the window startup animation includes a process of gradually changing from the third image to the second page of the first application; wherein the content of the first page is the same as the content of the second page, the content of the second page includes the content of the third image, and the content of the third image includes the content of the second image.

[0456] In some embodiments, the content of the second page may include part or all of the content of the third image, and the content of the third image may include part or all of the content of the second image.

[0457] In some embodiments, when the second image of the startup page animation is displayed, the electronic device 100 displays a window startup animation, and the window startup animation includes a process of gradually changing from the third image to the second page of the first application; wherein, the content displayed on the first page is the same as the content displayed on the second page, the content of the second page includes part or all of the content of the third image, and the content of the third image includes part or all of the content of the second image.

[0458] Exemplarily, the window startup animation may include a process of gradually zooming in from the third image to the second page of the first application.

[0459] After detecting a first operation on a first interface element, the electronic device 100 may begin drawing an application window for the first application. The application window is used to carry the display of application content. When the application is launched, the application content carried by the application window may include, but is not limited to, any one or more of the following: an application launch page, an image cached in advance by the application, a home page displayed by default when the application is launched, a startup animation preset by the application, and the like.

[0460] When the application window of the first application is drawn, the electronic device 100 can display the window startup animation corresponding to the application window. For example, the electronic device 100 can display the window startup animation after displaying the second image of the startup page animation.

[0461] For example, taking the application icon 103A shown in Figure 2A as the first interface element, see Figure 7, the first moment may refer to moment T4, the second image may refer to the image frame of the startup page animation at moment T4, and the multi-frame images of the window startup animation can refer to the multi-frame images of T5-T6 shown in Figure 7, the second moment may refer to moment T5, the third image may refer to the image frame of the window startup animation at moment T5, and the second page may refer to the image frame of the window startup animation at moment T6.

[0462] Similar to the process by which electronic device 100 generates icon startup animation and startup page animation, the process for generating window startup animation may also include: first generating an image to be displayed after application startup is complete, and then generating multiple frames of window startup animation by setting the animation properties of the image. For example, the multiple frames of window startup animation generated by electronic device 100 can be seen in the aforementioned FIG7. As can be seen from FIG7, during the display process of icon startup animation and window startup animation, the displayed content gradually increases and the size of the displayed content gradually increases.

[0463] In a specific implementation, the electronic device 100 can pass the animation properties of the startup page animation to the application window before displaying the window startup animation, and draw the image frames of the window startup animation according to the animation properties of the startup page animation, so that the window startup animation and the startup page animation can maintain the same animation properties at the same time. In this way, the image frames in the startup page animation and the image frames in the window startup animation can have the same transparency, display size, display position, etc. at the same time, so that in the window startup animation displayed by the electronic device 100, the magnification process of the application window can maintain the magnification process of the icon in the icon startup animation, or the magnification process of the first page in the startup page animation continues to change.

[0464] Exemplarily, the image frames of the startup page animation and the window startup animation at the same moment have the same position, size, and display content.

[0465] Exemplarily, during the display process of the startup page animation and the window startup animation, the displayed content gradually increases and the size of the displayed content gradually increases.

[0466] In some embodiments, the third layer can be above the first and second layers. In this way, when the electronic device 100 displays the window startup animation, the icon startup animation and the startup page animation in the lower layer can be blocked to complete the application startup. For a detailed description of the layer relationship between the first, second, and third layers, see Figure 5, where the icon layer is the first layer, the startup page layer is the second layer, and the application window layer is the third layer.

[0467] For example, the electronic device 100 can implement the playback of the window startup animation through SurfaceFlinger. Before the electronic device 100 displays the window startup animation, the electronic device 100 can pass the animation properties of the startup page animation to the application window through the RT thread.

[0468] For example, if the icon startup animation, startup page animation, and window startup animation are displayed in superposition, referring to Figures 2A-2G, assuming that the application window is drawn after the electronic device 100 displays Figure 2E, image 05 shown in Figure 2F and image 06 shown in Figure 2G are both images obtained by superimposing the image frames of the icon startup animation, startup page animation, and window startup animation at the same time, or, referring to Figures 3A-3G, assuming that the application window is drawn after the electronic device 100 displays Figure 3D, image 14 shown in Figure 3E, image 15 shown in Figure 3F, and image 16 shown in Figure 3G are all images obtained by superimposing the image frames of the icon startup animation, startup page animation, and window startup animation at the same time.

[0469] It can be understood that when the transparency of the image frame of the window startup animation becomes 0, only the image frame of the window startup animation is visible in the image superimposed by the electronic device 100.

[0470] In some embodiments, the startup page animation may stop displaying when the electronic device 100 displays the window startup animation. This is because the startup page animation and the first few frames of the window startup animation may be the same, and not displaying the startup animation when the electronic device 100 displays the window startup animation can save power.

[0471] Also, please note that the content displayed in the application window may switch while the application window is enlarged or after the window startup animation ends. For example, during the startup process of some applications, a preset application startup page image may be displayed before switching to the application's main page.

[0472] For example, if the application startup page of the first application is not the main page of the application, after the electronic device 100 displays the fourth image of the window startup animation, the electronic device can display the process of changing from the fifth image to the third page, the content of the second page includes the content of the fourth image, the size of the fifth image is greater than or equal to the size of the fourth image, the content of the third page includes the content of the fifth image, the third page is the main page of the first application, and the second page and the third page are different.

[0473] In some implementations, the content of the second page may include part or all of the content of the fourth image, and the content of the third page may include part or all of the content of the fifth image.

[0474] That is to say, if the application startup page is not the main page of the application, then when the electronic device 100 displays the window startup animation, there may be a process of first displaying the process of zooming in from the third image to the application startup page, and then displaying the process of zooming in to the main page of the application.

[0475] For example, Figures 3A to 3E, 3I, and 3H are user interfaces displayed sequentially by the electronic device 100 after the application is started. Assuming that the application window is drawn after the electronic device 100 displays Figure 3D, the image 14 shown in Figure 3E, the image 15' shown in Figure 3I, and the user interface 40 shown in Figure 3H are all obtained based on the image frames in the window startup animation. Among them, in the image 14 shown in Figure 3E, the image frame in the window startup animation is determined based on the application startup page image preset by the music application. The image 14 may refer to the fourth image, which shows the process of changing to the application startup page image. In the image 15' shown in Figure 3I and the user interface 40 shown in Figure 3H, the image frame in the window startup animation is determined based on the main page of the music application. The image 15' and the user interface 40 show the process of changing to the main page of the music application. The image 15' may refer to the fifth image, and the page displayed in the user interface 40 may refer to the third page.

[0476] In addition, after the window startup animation ends, depending on how the first application is started, there are two situations:

[0477] 1) If the user operation mentioned in step S301 is used to trigger a cold start of an application, the electronic device 100 displays the main page of the first application in the application window of the first application

[0478] 2) If the user operation mentioned in step S301 is used to trigger a hot start of an application, the electronic device 100 displays the page that the first application displayed before it last retreated to the background in the application window of the first application.

[0479] In general, after the electronic device 100 detects the user operation on the first interface element, the electronic device 100 can display the transition animation from the first interface element to the application startup page by displaying icon startup animation, startup page animation, and window startup animation, thereby improving the visual experience when the application starts.

[0480] In some embodiments, if the electronic device 100 detects a user operation to exit the first application after the display of the startup animation has been completed or during the display of the startup animation, the electronic device 100 may display the exit animation.

[0481] The exit animation may include multiple frames of images that are arranged in reverse chronological order with respect to the currently displayed startup animation. That is, after the electronic device 100 detects the user's operation of exiting the application, the electronic device 100 may display the image frames of the currently displayed startup animation in reverse order.

[0482] For example, referring to Figures 10A-10G, the user operation of exiting the first application may refer to the sliding operation shown in Figure 10A. After the electronic device 100 detects the user's operation of exiting the application, the electronic device 100 may display the user interfaces shown in Figures 10A-10G in sequence.

[0483] In this way, the electronic device 100 can directly use the image frames of the startup animation cached when the application is started to display the exit animation, thereby reducing the amount of calculation of the electronic device 100.

[0484] In some embodiments, during the process of the electronic device displaying the icon startup animation, the startup page animation, and the window startup animation, when the electronic device displays the sixth image in the icon startup animation, the seventh image in the startup page animation, and the eighth image in the window startup animation, if the electronic device 100 detects a second operation, the second operation is used to exit the first application; in response to the second operation, the electronic device 100 can display a first exit animation, a second exit animation, and a third exit animation, the first exit animation including a process of changing from the sixth image to the first interface element, the second exit animation including a process of changing from the seventh image to the first image, and the third exit animation including a process of changing from the eighth image to the third image.

[0485] In this way, the electronic device 100 can switch from the startup animation to the exit animation based on the user's operation of exiting the application, and display the zooming process from the application page to the application icon, thereby improving the user's visual experience.

[0486] In some embodiments, during the process of the electronic device 100 displaying the icon startup animation and the startup page animation, the electronic device 100 can also detect the user's sliding operation, and change the display direction and / or display process of the image frame of the icon startup animation and the startup page animation displayed by the electronic device 100 based on the sliding operation.

[0487] For example, the electronic device 100 may determine the display direction and / or display process of the image frames in the icon startup animation and the startup page animation according to the sliding speed, sliding distance, sliding direction, etc. of the sliding operation.

[0488] For example, if the sliding operation is an operation of pressing and sliding the screen upward, the electronic device 100 can reversely display the image frames of the currently displayed icon startup animation and startup page animation.

[0489] For another example, if the sliding operation is an operation of pressing and sliding the screen, the electronic device 100 can continue to display the image frames of the image startup animation and the startup page animation that are not currently playing.

[0490] Exemplarily, when the electronic device displays the ninth image in the first startup animation and the tenth image in the second startup animation, the electronic device detects a third operation, which is a sliding operation; when the third operation is the operation of pressing and holding the screen and sliding up, the electronic device can display the first exit animation and the second exit animation as the user presses and holds the screen and slides up, the first exit animation includes the process of changing from the ninth image to the first interface element, and the second exit animation includes the process of changing from the tenth image to the first image; or when the third operation is the operation of pressing and holding the screen and sliding down, the electronic device can display the process of gradually changing from the ninth image to the icon startup page, and the process of gradually changing from the tenth image to the first page as the user presses and holds the screen and slides down.

[0491] In this way, the electronic device 100 controls the display process of the startup animation based on the user's sliding operation, and flexibly changes the display direction and / or display process of the image frame in the current startup animation based on the direction of the user's sliding.

[0492] In some implementations, the electronic device 100 may generate an icon launch page based on the color extracted from the first interface element.

[0493] For example, the electronic device 100 can set the background layer of the icon launch page based on the color extracted from the first interface element, and set the background layer of the icon launch page to a gradient background. For example, the electronic device 100 can extract the colors of the upper and lower endpoints of the first interface element and use the colors of these two endpoints to set a gradient background that transitions from the color of the upper endpoint to the color of the lower endpoint.

[0494] For layered icons, the electronic device 100 can use the foreground layer of the first interface element to set the foreground layer of the icon launch page, while the background layer of the icon launch page is a gradient background generated by extracting the colors from the first interface element. In this way, for icons with complex patterns in the background layer of the first interface element, the electronic device 100 does not need to use this complex pattern to generate the background layer of the icon launch page, which would cause the background layer of the image frame of the icon launch animation to be too fancy, thereby improving the neatness and aesthetics of the picture.

[0495] For non-layered icons, the electronic device 100 can use the first interface element to set the foreground layer of the icon startup page. Compared with using a solid color picture as the background layer of the icon startup page, using a gradient picture as the background layer of the icon startup page can increase the richness of the picture and enhance the visual effect of the icon startup animation.

[0496] The following describes a detailed process of the electronic device 100 generating an icon startup page using the color of the first interface element using a specific embodiment.

[0497] FIG19 is a flow chart of generating an icon startup page using the color of a first interface element according to an embodiment of the present application.

[0498] S401. The electronic device 100 obtains the colors of the four endpoints of the first interface element.

[0499] The electronic device 100 may set the background layer of the icon startup page according to the colors of the four endpoints of the first interface element.

[0500] The color of the first interface element can be represented by an HSB color value or an RGB value, where an HSB color value includes three parameters: Hue, Saturation, and Brightness, and an RGB value includes three parameters: Red, Green, and Blue. This embodiment of the application does not limit the parameters used to represent the color of the interface element.

[0501] For example, the four endpoints may be the upper endpoint, the lower endpoint, the left endpoint, and the right endpoint of the first interface element, respectively. Furthermore, the four endpoints may refer to endpoints on the boundary of the first interface element.

[0502] In a specific implementation, when obtaining the colors of the four endpoints in the first interface element, the electronic device 100 can extract colors from the four edge positions of the first interface element, and use the extracted colors as the colors of the four endpoints in the first interface element.

[0503] It should be noted that since the first interface element may be an irregular icon, the edge of the first interface element may not contain any screen content. Therefore, after the electronic device 100 extracts the color, it can further determine whether the transparency of the extracted color is equal to 1. If it is equal to 1, it means that the extracted color is valid and can be used as the color extracted in the first interface element. If it is not equal to 1, the color can be extracted by moving one pixel toward the interior of the first interface element until a valid color is extracted.

[0504] For example, Figure 20 shows a schematic diagram of four endpoints for extracting color from an application icon, taking the first interface element as an example. As shown in Figure 20, the upper endpoint may refer to the midpoint of the upper boundary of the application icon, the lower endpoint may refer to the midpoint of the lower boundary of the application icon, the left endpoint may refer to the midpoint of the left boundary of the application icon, and the right endpoint may refer to the midpoint of the right boundary of the application icon.

[0505] S402. The electronic device 100 determines whether the colors of the upper endpoint and the lower endpoint are the same.

[0506] For example, taking HSB color value as an example, the electronic device 100 can compare the HSB color values ​​of the upper endpoint and the lower endpoint. If the HSB color values ​​of the upper endpoint and the lower endpoint are the same, it means that the colors of the upper endpoint and the lower endpoint are the same.

[0507] Optionally, if the difference in HSB color value between the upper endpoint and the lower endpoint is less than a first threshold, for example, the first threshold may be 5, the upper endpoint and the lower endpoint may be considered to have the same color.

[0508] When the colors of the upper endpoint and the lower endpoint are the same, step S403 is executed; otherwise, step S406 is executed.

[0509] S403. The electronic device 100 determines whether the colors of the left endpoint and the right endpoint are the same.

[0510] For example, taking HSB color value as an example, the electronic device 100 can compare the HSB color values ​​of the left endpoint and the right endpoint. If the HSB color values ​​of the left endpoint and the right endpoint are the same, it means that the colors of the left endpoint and the right endpoint are the same.

[0511] Optionally, if the difference between the HSB color values ​​of the left endpoint and the right endpoint is less than a threshold, such as 5, it can also be considered that the colors of the left endpoint and the right endpoint are the same.

[0512] If the colors of the left endpoint and the right endpoint are the same, execute step S404; otherwise, execute step S407.

[0513] S404. The electronic device 100 determines whether the first interface element is a layered icon.

[0514] If the first interface element includes multiple layers, the first interface element is a layered icon; otherwise, the first interface element is a non-layered icon.

[0515] If the first interface element is a layered icon, execute step S405; otherwise, execute step S407.

[0516] It can be understood that step S404 is an optional step. In this case, if the colors of the left endpoint and the right endpoint are the same, the electronic device 100 can directly execute step S407 after executing step S403, that is, it does not distinguish whether the first interface element is a layered icon, and directly generates the icon startup page according to step S407.

[0517] S405. The electronic device 100 determines the foreground layer of the icon launch page according to the foreground layer of the first interface element, and determines the background layer of the icon launch page to be a gradient background according to the colors of the upper and lower endpoints of the first interface element.

[0518] Specifically, the foreground layer of the icon launch page can be the foreground layer of the first interface element enlarged to a certain proportion, and the background layer of the icon launch page can be a newly added gradient background. The color of the gradient background can be a gradient color that transitions from top to bottom according to the color of the upper end point of the first interface element to the color of the lower end point.

[0519] It is understandable that if the color values ​​of the upper endpoint and the lower endpoint of the first interface element are equal, the newly added gradient background is a solid color background.

[0520] That is to say, if the colors of the four endpoints of the first interface element are almost the same, the electronic device 100 can use the colors of the upper endpoint and the lower endpoint to set the background layer of the icon startup page, set the color of the top of the background layer to the color of the upper endpoint of the first interface element, and set the color of the bottom of the background layer to the color of the lower endpoint of the first interface element, and then complete the determination of the color of the background layer by setting the color of the middle layer of the background layer to the transition color of the colors at both ends.

[0521] It can be understood that in other embodiments of the present application, the electronic device 100 can also use the colors of the left and right endpoints of the first interface element to set the background layer of the icon startup page, and set the color of the background layer to a gradient color that transitions from left to right according to the color of the left endpoint of the first interface element to the color of the right endpoint of the first interface element.

[0522] Exemplarily, in order to better understand the process of generating the gradient background of the icon startup page, FIG. 21 takes the first interface element as an application icon as an example, and shows a schematic diagram of the icon startup page generated by step S405.

[0523] As shown in Figure 21, the color of the upper endpoint of the application icon is white, and the color of the lower endpoint is light gray. Assuming that the difference between the color values ​​of white and light gray is less than the first threshold, the icon startup page generated based on the application icon can be image 51 shown in Figure 21. The foreground layer of image 51 is the foreground layer of the application icon, and the background layer of image 51 is a gradient background that transitions from white at the top to light gray at the bottom.

[0524] S406. The electronic device 100 determines whether the colors of the upper endpoint and the lower endpoint are similar.

[0525] For example, taking HSB color value as an example, the electronic device 100 can compare the difference in HSB color value of the upper endpoint and the lower endpoint. If the difference is less than a second threshold, such as 15, it means that the colors of the upper endpoint and the lower endpoint are similar.

[0526] If the colors of the upper endpoint and the lower endpoint are similar, step S407 is executed; otherwise, step S408 is executed.

[0527] S407. The electronic device 100 determines the foreground layer of the icon launch page according to the first interface element, and determines the background layer of the icon launch page as a gradient background according to the colors of the upper and lower endpoints of the first interface element.

[0528] Specifically, the foreground layer of the icon launch page can be the first interface element enlarged to a certain proportion, and the background layer of the icon launch page can be a newly added gradient background. The color of the gradient background can be a gradient color that transitions from top to bottom according to the color of the upper end point of the first interface element to the color of the lower end point.

[0529] In combination with steps S403, S404, and S406, it can be seen that when the colors of the upper endpoint and the lower endpoint in the first interface element are the same, the colors of the left endpoint and the right endpoint are the same, and the first interface element cannot be split; when the colors of the upper endpoint and the lower endpoint in the first interface element are the same, the colors of the left endpoint and the right endpoint are different; and when the colors of the upper endpoint and the lower endpoint in the first interface element are similar, the electronic device 100 can determine the foreground layer of the icon startup page based on the first interface element that is magnified by a certain proportion, and determine the background layer of the icon startup page according to the colors of the upper endpoint and the lower endpoint of the first interface element.

[0530] Exemplarily, in order to better understand the process of generating the gradient background of the icon startup page, FIG. 22 takes the first interface element as an application icon as an example, and shows a schematic diagram of the icon startup page generated by step S407.

[0531] As shown in Figure 22, the color of the upper endpoint of the application icon is white, and the color of the lower endpoint is gray. Assuming that the difference between the color values ​​of white and gray is less than the second threshold, the icon startup page generated based on the application icon can be image 52 shown in Figure 22. The foreground layer of image 52 is the foreground layer of the application icon, and the background layer of image 52 is a gradient background that transitions from white at the top to gray at the bottom.

[0532] S408. The electronic device 100 determines whether the colors of the upper endpoint and the left endpoint are similar.

[0533] For example, taking HSB color value as an example, the electronic device 100 can compare the difference in HSB color value of the upper endpoint and the left endpoint. If the difference is less than a second threshold, such as 15, it means that the colors of the upper endpoint and the left endpoint are similar.

[0534] If the colors of the upper endpoint and the left endpoint are similar, step S409 is executed; otherwise, step S410 is executed.

[0535] S409. The electronic device 100 determines the foreground layer of the icon launch page according to the first interface element, and determines the background layer of the icon launch page as a gradient background according to the colors of the upper and left endpoints of the first interface element.

[0536] Specifically, the foreground layer of the icon launch page can be the first interface element enlarged to a certain proportion, and the background layer of the icon launch page can be a newly added gradient background. The color of the gradient background can be a gradient color that transitions from top to bottom according to the color of the upper end point of the first interface element to the color of the left end point.

[0537] That is, if the colors of the upper endpoint and the left endpoint of the first interface element are similar, the electronic device 100 can set the gradient background of the icon startup page according to the colors of the upper endpoint and the left endpoint of the first interface element.

[0538] Exemplarily, in order to better understand the process of generating the gradient background of the icon startup page, FIG. 23 takes the first interface element as an application icon as an example, and shows a schematic diagram of the icon startup page generated by step S409.

[0539] As shown in Figure 23, the color of the upper endpoint of the application icon is white, the color of the lower endpoint is black, and the color of the left endpoint is gray. Assuming that the difference between the color values ​​of white and black is greater than the first threshold, and the difference between the color values ​​of white and gray is less than the first threshold, the icon startup page generated based on the application icon can be image 53 shown in Figure 23. The foreground layer of image 53 is the foreground layer of the application icon, and the background layer of image 53 is a gradient background that transitions from white at the top to gray at the bottom.

[0540] S410. The electronic device 100 determines whether the colors of the upper endpoint and the right endpoint are similar.

[0541] For example, taking HSB color value as an example, the electronic device 100 can compare the difference in HSB color value of the upper endpoint and the right endpoint. If the difference is less than a second threshold, such as 15, it means that the colors of the upper endpoint and the right endpoint are similar.

[0542] If the colors of the upper endpoint and the right endpoint are similar, step S411 is executed; otherwise, step S412 is executed.

[0543] It can be understood that the embodiment of the present application does not limit the execution order of step S408 and step S410. The electronic device 100 can first execute step S408, and then execute step S410, that is, first determine whether the colors of the upper endpoint and the left endpoint of the first interface element are similar. If they are not similar, then determine whether the colors of the upper endpoint and the right endpoint of the first interface element are similar. Alternatively, the electronic device 100 can also first execute step S410, and then execute step S408, that is, first determine whether the colors of the upper endpoint and the right endpoint of the first interface element are similar. If they are not similar, then determine whether the colors of the upper endpoint and the left endpoint of the first interface element are similar.

[0544] S411. The electronic device 100 determines the foreground layer of the icon launch page according to the first interface element, and determines the background layer of the icon launch page as a gradient background according to the colors of the upper and right endpoints of the first interface element.

[0545] Specifically, the foreground layer of the icon launch page can be the first interface element enlarged to a certain proportion, and the background layer of the icon launch page can be a newly added gradient background. The color of the gradient background can be a gradient color that transitions from top to bottom according to the color of the upper end point of the first interface element to the color of the right end point.

[0546] That is, if the colors of the upper endpoint and the right endpoint of the first interface element are similar, the electronic device 100 can set the gradient background of the icon startup page according to the colors of the upper endpoint and the right endpoint of the first interface element.

[0547] Exemplarily, in order to better understand the process of generating the gradient background of the icon startup page, FIG. 24 takes the first interface element as an application icon as an example, and shows a schematic diagram of the icon startup page generated by step S411.

[0548] As shown in Figure 24, the color of the upper endpoint of the application icon is white, the color of the lower endpoint is black, the color of the left endpoint is black, and the color of the right endpoint is gray. Assuming that the difference between the color values ​​of white and black is greater than the first threshold, and the difference between the color values ​​of white and gray is less than the first threshold, the icon startup page generated based on the application icon can be image 54 shown in Figure 24. The foreground layer of image 54 is the foreground layer of the application icon, and the background layer of image 54 is a gradient background that transitions from white at the top to gray at the bottom.

[0549] S412. The electronic device 100 determines the foreground layer of the icon startup page based on the first interface element, corrects the colors of the upper and lower endpoints of the first interface element, and then determines the background layer of the icon startup page as a gradient background based on the corrected colors.

[0550] The color correction may refer to adjusting the color of the upper endpoint and / or the lower endpoint to reduce the color difference between the two endpoints so that the colors of the two endpoints are similar after adjustment.

[0551] For example, the color of the upper endpoint can be controlled to remain unchanged, and the color of the lower endpoint can be adjusted so that the adjusted color of the lower endpoint is similar to the color of the upper endpoint. Alternatively, the color of the lower endpoint can be controlled to remain unchanged, and the color of the lower endpoint can be adjusted so that the adjusted color of the upper endpoint is similar to the color of the upper endpoint. Alternatively, the colors of the upper and lower endpoints can be adjusted simultaneously so that the adjusted color of the upper endpoint is similar to the adjusted color of the lower endpoint.

[0552] For example, if the S value in the HSB color value of the upper endpoint is 80 and the S value in the HSB color value of the lower endpoint is 40, the S value in the HSB color value of the lower endpoint can be changed to 60 so that the color of the lower endpoint after the change is close to the color of the upper endpoint.

[0553] Specifically, the foreground layer of the icon launch page can be the first interface element enlarged to a certain proportion, and the background layer of the icon launch page can be a newly added gradient background. The color of the gradient background can be a gradient color that transitions from top to bottom according to the color of the upper end point to the lower end point of the corrected first interface element.

[0554] That is to say, if the color of the upper endpoint of the first interface element is significantly different from that of the other three endpoints, the electronic device 100 can adjust the color difference between the upper endpoint and / or the lower endpoint, and use the color of the adjusted endpoint to set the gradient background of the icon startup page.

[0555] Exemplarily, in order to better understand the process of generating the gradient background of the icon startup page, FIG. 25 takes the first interface element as an application icon as an example, and shows a schematic diagram of the icon startup page generated by step S412.

[0556] As shown in Figure 25, the color of the upper endpoint of the application icon is white, the color of the lower endpoint is black, the color of the left endpoint is black, and the color of the right endpoint is black. Assuming that the difference between the color values ​​of white and black is greater than the first threshold, and the difference between the color values ​​of white and gray is less than the first threshold, the icon startup page generated based on the application icon can be image 55 shown in Figure 25. The foreground layer of image 55 is the foreground layer of the application icon, and the background layer of image 55 is a gradient background that transitions from white at the top to gray at the bottom, and the gray is the color obtained by adjusting the color of the lower endpoint.

[0557] It can be understood that the above Figures 20 to 25 are only schematic examples for a better understanding of the present solution and do not constitute a limitation to the embodiments of the present application.

[0558] In addition, it should be noted that Figure 19 only exemplifies a detailed process of using the colors in the first interface element to generate an icon startup page. In other embodiments of the present application, the electronic device 100 can also select more or better colors in the first interface element to generate a gradient background for the icon startup page. The present application does not limit the position of the endpoints selected by the electronic device 100, the number of endpoints, the order of determining whether the colors between the endpoints are the same or similar, etc.

[0559] In general, the electronic device 100 can generate the background layer of the icon startup page using the colors extracted from the first interface element. Specifically, two colors can be extracted from the first interface element, and these two colors can be used to set the background layer of the icon startup page as a gradient background layer, thereby making the image in the icon startup animation more vivid and rich. Furthermore, if the difference between the two extracted colors is large, the extracted colors can be corrected to narrow the difference between the two colors, and the two corrected colors can be used to set the gradient background layer, thereby ensuring that the color tone of the gradient background layer is more harmonious.

[0560] FIG26 is a timing comparison diagram of an application startup method provided in an embodiment of the present application and an application startup method.

[0561] As shown in Figure 26, timeline 1 shows a timing diagram of an application startup method, and timeline 2 shows a timing diagram of the application startup method provided in an embodiment of the present application.

[0562] In timeline 1, after the user starts the application, the application window needs to be prepared first. After the application window is ready, the window startup animation is started to complete the application startup.

[0563] In the specific implementation, after detecting the user's operation to start the application, the UI thread of the desktop will respond to the operation, notify the system service, and start the application. After receiving the notification, the system service mainly performs the following tasks: apply for the application window, draw the application startup page, switch the application life cycle, and notify the UI thread after the application window application is completed. After receiving the notification, the UI thread starts playing the window startup animation and finally completes the startup of the application.

[0564] As can be seen, during the app startup process, the UI thread needs to communicate multiple times with system services. This involves numerous intermediate links, each with complex dependencies. This results in slow app startup response and a long visual wait for users. Furthermore, the window startup animation plays on the UI thread, which is heavily loaded, causing the window startup animation to lag and experience frame drops.

[0565] In timeline 2, when the application starts, the first page with the same content as the application startup page can be preloaded, and then the icon startup animation and startup page animation can be played. After the application window is ready, the window startup animation can be played continuously to complete the application startup.

[0566] In the specific implementation, after detecting the user's operation of launching an application, the UI thread of the desktop will draw the icon startup page corresponding to the icon, as well as the first page, construct the animation attribute parameters of the icon startup animation and the startup page animation, and notify the rendering thread to execute the icon startup animation and the startup page animation. The rendering thread synchronizes the animation attribute parameters of the icon startup animation or the startup page animation to SurfaceFlinger, and SurfaceFlinger starts the window startup animation based on the animation attribute parameters after the application window is prepared.

[0567] It can be seen that after detecting the user's operation of launching the application, the application can be started directly. The playback of the icon startup animation and the startup page animation no longer waits for the window drawing of the system service, and the blocking of the UI thread will not affect the playback of the window startup animation.

[0568] Comparing Timeline 1 and Timeline 2, we can see that after the user launches the app, Timeline 2 can quickly launch the icon startup animation and the startup page animation, showing the user the animation triggered by the user launching the app. On Timeline 1, because it needs to wait for the application window to be ready, it takes a longer time to show the animation triggered by the user launching the app. In addition, because Timeline 2 loads the first page and displays the startup page animation before the application window is ready, it avoids a long wait after the user launches the app before the startup page is displayed. And because the content of the first page is the same as the content of the application startup page, the abruptness of the transition from the application icon to the application startup page in the startup animation is reduced.

[0569] FIG27 is an internal module interaction diagram of the electronic device 100 provided by an embodiment of the present application, which displays an exit animation after the user interrupts the application startup process.

[0570] Among them, the electronic device 100 displays the exit animation after the application startup process is interrupted by the user, which mainly involves the interaction between the UI thread, Framework, and RT thread. Specific definitions of the UI thread, Framework, and RT thread can be found in the relevant content in Figure 14 above, which will not be repeated here.

[0571] As shown in Figure 27, after the application startup process is interrupted by the user, the main internal implementations involved include:

[0572] S51. The UI thread plays the startup animation through the RT thread.

[0573] Among them, the UI thread can start the icon startup animation and the startup page animation through the RT thread after detecting the user operation of the user starting the application. Specific internal implementation of the electronic device 100 starting the icon startup animation and the startup page animation can be found in the description of the aforementioned steps S11-S20, which will not be repeated here.

[0574] S52. The UI thread detects an operation to exit the application.

[0575] The user operation may include a user operation acting on starting the animation, such as a click operation or a slide operation.

[0576] S53. The UI thread determines whether the application window is ready.

[0577] The electronic device 100 may start preparing the application window after detecting a user operation to start the application. Specifically, the UI thread may trigger a determination as to whether the application window is ready after detecting an operation to exit the application.

[0578] If the application window is ready, step S54 is executed to start the exit animation from the application window to the icon; otherwise, step S55 is executed to create the icon-following animation.

[0579] S54.UI thread starts the exit animation from the application window to the icon.

[0580] If the application window is ready, the UI thread starts the exit animation from the application window to the icon. This exit animation is used to show the process of the application window gradually shrinking, transitioning to the icon and then gradually shrinking.

[0581] That is, during the process of application startup and displaying the startup animation, when the electronic device 100 detects the user's operation to exit the application, if the current application is ready, the electronic device 100 switches from the currently displayed startup animation to the exit animation from the application window to the icon.

[0582] Optionally, if the operation of exiting the application includes a sliding operation, the exit animation may further include a hand-following animation, which is used to show the process of image frames following the sliding track of the sliding operation in the first few frames of the exit animation.

[0583] For example, referring to Figures 12A to 12E, Figure 12A shows a sliding operation of exiting an application detected by the electronic device 100 when displaying a startup animation, and images 31, 32, and 33 shown in Figures 12B to 12E are multiple frames of images included in the exit animation from the application window to the image, wherein the motion trajectories of the image frames shown in Figures 12B and 12C show a hand-following animation in which the image frames move following the sliding estimation of the startup operation.

[0584] S55.The UI thread creates the icon exit animation through the RT thread.

[0585] If the application window is not ready, the UI thread uses SurfaceFlinger to create an icon exit animation, which displays the application icon gradually shrinking. The frames included in the icon exit animation can be the frames of the icon startup animation played back in reverse.

[0586] That is, during the process of application startup and displaying the icon startup animation, when the electronic device 100 detects the user operation of exiting the application, if the current application window is not ready, the electronic device 100 can reverse the icon startup animation and display the exit animation of the icon gradually shrinking.

[0587] It is understandable that, after detecting the operation of exiting the application, the electronic device 100 may also create and start the icon exit animation without determining whether the application window is ready. In other words, step S53 is an optional step.

[0588] Furthermore, the icon exit animation may include a hand-following animation. That is, when the operation of exiting the application is a sliding operation, the movement trajectory of the icon will also move in the direction of the user's sliding while the electronic device 100 displays the icon in a gradually shrinking state.

[0589] That is, during the process of application startup and displaying the icon startup animation, when the electronic device 100 detects the user operation of exiting the application, if the current application window is not ready, the electronic device 100 can display the process of the icon moving and gradually shrinking according to the user's sliding operation.

[0590] S56.The UI thread starts the icon exit animation through the RT thread.

[0591] S57. The UI thread determines whether the application window is ready.

[0592] After the electronic device 100 starts the icon exit animation, that is, during the process of displaying the icon exit animation, the electronic device 100 may continuously or periodically execute step S57 to determine whether the application window is ready.

[0593] If the application window is ready, step S54 is executed to start the exit animation from the application window to the icon. Otherwise, the electronic device 100 continues to play the icon exit animation until the icon exit animation is finished, and step S58 is executed.

[0594] That is, when the electronic device 100 displays the icon exit animation, if the application window is ready, the electronic device 100 can switch from the current icon exit animation to the application window to icon exit animation.

[0595] In some embodiments, if the icon exit animation includes a hand-following animation, the electronic device 100 can trigger a determination of whether the application window is ready after the hand-following animation ends. If the application window is ready, the electronic device 100 switches to the exit animation from the application window to the icon. If the application window is not ready, the electronic device 100 displays the icon return to desktop animation, that is, displays the process of the application icon gradually shrinking to return to the desktop.

[0596] For example, referring to Figures 13A-13C and 12D-12E, Figure 13A shows that the electronic device 100 detects a sliding operation to exit an application while displaying a startup animation, Figures 13A-13C show the icon following hand animation, and Figures 12D-12E show the exit animation from the application window to the icon.

[0597] For example, referring to Figures 13A-13E, Figure 13A shows that the electronic device 100 detects a sliding operation to exit an application while displaying a startup animation, Figures 13A-13C show an icon following hand animation, and Figures 13D-13E show an icon returning to the desktop animation.

[0598] In addition, it can be understood that step S57 is an optional step. After the electronic device 100 starts the icon exit animation, it is not necessary to determine whether the application window is ready. The icon exit animation can be played directly until the icon exit animation ends, completing the exit of the application.

[0599] S58.RT thread notifies UI thread that the exit animation is finished.

[0600] S59. The UI thread inhibits application startup through the Framework.

[0601] For example, the UI thread may suppress application startup through the activity manager service (AMS) in the Framework.

[0602] It can be seen that in the application exit process involved in the embodiment of the present application, different exit animations may exist depending on whether the application window is ready, providing users with a rich visual experience.

[0603] FIG28 is a flow chart of another display method provided in an embodiment of the present application.

[0604] S601. While displaying the icon startup animation, the electronic device 100 detects a second operation of exiting the first application.

[0605] The second operation may be a touch operation, a voice operation, etc. The embodiment of the present application does not limit the form of the second operation.

[0606] Exemplarily, the second operation may refer to the sliding operation shown in FIG. 12A or FIG. 13A .

[0607] S602. When the application window of the first application has been drawn, the electronic device 100 displays an exit animation from the application window of the first application to the icon. The exit animation includes a process of gradually shrinking the application window to the first interface element.

[0608] If the electronic device 100 detects a user operation of exiting the first application when the application window of the first application has been drawn, the currently displayed startup animation may be in the following two situations:

[0609] 1) The electronic device 100 has displayed the window startup animation

[0610] That is to say, when the electronic device 100 detects the user operation of exiting the first application, the window startup animation has been displayed. Then, the electronic device 100 can display these multiple frames of images in reverse order according to the image frames of the currently displayed window startup animation and icon startup animation.

[0611] 2) The electronic device 100 does not display the window startup animation

[0612] If the electronic device 100 detects the user's operation of exiting the application during the process of displaying the icon startup animation and the startup page animation, and the electronic device 100 has currently prepared the application window but has not displayed the window startup animation, then in response to the operation, the electronic device 100 can display a shrinking animation of the display content in the application window to the first interface element.

[0613] For example, referring to Figures 12A-12E, the electronic device 100 detects the user's operation of exiting the application when displaying image 04 shown in Figure 12A. Image 04 is drawn based on the image frame in the startup page animation. If the electronic device 100 completes the application window drawing after detecting the user's operation of exiting the application, image 31 shown in Figure 12B is an image frame drawn based on the display content in the application window. Figures 12B-12E show the animation of shrinking the content in the application window to the application icon 103A.

[0614] S603. When the application window of the first application is not completely drawn, the electronic device 100 displays an icon exit animation, which includes a process of shrinking the first interface element.

[0615] If the electronic device 100 detects the user's operation of exiting the application during the process of displaying the icon startup animation, and the electronic device 100 has not currently prepared the application window, then in response to the operation, the electronic device 100 can display a zoom-out animation of the image frame displayed when the operation of exiting the application is detected to the first interface element.

[0616] For example, referring to Figures 13A-13E, the electronic device 100 detects the user's operation of exiting the application when displaying image 04 shown in Figure 12A. Image 04 is drawn based on the image frame in the startup page animation. If the application window is not drawn after the electronic device 100 detects the user's operation of exiting the application, the electronic device 100 can display the icon exit animation shown in Figures 13B-13E. The icon exit animation is used to show the process of shrinking the application icon.

[0617] In some embodiments, upon detecting the second operation, the electronic device 100 may also directly respond to the second operation by reversing the image frames in the displayed icon startup animation, regardless of whether the application window has been drawn. In this way, the electronic device 100 can directly display an exit animation of the interface element shrinking to the user.

[0618] Alternatively, when the electronic device 100 detects the second operation, it can continue to display the M frames of the icon startup animation, then reverse the image frames of the icon startup animation that have been displayed, and gradually reduce the playback speed of the M frames of the M frames that continue to be displayed, while gradually increase the playback speed of the first L frames of the reversed image. In this way, the electronic device 100 can avoid switching to the exit animation too abruptly when detecting the user's exit operation, thereby improving the user's visual experience.

[0619] In addition, the exit animation displayed by the electronic device 100 may further include a hand-following animation, that is, the first few frames (eg, K frames) of images displayed in the exit animation may also move following the user's sliding trajectory.

[0620] Furthermore, if the application window is drawn after the electronic device 100 displays the hand-following animation, the electronic device 100 can switch to the animation of shrinking the content in the application window to the first interface element.

[0621] In some implementations, the electronic device 100 may also detect that the user has restarted the first application while displaying the exit animation, and continue to display the startup animation based on the currently displayed image frame.

[0622] FIG29 shows a schematic diagram of the hardware structure of the electronic device 100 .

[0623] The electronic device 100 may be a mobile phone, a tablet computer, a desktop computer, a laptop computer, a handheld computer, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a personal digital assistant (PDA), an augmented reality (AR) device, a virtual reality (VR) device, an artificial intelligence (AI) device, a wearable device, an in-vehicle device, a smart home device, and / or a smart city device. The embodiments of the present application do not impose any particular restrictions on the specific type of the electronic device.

[0624] The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0625] It should be understood that the structure illustrated in the embodiments of the present invention does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0626] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or integrated into one or more processors.

[0627] In some embodiments, the processor 110 may be configured to start a first application after detecting a first operation of the user, obtain a first page based on an application startup page of the first application, generate an icon startup animation, a startup page animation, a window startup animation, and the like.

[0628] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.

[0629] Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 110. If processor 110 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 110 latency, and thus improves system efficiency.

[0630] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0631] Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In other embodiments, the antennas can be used in conjunction with a tuning switch.

[0632] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0633] The modem processor may include a modulator and a demodulator. The modulator is used to modulate the low-frequency baseband signal to be transmitted into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After being processed by the baseband processor, the low-frequency baseband signal is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to the speaker 170A, the receiver 170B, etc.) or displays an image or video through the display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0634] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, demodulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, frequency modulate it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0635] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with a network and other devices through wireless communication technologies. The wireless communication technologies may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite based augmentation system (SBAS).

[0636] Electronic device 100 implements display functionality through a GPU, display screen 194, and an application processor. A GPU is a microprocessor for image processing that connects display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs that execute program instructions to generate or modify display information.

[0637] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD). The display panel can also be made of an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a miniLED, a microLED, a micro-OLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device can include one or N display screens 194, where N is a positive integer greater than one.

[0638] In some embodiments, display screen 194 may be used to display startup animations involved in the application startup process, including icon startup animations, startup page animations, window startup animations, and exit animations involved in the application exit process. For details about the content displayed on display screen 194, please refer to the aforementioned Figures 2A-2G, 3A-3I, 9A-9D, 10A-10G, 12A-12E, and 13A-13E.

[0639] The electronic device 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.

[0640] The internal memory 121 may include one or more random access memories (RAM) and one or more non-volatile memories (NVM).

[0641] The random access memory can be directly read and written by the processor 110, and can be used to store executable programs (such as machine instructions) of the operating system or other running programs, and can also be used to store user and application data.

[0642] The non-volatile memory may also store executable programs and user and application data, etc., and may be loaded into the random access memory in advance for direct reading and writing by the processor 110 .

[0643] The electronic device 100 can implement audio functions such as music playback and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0644] The touch sensor 180K is also called a "touch-sensitive device." The touch sensor 180K can be disposed on the display screen 194. The touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen." The touch sensor 180K is used to detect touch operations applied thereto or in the vicinity thereof. The touch sensor can transmit the detected touch operations to the application processor to determine the type of touch event. Visual output related to the touch operations can be provided via the display screen 194. In other embodiments, the touch sensor 180K can also be disposed on the surface of the electronic device 100, at a location different from that of the display screen 194.

[0645] It should be understood that each step in the above method embodiment can be completed by hardware integrated logic circuits in a processor or by software instructions. The method steps disclosed in the embodiments of the present application can be directly embodied as being executed by a hardware processor, or by a combination of hardware and software modules in a processor.

[0646] The present application also provides an electronic device, which may include a memory and a processor. The memory may be used to store a computer program, and the processor may be used to call the computer program in the memory so that the electronic device executes the method executed by the electronic device 100 in any of the above embodiments.

[0647] The present application also provides a chip system, which includes at least one processor for implementing the functions involved in the method performed by the electronic device 100 in any of the above embodiments.

[0648] In one possible design, the chip system further includes a memory, which is used to store program instructions and data, and the memory is located inside or outside the processor.

[0649] The chip system can be composed of chips, or can include chips and other discrete devices.

[0650] Optionally, there may be one or more processors in the chip system. The processor may be implemented in hardware or software. When implemented in hardware, the processor may be a logic circuit, an integrated circuit, etc. When implemented in software, the processor may be a general-purpose processor implemented by reading software code stored in a memory.

[0651] Optionally, the memory in the chip system may be one or more. The memory may be integrated with the processor or may be provided separately from the processor, which is not limited in the embodiments of the present application. For example, the memory may be a non-transient processor, such as a read-only memory (ROM), which may be integrated with the processor on the same chip or provided on different chips. The embodiments of the present application do not specifically limit the type of memory or the configuration of the memory and the processor.

[0652] Exemplarily, the chip system may be a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on chip (SoC), a central processor unit (CPU), a network processor (NP), a digital signal processor (DSP), a microcontroller unit (MCU), a programmable logic device (PLD) or other integrated chips.

[0653] The present application also provides a computer program product, which includes: a computer program (also referred to as code, or instructions), which, when executed, enables a computer to execute any method executed by the electronic device 100 in any of the above embodiments.

[0654] The present application also provides a computer-readable storage medium storing a computer program (also referred to as code or instruction). When the computer program is executed, the computer executes the method executed by any one of the electronic devices 100 in any of the above embodiments.

[0655] It should be understood that the processor in the embodiments of the present application can be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above-mentioned method embodiment can be completed by hardware integrated logic circuits in the processor or by software instructions. The above-mentioned processor can be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. The various methods, steps, and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in the embodiments of the present application can be directly implemented and executed by a hardware decoding processor, or by a combination of hardware and software modules in the decoding processor. The software module can be located in a storage medium well-known in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, etc. The storage medium is located in the memory, and the processor reads the information in the memory and, in conjunction with its hardware, completes the steps of the above-mentioned method.

[0656] In addition, embodiments of the present application further provide a device. Specifically, the device may be a component or module, and may include one or more processors and a memory connected to each other. The memory is configured to store a computer program. When the computer program is executed by one or more processors, the device performs the methods described in each of the above method embodiments.

[0657] The apparatus, computer-readable storage medium, computer program product, or chip provided in the embodiments of the present application are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects of the corresponding methods provided above, and will not be repeated here.

[0658] The various implementation modes of this application can be combined arbitrarily to achieve different technical effects.

[0659] In the above embodiments, all or part of the embodiments may be implemented by software, hardware, firmware, or any combination thereof. When implemented using software, all or part of the embodiments may be implemented in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described herein are generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via a wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) method. The computer-readable storage medium may be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrated therein. The available medium may be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive (SSD)).

[0660] Those skilled in the art will appreciate that all or part of the process steps in the above-described method embodiments can be implemented by a computer program instructing the relevant hardware. The program can be stored in a computer-readable storage medium, and when executed, the program can include the process steps in the above-described method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as ROM or random access memory (RAM), magnetic disks, or optical disks.

[0661] In short, the above description is only an embodiment of the technical solution of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent replacements, improvements, etc. made based on the disclosure of the present invention should be included in the scope of protection of the present invention.

Claims

1. A display method, wherein the method includes: detecting by the electronic device a first operation performed in relation to a first interface element, wherein the first operation is used to launch a first application; in response to the first operation, displaying by the electronic device a first startup animation and a second startup animation, wherein the first startup animation provides a process of gradually transitioning from the first interface element to the icon startup page, the second startup animation provides a process of gradually transitioning from the first image to the first page, the content of the first page contains the content of the first image, and the locations and sizes of the image frames of the first startup animation and the second startup animation at the same time are the same; displaying by the electronic device a second image of the second startup animation at a first point in time; and displaying by the electronic device a window launch animation at a second point in time, wherein the second point in time occurs after the first point in time, the window launch animation provides for a process of gradual transition from the third image to the second page of the first application, the content of the first page is the same as the content of the second page, the content of the second page contains the content of the third image, and the content of the third image contains the content of the second image.

2. The method according to paragraph 1, characterized in that the first launch animation provides for a transition process during which the transparency of the image increases, and the second launch animation provides for a transition process during which the transparency of the image decreases.

3. The method according to claim 1, characterized in that the first launch animation is displayed on the first layer, and the second launch animation is displayed on the second layer; and the first layer is above the second layer, and the first launch animation involves a transition process during which the image's opacity increases; or the first layer is below the second layer, and the second launch animation involves a transition process during which the image's opacity decreases.

4. The method according to paragraph 3, characterized in that the window launch animation is displayed on the third layer, and the third layer is located above the first layer and the second layer.

5. The method according to any one of paragraphs 1-4, characterized in that the locations, sizes and displayed content of the frames of the image of the second launch animation and the window launch animation at the same moment in time are the same.

6. The method according to any one of paragraphs 1-4, characterized in that in the processes of displaying the second launch animation and the window launch animation, the displayed content gradually increases, and the size of the displayed content gradually increases.

7. The method according to any one of paragraphs 1-4, characterized in that the method additionally includes: in response to the first operation, starting the electronic device to render the application window of the first application; and after the electronic device displays the first startup animation and the second startup animation and before displaying the window startup animation, the method further comprises: the electronic device has completed rendering the application window of the first application.

8. The method according to any one of paragraphs 1-4, characterized in that the first page is an image of the application launch page, pre-installed for the first application, the electronic device draws the first page based on the first information of the first application, the first page is a screenshot of the page of the first application before the last transfer of the first application to the background mode, or the first page is a screenshot of the main page of the first application.

9. The method according to any one of paragraphs 1-4, characterized in that the method additionally includes: after the electronic device displays the fourth image of the window startup animation, displaying by the electronic device the process of transitioning from the fifth image to the third page, wherein the content of the second page contains the content of the fourth image, the size of the fifth image is greater than or equal to the size of the fourth image, the content of the third page contains the content of the fifth image, the third page is the main page of the first application, and the second page is different from the third page.

10. The method according to any of paragraphs 1-4, characterized in that before the electronic device detects the first operation, the first application does not run in the background of the electronic device, and after the window launch animation ends, the method additionally includes: displaying the home page of the first application by the electronic device in the application window of the first application; or before the electronic device detects the first operation, the first application runs in the background of the electronic device, and after the window launch animation ends, the method additionally includes: the display by the electronic device in the application window of the first application of the page displayed by the first application before the last time the first application was put into the background.

11. The method according to any one of paragraphs 1-4, characterized in that the first interface element comprises a first foreground layer and a first background layer, and the icon launch page comprises a second foreground layer and a second background layer, and before the electronic device displays the first launch animation, the method further includes: electronically scaling up the first foreground layer based on the first proportion to produce a second foreground layer; enlarging the first background layer by the electronic device based on the second proportion to obtain a second background layer, wherein the size of the second background layer is the same as the size of the first page; and generating by the electronic device an image frame of the first startup animation based on the second foreground layer and the second background layer, wherein the first startup animation is used to display the process of increasing the scale of the first foreground layer to the second foreground layer and the process of increasing the scale of the first background layer to the second background layer.

12. The method according to paragraph 11, characterized in that the first proportion differs from the second proportion.

13. The method according to any one of paragraphs 1-4, characterized in that the icon launch page comprises a second foreground layer and a second background layer, and before the electronic device displays the first launch animation, the method further comprises: increasing the scale of the first interface element by the electronic device based on the third proportion to obtain a second foreground layer; and generating by the electronic device an image frame of the first startup animation based on the second foreground layer and the second background layer, wherein the second background layer contains the first picture, the size of the first picture is the same as the size of the first page, and the first startup animation is used to display the process of increasing the scale of the first interface element to the second foreground layer and the process during which the first picture appears and increases in scale.

14. The method according to paragraph 13, characterized in that the first picture is a single-color background picture of a first color, and the first color provides for any of the following cases: the first color is a preset color, the first color is a color contained in the first interface element, or the color value for the first color is a color value for a color contained in the first interface element multiplied by a coefficient; or the first image is a gradient background image that transitions from a second color to a third color, wherein the second color and / or the third color are derived from a color contained in the first interface element; or the first image contains a first region, a second region and a third region, the boundary line between the first region and the second region is the upper boundary of the second foreground layer, the boundary line between the second region and the third region is the lower boundary of the second foreground layer, the color of the first region is the fourth color contained in the upper boundary of the first interface element, the color of the second region is the fifth color contained in the lower boundary of the first interface element, and the color contained in the third region is a gradient color that transitions from the fourth color to the fifth color.

15. The method according to claim 13, characterized in that the width of the second foreground layer is equal to the width of the second background layer.

16. The method according to claim 11, characterized in that the generation by the electronic device of the image frame of the first launch animation based on the second foreground layer and the second background layer specifically includes: generating by the electronic device an image frame of the first startup animation by setting animation attributes of the second foreground layer and the second background layer, wherein the animation attributes of the image frames displayed at different times in the first startup animation are different, and the animation attributes provide for one or more of the following: offset, scaling, cropping, rounded corner or transparency.

17. The method according to any one of paragraphs 1-4, characterized in that before the electronic device displays the first startup animation, the method additionally includes: rendering of the first page by an electronic device.

18. The method according to any one of paragraphs 1-4, characterized in that before the electronic device displays the window launch animation, the method additionally includes: transferring by the electronic device an animation attribute of the second startup animation to the application window of the first application, wherein the animation attribute provides one or more of the following: offset, scaling, cropping, rounded corner, or transparency; and rendering by the electronic device of the frame of the window startup animation image based on the animation attribute of the second startup animation.

19. The method according to any one of paragraphs 1-4, characterized in that the second launch animation stops being displayed when the electronic device displays the window launch animation.

20. The method according to any one of paragraphs 1-4, characterized in that in the process during which the electronic device displays the first startup animation and the second startup animation, the method further includes: detecting by the electronic device a second operation, wherein the second operation is used to exit the first application; and in response to the second operation, reproducing in reverse order by the electronic device the image frames of the displayed first start-up animation and the displayed second start-up animation, or continuing to display by the electronic device M image frames of the first start-up animation and the second start-up animation, and then reproducing in reverse order the image frames of the displayed first start-up animation and the displayed second start-up animation, wherein in the M image frames displayed continuously, the playback speed of the M image frames gradually decreases over time, and the playback speed of the first L image frames played in reverse order gradually increases.

21. The method according to any one of paragraphs 1-4, characterized in that in the process during which the electronic device displays the first launch animation, the second launch animation and the window launch animation, the method further includes: when the electronic device displays a sixth image of the first startup animation, a seventh image of the second startup animation and an eighth image of the window startup animation, detecting by the electronic device a second operation, wherein the second operation is used to exit the first application; and in response to the second operation, displaying by the electronic device a first exit animation, a second exit animation and a third exit animation, wherein the first exit animation provides for a process of transition from the sixth image to the first interface element, the second exit animation provides for a process of transition from the seventh image to the first image, and the third exit animation provides for a process of transition from the eighth image to the third image.

22. The method according to any one of paragraphs 1-4, characterized in that the first interface element provides any of the following: an application icon, a service widget, a widget, a notification panel, and a task from the history in a multitasking interface.

23. The method according to any one of paragraphs 1-4, characterized in that the first launch animation and the second launch animation are created by a system module in the electronic device, and the system module differs from the first application.

24. An electronic device comprising a storage device, one or more processors and one or more programs, wherein when one or more processors execute one or more programs, the electronic device has the ability to implement the method according to any of paragraphs 1-23.

25. A machine-readable data carrier containing commands, wherein when the commands are executed on an electronic device, the electronic device has the ability to perform the method according to any of paragraphs 1-23.

26. A computer software product, wherein when executing the computer software product on a computer, the computer has the ability to perform the method according to any of paragraphs 1-23.