Method for displaying transition dynamic effect and related device

Abstract

The invention discloses a transition dynamic effect display method and a related device. And the electronic equipment executes the animation on the layer where the entry page is located, and does not execute the animation on the second layer. According to the method, animation does not need to be executed on the second layer, and the backspace page borne by the second layer can be continuously displayed until the entry page disappears, so that the first transition dynamic effect is displayed. In this way, the smooth first transition dynamic effect can be displayed, additional overhead for executing animation on the second layer can be avoided, and the system load is reduced.

Description

Technical Field

[0001] The present application relates to the field of terminals, and in particular to methods and related devices for displaying transition effects. Background Art

[0002] Transition is the transition between scenes, pages or components. Transition animation can provide timely feedback to user operations, guide user attention, eliminate anxiety when waiting for loading, and thus improve the overall experience fluency. How to achieve transition animation is a problem that needs to be studied now and in the future. Summary of the invention

[0003] The present application provides a method and related device for displaying transition effects, which can not only display a smooth first transition effect, but also avoid the overhead of adding additional animations and reduce system load.

[0004] In a first aspect, a method for displaying a transition effect is provided, which may include: displaying a first page; receiving a first operation for switching pages; creating a first layer and a second layer, the first layer carrying the second page, and the second layer carrying the first page; displaying the first layer with a first animation, and displaying the second layer without animation, with the first layer covering the second layer; and displaying the second page.

[0005] When the method of the first aspect is implemented, there is no need to perform animation on the second layer, and the first page carried by the second layer (i.e., the exit page) can also be continuously displayed until the second page (i.e., the entry page disappears), thereby displaying the first transition effect. In this way, not only can a smooth first transition effect be displayed, but also the additional overhead of adding animation to the second layer can be avoided, thereby reducing the system load.

[0006] In combination with the first aspect, in some embodiments, after creating the first layer and the second layer, before displaying the first layer with the first animation and displaying the second layer without animation, the method may further include: adding the first animation to the first layer and the second layer; adding the second node as a child node of the first node, the first node corresponding to the first layer, and the second node corresponding to the second layer; adding a flag to the second layer, the flag indicating that the animation is prohibited. In this way, the second node becomes the parent node of the first node, and the second node is prohibited from executing the animation, which can realize the transition effect of displaying the first layer with the first animation and displaying the second layer without animation, and reduces the overhead of executing the animation on the second layer.

[0007] In combination with the previous implementation, the second node may be added as a child node of the first node by calling the reparent function.

[0008] In combination with the previous implementation, a flag bit may be added to the second layer by calling the setFlags function.

[0009] In combination with the previous implementation, after the first layer is displayed with the first animation and the second layer is displayed without animation, the method may further include: deleting the first layer, and according to the parent-child relationship between the first node and the second node, deleting the second layer at the same time as deleting the first layer. The first layer and the second layer are deleted at the same time, so that the effect of the first transition animation can be guaranteed.

[0010] In combination with the first aspect, in some embodiments, after creating the first layer and the second layer, before displaying the first layer with the first animation and displaying the second layer without animation, the method may further include: adding the first animation to the first layer; adding the second node as a child node of the third node, the second node corresponds to the second layer, the third node is the parent node of the first node, and the first node corresponds to the first layer. In this way, the first node and the second node become child nodes of the same level under the same parent node, and the transition effect of displaying the first layer with the first animation and displaying the second layer without animation can be realized, and the overhead of executing the animation on the second layer is reduced.

[0011] In combination with the previous implementation, the reparent function may be called to add a parent-child relationship to add the second node as a child node of the third node.

[0012] In combination with the previous embodiment, after the first layer is displayed with the first animation and the second layer is displayed without animation, the method may further include: detecting the deletion of the first layer; and deleting the second layer in response to the deletion of the first layer. The first layer and the second layer are deleted at the same time, so that the effect of the first transition animation can be guaranteed.

[0013] In combination with the first aspect, in some embodiments, after creating the first layer and the second layer, displaying the first layer with a first animation and before displaying the second layer without animation, the method may further include: identifying that a first transition effect needs to be displayed, the first transition effect including: the first page is continuously displayed, and the second page gradually covers the first page until the first page is completely covered.

[0014] In combination with the previous implementation, the matchScene function may be called to identify whether the first transition animation effect needs to be displayed.

[0015] In combination with the previous implementation, the device may preset a scene using the first transition effect, and identify the need to display the first transition effect based on the preset information. Alternatively, the device may identify whether to prepare to create an empty animation for the second layer, and if so, it is considered that the first transition effect needs to be displayed.

[0016] In combination with the first aspect, in some implementations, the first animation is an approach animation.

[0017] In combination with the first aspect, in some implementations, the first animation specifically includes a gradual increase in the size displayed on the second page.

[0018] In combination with the first aspect, in some implementations, the first animation specifically includes a size of the second page displayed gradually increasing to a full-screen size.

[0019] In combination with the first aspect, in some implementations, the second page may cover the first page opaquely or with a certain degree of transparency.

[0020] In conjunction with the first aspect, in some implementations, the second page may gradually cover the first page from any position of the first page, such as from the left side, right side, top side (such as Figure 2 , Figure 3 as shown), lower side, middle position (as shown Figure 1 , Figure 4 As shown) etc. start to cover the first page.

[0021] In combination with the first aspect, in some implementations, when the second page gradually covers the first page, the elements in the second page may be gradually increased.

[0022] In combination with the first aspect, in some embodiments, when the first layer is displayed with a first animation and the second layer is displayed without animation, the transparency, color depth, etc. of the first page and the second page may change. For example, the transparency of the second page may gradually decrease until it is completely opaque, and the color of the second page may gradually deepen.

[0023] In combination with the first aspect, in some implementations, after the first layer is displayed with the first animation and the second layer is displayed without animation, when the second page is displayed, the first page is no longer displayed.

[0024] In combination with the first aspect, in some embodiments, the method may further include: before receiving the first operation for switching pages, when the first page is displayed, the second page is also displayed. The first page includes content other than the floating window displayed on the display screen, the second page includes the content of the floating window, and the first operation includes an operation of maximizing the floating window; or the first page includes a first split-screen page, the second page includes a second split-screen page, and the first operation includes an operation of expanding the second split-screen page.

[0025] In combination with the first aspect, in some embodiments, the first page is a page that can be accessed in the lock screen state, the second page is the lock screen page, and the first operation includes an operation of exiting to the lock screen page; or, the first page is the desktop, the second page is a page provided by an application other than the desktop, and the first operation includes an operation acting on an application icon on the desktop.

[0026] In combination with the first aspect, in some embodiments, the first page is provided by a first application, and the second page is provided by a second application, and the first application and the second application are different, that is, the method of the first aspect is applicable to transitions between different applications; or, the first page and the second page are provided by the same application, that is, the method of the first aspect is applicable to transitions between different pages of the same application.

[0027] In combination with the first aspect, in some implementations, the method may be applied to an electronic device, and the first layer and the second layer are created by a WMS in the electronic device.

[0028] In a second aspect, the present application provides an electronic device, comprising one or more processors and one or more memories; wherein the memories are coupled to the processors, and the one or more memories are used to store computer program codes, and the computer program codes include computer instructions, and when the processor executes the computer instructions, the electronic device executes the method described in the first aspect, or any possible implementation method of the first aspect.

[0029] In a third aspect, an embodiment of the present application provides a chip system, which is applied to an electronic device, and the chip system includes one or more processors, which are used to call computer instructions so that the electronic device executes the method described in the first aspect and any possible implementation method of the first aspect.

[0030] In a fourth aspect, the present application provides a computer-readable storage medium comprising instructions, which, when executed on an electronic device, causes the electronic device to execute the method described in the first aspect and any possible implementation of the first aspect.

[0031] In a fifth aspect, the present application provides a computer program product comprising instructions, which, when executed on an electronic device, enables the electronic device to execute the method described in the first aspect and any possible implementation of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1-Figure 4 A set of user interfaces each showing an electronic device displaying a first transition animation effect;

[0033] Figure 5 is a flow chart of a method for realizing a first transition animation effect;

[0034] Figure 6 is a flowchart of another method for realizing the first transition animation effect;

[0035] Figure 7 A flowchart of a method for displaying transition effects;

[0036] Figure 8A hardware structure block diagram of an electronic device provided in an embodiment of the present application;

[0037] Fig. 9 The software architecture of the electronic device provided in the embodiment of the present application. DETAILED DESCRIPTION

[0038] The terms used in the following embodiments of the present application are only for the purpose of describing specific embodiments and are not intended to limit the present application.

[0039] There is a type of transition effect widely used in electronic devices. In this type of transition effect, the previous page continues to be displayed, and the next page gradually covers the previous page until it completely covers the previous page. This type of transition effect can be applied to transitions between different applications, and can also be applied to transitions between different pages in the same application. Through this type of transition effect, after the user triggers the transition, he can pay attention to the content of the new page while retaining the impression of the old page. The following embodiments refer to this type of transition effect as the first transition effect.

[0040] Figure 1-Figure 4 A group of user interfaces of an electronic device displaying a first transition animation effect are respectively shown.

[0041] Figure 1 The first transition effect of expanding the floating window to full screen is shown.

[0042] like Figure 1 As shown in a, the user interface displays a bottom page 11 and an upper page 12. The upper page 12 covers the bottom page 11, and the upper page 12 is implemented as a floating window. The bottom page 11 includes the content of the desktop, and the upper page 12 includes the content of the setting application. The user interface shown in a can be displayed by the electronic device after the desktop detects an operation of opening the floating window, which operation can be, for example, an operation of sliding inward from the left or right edge of the desktop and pausing, and then selecting an application (such as a setting application) from the application bar displayed at the edge of the screen. The application selected by the user (such as the setting application) provides the content of the upper page 12.

[0043] like Figure 1 As shown in a, the electronic device can detect the user operation (such as a click operation) of the full-screen control acting on the upper left corner of the floating window.

[0044] like Figure 1As shown in bd, the electronic device responds to the user operation detected in a, continues to display the bottom page 11, and gradually expands the size of the upper page 12 and gradually increases the content displayed in the upper page 12 starting from the position and size of the upper page 12 in a, until the upper page 12 completely covers the bottom page 11, and the electronic device displays the upper page 12 in full screen as shown in d. The size and content of the upper page 12 displayed in full screen in d are the same as those of the homepage displayed after the electronic device starts the settings application.

[0045] The bottom page 11 is not limited to the desktop, and can also be other user interfaces; it is not limited to the setting application, and the content in the floating window of the upper page 12 can also be provided by other applications. The content of the bottom page 11 depends on when the user starts the floating window, and the content of the upper page 12 depends on the application selected by the user.

[0046] Figure 2 The first transition effect of expanding the split-screen page into full screen is shown.

[0047] like Figure 2 As shown in a, the user interface displays split screen page 21 and split screen page 22. Split screen page 22 and split screen page 21 are arranged from top to bottom, and are implemented in a top-bottom split screen format. Split screen page 22 includes the content of the setting application, and split screen page 21 includes the content of the desktop. The user interface shown in a can be displayed by the electronic device in response to the operation of starting the top-bottom split screen function after the desktop detects the operation. The operation can be, for example, Figure 1 In a, you can long press the middle horizontal bar at the top of the upper page 12 and then slide the bar up or down. You can also slide up with two fingers from the bottom of the screen, or tap the screen with your knuckles and then draw a straight line.

[0048] like Figure 2 As shown in a, the electronic device can detect the operation of dragging the middle horizontal bar of the split-screen dividing line downward.

[0049] like Figure 2 As shown in bd, the electronic device responds to the operation of dragging the middle horizontal bar of the dividing line downward detected in a, continues to display the split-screen page 21, and gradually expands the size of the split-screen page 22 and gradually increases the content displayed in the split-screen page 22 starting from the position and size of the split-screen page 22 in a, until the split-screen page 22 completely covers the split-screen page 21, and the electronic device displays the split-screen page 22 in full screen as shown in d. The size and content of the split-screen page 22 displayed in full screen in d are the same as those of the homepage displayed after the electronic device starts the settings application.

[0050] Not limited to the desktop, the split screen page 21 can also be other user interfaces; not limited to the setting application, the content in the floating window of the split screen page 22 can also be provided by other applications. The content of the split screen page 21 and the split screen page 22 depends on which two applications the user splits the screen.

[0051] Not limited to Figure 2 The upper and lower split screens are shown, and when the screen is split left and right, the split screen page is expanded to full screen, and the first transition animation effect can also be entered.

[0052] When the electronic device displays two or more split-screen pages, the expanded split-screen page may be referred to as a second split-screen page, and the other split-screen pages may be referred to as first split-screen pages.

[0053] Figure 3 The first transition animation to the lock screen page is shown.

[0054] like Figure 3 As shown in a, a preview page 31 provided by a camera application is displayed in the user interface. The preview page 31 in a includes a preview box and some shooting-related controls. The user interface shown in a can be displayed by the electronic device in response to the operation of sliding the icon of the camera application upwards after the electronic device detects the operation on the lock screen interface.

[0055] like Figure 3 As shown in a, the electronic device can detect a side sliding operation (such as a left sliding operation or a right sliding operation) on the screen.

[0056] like Figure 3 As shown in bd, the electronic device responds to the user operation detected in a, continuously displays the preview page 31, and gradually displays the lock screen page 32 from the top of the screen until the lock screen page 32 is displayed in full screen. The size and content of the lock screen page 32 displayed in full screen in d and the lock screen page displayed after the electronic device is locked are the same. The lock screen page 32 includes the content provided by the lock screen interface. In this process, the lock screen page 32 covers the preview page 31, and the size and content of the lock screen page 32 displayed on the screen are constantly increasing. Referring to bd, the relative positions of the elements in the lock screen page 32 may change. In this process, the content of the preview page 31 may change. For example, referring to b and c, the electronic device turns off the camera, so the preview image in the preview box in the preview page 31 is no longer displayed, and some controls in the preview page 31 (such as the focus control) may no longer be displayed. When executing the above process, the electronic device may be in a lock screen state.

[0057] Figure 3 In the first transition effect, the lock screen page 32 gradually moves in from the top of the screen until it is completely moved in. After it is completely moved in, the lock screen page 32 completely covers the preview page 31.

[0058] Not limited to side sliding operation, electronic devices Figure 3 After the operation of the return key in the system navigation bar is detected in a, the first transition effect of bd can also be triggered.

[0059] Not limited to the preview page 31 provided by the camera application, the lock screen service cards such as a recorder, calculator, timer, etc. entered from the lock screen page 32 can also be similarly Figure 3 Use the first transition effect to transition to the lock screen page.

[0060] Figure 4 The first transition effect of opening the application on the desktop is shown.

[0061] like Figure 4 As shown in a, the user interface displays a desktop page 41. The desktop page 41 includes content provided by the desktop.

[0062] like Figure 4 As shown in a, the electronic device can detect a user operation (such as a click operation) acting on the application icon set in the desktop page 41.

[0063] like Figure 4 As shown in FIG. 2 , in response to the user operation detected in FIG. 2 , the electronic device continuously displays the desktop page 41, and gradually displays the settings page 42 starting from the position of the settings application icon, until the settings page 42 is displayed in full screen. The size and content of the settings page 42 displayed in full screen in FIG. 2 are the same as those of the homepage displayed after the electronic device starts the settings application. The settings page 42 includes the content provided by the settings application. In this process, the settings page 42 opaquely covers the desktop page 41, and the size of the settings page 42 continues to increase.

[0064] You are not limited to launching the Settings app on the desktop. You can also launch other apps on the desktop (such as gallery apps, notification cards, browsers, etc.) in a similar way. Figure 4 The first transition animation is used to transition to the other application. If the application was not running in the background before the application was started, the main page of the application is displayed in the first transition animation; if the application was running in the background before the application was started, the page displayed when the application was exited to the background is displayed in the first transition animation.

[0065] When using the first transition effect, the page displayed before the transition and not displayed after the transition can be called the exit page, and the page displayed after the transition can be called the entry page. The exit page and entry page can be Figure 1 The bottom page 11 and the upper page 12 in the figure. Alternatively, the exit page and the entry page can be respectively Figure 2 In the split screen page 21, split screen page 22. Alternatively, the exit page and the entry page can be respectively Figure 3 The preview page 31 and the lock screen page 32 in the game. Alternatively, the exit page and the entry page can be respectively Figure 4 Desktop page 41 and settings page 42.

[0066] The first transition effect specifically includes: the exit page is continuously displayed, and the entry page gradually covers the exit page until it completely covers the exit page. This is equivalent to the size of the exit page remaining unchanged, and the size of the entry page gradually increases until it completely covers the exit page. The entry page can cover the exit page opaquely or with a certain degree of transparency.

[0067] The entry page can gradually cover the exit page from any position of the exit page, such as from the left, right, top (such as Figure 2 , Figure 3 as shown), lower side, middle position (as shown Figure 1 , Figure 4 The present embodiment does not limit the movement path of the entry page covering the exit page.

[0068] Before the first transition animation is activated, the electronic device only displays the exit page (such as Figure 3 A or Figure 4 or, displaying both the exit page and the entry page at the same time (as shown in Figure 1 A or Figure 2 (shown in a).

[0069] In the first transition effect, when the entry page completely covers the exit page, the entry page is displayed in full screen (such as Figure 1-Figure 4 d) or part of the screen.

[0070] In the first transition effect, as the entry page gradually covers the exit page, the elements in the entry page can be gradually increased (such as Figure 1-Figure 3 ), or remain unchanged (as shown in Figure 4 The size of the elements in the approach page can increase as the size of the approach page increases (as shown in Figure 1 , Figure 4 ), or remain unchanged (as shown in Figure 2 , Figure 3 As the entry page gradually covers the exit page, the relative positions of the elements in the entry page can remain unchanged (as shown in Figure 1 , Figure 2 , Figure 4 ), or can be adjusted (as shown in Figure 3 shown).

[0071] In the first transition effect, the transparency, color depth, etc. of the exit page and the entrance page can be changed. For example, the transparency of the entrance page can be gradually reduced until it is completely opaque, and the color of the entrance page can be gradually deepened.

[0072] Different applications can provide the content of the exit page and the entry page respectively, that is, the first transition effect can be applied to the transition between different applications. Alternatively, the content of the exit page and the entry page can be provided by the same application, that is, the first transition effect can be applied to the transition between different pages of the same application. The process page and exit page referred to in this application are provided by the application and do not include system content (such as navigation bar, status bar).

[0073] An application that provides content on the exit page may be referred to as an exit application, such as the desktop application and camera application mentioned above. An application that provides content on the entry page may be referred to as an entry application, such as the settings application and lock screen application mentioned above.

[0074] The duration of the first transition animation effect may be pre-set by the electronic device, or may depend on actual conditions (such as the category of the entering application, the exiting application, etc.), and this application does not limit this.

[0075] In this application, the user operation used to trigger the first transition animation effect may be referred to as the first operation. The first operation may include, for example, Figure 1 User operations on the full-screen control in the upper left corner of the floating window, Figure 2 Drag the middle horizontal bar of the split screen dividing line downwards. Figure 3 Slide operation on the middle screen, Figure 4 The user operation of the setting application icon on the desktop page 41 is performed in the present application. The implementation form and type of the first operation are not limited, for example, it can be a sliding gesture on the display screen, a gesture on the system navigation bar in the display screen, a voice command, etc.

[0076] refer to Figure 5 , Figure 5 A method for implementing the first transition effect is shown.

[0077] The method mainly involves the following four modules of the electronic device: client, window management service (WindowManagerService, WMS), animation executor (SurfaceAnimationRunner), layer synthesizer (SurfaceFlinger).

[0078] Client represents the window or application to be rearranged, which may include, for example, the entering application and exiting application mentioned above.

[0079] WMS is a system service used to manage windows in electronic devices. It is responsible for starting, adding, and deleting windows, as well as managing the size, direction, position, animation, etc. of windows.

[0080] SurfaceAnimationRunner is a process in WMS that is used to implement local animations on electronic devices and is the module that actually executes animations.

[0081] SurfaceFlinger is an independent service that receives the Surface of all windows as input, calculates the position of each Surface in the final composite image based on parameters such as zorder, transparency, size, position, etc., and then passes it to HWComposer or OpenGL to generate the final display buffer, which is then displayed on a specific display device. Simply put, SurfaceFlinger is a process used to synthesize image display data and send the data to the display screen for display.

[0082] The method is executed after the electronic device detects the first operation for triggering the first transition effect. After the electronic device detects the first operation through a display screen, a microphone, etc., the first operation can be packaged as an event and reported to the incoming application (ie, the client), and the client starts to expand Figure 5 method.

[0083] like Figure 5 As shown, the method may include:

[0084] In stage one, add and execute animation on the first layer.

[0085] The first transition effect includes the animation of the entry page and the animation of the exit page. For the animation of the entry page, please refer to the introduction of the entry page in the first transition effect above, and for the animation of the exit page, please refer to the introduction of the exit page in the first transition effect above.

[0086] For different first transition effects, the animations of the entry page can also be different. For example, Figure 1 In the first transition effect shown, the transition effect of the entry page refers to the change effect of page 12; Figure 2 In the first transition effect shown, the transition effect of the entry page refers to the change effect of page 22; Figure 3 In the first transition effect shown, the transition effect of the entry page refers to the change effect of page 32; Figure 4 In the first transition effect shown, the animation of the entry page refers to the change effect of page 42.

[0087] The first layer is a layer used to carry the entry page in the first transition animation.

[0088] The purpose of Phase 1 is to allow the entry page carried by the first layer to present the animation of the entry page in the first transition animation.

[0089] S11, after receiving the encapsulation event of the first operation, the entering application notifies the WMS to execute window mode switching.

[0090] Window mode switching specifically refers to the change of the window where the entry page is located, for example, it can be gradually expanded to full screen. Notifying WMS to execute window mode switching is equivalent to notifying WMS to add animation of the entry page.

[0091] Specifically, S11 may be executed by calling functions such as a window maximization function (toggleFreefromWindowingMode), a non-PC device window maximization function (toggleHwFreefromWindowingMode), and a window mode setting function (setWindowingMode).

[0092] S12, WMS creates the first layer.

[0093] Specifically, the first layer can be created after calling the subtask call (onConfigurationChanged), such as preventing border changes when inheriting certain window modes, starting to execute animation functions (applyAnimation), and before calling the start animation function (start). The above functions can provide a basis for the subsequent execution of S13.

[0094] S13, SurfaceAnimationRunner determines the animation parameters of the first layer, and transmits the animation parameters of the first layer to SurfaceFlinger.

[0095] The animation parameters of the first layer describe the animation properties of the first layer, including any one or more of the following: the start time, duration, end time, motion path, initial state (such as size, position, transparency, etc.), end state (such as size, position, transparency, etc.), and change mode of the animation. The animation parameters of the first layer are used to determine the animation of the first layer.

[0096] The animation parameter of the first layer can be an animation matrix (Matrix). The animation matrix is ​​used to process the transformation of coordinates. The basic transformation of coordinates includes translation, scaling, rotation and shearing. In other words, the animation matrix can be used to describe animation effects such as translation, scaling, rotation, etc.

[0097] The animation parameters of the first layer may be preset by the electronic device.

[0098] Specifically, S13 may be performed by calling an update animation parameter function (update), an apply animation matrix function (binder.applyMatrix), etc. That is, SurfaceAnimationRunner transmits the value of the animation matrix of the first layer to SurfaceFlinger through the binder inter-process communication principle.

[0099] After S13, SurfaceFlinger can synthesize the image information of the entry page carried by the first layer into the display data of the first layer based on the animation parameters of the first layer, and pass it to the display screen for display, thereby realizing the animation effect of the entry page in the first transition animation effect.

[0100] S14, SurfaceAnimationRunner completes adding the first layer and executing the animation.

[0101] Specifically, S14 may be executed by calling an animation end callback function (onAnimationFinished) and the like.

[0102] S15, SurfaceAnimationRunner deletes the first layer.

[0103] Specifically, S15 may be executed by calling a destroy layer function (resetLayer). S15 may be executed after the display screen finishes displaying the dynamic effect of the entry animation.

[0104] In stage two, add and execute animation on the second layer.

[0105] The second layer is a layer used to carry the exit page in the first transition animation.

[0106] The purpose of the second stage is to make the exit page carried by the second layer present the animation effect of the exit page in the first transition animation effect. The animation effect of the exit page in the first transition animation effect is specifically, continuous display.

[0107] S21, after receiving the packaging event of the first operation, the exiting application notifies the WMS to refresh the interface.

[0108] Specifically, S21 may be executed by calling a refresh application window function (relayout).

[0109] S22, WMS creates the second layer.

[0110] Specifically, the second layer can be created after calling functions such as the refresh Surface function (performSurfacePlacement), the handleAppTransitionReady function for a given display, and the applyAnimation function, and before calling functions such as the startAnimation function and the start animation function.

[0111] S23, SurfaceAnimationRunner determines the animation parameters of the second layer, and transmits the animation parameters of the second layer to SurfaceFlinger.

[0112] The animation parameters of the second layer describe the animation properties of the second layer, including any one or more of the following: the start time, duration, end time, motion path, initial state (such as size, position, transparency, etc.), end state (such as size, position, transparency, etc.), change mode, etc. of the animation. The animation parameters of the second layer are used to determine the animation of the second layer. The animation parameters of the second layer can be an animation matrix (Matrix).

[0113] The animation of the second layer can be a static animation that is continuously displayed and has unchanged content. Optionally, the animation of the second layer can be an alpha animation that lasts for a period of time, has unchanged transparency (for example, a transparency of 1.0, indicating complete opacity) and unchanged content. The duration of the alpha animation, the duration of the first transition effect, and the duration of the animation of the first layer can be the same. Exemplarily, the duration of the alpha animation can be 350ms. The content of the alpha animation remains unchanged, like a static picture, and can therefore be called an empty animation.

[0114] Specifically, S23 can be executed by calling update, binder.applyMatrix and other functions. That is, SurfaceAnimationRunner transmits the value of the animation matrix of the second layer to SurfaceFlinger through the binder inter-process communication principle.

[0115] After S23, SurfaceFlinger can synthesize the image information of the exit page carried by the second layer into the display data of the second layer based on the animation parameters of the second layer, and pass it to the display screen for display, thereby realizing the animation effect of the exit page in the first transition animation effect.

[0116] S24, SurfaceAnimationRunner completes adding the second layer and executing the animation.

[0117] Specifically, S24 may be executed by calling functions such as onAnimationFinished.

[0118] S25, SurfaceAnimationRunner deletes the second layer.

[0119] Specifically, S25 may be executed by calling functions such as resetLayer. S25 may be executed after the display screen finishes displaying the dynamic effect of the approaching animation.

[0120] Phase one and phase two are executed almost simultaneously. SurfaceFlinger sends the display data of the first layer and the display data of the second layer to the display screen at almost the same time. The display screen can simultaneously display the animation of the near-field page and the animation of the exit page, that is, display the first transition animation.

[0121] Of course, in addition to the first layer and the second layer, the electronic device can also create other layers, such as a layer for carrying the status bar, a layer for carrying the system navigation bar, etc., and can use these layers to display the status bar, system navigation bar, etc. on the display screen. The content of each layer can be updated independently. Figure 1 , Figure 2 , Figure 4 The status bar is continuously displayed in the first transition animation shown. Figure 3 In the first transition effect shown, the status bar begins to be displayed after the entry page is displayed.

[0122] refer to Figure 6 , Figure 6 Another method for realizing the first transition effect is shown.

[0123] Figure 6 exist Figure 5 The method shown in the figure is improved. Figure 6 In the method shown, the electronic device does not need to add and execute an empty animation on the second layer, and the exit page carried by the second layer can also be continuously displayed until the entry page disappears, thereby displaying the first transition animation effect.

[0124] The method may include:

[0125] In stage one, add and execute animation on the first layer. Figure 6 Phase I and Figure 5 Same as stage 1 in, please refer to the previous text.

[0126] In phase 2, no animation is performed on the second layer.

[0127] The following steps in Phase 2 are all performed on the second layer.

[0128] Figure 6 The purpose of the second stage is still to make the exit page carried by the second layer show the animation effect of the exit page in the first transition animation effect. The specific animation effect of the exit page in the first transition animation effect is to continue to display and remain static. However, the technical means used in this stage are different from Figure 5 The following are different, which will be explained in detail below.

[0129] S31, refer to S21.

[0130] S32, WMS creates the second layer.

[0131] Specifically, the second layer can be created after calling functions such as performSurfacePlacement and handleAppTransitionReady.

[0132] S33, WMS identifies whether the scene to be triggered currently includes the first transition animation effect.

[0133] In some embodiments, the electronic device may count the scenes including the first transition animation in advance, and then the WMS executes S33 based on the information counted in advance. Figure 5 In S23, the step of determining the animation parameters of the second layer is performed, and then judging whether the animation represented by the animation parameters of the second layer in S23 is an animation with unchanged content. If so, it is considered that the scene to be triggered includes the first transition animation effect.

[0134] Optionally, the WMS may execute S33 by calling a function (matchScene) for filtering scenes that match the short animation.

[0135] If the judgment result of S33 is yes, the subsequent steps are continued to be executed. That is, in response to the WMS identifying that the first transition animation effect needs to be displayed, the electronic device triggers the subsequent step S34.

[0136] S34, WMS does not perform animation on the second layer.

[0137] There are two specific implementation methods:

[0138] 1. WMS binds the second layer to the first layer and prohibits animation of the second layer.

[0139] After WMS binds the second layer to the first layer, all operations performed on the first layer must be performed on the second layer synchronously. The operation may include adding animation to the first layer, executing the animation on the first layer, sending the display data of the first layer to the display, deleting the first layer, etc. Therefore, if an animation is added to the first layer, after binding the second layer to the first layer, the same animation needs to be added to the second layer and executed on the second layer to achieve consistency between the two. However, because WMS also prohibits the execution of animation on the second layer, even if WMS synchronously adds the animation of the first layer to the second layer, WMS will not execute the animation on the second layer. For example, WMS does not need to call Figure 5 In the second stage, WMS calls applyAnimation, startAnimation, start, update, binder.applyMatrix and other functions to perform animation on the second layer, which can save the corresponding calling time and reduce the system load. Since there is no need to call the binder.applyMatrix function, the overhead of the binder process communication between SurfaceAnimationRunner and SurfaceFlinger can be saved, reducing the system load.

[0140] In some embodiments, WMS binding the second layer to the first layer may mean that WMS binds the node corresponding to the second layer to the corresponding node of the first layer, making the node corresponding to the first layer the parent node of the node corresponding to the second layer. Optionally, WMS may add the node corresponding to the second layer as a child node of the node corresponding to the first layer by calling the change layer parent node binding function (reparent). The node corresponding to the first layer may be referred to as the first node, and the node corresponding to the second layer may be referred to as the second node.

[0141] In some implementations, the WMS may add a flag to the second layer by calling a flag function (setFlags) for setting whether to execute animation, and the flag indicates that animation is prohibited, thereby prohibiting animation from being executed on the second layer. setFlags is a function for defining some layout behaviors.

[0142] 2.WMS sets the second layer and the first layer to be layers of the same level.

[0143] When the first layer and the second layer are created, the nodes corresponding to the first layer and the nodes corresponding to the second layer belong to different parent nodes respectively.

[0144] In some embodiments, WMS can add the node corresponding to the second layer under the parent node of the node corresponding to the first layer, so that the node corresponding to the second layer and the node corresponding to the first layer become child nodes of the same level under the same parent node. The time points when the two layers start to be displayed are scheduled by the parent node, and the effect of simultaneous display can be achieved. In this way, the exit page carried by the second layer can also achieve the effect of continuous display. Optionally, WMS can add the node corresponding to the second layer to the parent node of the node corresponding to the first layer by calling the reparent function. The node corresponding to the first layer can be called the first node, the node corresponding to the second layer can be called the second node, and the parent node of the node corresponding to the second layer can be called the third node.

[0145] The second method mentioned above does not need to add animation to the second layer, and there is no need to prohibit the execution of animation on the second layer (such as no need to call the setFlags function). It can also achieve the effect that the exit page continues to be displayed in the first transition animation and the size remains unchanged.

[0146] S35, WMS deletes the second layer.

[0147] Specifically, S35 may be executed by calling functions such as resetLayer.

[0148] If S34 adopts the first method, since the second layer is bound to the first layer, the timing of WMS deleting the second layer is the same as the timing of WMS deleting the first layer in stage 1. This ensures that the second layer and the first layer are deleted at the same time, that is, the exit page and the near page stop displaying at the same time, achieving a better transition effect.

[0149] If the second method is used in S34, WMS can monitor whether the first layer has completed the animation, and delete the second layer if it has. After the first layer completes the animation, the first layer will be deleted. WMS can also monitor whether the first layer is deleted. If it is detected that the first layer is deleted, the second layer is deleted in response to the event that the first layer is deleted. This can also ensure that the second layer and the first layer are deleted at the same time, that is, the exit page and the near page stop displaying at the same time, achieving a better transition effect.

[0150] pass Figure 6 In the method shown, in stage 1, the electronic device adds and executes animation on the first layer, which can realize the dynamic effect of the entry page; in stage 2, the electronic device does not need to execute animation on the second layer, and the exit page carried by the second layer can also be continuously displayed until the entry page disappears. Figure 6 Method can also display the first transition effect.

[0151] Since the electronic device does not need to perform additional animation overhead in the second stage, such as adding an empty animation to the second layer, additional system performance overhead is avoided, which can reduce the system load. Figure 6 This method can also display a smooth first transition effect, providing users with a smooth experience.

[0152] Figure 6 The method shown can be used to display the first transition effect in this application, for example Figure 1-Figure 4 Optionally, the electronic device may use the first transition effect or other first transition effect in the performance mode. Figure 6 The method shown in the figure shows the first transition effect of opening the application on the desktop (such as Figure 4 Performance mode means that the electronic device does not limit the load to ensure smooth operation and enters a state of maximum performance.

[0153] Based on the first transition effect introduced above, and Figure 6 The method for implementing the first transition effect is shown below, and the method for displaying the transition effect provided by the present application is introduced below.

[0154] refer to Figure 7 , the method may include:

[0155] S41, the electronic device displays the first page.

[0156] The first page is the exit page mentioned above. The electronic device may only display the first page, such as Figure 3 or Figure 4 Alternatively, the electronic device may display the second page while displaying the first page, such as Figure 1 or Figure 2 The second page is the entry page mentioned above.

[0157] The first page and the second page may be provided by different applications, such as the first page is provided by a first application, the second page is provided by a second application, and the first application and the second application are different. Alternatively, the first page and the second page may be provided by the same application.

[0158] S42, the electronic device receives a first operation for switching pages. The first operation is the user operation mentioned above for triggering the first transition animation effect.

[0159] S43, the electronic device creates a first layer and a second layer, the first layer carries the second page, and the second layer carries the first page. S43 can refer to Figure 6 S12 and S32.

[0160] Optionally, S43 may be executed by a WMS in the electronic device.

[0161] S44, the electronic device displays the first layer in a first animation and displays the second layer in a non-animation form, with the first layer covering the second layer.

[0162] The first animation is an entry animation of an entry page, and is used to make the entry page carried by the first page present the animation of the entry page in the first transition animation. The specific content of the first animation can be referred to above. For example, the size displayed by the second page gradually increases, or the size displayed by the second page gradually increases to the full screen size.

[0163] Before S44, electronic devices can ensure the execution of S44 in the following two ways:

[0164] 1. Add the first animation to the first layer and the second layer, bind the second layer to the first layer, and disable the animation of the first layer. Figure 6 The first implementation of S34.

[0165] 2. Add the first animation to the first layer and set the second layer to be the same level layer as the first layer. Figure 6 The second implementation of S34.

[0166] S45, the electronic device displays the second page.

[0167] In some implementations, when the electronic device displays the second page, it stops displaying the first page.

[0168] Optionally, the method may further include:

[0169] S46, the electronic device deletes the first layer and the second layer. S46 can refer to Figure 6 S35 in.

[0170] The electronic device provided by this application is described below. The electronic device provided by this application is used to perform the above Figure 6 and Figure 7 The method shown.

[0171] The electronic device of the present application is a smart terminal device, which can be of various types, and the embodiments of the present application do not limit its specific type. For example, the electronic device can be a mobile phone, and can also include a tablet computer, a desktop computer, a desktop computer with a touch-sensitive surface or a touch panel, a laptop computer, a handheld computer, a notebook computer, a smart screen, a wearable device (such as a smart watch, a smart bracelet, etc.), an augmented reality (AR) device, a virtual reality (VR) device, an artificial intelligence (AI) device, a car computer, a game console, etc.

[0172] refer to Figure 8 , Figure 8 The hardware structure diagram of the electronic device 100 provided in the embodiment of the present application. The electronic device 100 can be used to perform Figure 6 The method shown.

[0173] like Figure 8 As shown, the electronic device 100 may include: 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.

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

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

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

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

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

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

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

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

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

[0183] Random access memory may include static random-access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM, for example, the fifth generation DDR SDRAM is generally referred to as DDR5 SDRAM), etc.; non-volatile memory may include disk storage devices and flash memory.

[0184] Flash memory can be divided into NOR FLASH, NAND FLASH, 3D NAND FLASH, etc. according to the operating principle; can be divided into single-level cell (SLC), multi-level cell (MLC), triple-level cell (TLC), quad-level cell (QLC), etc. according to the storage unit potential level; can be divided into universal flash storage (UFS), embedded multi media card (eMMC), etc. according to the storage specification.

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

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

[0187] The external memory interface 120 can be used to connect to an external non-volatile memory to expand the storage capacity of the electronic device 100. The external non-volatile memory communicates with the processor 110 through the external memory interface 120 to implement a data storage function. For example, files such as music and videos are stored in the external non-volatile memory.

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

[0189] In this application:

[0190] The internal memory 121 can be used to store the implementation Figure 5 or Figure 6 A computer program for the method described.

[0191] The processor 110 is used to read the computer program in the internal memory 121 and call the corresponding module in the electronic device to execute Figure 6 Specifically, the processor 110 may be used to create a first layer and a second layer, bind the second layer to the first layer and prohibit the second layer from being animated, or modify the second layer and the first layer to be nodes of the same level.

[0192] The display screen 194 can be used to display the first transition effect, for example, Figure 1-Figure 4 The first transition effect of any set of user interfaces shown. Specifically, the display screen 194 can be used to receive the display data of the first layer transmitted by SurfaceFlinger, and display the first transition effect based on the display data.

[0193] The software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture. The present application embodiment takes a mobile operating system with a layered architecture as an example to exemplify the software structure of the electronic device 100.

[0194] Fig. 9 It is a software structure block diagram of the electronic device 100 according to an embodiment of the present application.

[0195] 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 mobile operating system is divided into four layers, from top to bottom: application layer, application framework layer / core service layer, system library and runtime, and kernel layer.

[0196] The application layer can include a series of application packages.

[0197] like Fig. 9 As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc. The application package may also include the desktop application, setting application, etc. mentioned above. The entry application, exit application, etc. mentioned above are all applications in the application package.

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

[0199] like Fig. 9 As shown, the application framework layer may include a window manager, WMS, SurfaceFlinger, a content provider, a view system, a telephony manager, a resource manager, a notification manager, and the like.

[0200] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc.

[0201] WMS includes SurfaceAnimationRunner. The functions of WMS, SurfaceAnimationRunner, and SurfaceFlinger can be found in Figure 5 and Figure 6 Related description.

[0202] Content providers are used to store and retrieve data and make it accessible to applications. The data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

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

[0204] The phone manager is used to provide communication functions for electronic devices, such as the management of call status (including answering, hanging up, etc.).

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

[0206] The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications of applications running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is displayed in the status bar, a prompt sound is emitted, an electronic device vibrates, an indicator light flashes, etc.

[0207] The runtime can refer to all code libraries, frameworks, etc. required for the program to run. For example, for the C language, the runtime includes a series of function libraries required for the C program to run. For the Java language, in addition to the core library, the runtime also includes the virtual machine required for the Java program to run. The above core library may include the function functions that the Java language needs to call.

[0208] The system library may include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0209] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

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

[0211] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0212] A 2D graphics engine is a drawing engine for 2D drawings.

[0213] The kernel layer is the layer between hardware and software. The kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.

[0214] The following is an example of the workflow of the electronic device software and hardware in conjunction with capturing a photo scene.

[0215] When the touch sensor 180K receives a touch operation, the corresponding hardware interrupt is sent to the kernel layer. The kernel layer processes the touch operation into a raw input event (including touch coordinates, timestamp of the touch operation, and other information). The raw input event is stored in the kernel layer. The application framework layer obtains the raw input event from the kernel layer and identifies the control corresponding to the input event. For example, if the touch operation is a touch single-click operation and the control corresponding to the single-click operation is the control of the camera application icon, the camera application calls the interface of the application framework layer to start the camera application, and then starts the camera driver by calling the kernel layer to capture static images or videos through the camera 193.

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

[0217] 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 in any of the above embodiments.

[0218] 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 in any of the above embodiments.

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

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

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

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

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

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

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

[0226] 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 the method executed by the electronic device in any of the above embodiments.

[0227] In the description of the embodiments of the present application, unless otherwise specified, “ / ” means or, for example, A / B can mean A or B; the “and / or” in the text is merely a description of the association relationship of associated objects, indicating that three relationships may exist, 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” refers to two or more than two.

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

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

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

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

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

Claims

1. A method for displaying transition effects, characterized in that: The method comprises: Display the first page; Receiving a first operation for switching pages; Create a first layer and a second layer, wherein the first layer carries the second page, and the second layer carries the first page; Displaying the first layer in a first animation and displaying the second layer in a non-animation form, with the first layer covering the second layer; The second page is displayed.

2. The method according to claim 1, characterized in that After creating the first layer and the second layer, displaying the first layer with a first animation and before displaying the second layer without animation, the method further includes: adding the first animation to the first layer and the second layer; Adding a second node as a child node of a first node, wherein the first node corresponds to the first layer, and the second node corresponds to the second layer; A flag is added to the second layer, where the flag indicates that animation is prohibited.

3. The method according to claim 2, characterized in that After displaying the first layer in the first animation and displaying the second layer in a non-animation form, the method further includes: The first layer is deleted, and according to the parent-child relationship between the first node and the second node, the second layer is deleted while the first layer is deleted.

4. The method according to claim 1, characterized in that: After creating the first layer and the second layer, displaying the first layer with a first animation and before displaying the second layer without animation, the method further includes: adding the first animation to the first layer; The second node is added as a child node of the third node, the second node corresponds to the second layer, the third node is the parent node of the first node, and the first node corresponds to the first layer.

5. The method according to claim 4, characterized in that After displaying the first layer in the first animation and displaying the second layer in a non-animation form, the method further includes: Deletion of the first layer is detected; In response to deleting the first layer, deleting the second layer.

6. The method according to any one of claims 1 to 5, characterized in that: After creating the first layer and the second layer, displaying the first layer with a first animation and before displaying the second layer without animation, the method further includes: It is recognized that a first transition effect needs to be displayed, and the first transition effect includes: the first page is continuously displayed, and the second page gradually covers the first page until the first page is completely covered.

7. The method according to any one of claims 1 to 6, characterized in that: The first animation is an approach animation.

8. The method according to any one of claims 1 to 7, characterized in that: The first animation specifically includes a gradual increase in the size of the second page displayed.

9. The method according to any one of claims 1 to 8, characterized in that: The first animation specifically includes the size of the second page displayed gradually increasing to a full-screen size.

10. The method according to any one of claims 1 to 9, characterized in that: After the first layer is displayed in a first animation and the second layer is displayed in a non-animation form, the first page is no longer displayed when the second page is displayed.

11. The method according to any one of claims 1 to 10, characterized in that: The method further includes: before receiving a first operation for switching pages, while displaying the first page, also displaying the second page; The first page includes content other than the floating window displayed on the display screen, the second page includes content of the floating window, and the first operation includes an operation of maximizing the floating window; or, The first page includes a first split-screen page, the second page includes a second split-screen page, and the first operation includes an operation of expanding the second split-screen page.

12. The method according to any one of claims 1 to 10, characterized in that: The first page is a page that can be accessed in the lock screen state, the second page is a lock screen page, and the first operation includes an operation of exiting to the lock screen page; or, The first page is a desktop, the second page is a page provided by an application other than the desktop, and the first operation includes an operation acting on an application icon in the desktop.

13. The method according to any one of claims 1 to 12, characterized in that: The first page is provided by a first application, the second page is provided by a second application, and the first application and the second application are different; Alternatively, the first page and the second page are provided by the same application.

14. The method according to any one of claims 1 to 13, characterized in that: The method is applied to an electronic device, and the first layer and the second layer are created by a WMS in the electronic device.

15. An electronic device, characterized in that: include: One or more processors, one or more memories, and a display screen; wherein the display screen and the one or more memories are coupled to the one or more processors, and the one or more memories are used to store computer program codes, and the computer program codes include computer instructions, and when the one or more processors execute the computer instructions, the electronic device executes the method described in any one of claims 1 to 14.

16. A computer-readable storage medium comprising instructions, characterized in that: When the instruction is executed on an electronic device, the electronic device executes the method according to any one of claims 1 to 14.

Images