Display method, graphic interface and related device

Abstract

The present application discloses a display method, a graphical interface and related devices, the method comprising: detecting an operation of starting a first application acting on a first interface element, displaying an icon startup animation and a startup page animation, the icon startup animation comprising a process of gradually changing from the first interface element to the icon startup page, the startup page animation comprising a process of gradually changing from the first image to the first page, displaying a second image of the startup page animation at a first moment, and then displaying a window startup animation at a second moment, the window startup animation comprising a process of gradually changing from a third image to the 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 and the second page are the same, and the content of the second page comprises the content in the third image. It can be seen that after the user triggers the startup of the application, the startup animation of the interface element gradually transitioning to the application window can be viewed, avoiding the screen switching being too abrupt and improving the user's visual experience.

Description

Technical Field

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

[0002] In order to provide users with a better visual effect, a window startup animation often appears when an application starts, where the application window changes from small to large. However, the prerequisite for displaying the window startup animation is that the application window is ready. In other words, if the application window is not ready, the window startup animation cannot be displayed. Therefore, when starting an application, if the application window is not ready in time, the window startup animation may disappear, or the user may have to wait for a long time to view the window startup animation, affecting the user's visual experience.

[0003] 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

[0004] 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 an icon startup animation and a startup page animation, thereby improving the user's visual experience.

[0005] 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 an icon startup page, the second startup animation comprising a process of gradually changing from a first image to a 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 after the first moment, the window startup animation comprising a process of gradually changing from a third image to a 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.

[0006] 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 switching 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.

[0007] 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.

[0008] It can be seen that the screen transparency of the icon startup animation gradually increases, which can make the icon startup animation gradually disappear during the playback process, and the screen 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.

[0009] 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.

[0010] In other words, you can use the up-and-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.

[0011] 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.

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

[0013] 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 time are the same.

[0014] 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 picture.

[0015] 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.

[0016] 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 that gradually transitions from the size of the application icon to the page size.

[0017] 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, and before displaying the window startup animation, the method also includes: the electronic device completes the drawing of the application window of the first application.

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

[0019] 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.

[0020] In combination with the first aspect, in one implementation, the first page is an application startup page image preset for 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.

[0021] 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.

[0022] 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 completely started, the main page of the application can be finally displayed.

[0023] 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 exited to the background in the application window of the first application.

[0024] 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 was displayed before the first application last retreated to the background.

[0025] 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.

[0026] 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 achieving a smooth transition from the first interface element to the application page in appearance.

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

[0028] 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.

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

[0030] 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.

[0031] 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.

[0032] 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 during the enlargement process of the first interface element as a whole, and also achieving a smooth transition from the first interface element to the application page in appearance.

[0033] 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 boundary line between the first area and the second area is the upper boundary of the second foreground layer, the boundary 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.

[0034] Among them, the first picture can be a solid color background image or a gradient background image, or it can display a solid color in part of the area and a gradient in part of the area. Among them, the solid color background image can mean that the picture of the first startup animation is more tidy and clean, and the gradient background image can make the picture of the first startup animation richer and more vivid. Displaying a solid color in part of the area and a gradient in part of the area can make the foreground and background colors of the icon startup page more harmonious and unified.

[0035] 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.

[0036] 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.

[0037] In combination with the first aspect, in one implementation, the electronic device generates image frames of a first startup animation based on a second foreground layer and a 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, 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.

[0038] 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 draws the first page.

[0039] 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 picture, and achieving a smooth transition from the application icon to the application startup page.

[0040] 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 transmits 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.

[0041] In this way, the enlargement process of the application window in the window startup animation displayed by the electronic device 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.

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

[0043] 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.

[0044] 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 that continue to be displayed, as time goes by, the playback speed of the M frames gradually decreases, and the playback speed of the first L frames of the reversely displayed image gradually increases.

[0045] 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 rewind the displayed image frames to display the exit animation during the application exit process. Alternatively, the first startup animation is started first, and then the displayed image frames are rewinded. In this way, sudden changes in the animation can be avoided after the user interrupts the animation, so that the animation can transition smoothly and the fluency of the animation is improved.

[0046] 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.

[0047] 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 out process from the application page to the application icon, thereby improving the user's visual experience.

[0048] 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 a change process from the ninth image to the first interface element, and the second exit animation includes a change process 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 a process of gradually changing from the ninth image to the icon startup page, and a process of gradually changing from the tenth image to the first page as the screen is pressed and slid down.

[0049] 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.

[0050] 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.

[0051] 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.

[0052] 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, thereby visually speeding up the application startup by adding a new icon startup animation and a startup page animation to fill the gap before the application window is ready before displaying the application window provided by the application.

[0053] 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 in the first aspect.

[0054] 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 a method as described in the first aspect or any one of the implementations of the first aspect.

[0055] In a fourth aspect, an embodiment of the present application provides a computer program product. When the computer program product runs on a computer, it 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

[0056] Figure 1 A schematic diagram of an application startup page provided in an embodiment of the present application;

[0057] Figure 2A-2G The electronic device 100 provided in the embodiment of the present application displays some user interfaces involved in the startup animation when starting an application;

[0058] Figure 3A-Figure 3I The electronic device 100 provided in the embodiment of the present application displays other user interfaces involved in the startup animation when starting an application;

[0059] Figure 4 A schematic diagram of an icon startup page generated by an electronic device 100 provided in an embodiment of the present application;

[0060] Figure 5 A schematic diagram of the relationship between the icon layer, the startup page layer, and the application window layer provided in the embodiment of the present application;

[0061] Figure 6 A schematic diagram of the boundaries of multiple frames of images involved in the startup animation provided in an embodiment of the present application;

[0062] Figure 7 A schematic diagram of multiple frames of images of an icon startup animation, a startup page animation, and a window startup animation provided in an embodiment of the present application;

[0063] Figure 8 A schematic diagram of an electronic device 100 provided in an embodiment of the present application generating an image frame corresponding to a time T4 for an icon startup animation;

[0064] Figure 9A-9D The relevant user interface involved when the electronic device 100 provided in the embodiment of the present application starts an application through a service card;

[0065] Figures 10A-10G The user interface displayed by the electronic device 100 provided in the embodiment of the present application when the electronic device 100 detects the user's operation of exiting the application after completing the startup of the application;

[0066] Fig.11 The electronic device 100 provided in the embodiment of the present application generates image frames corresponding to icon exit animation and window exit animation at times T10-T16 respectively;

[0067] Figure 12A-12E as well as Figures 13A-13EThe relevant user interface involved when the electronic device 100 provided in the embodiment of the present application detects the user's operation of exiting the application during the process of displaying the startup animation;

[0068] Fig.14 A software structure block diagram of the electronic device 100 provided in an embodiment of the present application;

[0069] Fig.15 A schematic diagram of a spring curve provided in an embodiment of the present application;

[0070] Fig.16 An internal module interaction diagram of the electronic device 100 provided in an embodiment of the present application that displays a startup animation when an application is started;

[0071] Fig.17 A flow chart of a display method provided in an embodiment of the present application;

[0072] Fig.18 A schematic diagram of generating an icon startup page provided for an application embodiment;

[0073] Fig.19 A schematic diagram of a process of generating an icon startup page using the color of a first interface element provided in an embodiment of the present application;

[0074] Fig. 20 A schematic diagram of four endpoints for extracting the color of a first interface element provided in an embodiment of the present application;

[0075] Figure 21-25 Various schematic diagrams of the icon startup page provided in the embodiments of the present application;

[0076] Fig.26 A timing comparison diagram of an application startup method and an application startup method provided in an embodiment of the present application;

[0077] Fig. 27 An internal module interaction diagram showing an exit animation after the electronic device 100 provided by the embodiment of the present application is interrupted by the user during the application startup process;

[0078] Fig.28 A schematic diagram of another display method provided in an embodiment of the present application;

[0079] Fig.29 A schematic diagram of the hardware structure of the electronic device 100 provided in an embodiment of the present application. DETAILED DESCRIPTION

[0080] The technical solutions in the embodiments of the present application will be described clearly and in detail below 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 of associated 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.

[0081] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features, and in the description of the embodiments of the present application, unless otherwise specified, "plurality" means two or more.

[0082] The term "user interface (UI)" in the following embodiments of the present 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 can be recognized by the user. The commonly used form of user interface is a graphical user interface (GUI), which refers to a user interface related to computer operation 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.

[0083] 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 a 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 a 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.

[0084] 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.

[0085] 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, and the like.

[0086] Among them, in the embodiment of the present application, the application startup may have the following two situations:

[0087] 1) Application cold start

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

[0089] For example, the first launch of an app after installation, or launching the app after clearing its background data, are both considered cold starts.

[0090] 2) Application hot start

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

[0092] 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, this startup is considered an application hot start.

[0093] The first page can have the same display content as the application launch page of the first application. The application launch page refers to the first page displayed after the application is launched. This page can exist in the following situations:

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

[0095] Application developers can preset the application startup page image displayed when the application is started in advance. 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.

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

[0097] Exemplarily, the resources corresponding to the application can be obtained by using the resource identifier corresponding to the application through the PackageMangerService interface.

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

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

[0100] 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.

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

[0102] 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.

[0103] Exemplarily, the relevant information of the application can be obtained through resource tags such as Window_windowSplashScreenBrandingImage, Window_windowSplashScreenBackground, Window_windowSplashScreenIconBackgroundColor, Window_windowSplashscreenContent, and then the position information corresponding to each element can be obtained by reading the corresponding splash_screen_view.xml file to achieve drawing the first page using the relevant information of the application.

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

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

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

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

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

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

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

[0111] In some implementations, the above situations 1-3 may be application startup pages used when the application is cold started, and situation 4 may be application startup pages used when the application is hot started. It is understandable that the above situations 1-3 may also be application startup pages used when the application is hot started, and the above situation 4 may also be application startup pages used when the application is cold started, and the present application embodiment does not limit this.

[0112] For example, Figure 1 Taking the launched application "Game Center" as an example, a schematic diagram of the application launch page that may exist in the above-mentioned various situations is shown. Among them:

[0113] Figure 1 The application startup page shown in (a) may be an implementation of an application startup page image preset in advance for the application mentioned in the above situation 1.

[0114] Figure 1 The application launch page shown in (b) may be an implementation of the application launch page drawn by the electronic device according to the relevant information of the application mentioned in the above situation 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.

[0115] Figure 1 The application launch page shown in (c) may be an implementation of a screenshot of the main page displayed by default when the application mentioned in the above situation 3 is opened for the first time.

[0116] Figure 1 The application startup page shown in (d) may be an implementation of a screenshot of the page before the application mentioned in the above situation 4 was last retired to the background.

[0117] Understandably, Figure 1 These are merely illustrative examples and do not constitute limitations 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.

[0118] 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 a transition before displaying the window startup animation, so as to avoid the user waiting too long before seeing the response of the electronic device after starting the application. In addition, in order to avoid the abrupt switching 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, so as to achieve the animation effect of gradually transitioning the interface elements to the application startup page, thereby enhancing the user's visual experience.

[0119] The following example takes the game center application as an example, the first interface element is the application icon, and the application startup page is the default home page displayed when the application is first opened. Figure 2A-2G The electronic device 100 is described to display some user interfaces involved in the startup animation when starting an application, wherein the startup animation includes: icon startup animation, startup page animation, and window startup animation.

[0120] Figure 2A An exemplary user interface 10 for a menu of applications on an electronic device 100 is shown.

[0121] like Figure 2AAs shown, the user interface 10 may include: a status bar 101, a time and weather indicator 102, and one or more application icons 103. Among them, the status bar 101 may include one or more signal strength indicators of mobile communication signals, one or more signal strength indicators of wireless high fidelity (WiFi) signals, a battery status indicator, and a time indicator. The time and weather indicator 102 can be used to indicate the current time and weather type. One or more application icons 103 can be used to display one or more application icons. Among them, one or more application icons 103 may include an application icon 103A. The application icon 103A can be used to trigger the opening of the game center application.

[0122] 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 game center application. Figure 2A-2G Startup animation.

[0123] Understandably, Figure 2A-2G Taking the game center application as an example, the relevant user interface displayed by the electronic device 100 when the application is started is shown. In other embodiments of the present application, any other application can also be taken as an example, and the animation displayed when the application is started is similar. The embodiments of the present application do not limit the application started by the user.

[0124] For example, in addition to detecting an operation on an application icon to start an application, the electronic device 100 may also detect an operation on other interface elements to trigger the start of an application. For a description of other interface elements, see the following Figure 9A-9D The relevant content will not be expanded here.

[0125] like Figure 2A-2G As shown, the startup animation can be displayed as Figure 2A The application icon 103A shown in FIG. Figure 2B As shown in image 01, Figure 2C As shown in image 02, Figure 2D As shown in image 03, Figure 2E As shown in image 04, Figure 2F As shown in image 05, Figure 2G The switching process of image 06 is shown.

[0126] from Figure 2A-2GIt can be seen from the startup animation shown that 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 the application icon enlarging, it also shows the process of the content of the first page enlarging in parallel with the enlargement of the application icon, and, during the process of enlarging the application icon and the first page, the content of 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 to continue to enlarge to the application page size, completing the startup of the application.

[0127] For example, in the internal implementation, when the electronic device 100 detects Figure 2A After the user operation of starting the application as shown, 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 enlarging the application icon and the application startup page 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 gradually enlarging the application window, and the trend of enlarging the application window 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.

[0128] 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, during the gradual enlargement of the first page, the transparency of the startup page animation can be gradually reduced.

[0129] Furthermore, if the display Figure 2E As shown in image 04, the application window is ready, then the subsequent Figure 2F-2G The image shown may include a window startup animation corresponding to the application window. The window startup animation may include a process in which the content of the application startup page continues to be enlarged, and the screen content of the startup page animation may be consistent with the window startup animation.

[0130] 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.

[0131] 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 over the icon startup animation and the startup page animation.

[0132] That is to say, the icon startup animation is a transition animation displayed during 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 of the application from the user's visual 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 a 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.

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

[0134] In an embodiment of the present application, when the electronic device 100 displays the window startup animation, the page initially displayed may be different from the page displayed when the application startup is completed, that is, when 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 played, 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.

[0135] 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 the electronic device 100 displaying the window startup animation is not limited to the above-mentioned example of when the electronic device 100 displays the application window. Figure 2E After the image 04 shown in the figure, the window startup animation is displayed. For example, if the electronic device 100 displays Figure 2D After the image 03 shown in the figure is completed, the application window is drawn. Figure 2E The image 04 shown can be drawn from the first frame image in the window startup animation. Figure 2F The image 05 shown can be drawn from the second frame image in the window startup animation. Figure 2G The image 06 shown can be drawn from the third frame image in the window startup animation.

[0136] In the embodiment of the present application, Figure 2A-2D As you can see, the icon startup animation shows Figure 2AThe process of separately enlarging the foreground layer and the background layer of the application icon 103A is shown in FIG. 103A , wherein the foreground layer of the application icon 103A is enlarged in equal proportion, and the background layer of the application icon 103A is gradually enlarged from a quadrilateral with equal width and height to a quadrilateral with width less than height.

[0137] visible, Figure 2A-2G The icon startup animation shown is suitable for an application icon that is a layered icon that can be separated into a foreground layer and a background layer.

[0138] 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 enlarged in equal proportion.

[0139] The following example uses a music application, the first interface element is the application icon, and the application startup page is the application startup page picture preset in advance. Figure 3A-Figure 3I Describes other user interfaces involved in displaying a startup animation when the electronic device 100 starts an application.

[0140] in, Figure 3A An exemplary user interface 10 for an application menu on an electronic device 100 is shown. Specific descriptions of the user interface 10 may be found in Figure 2A The relevant content in will not be repeated here.

[0141] like Figure 3A As shown, 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 opening of a music application.

[0142] 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 music application. Figure 3A-3G Startup animation.

[0143] Understandably, Figure 3A-3G Taking the music application as an example, the relevant user interface displayed by the electronic device 100 when the application is started is shown. In other embodiments of the present application, any other application can also be taken as an example, and the animation displayed when the application is started is similar. The embodiments of the present application do not limit the application started by the user.

[0144] For example, in addition to detecting an operation on an application icon to start an application, the electronic device 100 may also detect an operation on other interface elements to trigger the start of an application. For a description of other interface elements, see the following Figure 9A-9D The relevant content will not be expanded here.

[0145] like Figure 3A-3G As shown, the startup animation can be displayed as Figure 3A The application icon 103B shown in FIG. Figure 3B As shown in the image 11, Figure 3C As shown in the image 12, Figure 3D As shown in image 13, Figure 3E As shown in the image 14, Figure 3F As shown in the image 15, Figure 3G The switching process of the image 16 is shown.

[0146] from Figure 3A-3G It can be seen from the startup animation shown that 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, and, 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.

[0147] In the internal implementation, when the electronic device 100 detects Figure 3A After the user operation of starting the application as shown, 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 enlarging the application icon and the application startup page 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 gradually enlarging the application window, and the trend of enlarging the application window 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.

[0148] 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 process of playing the startup animation, the screen transparency of the icon startup animation may be gradually increased, and / or the screen transparency of the startup page animation may be gradually reduced.

[0149] Furthermore, if the display Figure 3D As shown in Figure 13, the application window is ready, then the subsequent Figure 3E-3G The image shown may include a window startup animation corresponding to the application window. The window startup animation may include a process in which the application startup page continues to be enlarged, and the screen content of the startup page animation may be consistent with the window startup animation.

[0150] 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.

[0151] Exemplarily, 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 in an overlay above the icon startup animation and the startup page animation.

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

[0153] Furthermore, due to Figure 3G The image 16 shown is not the main page of the application, so the electronic device 100 displays Figure 3G Afterwards, the electronic device 100 may display Figure 3H The user interface 40 shown may be used to display a main page of a music application, such as a music playback page.

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

[0155] For example, suppose Figure 3E The image 14 shown is one frame of the window startup animation. Figure 3E After the image 14 shown in FIG. 1 is drawn, the main page of the application is drawn. Then, 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 Fig. 3I The image 15' shown in FIG. 15B continues 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, Figure 3H User interface 40 is shown.

[0156] In addition, from Figure 3A-3D As you can see, the icon startup animation shows Figure 3A The process of enlarging the application icon 103B is shown, and the process of the background layer under the layer where the application icon 103B is located starting from nothing and then gradually enlarging.

[0157] visible, Figure 3A-3G The icon launch animation shown is suitable for a non-layered icon in which the application icon cannot be separated into a foreground layer and a background layer.

[0158] In some embodiments, Figure 3A-3D In the icon startup animation shown, the background layer that appears from nothing to something can also have a transparency transition animation, such as Figure 3C The images shown in Figure 12 to Figure 3D In the switching process of the image 13 shown, the transparency of the background layer in the icon startup animation gradually decreases. In this way, after the user clicks the icon to start the application, in addition to being able to see the startup page animation gradually appearing from nothing to something, the user can also see the icon gradually enlarged, and the background layer of the icon gradually showing a background board that is constantly enlarged, and the background board gradually transitions to the shape of the application window, which can avoid sudden changes in the background layer during the icon startup animation playback process and improve the visual effect.

[0159] For example, when the electronic device 100 starts an application, the user activates the application icon, such as Figure 2A The application icon 103A shown in the figure can be split into a foreground layer and a background layer, and the icon startup animation displayed by the electronic device 100 can be Figure 2A-2D The foreground layer and the background layer of the icon are shown in the animation process of being enlarged separately. When the electronic device 100 starts an application, the user acts on the application icon, for example Figure 3A The application icon 103B shown cannot be split into a foreground layer and a background layer, so the icon startup animation displayed by the electronic device 100 can be Figure 3A-3D The icons shown and the newly added background layer are separately enlarged during the animation process.

[0160] It is understandable 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 100 can also display the icon and the newly added background layer separately to enlarge the icon startup animation. The embodiment of the present application does not limit this.

[0161] In order to facilitate the understanding of icon startup animation, startup page animation and window startup animation, the following Figure 4 , Figure 5 , Figure 6 , Figure 7 , Figure 8 This section introduces the principles involved in icon startup animation, startup page animation, and window startup animation.

[0162] 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.).

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

[0164] Figure 4 Schematic diagram of an icon launch page generated for electronic device 100.

[0165] For example, if the application icon is a layered icon, that is, the application icon can be divided into a foreground layer and a background layer, the icon startup page created by the electronic device 100 may refer to Figure 4 The image A shown in (a) in FIG. The foreground layer of the 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 the image A, and the background layer of the 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 the image A, and the size of the image A is the same as the size of the application page displayed after the electronic device 100 completes the startup of the application.

[0166] Exemplarily, the magnification factor of the foreground layer of the application icon may be determined in the following manner: the magnification factor may 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.

[0167] 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.

[0168] 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.

[0169] 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 Figure 4 The image B shown in (b) in FIG. The foreground layer of the image B is an application icon magnified by a certain multiple, and the background layer of the image B is a preset image. The size of the image B is the same as the size of the application page displayed after the electronic device 100 completes the startup of the application.

[0170] For example, in the foreground layer of image B, the magnification of the application icon can be determined according to the width of the background layer of image B, and the magnification can make the width of the application icon the same as the width of the background layer of image B after being magnified at the magnification. In this way, during the process of displaying the icon startup animation on the electronic device 100, the foreground layer of the application icon can maintain a relatively large size, which can provide a better visual experience for the user.

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

[0172] 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, and 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.

[0173] 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 Figure 4 Image B shown in (b) in FIG.

[0174] 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 frame images in the image startup animation.

[0175] 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, and the display content of the first page is the same as that of the application startup page. For example, the application startup page can refer to Figure 1 The application startup page shown in (a) or (b) or (c) or (d) is then obtained by setting the animation properties of the first page, and the multiple images are the multiple frame images in the startup page animation.

[0176] In addition, during the process in which the electronic device 100 displays 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.

[0177] For example, Figure 5 A schematic diagram of the layer relationship among the icon layer, startup page layer, and application window layer provided in an embodiment of the present application.

[0178] like Figure 5As shown, the electronic device 100 can display the icon startup animation in the icon layer, the electronic device 100 can display the startup page animation in the startup page layer, and the electronic device 100 can display the window startup animation in the application window layer.

[0179] from Figure 5 It can be seen that 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, so that 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, so that the window startup animation is visible.

[0180] In addition, combined Figure 2A-2D or Figure 3A-3D It can be seen from the image shown that, in the process of the electronic device 100 displaying the icon startup animation and the startup page animation, 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 so that the image of the icon startup animation gradually fades until it disappears, and the transparency of the startup page layer gradually decreases so that the image of the startup page animation gradually appears until it is fully displayed.

[0181] 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 displayed 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, the transition effect of the icon startup animation gradually disappearing and the startup page animation gradually appearing can still be shown. 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 Figure 5 The layer relationship shown is only an example, and the embodiment of the present application does not limit the layer relationship among the icon layer, the startup page layer, and the application window layer.

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

[0183] For example, Figure 6 A schematic diagram showing the boundaries of multiple frames of images involved in the startup animation.

[0184] in, Figure 6The schematic diagram of the boundaries of the 7 frames of images involved in the startup animation from time T0 to T6 is exemplarily shown. Among them, time T0 corresponds to the moment when the electronic device 100 detects the user's startup operation on the application icon, and the boundary corresponding to time T0 is the boundary of the application icon on the desktop operated by the user. 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, and the boundary corresponding to time T6 is the boundary of the application page.

[0185] 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.

[0186] For example, the electronic device 100 sequentially 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). At the current time Tx+1, the application window is ready. The electronic device 100 can start displaying the image frames corresponding to the window startup animation at Tx+1-T6 at time Tx+1.

[0187] 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 display of the startup animation, or the electronic device 100 can first draw multiple frames of images involved in the startup animation, and then directly display these multiple frames of images in chronological order during the display of the startup animation.

[0188] Figure 7 A schematic diagram of multiple frames of images of the icon startup animation, startup page animation, and window startup animation provided in an embodiment of the present application.

[0189] in, Figure 7 The 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 are shown. The positions and sizes of these multiple frames of images correspond to Figure 7 The positions and sizes of the borders are shown at various times.

[0190] like Figure 7As shown, assuming that the application window is drawn between T4-T5, the icon startup animation may include multiple frame images from T0-T6, the startup page animation may include multiple frame images from T0-T6, and the window startup animation may include multiple frame images from T5-T6.

[0191] 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 gradual decrease in transparency from large to small, for example, alpha changes from 0 to 1, wherein the image frame corresponding to the startup page animation at time T0 has the maximum transparency and can be in a completely invisible state, and the image frame corresponding to the startup page animation at time T6 has the minimum transparency 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.

[0192] In the internal implementation, taking the application window being drawn between T4-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.

[0193] It can be seen that Figure 2B Image 01 in the image can be Figure 7 At the time T1 shown, the image frames in the icon startup animation and the image frames in the startup page animation are arranged according to Figure 5 The image obtained after superimposing the layer relationships shown. Figure 2C Image 02 in the image can be Figure 7 At the time T2 shown, the image frames in the icon startup animation and the image frames in the startup page animation are arranged according to Figure 5 The image obtained after superimposing the layer relationships shown. Figure 2D Image 03 in the Figure 7 At the T3 moment shown, the image frames in the icon startup animation and the image frames in the startup page animation are arranged according to Figure 5 The image obtained after superimposing the layer relationships shown. Figure 2E Image 04 in Figure 7 At the T4 moment shown, the image frames in the icon startup animation and the image frames in the startup page animation are arranged according to Figure 5 The image obtained after superimposing the layer relationships shown. Figure 2F Image 05 in Figure 7 At the T5 moment shown, 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 are arranged according to Figure 5 The image obtained after superimposing the layer relationships shown. Figure 2GImage 06 in Figure 7 At the T6 moment shown, 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 are arranged according to Figure 5 The image obtained after superimposing the layer relationships shown.

[0194] 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 is the maximum value and is invisible.

[0195] 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 still 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.

[0196] Optionally, after the application window is drawn, the electronic device 100 may no longer draw or display the image frame 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.

[0197] It should be noted that Figure 7 The multiple frames of the startup animation shown are only exemplary. In the actual application startup process, more or fewer image frames may be included. In addition, the timing of the application window drawing completion is not limited to Figure 7 Between the T4-T5 moments shown, for example, if the application window is drawn between the T3-T4 moments, the window startup animation drawn by the electronic device 100 also includes an image frame corresponding to the T4 moment, and the image frame is the same as the image frame in the startup page animation corresponding to the T4 moment.

[0198] In order to understand the generation process of each frame of the icon startup animation, Figure 8 A schematic diagram showing the electronic device 100 generating an image frame corresponding to the icon startup animation at time T4.

[0199] Among them, in the 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 translation attribute, the cropping value (crop left) from the left border, the cropping value (crop top) from the top, the cropping value (crop right) from the right border, the cropping value (crop bottom) from the bottom, the transparency (alpha) attribute, and the rounded corner attribute (cornerRadius).

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

[0201] 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.

[0202] For example, if the magnification ratios of the foreground layer and the background layer are different, the magnification ratio of the foreground layer can satisfy 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, it can be ensured that the foreground layer in the application icon can maintain a larger display size as much as possible during the icon startup animation.

[0203] It is understandable that, for the animation process in which the application icon and the newly added background layer are enlarged separately in the icon startup animation, the enlargement ratio of the application icon in any frame image in the icon startup animation can make the width of the enlarged application icon the same as the width of the background layer, or the length of the enlarged application icon the same as the length of the enlarged background layer. In this way, it can be ensured that the application icon can maintain a larger display size as much as possible during the icon startup animation.

[0204] Furthermore, after obtaining the enlarged foreground layer and background layer, the corner radius is set according to the cropping area 1, and the enlarged image is cropped and translated to obtain the image frame corresponding to time T4. The cropping area 1 is the boundary size of the startup animation corresponding to time T4.

[0205] 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 range of the background layer of the application icon after enlargement 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 edge of the image frame of the icon startup animation generated by the electronic device 100 will not have white edges, making the picture displayed in the icon startup animation more beautiful.

[0206] Understandably, Figure 8 Only the generation details of the image frame corresponding to the icon startup animation at time T4 are described in detail. The generation details of the image frames corresponding to other times are similar and will not be repeated here.

[0207] Above Figure 2A-2G , Figure 3A-Figure 3I , Figure 4 , Figure 5 , Figure 6 , Figure 7 , Figure 8 The icon startup animation, startup page animation and window startup animation involved when the electronic device 100 detects a startup operation performed by a user on an application icon are described.

[0208] In other embodiments of the present application, the electronic device 100 can also trigger the launch of the application and display the icon launch animation, the launch page animation and the window launch animation in other ways. For example, the electronic device 100 can trigger the launch of the application and display the icon launch animation, the launch page animation and the 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.

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

[0210] A service card is a form of interface display of an application. The service card is displayed on the desktop to display important information of the application and provide some functions of the application. 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.

[0211] Exemplarily, when the electronic device 100 detects a user operation on a service card, triggering the launch of an application, the electronic device 100 may 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.

[0212] Widgets can be seen as application plug-ins, which are small tools that users can create or freely download, and contain a variety of practical functions such as entertainment, work, and learning. For example, see Figure 2A The time and weather indicator 102 is a widget. The electronic device 100 can detect a user operation on the widget, such as a click operation, to trigger the opening of an application corresponding to the widget.

[0213] Exemplarily, when the electronic device 100 detects a user operation on a widget that triggers the launch of an application, the electronic device 100 may display an icon startup animation of the widget that gradually enlarges, and superimpose a startup page animation that enlarges in parallel with the widget on the icon startup animation, with the startup page animation gradually having a lower transparency 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, thereby completing the animation display during the application startup process.

[0214] 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.

[0215] Exemplarily, when the electronic device 100 detects a user operation on the notification bar that triggers 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.

[0216] 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, acting on one of the history tasks in the multitasking interface to trigger the opening of the application corresponding to the screenshot.

[0217] Exemplarily, 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 on the icon startup animation, superimpose a startup page animation that is enlarged in parallel with the screenshot, 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.

[0218] For example, taking a service card as an example, Figure 9A-9D It shows the related user interface involved when the electronic device 100 starts an application through the service card.

[0219] like Fig.9A As shown, the user interface 10 may include a service card 104. The service card 104 may be used to display songs played in the music application, and the electronic device 100 may detect a user operation on the service card 104 to switch the played song, pause the playing of a song, or start the playing of a song, etc.

[0220] 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 start of the music application and displays the music application. Figure 9A-9D The startup animation shown.

[0221] like Figure 9A-9D As shown, the startup animation can be displayed as Fig.9A The service card 104 shown, to Fig. 9B As shown in the image 21, Fig. 9C As shown in the image 22, Fig.9D The switching process of the image 23 is shown.

[0222] from Figure 9A-9D It can be seen from the startup animation shown that the startup animation shows the process of enlarging the service card 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, achieving a smooth transition from the service card to the application startup page, and finally transitioning to the application startup page and continuing to enlarge to the application page size, completing the startup of the application.

[0223] In the internal implementation, when the electronic device 100 detects Fig.9A After the user operation of starting the application shown, the electronic device 100 can trigger the start of the application, start preparing the application window, 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 start animation and the start page animation. For example, Fig. 9B The image 21 shown is an 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 gradually enlarged, and the enlargement trend of the application window will continue to enlarge following the enlargement trend of the icon startup animation or the startup page animation. Fig. 9B After the image 21 shown in the figure is finished drawing the application window, then Fig. 9C The images 22 and Fig.9D The image 23 shown may be an image frame for starting the window animation.

[0224] In addition, from Fig. 9B As can be seen from the image 21 shown, the image frame of the icon startup animation consists of a 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 that of the service card to the size of the application page.

[0225] 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.

[0226] It is understandable that the startup animation displayed by the electronic device 100 is not limited to the above Figure 9A-9D The multi-frame images shown, the icon startup animation, the startup page animation, and the window startup animation may all contain more or fewer image frames.

[0227] from Figure 9A-9D It can be seen that the user can trigger the opening of the application through the service card, and display the transition animation from the service card to the application page. In this way, after the user starts the application, the electronic device 100 can view the response made by the user to the operation of starting the application through the service card without waiting for a long time, thereby improving the user's visual experience.

[0228] 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 images of the icon startup animation. Among them, if the service card can be divided into a foreground layer and a background layer, it can be created similar to Figure 4 The icon startup page of image A shown in (a) in FIG. 1 generates an icon startup animation through the icon startup page. If the service card cannot be divided, you can create something like Figure 4 The icon startup page of the image B shown in (b) in FIG. 1 generates an icon startup animation through the icon startup page. The display effect of the icon startup animation can be seen in the above Figure 9A-9D .

[0229] It is understandable that if the service card can be separated into a foreground layer and a background layer, it is also possible to create a similar Figure 4 The icon startup page of the image B shown in (b) of FIG. 1 generates the icon startup animation through the icon startup page. In addition, the principle of acting on other interface elements to start applications and display icon startup animations is similar and will not be repeated here.

[0230] 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 in combination with the timing of the user initiating the operation.

[0231] Combine the following Figures 10A-10G , Fig.11 , Figure 12A-12E , Figures 13A-13E The relevant user interface involved when the electronic device 100 exits an application is introduced.

[0232] Figures 10A-10G The user interface displayed when the electronic device 100 detects the user's operation of exiting the application after completing the launch of the application.

[0233] Fig. 10A The user interface 20 is shown after the electronic device 100 completes the startup of the application. Exemplarily, the user interface 20 may be a home page displayed by default after the game center application is started.

[0234] like Fig. 10A As shown, when the electronic device 100 detects the user's operation of exiting the application, such as sliding upward on the bottom of the user interface 20, in response to the operation, the electronic device 100 can exit the game center application, and in the process of exiting the application, display Figures 10A-10G The exit animation shown in the figure may include a window exit animation, a startup page exit animation, and an icon exit animation.

[0235] like Figures 10A-10G As shown, the exit animation can be displayed as Fig. 10A The user interface 20 (image 06) shown in FIG. Fig. 10B As shown in image 05, Fig. 10C As shown in image 04, Fig. 10D As shown in image 03, Fig. 10E As shown in image 02, Fig.10F As shown in image 01, Figure 10G Application icon 103A is shown.

[0236] from Figures 10A-10G As can be seen from the exit animation shown, the exit animation shows the transition process from the application page to the application icon on the desktop.

[0237] Combination Figure 2A-2G It can be seen that when the electronic device 100 starts the game center application, the electronic device 100 starts the game center application in chronological order. Figure 2A The application icon 103A shown displays image 01 to image 06 in sequence.

[0238] That is, if the electronic device 100 has completed the startup of the application and detects the user's operation of exiting the application when displaying the home page of the application, the electronic device 100 can reversely display multiple frames of images in the startup animation displayed during startup.

[0239] In some implementations, the electronic device 100 may also detect a user's operation of exiting an application during the process of displaying the startup animation. At this time, the electronic device 100 may reversely display multiple frames of images in the currently displayed startup animation to complete the display of the application's exit animation.

[0240] 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, after detecting the user's operation of exiting the application, the electronic device 100 can continue to play forward a few frames of the startup animation, 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 be gradually slowed 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.

[0241] In some embodiments, if the electronic device 100 detects a user's operation of 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, and when the home page of the application is switched to other pages, and then the user's operation of 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 disappearance, and switches to the desktop.

[0242] Furthermore, if the application icon of the application is displayed on the desktop to which the electronic device 100 switches, in addition to displaying an animation of gradually shrinking and disappearing the currently displayed page, the electronic device 100 may also display an animation of the application icon gradually switching to the desktop during the page shrinking process and returning to the desktop.

[0243] 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 track when the user triggers the exit of the application to follow the hand movement. Figures 10A-10G Take the exit animation shown in the figure as an example. Fig. 10A The sliding operation shown is sliding to the upper left, then Fig. 10B The images shown in 05 and Fig. 10CThe image 04 shown can be positioned closer to the left side of the display screen relative to the current display. In this way, from the overall point of view, the image frame in the exit animation will show that the hand moves to the left first, then to the right. Figure 10G The position of the application icon 103A shown in the figure is moved. In this way, the operation interest when the user exits the application can be improved, and the user's visual experience can be improved.

[0244] from Figures 10A-10G It can be seen that, 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 reversely display multiple frames of the startup animation that is currently playing.

[0245] In some embodiments, if the application window has been drawn when the electronic device 100 detects an operation to exit the application, 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.

[0246] Exemplarily, the exit animation may exist in the following two situations:

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

[0248] 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, it switches to the relevant screen of the application icon and continues to shrink to the size of the application icon.

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

[0250] Exemplarily, the transparency of a previous frame image in a window exit animation may be lower than the transparency of a subsequent frame image, and / or the transparency of a previous frame image in an icon exit animation may be higher than the transparency of a subsequent frame image.

[0251] 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.

[0252] For example, Fig.11 It shows the image frames corresponding to the icon exit animation and the window exit animation generated by the electronic device 100 at the time T10-T16 respectively.

[0253] In the above situation 1, the exit animation can be displayed as the image frames 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.

[0254] In case 2 above, Fig.11 The multiple frames of images in the image may have different transparency. For example, at time T10-T16, the transparency of the image frames of the icon exit animation decreases successively, and the transparency of the image frames of the window exit animation increases successively. Then, the image frames of the exit animation at time T10-T16 are the images obtained by superimposing the image frames with transparency of the icon exit animation and the window exit animation at time T10-T16.

[0255] 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.

[0256] Figure 12A-12E as well as Figures 13A-13E The figure shows the relevant user interface involved when the electronic device 100 detects the user's operation of exiting the application during the process of displaying the startup animation.

[0257] in, Figure 12A-12E 1 shows the related user interfaces involved when the electronic device 100 detects the user's operation of exiting the application and the application window is ready. Figures 13A-13E It shows the related user interface involved when the electronic device 100 detects the user's operation of exiting the application and the application window is not ready.

[0258] It should be understood that Figure 12A-12E and Figures 13A-13E The electronic device 100 displays the startup animation. Figure 2E The image 04 shown is taken as an example to 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, which is not limited in the embodiments of the present application.

[0259] like Fig. 12A As shown, when the electronic device 100 detects an operation of the user 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 start of the game center application and displays Figure 12A-12E Exit animation shown.

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

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

[0262] Afterwards, the electronic device 100 displays the content in the application launch page until the icon of the application icon returns to the desktop animation, that is, the electronic device 100 can be from Fig. 12B The image 31 shown switches to Fig. 12C The image 32 shown displays at least part of the content of the application startup page and at least part of the icon startup page. In addition, compared with image 31, the content of the application startup page displayed in image 32 has higher transparency, and the size of image 32 is smaller than that of image 31.

[0263] Furthermore, the electronic device 100 Fig. 12C The image 32 shown switches to Fig.12D The image 33 shown displays both the content of the application launch page and at least part of the content of the icon launch page. In addition, 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.

[0264] Furthermore, the electronic device 100 may Fig.12D The image 33 shown is switched to the application icon 103A located on the desktop as shown in the image 12E.

[0265] from Figures 12A-12D It can be seen that when the electronic device 100 is displaying the startup animation and has not yet displayed the window startup animation, it detects the user's operation of exiting 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.

[0266] 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 track when the user triggers the exit of the application to follow the hand movement. Fig. 12AThe user exits the application by sliding from the bottom of the user interface 10 to the upper right. Figure 12A-12C In the user interface 10 shown, when switching from image 04 to image 31 and from image 31 to image 32, there is also a track moving to the upper right (see Fig. 12B and Fig. 12C The dashed line with an arrow is shown), and then the electronic device 100 displays Figure 12C-12E The moving process from image 32 to image 33 and then to application icon 103A is shown (see Fig.12D and Fig.12E dashed line with arrowhead).

[0267] In some implementations, in order to ensure that the electronic device 100 can smoothly transition from the startup animation to the exit animation, after detecting the user's exit operation, the electronic device 100 can continue to play a few frames of the startup animation, and then switch to the exit animation, and the speed of the few frames of images that continue to be played can be gradually slowed down over time. In this way, it can avoid the sudden change of the animation after the user interrupts the animation, so that the animation can transition smoothly and improve the fluency of the animation. Figures 13A-13E The scenarios shown are similar and will not be described in detail below.

[0268] like Fig.13A As shown, 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 of the application.

[0269] 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. If the application window is not ready, the electronic device 100 can directly reversely display multiple frames of images in the currently displayed icon startup animation.

[0270] Further optionally, the exit animation displayed by the electronic device 100 may also include a hand-following animation, that is, the first few frames of the exit animation displayed by the electronic device 100 may follow the sliding track when the user triggers the exit of the application to follow the hand movement. Figures 13A-13E The user interface shown.

[0271] Specifically, after the electronic device 100 detects the user's operation of exiting the application, the electronic device 100 can Fig.13A As shown in image 04, switch to Fig. 13B The image 41 shown in FIG. 4 shows a moving track toward the upper right corner when the image 04 is switched to the image 41 (see FIG. 41 ). Fig. 13BAfterwards, the electronic device 100 switches to Fig. 13C The image 42 shown in FIG. 4 shows an image 42, and when the image 41 switches to the image 42, there is a track moving upward (see FIG. 4). Fig. 13C After that, the electronic device 100 switches to Fig.13D The image 43 shown in FIG. 4 shows a downward moving track when the image 42 is switched to the image 43 (see FIG. 43 ). Fig.13D After that, the electronic device 100 switches to Fig.13E The application icon 103A shown in FIG. 4A and when the image 43 switches to the application icon 103A, there is a downward movement track (see FIG. 4B ). Fig.13E dashed line with arrowhead).

[0272] It can be seen that the electronic device 100 is displaying Figure 13A-13C The user interface 10 shown in the figure displays a hand-following animation of an image frame, and then displays Figure 13C-13E The image frame shown is animated onto the application icon on the desktop and the icon returns to the desktop.

[0273] Further optionally, under the premise that the exit animation displayed by the electronic device 100 includes a hand-following animation, the electronic device 100 may determine whether the application window is ready after the hand-following animation ends. If the application window is not ready, the electronic device 100 may continue to display Figure 13C-13E The image frame shown in the figure is turned into the icon of the application icon on the desktop and then returns to the desktop. If the application window is ready, the electronic device 100 can switch to the content in the application window and then return to the desktop. Fig. 13C After 10 seconds, the user interface will be displayed. Figure 12D-12E User interface 10 is shown.

[0274] from Figures 13A-13E It can be seen that when the electronic device 100 detects the user's operation of exiting the application during the process of displaying the startup animation, if the electronic device 100 is not currently ready for the application window, the electronic device 100 can directly reversely display multiple frames of images in the currently displayed icon startup animation.

[0275] It is understandable that the above Figures 10A-10G , Figure 12A-12E , Figures 13A-13E The exit animations displayed when the electronic device 100 exits an application in various scenarios are listed. The embodiment of the present application does not limit the exit animations of the electronic device 100 in different scenarios.

[0276] In addition, the above Figures 10A-10G , Figure 12A-12E , Figures 13A-13EThe exit animation described here is based on the example of the icon startup animation that is drawn by splitting the application icon into a foreground layer and a background layer. 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 can 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 Figure 3A-3G The process of reverse display of image frames is shown.

[0277] When the icon exit animation includes an animation in which the icon in the foreground layer gradually shrinks and the newly added picture in the background layer gradually shrinks and disappears, the newly added picture in the background layer may also include a transparency transition animation, such as the transparency of the background layer gradually increases as the icon exit animation is played. 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.

[0278] 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.

[0279] In other embodiments of the present application, the icon exit animation displayed by the electronic device 100 may include only one layer where the icon is located, and the problem of icon screen distortion may not be considered. After directly detecting the user's operation of exiting the application, the icon exit animation corresponding to the size of the application window is displayed, and the icon with longitudinal stretching gradually shrinks to the icon on the desktop. In this case, when the electronic device 100 detects the user's operation of exiting 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, the 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 longitudinally 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 situation where the application window with a rectangular boundary shape transitions to an icon with a polygonal boundary shape during the application exit process, and the picture mutation occurs, ensuring a smooth transition of the picture.

[0280] Furthermore, in some implementations, while the electronic device 100 is displaying the exit animation, the electronic device 100 may also detect the user's operation of starting the application and restart the application. At this time, the electronic device 100 may interrupt the exit animation and continue to display the icon startup animation or the window startup animation. Fig. 10DFor example, if the electronic device 100 is displaying the exit animation and is displaying Fig. 10D When the image 03 shown in FIG. 1 is detected, the user starts the application operation, for example, a click operation on the image 03. In response to the operation, the electronic device 100 starts the application operation. Fig. 10D The user interface 10 shown in FIG. 1 is switched to displaying Figure 2E-2G The user interface shown.

[0281] Further optionally, when the electronic device 100 detects that the user interrupts the operation of the exit animation, in order to ensure that the exit animation smoothly transitions to the startup animation, the electronic device 100 can continue to play several frames of the exit animation forward after detecting that the user intends to exit the animation, and then switch to the startup animation, and the speed of the several frames of images that continue to be played can be gradually slowed down as time goes by. In this way, it can avoid the sudden change of the animation after the user intends to animate, so that the animation can smoothly transition and improve the fluency of the animation.

[0282] In addition, it should be noted that Figures 10A-10G , Figure 12A-12E , Figures 13A-13E The exit animations shown are described by taking the icon startup animation displayed when the user acts on the application icon to start the application as an example. In other embodiments of the present application, when the application is started through an interface element such as a service card, widget, notification bar, multi-tasking interface, etc., the exit animation may include an animation of the content of the application window transitioning to the interface element, or an animation of the image frame in the icon startup animation generated by the interface element transitioning to the interface element, etc. Figure 9A-9D The user operation shown in the figure acts on the service card 104 to start the music application. If the electronic device 100 displays Fig. 9C When the image 22 shown in FIG. 2 is displayed, if the user exits the application, the electronic device 100 may sequentially display FIG. 9C to FIG. 9B arrive Fig.9A User interface 10 is shown.

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

[0284] Fig.14 A software structure block diagram of the electronic device 100 provided in an embodiment of the present application.

[0285] The layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, namely, the application layer, the application framework layer, the system runtime layer, and the kernel layer.

[0286] like Fig.14 As shown, the application layer may include a desktop launcher (Launcher).

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

[0288] 1) As the launcher of the Android system, applications can be launched through the Launcher;

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

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

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

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

[0293] 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.

[0294] View animation can be used to create desktop background, desktop sliding animation, icon startup animation and icon exit animation when starting the 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 the startup page animation.

[0295] It should be noted that the animation task created in the window animation needs to create a window first before the animation can be played in the window, while the animation task created in the View animation does not need to create a window. The animation can be played by creating a view. In other words, when the application starts, the icon startup animation and the startup page animation are created by using the View animation. There is no need to wait for the application window to be ready. By directly creating a view, after detecting the user's operation of starting the application, the operation can be quickly responded to and the icon startup animation and the startup page animation can be displayed.

[0296] 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, when the electronic device 100 draws the icon startup animation corresponding to the icon, it does not need to use the application window, nor does it need 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.

[0297] 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.

[0298] The application framework layer can provide an application programming interface (API) and a programming framework for the application programs of the application layer. The application framework layer can include some predefined functions.

[0299] like Fig.14 As shown, the application framework layer may include interface modules and system services.

[0300] The interface module can be used to implement the transfer of underlying capabilities between the application layer and the system runtime layer. Specifically, the View animation can call the rendering thread (RT) animation engine through the interface module to implement the calculation, drawing and rendering of the View animation, and the window animation can call the graphics synthesizer (SurfaceFlinger) through the interface module to implement the calculation, drawing and rendering of the window animation.

[0301] 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.

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

[0303] The RT animation engine can be used to determine the animation properties of the view, including size, position, cropping, rounded corners, transparency, etc., so as to generate displacement animation, scaling animation, cropping animation, transparency animation, etc. for the view, and obtain multiple frames of images in the icon startup animation and the 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 when the application window is drawn, so that the animation properties of the window startup animation and the startup page animation are consistent.

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

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

[0306] 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, so as to achieve the display of the content in the application window (such as the application startup page), that is, to achieve 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.

[0307] The window 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 window startup animation or exit animation (for example, window startup animation and window exit animation). The spring curve can be used to avoid sudden changes in the animation and ensure smooth transition of the animation.

[0308] The 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 splash page animation).

[0309] The spring curve can be used to adjust and optimize the 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, etc.

[0310] The spring curve is used to realize that when the electronic device 100 is playing an animation, if a user interrupts the animation operation, the animation continues to be played for a period of time, and then the animation is interrupted, for example, the animation that has been played is played back. Moreover, when the animation is played back, the playing speed of the animation that is played back can be gradually slowed down as time goes by, and when the animation that has been played back is played back, the playing speed of the reversed animation can be gradually accelerated as time goes by.

[0311] For ease of understanding, taking the scenario of application startup as an example, after the electronic device 100 detects the user's operation of starting 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.

[0312] For example, Fig.15 The schematic diagram of the spring curve provided by the embodiment of the present application is exemplified.

[0313] like Fig.15As shown, curve 1 is the original curve without user interruption operation, curve 2 is the animation curve in some animation interruption mechanisms when user interruption operation exists, and curve 3 is the spring curve in the interruption mechanism provided by this application.

[0314] If there is no interruption operation by the user during the process of the electronic device 100 playing the animation, the animation can be played according to curve 1, that is, the playing of the animation is gradually completed as time goes by.

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

[0316] In the interruption mechanism provided in the embodiment of the present application, if the electronic device 100 detects an interruption operation by the user during the animation playback (see Fig.15 The electronic device 100 plays the animation according to curve 3, that is, within a period of time after the interruption point, the electronic device 100 continues to play the animation forward, and plays the animation in reverse after the time exceeds the interruption point.

[0317] from Fig.15 It can be seen from the spring curve shown 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 change suddenly immediately, so that the animation can transition smoothly and the fluency of the animation is improved.

[0318] Understandably, Fig.15 The spring curve shown is only an exemplary description and does not constitute a limitation to the embodiments of the present application.

[0319] 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, translateX and translateY in the translation property, crop left, crop top, crop right, crop bottom in the crop property, transparency (alpha) property, etc.

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

[0321] The layer synthesis engine can be used to synthesize the layers corresponding to each frame of the rendered image, obtain each frame of the animation to be displayed, and cache each frame of the image.

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

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

[0324] 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 realize the drawing and rendering of View animations such as startup page animation, icon startup animation, and icon exit animation. That is to say, icon startup animation, icon exit animation, startup page animation, window startup animation, and window exit animation can be realized by the RT animation engine or by SurfaceFlinger.

[0325] Below Figure 2A-2G The application startup process shown exemplifies the workflow involved in the software architecture block diagram of the electronic device 100 .

[0326] When the electronic device 100 detects a startup operation performed by the user on an 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.

[0327] 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 attributes 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 attributes 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 it through the display driver module.

[0328] 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.

[0329] 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, the window startup animation is played, thereby realizing the process of transitioning 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 removed, and a smoother transition of the application icon to the application startup page during the application startup process is realized.

[0330] from Fig.14 It can be seen that the icon startup animation is controlled by the launcher side, avoiding cross-process overhead. 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 frames 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 that is the same as the application startup page screen is pre-drawn and controlled by the launcher side, which removes the restrictions 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 screen changes during the application startup process.

[0331] Fig.16 The electronic device 100 provided in the embodiment of the present application displays an internal module interaction diagram of a startup animation when an application is started.

[0332] 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, the RT thread, System_server, and SurfaceFlinger.

[0333] The UI thread, also called the main thread, is a thread created by the system when the 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 is used to provide system services, such as drawing the startup page of the application when the application starts, and SurfaceFlinger is used to calculate, draw, and render animations.

[0334] like Fig.16 As shown in the figure, when the application starts, the main internal implementations involved include:

[0335] S11. The UI thread detects a user operation of starting an application.

[0336] The user operation may include a user operation on an application icon, a service card, a widget, a notification bar, a multitasking interface, or the like, such as a click operation.

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

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

[0339] The application startup page may refer to the first page displayed after the application is started. After the UI thread detects the user operation of starting the application, the first page may be pre-drawn before the application window is ready.

[0340] 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.

[0341] S13.UI thread calls Startactivity() method.

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

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

[0344] S15.UI thread creates icon layer.

[0345] 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 start animation in the icon layer.

[0346] Exemplarily, 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.

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

[0348] 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.

[0349] 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 the playback process. In this way, when the electronic device 100 plays the startup page animation and the icon startup animation at the same time, an animation effect of the icon gradually transitioning to the application startup page can be presented. 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.

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

[0351] S18.RT thread play icon starts animation.

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

[0353] S20.RT thread plays the startup page animation.

[0354] It is understandable 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 execution order of step S18 and step S20 in the embodiment of the present application.

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

[0356] The window startup animation can be used to show the process of gradually enlarging the page content of the application when the application is started. Among them, the window startup animation needs to be displayed in the user interface only after the application window is ready.

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

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

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

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

[0361] 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.

[0362] It is understandable that the embodiment of the present application does not limit the execution order of step S24, and step S24 can be executed before or after any one of steps S19-S23. That is, after obtaining the animation properties of the startup page animation, the RT thread can directly pass it 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, so as to ensure the continuous display of the startup page animation and the window startup animation.

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

[0364] 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 until the application startup page is drawn, and the window startup animation will be visible. 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.

[0365] It can be seen that after starting the application, the electronic device 100 can draw the first page through the UI thread, realize preloading of the first page before the window drawing is completed, and eliminate 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 join the playback of the window startup animation 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.

[0366] Fig.17 A flowchart of a display method provided in an embodiment of the present application.

[0367] 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.

[0368] Among them, the first interface element may refer to interface elements such as an application icon of the first application, a service card, a widget, a notification bar, a historical task in a multitasking interface, etc.

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

[0370] Exemplarily, the first interface element may refer to Figure 2A As shown in the application icon 103A, the first operation may refer to Figure 2A The shown action is a click operation on the application icon 103A.

[0371] Exemplarily, the first interface element may also refer to Figure 3A As shown in the application icon 103B, the first operation may refer to Figure 3A The action shown is for a click operation on the application icon 103B.

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

[0373] 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.

[0374] 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 time.

[0375] 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.

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

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

[0378] 1) If the user operation mentioned in step S301 is used to trigger a cold start of an 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.

[0379] 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.

[0380] 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 retreated to the background.

[0381] 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.

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

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

[0384] 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 as to realize the playback of the startup page animation before the window startup animation.

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

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

[0387] The first layer may be located above the second layer, and the icon startup animation may include a process of increasing screen transparency; or, the first layer may be located below the second layer, and the startup page animation may include a process of decreasing screen transparency; or, the icon startup animation may include a process of increasing screen transparency and the startup page animation may include a process of decreasing screen transparency.

[0388] In one implementation, the first layer may be located below the second layer. The transparency of the image frame of the icon startup animation may always be kept at 0, and the startup page animation may include image 1 and image 2, wherein, during the display of the startup page animation, image 1 may be displayed before image 2, and the transparency of image 1 may be higher than the transparency 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.

[0389] For example, the first interface element is Figure 2A As an example, the application icon 103A shown in FIG. 1 is used as an example. The multiple frames of the icon startup animation and the startup page animation can be seen in FIG. Figure 7 The multiple frame images shown in T0-T6 are shown, 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.

[0390] For example, if the icon startup animation and the startup page animation are displayed superimposed, see Figure 2A-2G , assuming that the application window is displayed on the electronic device 100 Figure 2E The drawing is not completed. Figure 2B Image 01 shown, Figure 2C Image 02 shown, Figure 2D Image 03 shown, Figure 2E The images 04 shown are all images obtained by superimposing the image frames of the icon startup animation and the startup page animation at the same time, or, see Figure 3A-3G , assuming that the application window is displayed on the electronic device 100 Figure 3D The drawing is not completed. Figure 3B As shown in image 11, Figure 3C As shown in image 12, Figure 3D The images 13 shown are all images obtained by superimposing image frames of the icon startup animation and the startup page animation at the same time.

[0391] 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 attribute 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 started.

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

[0393] Similarly, the electronic device 100 can determine the image frame in the startup page animation by setting the animation properties of the first page.

[0394] 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.

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

[0396] 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.

[0397] For example, the first interface element is Figure 2A For example, the application icon 103A in FIG. 103A may be a startup page of the icon. Figure 4 Image A shown in (a) in .

[0398] 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.

[0399] 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.

[0400] 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.

[0401] 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 using the second ratio to enlarge the background layer of the first interface element, it also includes cropping the enlarged background layer to obtain the background layer of the icon launch page. Furthermore, the size of the enlarged background layer of the first interface element needs to exceed the cropped area. 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 being enlarged, so the enlarged background layer of the first interface element needs to be cropped. For example, Figure 2A The application icon 103A shown is enlarged to Figure 4 When the image A shown in (a) of FIG. 1 is shown, the background layer of the application icon 103A is a rounded rectangle, and the background layer of the 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.

[0402] 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:

[0403] a) The second scale may include different magnification scales on the X-axis and the Y-axis

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

[0405] by Figure 2A The application icon 103A is enlarged to obtain Figure 4 As an example, the image A shown in (a) of FIG. 103A is a rectangle with equal width and height, and the image A is a rectangle with a height greater than the 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.

[0406] It can be seen that this situation is applicable to the case where the background layer of the first interface element is a solid color background. This is because when the foreground layer of the first interface element is enlarged, even if the horizontal and vertical enlargement ratios are different, causing the background layer of the first interface element to be stretched horizontally or vertically, there will be no picture distortion.

[0407] b) The second ratio may include only one magnification ratio

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

[0409] by Figure 2A The application icon 103A is enlarged to obtain Figure 4Taking the image A shown in (a) 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 in proportion, 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 launch page can also be obtained by cropping.

[0410] It can be seen that 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 enlarged in proportion to avoid the problem of horizontal or vertical stretching of the background layer of the first interface element, which causes image distortion.

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

[0412] For example, the first interface element is Figure 3A As an example, the application icon 103B shown in FIG. 103B may be a start page of the icon. Figure 4 Image B shown in (b) in FIG.

[0413] 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.

[0414] 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.

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

[0416] a) The first image is a solid background of the first color

[0417] In this case, the first color can be determined in any of the following ways:

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

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

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

[0421] 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.

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

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

[0424] In this case, the first color is determined according to the color included in the first interface element. For example, if the central area of ​​the first interface element is mainly red, the first color is light red. For another example, if the central area of ​​the first interface element is mainly blue, the first color is dark blue.

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

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

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

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

[0429] b-1) Preset colors

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

[0431] b-2) Color determined according to the color in the first interface element

[0432] The color may refer to the color contained in the first interface element, or may refer to the color after the color in the first interface element is corrected.

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

[0434] b-3) Randomly generated colors

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

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

[0437] 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 embodiment of the present application does not limit the gradient parameters such as the gradient direction and the number of gradient colors of the first image.

[0438] 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 pure colors.

[0439] 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 by the third ratio, and the boundary between the second area and the third area may be the lower boundary of the first interface element magnified by the third ratio. 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 color from color 1 to color 2.

[0440] Fig.18 A schematic diagram of generating an icon startup page provided for an application embodiment.

[0441] like Fig.18 As shown, the icon launch page consists of an application icon in the foreground layer that is enlarged to a third scale, and a first picture in the background layer. The first picture consists of a first area, a second area, and a third area. Assuming that the color contained in the upper boundary of the application icon is white and the color contained in the lower boundary is gray, the color of the first area is white, the color of the third area is gray, and the color of the second area is a gradient color transitioning from white at the top to gray at the bottom.

[0442] In other embodiments, if all display areas of the first image are gradient colors, the gradient colors may be determined based on the two colors in the first interface element. In this case, the detailed description of the electronic device 100 determining the icon startup page may be found in the following Figure 19-Figure 25 The content of this article will not be expanded here.

[0443] From the two cases of the above icon launch 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.

[0444] 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.

[0445] 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 method of the above situation 2 can also be used to generate an icon startup page.

[0446] 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.

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

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

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

[0450] 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, the icon launch animation corresponding to the icon launch page and the launch page animation corresponding to the first page can be quickly launched. For a detailed description of launcher and View animation, SurfaceView, please refer to the above Fig.14 The relevant description will not be repeated here.

[0451] 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, thereby visually speeding up the application startup speed.

[0452] 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.

[0453] In the embodiment of the present application, the icon startup animation may also be referred to as the first startup animation, and the startup page animation may also be referred to as the second startup animation.

[0454] 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, wherein 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.

[0455] 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.

[0456] 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.

[0457] 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.

[0458] Among them, the electronic device 100 can start drawing the application window of the first application after detecting the first operation for the first interface element. The application window is used to carry the display of application content. When the application is started, the application content carried by the application window may include but is not limited to any one or more of the following: an application startup page, an image cached in advance by the application, a main page displayed by default when the application is started, a startup animation preset in advance by the application, etc.

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

[0460] For example, the first interface element is Figure 2A As an example, see the application icon 103A shown in FIG. Figure 7 The first moment may refer to the T4 moment, the second image may refer to the image frame of the startup page animation at the T4 moment, and the multiple frames of the window startup animation may refer to Figure 7 In the multi-frame images of T5-T6 shown, the second moment may refer to the moment T5, the third image may refer to the image frame of the window startup animation at the moment T5, and the second page may refer to the image frame of the window startup animation at the moment T6.

[0461] Similar to the process of generating icon startup animation and startup page animation by electronic device 100, the process of generating window startup animation may also include: first generating an image displayed after the application is started, 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 refer to the aforementioned Figure 7 .from Figure 7 It can be seen that during the display process of the icon startup animation and the window startup animation, the displayed content gradually increases and the size of the displayed content gradually increases.

[0462] 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 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.

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

[0464] 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.

[0465] In some embodiments, the third layer may be above the first layer and the second layer. In this way, when the electronic device 100 displays the window startup animation, the icon startup animation and the startup page animation located in the lower layer may be blocked to complete the startup of the application. For details about the layer relationship between the first layer, the second layer, and the third layer, please refer to 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.

[0466] Exemplarily, the electronic device 100 may implement the playback of the window startup animation through SurfaceFlinger. Before the electronic device 100 displays the window startup animation, the electronic device 100 may pass the animation properties of the startup page animation to the application window through the RT thread.

[0467] For example, if the icon startup animation, the startup page animation, and the window startup animation are displayed in a superimposed manner, see Figure 2A-2G , assuming that the application window is displayed on the electronic device 100 Figure 2E After the drawing is completed, Figure 2F The image shown is 05. Figure 2G The images 06 shown are all images obtained by superimposing the image frames of the icon startup animation, the startup page animation and the window startup animation at the same time, or, see Figure 3A-3G , assuming that the application window is displayed on the electronic device 100 Figure 3D After the drawing is completed, Figure 3E The image shown in 14, Figure 3F The image shown in 15, Figure 3G The images 16 shown are all images obtained by superimposing image frames of the icon startup animation, the startup page animation, and the window startup animation at the same time.

[0468] 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.

[0469] 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 consumption.

[0470] In addition, it should be noted that the content displayed in the application window may switch when 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 first, and then the application's main page will be switched.

[0471] 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.

[0472] 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.

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

[0474] For example, Figure 3A-3E , Fig. 3I , Figure 3H The electronic device 100 sequentially displays the user interface after starting the application. Assume that the application window is displayed on the electronic device 100. Figure 3D After the drawing is completed, Figure 3E The image shown in 14, Fig. 3I The image 15' shown, Figure 3H The user interface 40 shown is obtained based on the image frame in the window startup animation. Figure 3E In the image 14 shown, the image frame in the window startup animation is determined according to 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. Fig. 3I The image 15' shown, Figure 3H In the user interface 40 shown, the image frame in the window startup animation is determined according to 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.

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

[0476] 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

[0477] 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.

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

[0479] 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.

[0480] 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 in the currently displayed startup animation in reverse order.

[0481] See for example Figures 10A-10G , the user operation of exiting the first application may refer to Fig. 10A After the electronic device 100 detects the user's operation of exiting the application, the electronic device 100 may display Figures 10A-10G The user interface shown.

[0482] 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.

[0483] 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.

[0484] 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 out process from the application page to the application icon, thereby improving the user's visual experience.

[0485] 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 frames of the icon startup animation and the startup page animation displayed by the electronic device 100 based on the sliding operation.

[0486] 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.

[0487] 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.

[0488] 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 being played.

[0489] 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 including the process of changing from the ninth image to the first interface element, and the second exit animation including 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.

[0490] 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.

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

[0492] Exemplarily, the electronic device 100 can set the background layer of the icon launch page according to 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 endpoint and the lower endpoint of the first interface element, and use the colors of the two endpoints to set a gradient background that transitions from the color of the upper endpoint to the color of the lower endpoint.

[0493] 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, and the background layer of the icon launch page is a gradient background generated by the color extracted from the first interface element. In this way, for icons with a more complex pattern on the background layer of the first interface element, the electronic device 100 does not need to use the complex pattern background to generate the background layer of the icon launch page, which makes the image frame background layer of the icon launch animation too fancy, and improves the neatness and beauty of the picture.

[0494] 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.

[0495] The following is a specific embodiment to describe the detailed process of the electronic device 100 generating an icon startup page using the color in the first interface element.

[0496] Fig.19 A schematic diagram of a process for generating an icon startup page using the color of a first interface element provided in an embodiment of the present application.

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

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

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

[0500] Exemplarily, the four endpoints may be the upper endpoint, the lower endpoint, the left endpoint and the right endpoint of the first interface element, respectively. Further, the four endpoints may refer to endpoints on the boundary of the first interface element.

[0501] In a specific implementation, when obtaining the colors of the four endpoints of 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 of the first interface element.

[0502] It should be noted that since the first interface element may be an irregular icon, that is, the edge of the first interface element may not contain 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, it can continue to move one pixel inside the first interface element to extract the color until a valid color is extracted.

[0503] For example, Fig. 20 Taking the first interface element as an application icon as an example, a schematic diagram of four endpoints for extracting the color of the first interface element is shown. Fig. 20 As shown, the upper endpoint may refer to the middle point of the upper boundary of the application icon, the lower endpoint may refer to the middle point of the lower boundary of the application icon, the left endpoint may refer to the middle point of the left boundary of the application icon, and the right endpoint may refer to the middle point of the right boundary of the application icon.

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

[0505] Exemplarily, taking HSB color value as an example, the electronic device 100 may 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.

[0506] Optionally, if the difference between the HSB color values ​​of the upper endpoint and the lower endpoint can each be smaller than a first threshold, illustratively, the first threshold can be 5, and the colors of the upper endpoint and the lower endpoint can also be considered to be the same.

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

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

[0509] Exemplarily, 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.

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

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

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

[0513] 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.

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

[0515] 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.

[0516] 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 as a gradient background according to the colors of the upper and lower endpoints of the first interface element.

[0517] Specifically, the foreground layer of the icon launch page can be the foreground layer of the first interface element enlarged by 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.

[0518] It can be understood 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.

[0519] 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 set the color of the middle layer of the background layer to the transition color of the colors at both ends to complete the determination of the color of the background layer.

[0520] 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 launch 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.

[0521] For example, in order to better understand the process of generating the gradient background of the icon startup page, Fig.21Taking the first interface element as an application icon as an example, a schematic diagram of the icon startup page generated by step S405 is shown.

[0522] like Fig.21 As shown, 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 according to the application icon can be Fig.21 The image 51 shown has a foreground layer of the application icon, and a background layer of the image 51 that is a gradient background transitioning from white at the top to light gray at the bottom.

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

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

[0525] If the colors of the upper endpoint and the lower endpoint are similar, execute step S407; otherwise, execute step S408.

[0526] 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.

[0527] 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.

[0528] 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 enlarged 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.

[0529] For example, in order to better understand the process of generating the gradient background of the icon startup page, Fig. 22 Taking the first interface element as an application icon as an example, a schematic diagram of the icon startup page generated by step S407 is shown.

[0530] like Fig. 22 As shown, 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 according to the application icon can be Fig. 22 The image 52 shown has a foreground layer that is a foreground layer of an application icon, and a background layer that is a gradient background that transitions from white at the top to gray at the bottom.

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

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

[0533] If the colors of the upper endpoint and the left endpoint are similar, execute step S409; otherwise, execute step S410.

[0534] 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.

[0535] 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.

[0536] 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 launch page according to the colors of the upper endpoint and the left endpoint of the first interface element.

[0537] For example, in order to better understand the process of generating the gradient background of the icon startup page, Fig.23 Taking the first interface element as an application icon as an example, a schematic diagram of the icon startup page generated by step S409 is shown.

[0538] like Fig.23 As shown, 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 launch page generated according to the application icon can be Fig.23The image 53 shown has a foreground layer of the application icon, and a background layer of the image 53 that is a gradient background transitioning from white at the top to gray at the bottom.

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

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

[0541] If the colors of the upper endpoint and the right endpoint are similar, execute step S411, otherwise execute step S412.

[0542] 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, and 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, and 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.

[0543] 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.

[0544] 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.

[0545] 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 launch page according to the colors of the upper endpoint and the right endpoint of the first interface element.

[0546] For example, in order to better understand the process of generating the gradient background of the icon startup page, Fig.24 Taking the first interface element as an application icon as an example, a schematic diagram of the icon startup page generated by step S411 is shown.

[0547] like Fig.24As shown, 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 launch page generated according to the application icon can be Fig.24 The image 54 shown has a foreground layer that is the foreground layer of the application icon, and a background layer that is a gradient background that transitions from white at the top to gray at the bottom.

[0548] S412. The electronic device 100 determines the foreground layer of the icon launch page according to the first interface element, performs color correction on the colors of the upper and lower endpoints of the first interface element, and then determines the background layer of the icon launch page as a gradient background according to the corrected colors.

[0549] 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.

[0550] 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 close 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 close to the color of the upper endpoint. Alternatively, the colors of the upper endpoint and the lower endpoint can be adjusted simultaneously so that the adjusted color of the upper endpoint is close to the adjusted color of the lower endpoint.

[0551] 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.

[0552] 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 corrected first interface element to the color of the lower end point.

[0553] That is to say, if the color of the upper endpoint of the first interface element is significantly different from 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.

[0554] For example, in order to better understand the process of generating the gradient background of the icon startup page, Fig.25 Taking the first interface element as an application icon as an example, a schematic diagram of the icon startup page generated by step S412 is shown.

[0555] like Fig.25 As shown, 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 launch page generated according to the application icon can be Fig.25 The image 55 shown has a foreground layer of the application icon and a background layer of the image 55 which is a gradient background transitioning from white at the top to gray at the bottom. The gray is a color obtained by adjusting the color of the lower endpoint.

[0556] It is understandable that the above Figure 20-Figure 25 This is only an illustrative example for a better understanding of the present solution and does not constitute a limitation on the embodiments of the present application.

[0557] In addition, it should be noted that Fig.19 The detailed process of generating an icon startup page by using the colors in the first interface element is described as an example. In other embodiments of the present application, the electronic device 100 may 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 positions of the endpoints selected by the electronic device 100, the number of endpoints, the order of determining the same or similar colors between the endpoints, etc.

[0558] In general, the electronic device 100 can generate the background layer of the icon startup page by the color extracted from the first interface element. Among them, two colors can be extracted from the first interface element, and the background layer of the icon startup page can be set as a gradient background layer using these two colors, so that the picture in the icon startup animation is 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, so as to ensure that the color tone of the gradient background layer is more harmonious.

[0559] Fig.26 A timing comparison diagram of an application startup method provided in an embodiment of the present application and an application startup method.

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

[0561] 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.

[0562] 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.

[0563] It can be seen that during the application startup process, the UI thread needs to communicate with the system service multiple times, with many intermediate links and complex pre-dependencies in each link, resulting in slow response to application startup and a long waiting time for users from a visual experience perspective. In addition, the window startup animation is played through the UI thread, which has heavy business, causing the window startup animation to easily freeze and cause animation frame loss.

[0564] 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 the startup page animation are played. After the application window is ready, the window startup animation can be played continuously to complete the application startup.

[0565] 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.

[0566] It can be seen that after detecting the user's operation of starting 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.

[0567] Comparing Timeline 1 and Timeline 2, it can be seen that after the user launches the application, the icon startup animation and the startup page animation can be quickly launched on Timeline 2, and the animation triggered by the user launching the application can be displayed to the user. On Timeline 1, it takes a long time to wait for the application window to be ready before the animation triggered by the user launching the application can be displayed to the user. In addition, on Timeline 2, the first page is loaded before the application window is ready, and the startup page animation is displayed, avoiding a long time after the user launches the application. And because the content of the first page is the same as that 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.

[0568] Fig. 27 The electronic device 100 provided in the embodiment of the present application displays an internal module interaction diagram of an exit animation after being interrupted by a user during the application startup process.

[0569] 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. For specific definitions of UI thread, Framework, and RT thread, please refer to the aforementioned Fig.14 The relevant content in will not be repeated here.

[0570] like Fig. 27 As shown in the figure, after the application startup process is interrupted by the user, the main internal implementations involved include:

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

[0572] 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 starting the application. The specific internal implementation of the electronic device 100 starting the icon startup animation and the startup page animation can refer to the description of the above steps S11-S20, which will not be repeated here.

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

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

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

[0576] The electronic device 100 may start preparing the application window after detecting a user operation of starting the application. Specifically, the UI thread may trigger a determination of whether the application window is ready after detecting an operation of exiting the application.

[0577] If the application window is ready, execute step S54 to start the exit animation from the application window to the icon; otherwise, execute step S55 to create the icon-hand animation.

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

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

[0580] That is, during the process of application startup and displaying the startup animation, when the electronic device 100 detects a user 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.

[0581] 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 a process in which the image frames follow the sliding track of the sliding operation in the first few frames of the exit animation.

[0582] For example, see Figure 12A-12E , Fig. 12A FIG. 1 shows a sliding operation of exiting an application detected by the electronic device 100 when displaying a startup animation. Figure 12B-12E The images 31, 32 and 33 shown are multiple frames of images included in the exit animation of the application window to the image, wherein: Fig. 12B , Fig. 12C The motion trajectory of the image frame shown shows the hand-following animation in which the image frame moves following the sliding estimation of the Huadong operation.

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

[0584] If the application window is not ready, the UI thread creates an icon exit animation through SurfaceFlinger, that is, the process of displaying the application icon gradually shrinking. Each frame image included in the icon exit animation can be each frame image in the reversed icon startup animation.

[0585] That is, during the process of application startup and displaying the icon startup animation, when the electronic device 100 detects a user operation to exit the application, if the current application window is not ready, the electronic device 100 can reverse the icon startup animation and display an exit animation in which the icon gradually shrinks.

[0586] 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. That is, step S53 is an optional step.

[0587] Furthermore, the icon exit animation may include a hand-following animation. That is, when the operation of exiting the application is a sliding operation, during the process of gradually shrinking the icon displayed on the electronic device 100, the moving track of the icon will also move in the sliding direction of the user.

[0588] That is, during the process of application startup and displaying the icon startup animation, when the electronic device 100 detects the user's 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.

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

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

[0591] 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.

[0592] 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.

[0593] That is, during the process of the electronic device 100 displaying 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 the icon exit animation.

[0594] In some embodiments, if the icon exit animation includes a hand-following animation, the electronic device 100 can trigger a determination as to 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 returning to the desktop animation, i.e., displays the process of the application icon gradually shrinking to return to the desktop.

[0595] For example, see Figure 13A-13C , Figure 12D-12E , Fig.13A The electronic device 100 detects a sliding operation to exit the application when displaying the startup animation. Figure 13A-13C Shows the icon following the hand animation, Figure 12D-12E An exit animation of an application window to an icon is shown.

[0596] For example, participating Figures 13A-13E , Fig.13A The electronic device 100 detects a sliding operation to exit the application when displaying the startup animation. Figure 13A-13C Shows the icon following the hand animation, Figure 13D-13E An animation of the icon returning to the desktop is shown.

[0597] 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 to complete the exit of the application.

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

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

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

[0601] 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, thereby providing the user with a rich visual experience.

[0602] Fig.28 A flowchart of another display method provided in an embodiment of the present application.

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

[0604] 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.

[0605] Exemplarily, the second operation may refer to Fig. 12A or Fig.13A The sliding operation shown.

[0606] 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 an icon, where the exit animation includes a process of gradually shrinking the application window to the first interface element.

[0607] 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 has the following two situations:

[0608] 1) The electronic device 100 has displayed a window startup animation

[0609] 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 the multiple frames of images in reverse order according to the image frames of the currently displayed window startup animation and icon startup animation.

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

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

[0612] For example, see Figure 12A-12E , the electronic device 100 displays Fig. 12A The image 04 shown is when the user exits the application. The image 04 is drawn according to the image frame in the startup page animation. If the electronic device 100 detects the user exiting the application, the application window drawing is completed. Fig. 12B The image 31 shown is an image frame drawn according to the display content in the application window. Figure 12B-12E An animation of shrinking the content in the application window to the application icon 103A is shown.

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

[0614] If the electronic device 100 detects a user operation to exit an application while displaying an icon startup animation, and the electronic device 100 has not currently prepared an application window, then in response to the operation, the electronic device 100 may display a shrinking animation from the image frame displayed when the operation to exit the application is detected to the first interface element.

[0615] For example, see Figures 13A-13E , the electronic device 100 displays Fig. 12A The image 04 shown in FIG. 1 is a detection of a user exiting the application. The image 04 is drawn according to the image frame in the startup page animation. If the application window is not drawn after the electronic device 100 detects the user exiting the application, the electronic device 100 may display Figure 13B-13E The icon exit animation shown is used to show the shrinking process of the application icon.

[0616] In some implementations, when the electronic device 100 detects the second operation, it may also respond directly to the second operation by reversing the image frame in the icon startup animation that has been displayed, regardless of whether the application window has been drawn. In this way, the electronic device 100 can directly display the exit animation of the interface element shrinking to the user.

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

[0618] In addition, the exit animation displayed by the electronic device 100 may also 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.

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

[0620] In some implementations, the electronic device 100 may also detect that the user has started the first application again during the process of displaying the exit animation, and continue to display the start-up animation based on the currently displayed image frame.

[0621] Fig.29 A schematic diagram of the hardware structure of the electronic device 100 is shown.

[0622] 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 special restrictions on the specific type of the electronic device.

[0623] 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.

[0624] It is to be understood that the structure illustrated in the embodiment 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 in the figure, or combine some components, or separate some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0625] 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 processor (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), etc. Different processing units may be independent devices or integrated into one or more processors.

[0626] In some embodiments, the processor 110 may be used 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.

[0627] 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.

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

[0629] 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.

[0630] 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 the utilization of antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0631] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., 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.

[0632] The modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be sent 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 the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a receiver 170B, etc.), or displays an image or video through a 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.

[0633] 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 integrating 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, modulate the frequency, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0634] 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 the network and other devices through wireless communication technology. The wireless communication technology 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).

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

[0636] The display screen 194 is used to display images, videos, etc. The 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), miniled, microled, micro-oled, quantum dot light emitting diodes (QLED), etc. In some embodiments, the electronic device may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0637] In some embodiments, the display screen 194 can be used to display the startup animation involved in the application startup process, including icon startup animation, startup page animation, window startup animation, and exit animation involved in the process of exiting the application. Figure 2A-2G , Figure 3A-Figure 3I , Figure 9A-9D , Figures 10A-10G , Figure 12A-12E , Figures 13A-13E content.

[0638] The electronic device 100 can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.

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

[0640] 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.

[0641] 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 .

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

[0643] The touch sensor 180K is also called a "touch control device". The touch sensor 180K can be set on the display screen 194. The touch sensor 180K and the display screen 194 form a touch screen, also called a "touch control screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180K can also be set on the surface of the electronic device 100, which is different from the position of the display screen 194.

[0644] It should be understood that each step in the above method embodiment can be completed by an integrated logic circuit of hardware in a processor or by instructions in the form of software. 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.

[0645] 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; 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.

[0646] 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.

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

[0648] The chip system may be composed of the chip, or may include the chip and other discrete devices.

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

[0650] Optionally, the memory in the chip system may also be one or more. The memory may be integrated with the processor or may be separately arranged with the processor, which is not limited in the embodiments of the present application. Exemplarily, 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 may be arranged on different chips respectively. The embodiments of the present application do not specifically limit the type of memory and the arrangement of the memory and the processor.

[0651] Exemplarily, the chip system can 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.

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

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

[0654] It should be understood that the processor in the embodiment of the present application can be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method embodiment can be completed by the hardware integrated logic circuit or software instructions in the processor. The above processor can be a general processor, a digital signal processor (digitalsignal processor, DSP), an application specific integrated circuit (AP 800plication specific integrated circuit, ASIC), a field programmable gate array (field programmable gate array, FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in the embodiment of the present application can be directly embodied as a hardware decoding processor to perform, or the hardware and software modules in the decoding processor are combined to perform. The software module can be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware.

[0655] In addition, an embodiment of the present application further provides a device. The device may be a component or a module, and the device may include one or more processors and a memory connected to each other. The memory is used to store a computer program. When the computer program is executed by one or more processors, the device executes the method in each of the above method embodiments.

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

[0657] The various implementation modes of the present application can be combined arbitrarily to achieve different technical effects.

[0658] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part 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, the process or function described in the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server or data center to another website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) mode. The computer-readable storage medium can 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. The available medium can 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 disk (SSD)), etc.

[0659] Those skilled in the art can understand that to implement all or part of the processes in the above-mentioned embodiments, the processes can be completed by computer programs to instruct related hardware, and the programs can be stored in computer-readable storage media. When the programs are executed, they can include the processes of the above-mentioned method embodiments. The aforementioned storage media include: ROM or random access memory RAM, magnetic disk or optical disk and other media that can store program codes.

[0660] In short, the above description is only an embodiment of the technical solution of the present invention, and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made according to the disclosure of the present invention shall be included in the protection scope of the present invention.

Claims

1. A display method, characterized in that: The method comprises: The electronic device detects a first operation acting on a first interface element, where the first operation is 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, and 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 time are the same; At a first moment, the electronic device displays a second image of the second startup animation; At a second moment, the electronic device displays a window startup animation, and the second moment is located after the first moment. The window startup animation includes a process of gradually changing from a third image to a second page of the first application, wherein the contents of the first page and the second page are the same, the content of the second page includes the content of the third image, the content of the third image includes the content of the second image, and 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.

2. The method according to claim 1, characterized in that The first startup animation includes a change process in which the screen transparency increases, and the second startup animation includes a change process in which the screen transparency decreases.

3. The method according to claim 1, characterized in that The first startup animation is displayed on the first layer, and the second startup animation is displayed on the second layer; The first layer is located above the second layer, and the first startup animation includes a change process in which the transparency of the screen increases; or the first layer is located below the second layer, and the second startup animation includes a change process in which the transparency of the screen decreases.

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

5. The method according to any one of claims 1 to 4, characterized in that: 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.

6. The method according to any one of claims 1 to 5, characterized in that: The method further comprises: In response to the first operation, the electronic device starts drawing an application window of the first application; After the electronic device displays the first startup animation and the second startup animation and before displaying the window startup animation, the method further includes: The electronic device completes drawing of the application window of the first application.

7. The method according to any one of claims 1 to 6, characterized in that: The first page is an application startup page image preset by the first application, or the first page is drawn by the electronic device according to the first information of the first application, or the first page is a screenshot of the page of the first application before it was most recently exited to the background, or the first page is a screenshot of the main page of the first application.

8. The method according to any one of claims 1 to 7, characterized in that: The method further comprises: After the electronic device displays the fourth image of the window startup animation, the electronic device displays 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 is different from the third page.

9. The method according to any one of claims 1 to 8, characterized in that: 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 further includes: The electronic device displays a main page of the first application in an 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 further includes: The electronic device displays, in the application window of the first application, a page that the first application displayed before it last retreated to the background.

10. The method according to any one of claims 1 to 9, characterized in that: 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 further includes: The electronic device amplifies the first foreground layer based on a first ratio to obtain the second foreground layer; The electronic device enlarges the first background layer based on a 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 image frames 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.

11. The method according to claim 10, characterized in that The first ratio is different from the second ratio.

12. The method according to any one of claims 1 to 9, characterized in that: 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 further includes: The electronic device magnifies 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, and the appearance and enlargement process of the first picture.

13. The method according to claim 12, characterized in that The first image is a pure color background image of a first color, and the first color includes any of the following situations: the first color is a preset color, the first color is a color included in the first interface element, or the color value of the first color is the color value*coefficient of the color included in the first interface element; or, The first image is a gradient background image transitioning from a second color to a third color, wherein the second color and / or the third color is obtained based on the color included in the first interface element; or, The first picture includes a first area, a second area and a third area. The boundary between the first area and the second area is the upper boundary of the second foreground layer, the boundary 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.

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

15. The method according to any one of claims 10 to 14, characterized in that: The electronic device generates an image frame of the first startup animation according to the second foreground layer and the second background layer, specifically comprising: 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. The image frames of the first startup animation displayed at different times have different animation properties, and the animation properties include one or more of the following: displacement, scaling, cropping, rounded corners or transparency.

16. The method according to any one of claims 1 to 15, characterized in that: Before the electronic device displays the first startup animation, the method further includes: The electronic device draws a first page.

17. The method according to any one of claims 1 to 16, characterized in that: Before the electronic device displays a window startup animation, the method further includes: The electronic device transmits the animation attributes of the second startup animation to the application window of the first application, where the animation attributes include 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 attribute of the second startup animation.

18. The method according to any one of claims 1 to 17, characterized in that: The second startup animation stops displaying when the electronic device displays the window startup animation.

19. The method according to any one of claims 1 to 18, characterized in that: In the process of the electronic device displaying the first startup animation and the second startup animation, the method further 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 first startup animation and the second startup animation that have been displayed, or, the electronic device continues to display the M frames of the first startup animation and the second startup animation, and then plays back the image frames in the first startup animation and the second startup animation that have been displayed, and among the M frames that continue to be displayed, as time goes by, the playback speed of the M frames gradually decreases, and the playback speed of the first L frames of the reversely displayed image gradually increases.

20. The method according to any one of claims 1 to 19, 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 further includes: When the electronic device displays the sixth image of the first startup animation, the seventh image of the second startup animation, and the eighth image of the window startup animation, the electronic device detects a second operation, where the second operation is used to exit the first application; In response to the second operation, the electronic device displays 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.

21. The method according to any one of claims 1 to 20, characterized in that: 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.

22. The method according to any one of claims 1 to 21, characterized in that: 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.

23. An electronic device, characterized in that: It comprises 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 as claimed in any one of claims 1 to 22.

24. A computer-readable storage medium comprising instructions, characterized in that: When the instructions are executed on an electronic device, the electronic device is caused to execute the method according to any one of claims 1 to 22.

25. A computer program product, characterized in that When the computer program product runs on a computer, the computer is caused to execute the method according to any one of claims 1 to 22.

Images