Component effect display method and electronic equipment

Abstract

The invention provides a component effect display method and electronic equipment, and relates to the technical field of terminals. According to the method and the device, the display picture of the first component can be refreshed in response to the trigger event, so that the refreshed display picture can occupy a display area, different from an original picture, on the display interface, display experience with more visual impact is provided for a user, and interaction experience of the user is improved. The method comprises the steps that the electronic equipment displays a first picture of a first component, and the first picture occupies a first display area on a display interface; in response to the first trigger event, the first picture is refreshed into a second picture, the second picture is different from the first picture, the second picture occupies a second display area on the display interface, the second display area comprises an area, different from the first display area, on the display interface, and the second picture comprises static picture content and / or dynamic picture content.

Description

[0001] This application is a divisional application. The application number of the original application is 202411357844.1, and the original application date is September 26, 2024. The entire contents of the original application are incorporated into this application by reference. Technical Field

[0002] The present application relates to the field of terminal technology, and in particular to a component effect display method and an electronic device. Background Art

[0003] With the development of terminal technology, electronic devices are equipped with more and more functions, and operating systems support providing users with a richer functional experience through the development of components. For example, electronic devices can present key information to users by displaying desktop cards, widgets, etc., and can help users quickly enable corresponding functions. For example, electronic devices display weather information to users by displaying weather cards, and can quickly start weather applications.

[0004] However, the current component supports limited content and cannot provide users with a richer and more vivid interactive experience. Summary of the invention

[0005] In order to solve the above technical problems, the present application provides a component effect display method and an electronic device. The technical solution provided by the present application can refresh the display screen of the first component in response to a trigger event, so that the refreshed display screen can occupy a display area on the display interface that is different from the original screen, providing users with a more visually impactful display experience and improving the user's interactive experience.

[0006] In order to achieve the above technical objectives, this application provides the following technical solutions:

[0007] In a first aspect, a component effect display method is provided, which is applied to an electronic device, and the method includes: displaying a first screen of a first component, wherein the first screen occupies a first display area on a display interface. In response to a first trigger event, the first screen is refreshed to a second screen, wherein the second screen is different from the first screen, the second screen occupies a second display area on the display interface, the second display area includes an area on the display interface different from the first display area, and the second screen includes static screen content and / or dynamic screen content.

[0008] In this way, the electronic device can display the second picture in the second display area different from the original first display area, thereby increasing the interactivity between the user and the first component and providing the user with a richer and more vivid interactive experience.

[0009] According to the first aspect, all contents of the second screen may belong to the layer to which the contents of the first screen belong. In this way, the electronic device can display the second screen without adding a new layer.

[0010] According to the first aspect, or any implementation of the first aspect, the second screen may belong to a window (such as a desktop window) to which the first screen belongs. In this way, the electronic device can display the second screen without adding a new window.

[0011] According to the first aspect, or any implementation method of the first aspect above, the second screen is used to present one or more of the following visual effects of the content of the first screen: the effect of moving from inside the first display area to outside the first display area; the effect of stretching from the first display area to outside the first display area; the effect of moving from outside the first display area to inside the first display area; the effect of stretching from outside the first display area to inside the first display area.

[0012] In this way, by changing the first screen content from the first display area to the second screen, a more coherent component effect display experience is provided to the user.

[0013] According to the first aspect, or any implementation of the first aspect above, the first picture may be enlarged before being refreshed to the second picture. Accordingly, the first display area is the display area occupied by the enlarged first picture.

[0014] In this way, a richer component effect triggering display process is achieved.

[0015] According to the first aspect, or any implementation of the first aspect, the second display area also includes part or all of the first display area.

[0016] According to the first aspect, or any implementation of the first aspect above, the first trigger event includes at least one of the following events: a user operation event acting on the first component; a user gaze event acting on the first component; an event occurring in the application corresponding to the first component that triggers a component screen refresh; an event used to indicate that the current moment has reached a preset moment.

[0017] In this way, through various trigger events, the screen refresh corresponding to the component is triggered, increasing the flexibility of component effect display.

[0018] According to the first aspect, or any implementation method of the first aspect above, the second screen includes one or more of the following contents: dynamic screen content that uses the static screen content in the first screen to display motion effects; static screen content newly added to the first screen; dynamic screen content newly added to the first screen.

[0019] According to the first aspect, or any implementation of the first aspect, the second picture may also include part or all of the picture content of the first picture.

[0020] In this way, the second picture is refreshed and displayed based on the first picture, which increases the continuity of picture refresh and improves the user's visual experience.

[0021] According to the first aspect, or any implementation of the first aspect, the second screen may be displayed by the first component.

[0022] In some examples, the display method of the second screen includes one or any combination of the following methods: adding a subcomponent to the first component, and having the newly added subcomponent display the newly added screen content in the second screen; having the original subcomponent in the first component display the newly added screen content in the second screen; having the original subcomponent in the first component display dynamic screen content in the second screen that uses the static screen content in the first screen for motion effects.

[0023] Optionally, the newly added subcomponent may be located at the topmost layer of the subcomponents of the first component.

[0024] In this way, the electronic device realizes the display of component effects through the subcomponents of the first component without creating layers or windows, thereby reducing the difficulty of displaying component effects.

[0025] According to the first aspect, or any implementation of the first aspect, refreshing the first screen to the second screen includes: displaying the second screen by a second component corresponding to the first component.

[0026] According to the first aspect, or any implementation of the first aspect above, the display area of ​​the second component on the above display interface is the second display area.

[0027] According to the first aspect, or any implementation of the first aspect above, the second component covers the first component.

[0028] According to the first aspect, or any implementation of the first aspect above, refreshing the first screen to the second screen includes: launching a second process of a second application to obtain a second screen rendered by the second process to display in a second component.

[0029] According to the first aspect, or any implementation of the first aspect above, the second application is an application corresponding to the second component.

[0030] In this way, the user interface extension component is loaded through the second application, which reduces the processing difficulty of the component effect display.

[0031] According to the first aspect, or any implementation of the first aspect above, the second screen is a game screen of the first game, and the second application is a game application for running the first game, or is used to load a game engine for running the first game.

[0032] According to the first aspect, or any implementation of the first aspect above, the second display area may be part or all of the displayable area set by the application to which the display interface belongs. The displayable area may be specifically set by setting the parameters of the first container. The first container may be a component that displays the second screen or a parent container of the component.

[0033] In this way, the overflow effect is dynamically controlled through the first container to meet the display requirements of the overflow effect.

[0034] According to the first aspect, or any implementation of the first aspect above, the second screen includes dynamic screen content, and the method further includes: in response to satisfying a preset condition, obtaining a screenshot of the second component in the first display area; wherein the preset condition includes detecting a user operation outside the first display area, or not detecting a user operation in the first display area within a preset time. Stop displaying the second component, and display the screenshot in the first display area.

[0035] In some examples, the method further includes: in response to a first operation of a user within the first display area, switching from displaying the screenshot to displaying the second component.

[0036] In this way, the electronic device realizes the two-side display of a game card through the user interface expansion process, enriches the card display effect, reduces the difficulty of card development, and increases the universality of the overflow effect display.

[0037] In addition, by switching between different card states, the user's usage habits can be met and the flexibility of interaction can be increased.

[0038] According to the first aspect, or any implementation of the first aspect above, the second screen includes dynamic screen content, and the method also includes: in response to satisfying a preset condition, stopping displaying the second component, displaying the first component in the first display area, and superimposing a transparency mask on the first component; wherein the preset condition includes detecting a user operation outside the first display area, or not detecting a user operation within the first display area within a preset time.

[0039] According to the first aspect, or any implementation of the first aspect above, the method further includes: in response to a first operation of the user within the first display area, switching from displaying the first component and the transparency mask to displaying the second component. Alternatively, in response to a second operation of the user within the first display area, removing the transparency mask.

[0040] In some examples, the second component may also be destroyed.

[0041] In this way, the electronic device can achieve the pause state of the card through screenshots or transparency masks, thereby reducing power consumption when the user does not need to operate the card.

[0042] According to the first aspect, or any implementation of the first aspect above, the method further includes: in response to the end of the second process, switching from displaying the second component to displaying the first component.

[0043] In this way, after the second process ends, the electronic device can automatically switch back to the display of the first component, thereby achieving flexible switching of component states.

[0044] According to the first aspect, or any implementation of the first aspect above, the second screen is a function page in the second application, and the display position of the main screen in the function page on the display interface corresponds to the position of the first display area.

[0045] According to the first aspect, or any implementation of the first aspect above, a first position relationship of the main image in the second component may be the same as or different from a second position relationship of the first display area in the display interface.

[0046] In this way, by obtaining the position information of the first component, the second process can maintain a relatively fixed relationship between the main area of ​​the main screen in the rendered second component and the display screen of the electronic device, and the main area of ​​the game screen can be adjusted in time with the position change of the first component on the desktop, so that the main area of ​​the main screen is aligned with the first display area, adaptively presenting a better display effect to the user.

[0047] According to the first aspect, or any implementation of the first aspect above, before the first screen is refreshed to the second screen, the method further includes: obtaining first page information of the display interface, the first page information including size information and position information of display areas of multiple components on the display interface. According to the first page information, determining a display area for displaying the second screen.

[0048] According to the first aspect, or any implementation of the first aspect above, the first component corresponds to a first application, and the first application obtains first page information and determines a display area for displaying the second screen according to the first page information.

[0049] In this way, the electronic device can obtain the actual allowed overflow range (display area of ​​the second screen) according to the current display interface, and display the component effect according to the actual allowed overflow range to meet the actual display requirements. Optionally, the component effect includes, for example, the second screen.

[0050] According to the first aspect, or any implementation of the first aspect above, the method for determining the second display area includes any one or combination of the following methods: setting the edge of the display area for displaying the second screen to ensure that the second screen does not invade the display area of ​​other components; setting the edge of the display area for displaying the second screen to ensure that the second screen does not invade the display area of ​​the main content of other components; setting the edge of the display area for displaying the second screen to achieve that the second screen covers part or all of the target component in other components.

[0051] Optionally, when the second screen covers part or all of the target component in other components, the display time of the second screen may be limited.

[0052] In this way, the electronic device obtains the display area of ​​the second screen according to the display area of ​​other components to avoid affecting the display of other components. Or, the display of the second screen is prevented from affecting the display of the main content of other components. Alternatively, the electronic device limits the display time of the second screen that needs to be displayed in a large area, so as to ensure the display of the second screen while avoiding the display of the second screen affecting the display of other content and affecting the user's use. In this way, the problem of some third-party components maliciously occupying the display area can also be avoided.

[0053] According to the first aspect, or any implementation of the first aspect above, the second screen includes a first sub-screen and a second sub-screen, wherein the first sub-screen is displayed in a first sub-area of ​​a display area for displaying the second screen, and the second sub-screen is displayed in a second sub-area of ​​a display area for displaying the second screen. In response to a first trigger event, the first screen is refreshed to the second screen, including: in response to the first trigger event, the first application corresponding to the first component obtains the first page information of the display interface, and the first page information includes the size information and position information of multiple components on the display interface. The first application determines the first sub-area and the target component adjacent to the first component based on the first page information, and triggers the display of the first sub-screen in the first sub-area. The first application sends a linkage effect indication to the target application corresponding to the target component. The target application determines the second sub-area based on the linkage effect indication and triggers the display of the second sub-screen in the second sub-area.

[0054] In this way, the electronic device presents linkage animation in the vicinity of the target component and other components around the target component according to the page information, thereby increasing the fun of the component animation display and improving the user experience.

[0055] According to the first aspect, or any implementation of the first aspect above, during the process of displaying the second screen, the display interface also includes a third screen of the third component, and the third screen occupies a third display area on the display interface; the method also includes: in response to a second trigger event, refreshing the third screen to a fourth screen, wherein the fourth screen is different from the third screen, the fourth screen occupies a fourth display area on the display interface, the fourth display area includes an area on the display interface different from the third display area, and the fourth screen includes static screen content and / or dynamic screen content.

[0056] According to the first aspect, or any implementation of the first aspect, the method further includes: when starting to display the fourth picture, refreshing the second picture to the first picture.

[0057] In this way, the power consumption of the electronic device is reduced, and the display conflict of the second images corresponding to different components is avoided.

[0058] According to the first aspect, or any implementation of the first aspect above, the second display area is a display area within a safety range corresponding to the first display area, and the method further includes: during display of the fourth screen, maintaining display of the second screen on the display interface.

[0059] In this way, the power consumption is reduced while the display effect is guaranteed.

[0060] According to the first aspect, or any implementation of the first aspect above, the second screen includes dynamic screen content, and the method further includes: in the event of a first event, controlling the display of the second screen in accordance with the first method. The first event includes at least one of the following events: the resource occupancy corresponding to the second screen exceeds the first resource limit; the system resources of the electronic device are insufficient; the power consumption corresponding to the second screen exceeds the power consumption threshold; the device temperature of the electronic device exceeds the temperature threshold. The first method includes: reducing the display quality of the second screen; stopping displaying the second screen; releasing the component resources corresponding to the second screen.

[0061] In some examples, electronic devices maintain the display of dynamic picture content, which requires occupying resources, generating power consumption and heat, and may affect the realization of other functions of the electronic device. Then, the electronic device can measure the resource occupation, power consumption and heat of the dynamic picture content, and when certain conditions are met, it is determined that the current scene is abnormal, and the display of the dynamic picture content can be adjusted to release resources, reduce power consumption and heat generation.

[0062] According to the first aspect, or any implementation of the first aspect above, the second screen includes artificial intelligence generated content.

[0063] According to the first aspect, or any implementation of the first aspect above, the content source of the second screen includes an electronic device and / or a server.

[0064] In a second aspect, an electronic device is provided. The electronic device includes: a processor, a memory, and a display screen. The memory and the display screen are coupled to the processor, the memory is used to store computer program code, the computer program code includes computer instructions, and when the processor reads the computer instructions from the memory, the electronic device executes: displaying a first screen of a first component, wherein the first screen occupies a first display area on a display interface. In response to a first trigger event, the first screen is refreshed to a second screen, wherein the second screen is different from the first screen, the second screen occupies a second display area on the display interface, the second display area includes an area on the display interface that is different from the first display area, and the second screen includes static screen content and / or dynamic screen content.

[0065] According to the second aspect, all contents of the second screen may belong to the layer to which the contents of the first screen belong.

[0066] According to the second aspect, or any implementation of the second aspect, the second screen may belong to a window to which the first screen belongs, such as a desktop window.

[0067] According to the second aspect, or any implementation method of the second aspect above, the second screen is used to present one or more of the following visual effects of the content of the first screen: the effect of moving from inside the first display area to outside the first display area; the effect of stretching from the first display area to outside the first display area; the effect of moving from outside the first display area to inside the first display area; the effect of stretching from outside the first display area to inside the first display area.

[0068] According to the second aspect, or any implementation of the second aspect, the first picture may be enlarged before being refreshed to the second picture, and accordingly, the first display area is the display area occupied by the enlarged first picture.

[0069] According to the second aspect, or any implementation of the second aspect, the first screen content may specifically be screen content already present in the first screen, or screen content related to screen content already present in the first screen.

[0070] According to the second aspect, or any implementation of the second aspect, the second display area also includes part or all of the first display area.

[0071] According to the second aspect, or any implementation of the second aspect above, the first trigger event includes at least one of the following events: a user operation event acting on the first component; a user gaze event acting on the first component; an event occurring in the application corresponding to the first component that triggers a component screen refresh; an event used to indicate that the current moment has reached a preset moment.

[0072] According to the second aspect, or any implementation method of the second aspect above, the second screen includes one or more of the following contents: dynamic screen content that uses the static screen content in the first screen to display motion effects; static screen content newly added to the first screen; dynamic screen content newly added to the first screen.

[0073] According to the second aspect, or any implementation of the second aspect, the second picture may also include part or all of the picture content of the first picture.

[0074] According to the second aspect, or any implementation method of the second aspect above, the display method of the second screen includes one or any combination of the following methods: adding a subcomponent to the first component, and displaying the newly added screen content in the second screen by the newly added subcomponent; displaying the newly added screen content in the second screen by the original subcomponent in the first component; displaying the dynamic screen content in the second screen by the original subcomponent in the first component using the static screen content in the first screen for motion effect display.

[0075] According to the second aspect, or any implementation of the second aspect, the second screen may be displayed by the first component.

[0076] According to the second aspect, or any implementation of the second aspect, the newly added subcomponent may be located at the topmost layer of the subcomponents of the first component.

[0077] According to the second aspect, or any implementation of the second aspect, refreshing the first screen to the second screen includes: displaying the second screen by a second component corresponding to the first component.

[0078] According to the second aspect, or any implementation of the second aspect, the display area of ​​the second component on the above display interface is the second display area.

[0079] According to the second aspect, or any implementation of the second aspect, the second component covers the first component.

[0080] According to the second aspect, or any implementation of the second aspect above, refreshing the first screen to the second screen includes: launching a second process of the second application to obtain a second screen rendered by the second process to display in the second component.

[0081] According to the second aspect, or any implementation of the second aspect above, the second application is an application corresponding to the second component.

[0082] According to the second aspect, or any implementation of the second aspect above, the second screen is a game screen of the first game, and the second application is a game application for running the first game, or is used to load a game engine for running the first game.

[0083] According to the second aspect, or any implementation of the second aspect above, the second screen includes dynamic screen content, and when the processor reads the computer instruction from the memory, the electronic device is also caused to execute: in response to satisfying a preset condition, obtaining a screenshot of the second component in the first display area; wherein the preset condition includes detecting a user operation outside the first display area, or not detecting a user operation in the first display area within a preset time. Stop displaying the second component, and display the screenshot in the first display area.

[0084] According to the second aspect, or any implementation of the second aspect above, when the processor reads computer instructions from the memory, it also enables the electronic device to execute: in response to the user's first operation within the first display area, switch from displaying the screenshot to displaying the second component.

[0085] According to the second aspect, or any implementation of the second aspect above, the second screen includes dynamic screen content, and when the processor reads computer instructions from the memory, it also enables the electronic device to execute: in response to meeting a preset condition, stop displaying the second component, display the first component in the first display area, and superimpose a transparency mask on the first component; wherein the preset condition includes detecting a user operation outside the first display area, or not detecting a user operation within the first display area within a preset time.

[0086] According to the second aspect, or any implementation of the second aspect above, when the processor reads the computer instruction from the memory, the electronic device is further caused to execute: in response to a first operation of the user within the first display area, switching from displaying the first component and the transparency mask to displaying the second component. Alternatively, in response to a second operation of the user within the first display area, removing the transparency mask.

[0087] According to the second aspect, or any implementation of the second aspect above, when the processor reads the computer instruction from the memory, it also causes the electronic device to execute: in response to the end of the second process, switching from displaying the second component to displaying the first component.

[0088] According to the second aspect, or any implementation of the second aspect above, the second screen is a function page in the second application, and the display position of the main screen in the function page on the display interface corresponds to the position of the first display area.

[0089] According to the second aspect, or any implementation of the second aspect above, the first position relationship of the main screen in the second component may be the same as or different from the second position relationship of the first display area in the display interface.

[0090] According to the second aspect, or any implementation of the second aspect above, when the processor reads the computer instruction from the memory, the electronic device is further caused to execute: obtaining first page information of the display interface, the first page information including size information and position information of the display areas of multiple components on the display interface. According to the first page information, determining the display area for displaying the second screen.

[0091] According to the second aspect, or any implementation of the second aspect above, the first component corresponds to a first application, and the first application obtains the first page information and determines a display area for displaying the second screen according to the first page information.

[0092] According to the second aspect, or any implementation of the second aspect above, the method for determining the second display area includes any one or combination of the following methods: setting the edge of the display area for displaying the second screen to ensure that the second screen does not invade the display area of ​​other components; setting the edge of the display area for displaying the second screen to ensure that the second screen does not invade the display area of ​​the main content of other components; setting the edge of the display area for displaying the second screen to achieve that the second screen covers part or all of the target component in other components.

[0093] According to the second aspect, or any implementation of the second aspect above, the second screen includes a first sub-screen and a second sub-screen, wherein the first sub-screen is displayed in a first sub-area of ​​a display area for displaying the second screen, and the second sub-screen is displayed in a second sub-area of ​​a display area for displaying the second screen. In response to a first trigger event, the first screen is refreshed to the second screen, including: in response to the first trigger event, the first application corresponding to the first component obtains the first page information of the display interface, and the first page information includes the size information and position information of multiple components on the display interface. The first application determines the first sub-area and the target component adjacent to the first component based on the first page information, and triggers the display of the first sub-screen in the first sub-area. The first application sends a linkage effect indication to the target application corresponding to the target component. The target application determines the second sub-area based on the linkage effect indication and triggers the display of the second sub-screen in the second sub-area.

[0094] According to the second aspect, or any implementation of the second aspect above, in the process of displaying the second screen, the display interface also includes a third screen of the third component, and the third screen occupies a third display area on the display interface. When the processor reads the computer instruction from the memory, it also causes the electronic device to execute: in response to the second trigger event, the third screen is refreshed to a fourth screen, wherein the fourth screen is different from the third screen, the fourth screen occupies a fourth display area on the display interface, the fourth display area includes an area on the display interface that is different from the third display area, and the fourth screen includes static screen content and / or dynamic screen content.

[0095] According to the second aspect, or any implementation of the second aspect above, when the processor reads the computer instruction from the memory, the electronic device is also caused to execute: when starting to display the fourth screen, refreshing the second screen to the first screen.

[0096] According to the second aspect, or any implementation of the second aspect above, the second display area is a display area within a safety range corresponding to the first display area. When the processor reads computer instructions from the memory, it also enables the electronic device to execute: while displaying the fourth screen, keep displaying the second screen on the display interface.

[0097] According to the second aspect, or any implementation of the second aspect above, the second screen includes dynamic screen content, and when the processor reads the computer instruction from the memory, it also causes the electronic device to execute: in the event of a first event, control the display of the second screen in a first manner. The first event includes at least one of the following events: the resource occupancy corresponding to the second screen exceeds the first resource limit; the system resources of the electronic device are insufficient; the power consumption corresponding to the second screen exceeds the power consumption threshold; the device temperature of the electronic device exceeds the temperature threshold. The first method includes: reducing the display quality of the second screen; stopping displaying the second screen; releasing the component resources corresponding to the second screen.

[0098] According to the second aspect, or any implementation of the second aspect above, the second screen includes artificial intelligence generated content.

[0099] According to the second aspect, or any implementation of the second aspect, the content source of the second screen includes an electronic device and / or a server.

[0100] In a third aspect, an electronic device is provided, which has the function of implementing the method described in the first aspect and any possible implementation thereof. The function can be implemented by hardware, or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the above functions.

[0101] In a fourth aspect, a computer-readable storage medium is provided. The computer-readable storage medium stores a computer program (also referred to as an instruction or code), and when the computer program is executed by an electronic device, the electronic device executes the method of the first aspect or any one of the implementations of the first aspect.

[0102] According to a fifth aspect, a computer program product is provided. When the computer program product is run on an electronic device, the electronic device executes the method according to the first aspect or any one of the implementations of the first aspect.

[0103] According to a sixth aspect, a circuit system is provided, the circuit system comprising a processing circuit, wherein the processing circuit is configured to execute the method according to the first aspect or any one of the embodiments of the first aspect.

[0104] In the seventh aspect, a chip system is provided, comprising at least one processor and at least one interface circuit, wherein the at least one interface circuit is used to perform transceiver functions and send instructions to the at least one processor, and when the at least one processor executes the instructions, the at least one processor executes the method of the first aspect or any one of the embodiments of the first aspect.

[0105] The technical effects of the aforementioned aspects can be referenced to each other and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0106] Figure 1 A schematic diagram of a component display interface provided in an embodiment of the present application;

[0107] Figure 2 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application;

[0108] Figure 3 A schematic diagram of a software structure block diagram of an electronic device provided in an embodiment of the present application;

[0109] Figure 4 A schematic diagram of module interaction provided in an embodiment of the present application;

[0110] Figure 5 A schematic diagram of the relationship between components provided in the embodiment of the present application;

[0111] Figure 6 Schematic diagram of component dynamic effect display scene provided in the embodiment of the present application Figure 1 ;

[0112] Figure 7 Schematic diagram of component dynamic effect display scene provided in the embodiment of the present application Figure 2 ;

[0113] Figure 8 Schematic diagram of component dynamic effect display scene provided in the embodiment of the present application Figure 3 ;

[0114] Fig.9A Schematic diagram of the actual allowable overflow range of the component animation provided in the embodiment of the present application Figure 1 ;

[0115] Fig. 9B Schematic diagram of the actual allowable overflow range of the component animation provided in the embodiment of the present application Figure 2 ;

[0116] Fig. 9C Schematic diagram of the actual allowable overflow range of the component animation provided in the embodiment of the present application Figure 3 ;

[0117] Fig.9D A highly schematic diagram of component dynamic effects provided in an embodiment of the present application;

[0118] Fig.10 A schematic diagram of a component dynamic display content editing scenario provided in an embodiment of the present application;

[0119] Fig.11 Schematic diagram of the component effect display method provided in the embodiment of the present application Figure 1 ;

[0120] Fig.12 A schematic diagram of the component linkage dynamic effect display area and height provided in an embodiment of the present application;

[0121] Fig.13 Schematic diagram of component dynamic effect display scene provided in the embodiment of the present application Figure 4 ;

[0122] Fig.14 Schematic diagram of the component effect display method provided in the embodiment of the present application Figure 2 ;

[0123] Fig.15 Schematic diagram of the component effect display method provided in the embodiment of the present application Figure 3 ;

[0124] Fig.16 Schematic diagram of component dynamic effect display scene provided in the embodiment of the present application Figure 5 ;

[0125] Fig.17 Schematic diagram of the component effect display method provided in the embodiment of the present application Figure 4 ;

[0126] Fig.18 A schematic diagram of a target component display process provided in an embodiment of the present application;

[0127] Fig.19 A schematic diagram of component resources provided for an embodiment of the present application;

[0128] Fig. 20 Schematic diagram of the component effect display method provided in the embodiment of the present application Figure 5 ;

[0129] Fig.21 Schematic diagram of the component effect display method provided in the embodiment of the present application Figure 6 ;

[0130] Fig. 22 Schematic diagram of the component effect display method provided in the embodiment of the present application Figure 7 ;

[0131] Fig.23 Schematic diagram of component dynamic effect display scene provided in the embodiment of the present application Figure 6 ;

[0132] Fig.24 Schematic diagram of the component effect display method provided in the embodiment of the present application Figure 8 ;

[0133] Fig.25 Schematic diagram of component state transition scenario provided in the embodiment of the present application Figure 1 ;

[0134] Fig.26 Schematic diagram of component state transition scenario provided in the embodiment of the present application Figure 2 ;

[0135] Fig. 27 Schematic diagram of the matching scene between the main area of ​​the game screen and the game card display area provided in the embodiment of the present application Figure 1 ;

[0136] Fig.28 Schematic diagram of the matching scene between the main area of ​​the game screen and the game card display area provided in the embodiment of the present application Figure 2 ;

[0137] Fig.29 Schematic diagram of the matching scene between the main area of ​​the game screen and the game card display area provided in the embodiment of the present application Figure 3 ;

[0138] Fig.30 Schematic diagram of the matching scene between the main area of ​​the game screen and the game card display area provided in the embodiment of the present application Figure 4 ;

[0139] Fig.31 Schematic diagram of the matching scene between the main area of ​​the game screen and the game card display area provided in the embodiment of the present application Figure 5 ;

[0140] Fig.32A schematic diagram of a scene of irregular cropping of the main area of ​​a game screen provided in an embodiment of the present application;

[0141] Fig.33 A schematic diagram of an example scene of display area 2 provided in an embodiment of the present application;

[0142] Fig.34 Schematic diagram 9 of the component effect display method provided in an embodiment of the present application;

[0143] Fig.35 A schematic diagram of module interaction in a game dynamic effect scene provided in an embodiment of the present application;

[0144] Fig.36 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0145] The technical solutions in the embodiments of the present application are described below in conjunction with the accompanying drawings in the embodiments of the present application. Wherein, in the description of the embodiments of the present application, the terms used in the following embodiments are only for the purpose of describing specific embodiments, and are not intended to be used as limitations on the present application. As used in the specification and the appended claims of the present application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to include expressions such as "one or more", unless there is a clear indication to the contrary in the context. It should also be understood that in the following embodiments of the present application, "at least one", "one or more" refer to one or more (including two).

[0146] References to "one embodiment" or "some embodiments" etc. described in this specification mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Thus, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways. The term "connection" includes direct connection and indirect connection, unless otherwise specified. "First" and "second" are used for descriptive purposes only and cannot be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated.

[0147] In the embodiments of the present application, the words "exemplarily" or "for example" are used to indicate examples, illustrations or explanations. Any embodiment or design described as "exemplarily" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplarily" or "for example" is intended to present related concepts in a specific way.

[0148] In some embodiments, the operating system of the electronic device supports providing users with a richer functional experience by developing components. For example, the electronic device can present key information to the user by displaying desktop cards, widgets, etc., and can help the user quickly enable corresponding functions.

[0149] For example, Figure 1 In (a), a weather card 11 is displayed on the desktop of the electronic device. The weather card 11 displays weather information and can quickly start a weather application. Figure 1 In the electronic device shown in (a), a clock card 12 is also displayed on the desktop. The clock card 12 displays time information and can quickly start the clock application. Alternatively, different types of electronic devices display different components, for example, Figure 1 As shown in the figure 13 in (b), a plurality of widgets are displayed on the desktop of the electronic device, which are used to quickly start applications such as my mobile phone, alarm clock, clock, etc., and the widgets carry less information. Figure 1 As shown in (c), the electronic device displays a more vivid clock component 14 on the desktop to remind the user of the time.

[0150] It can be seen that the current components support limited content and cannot provide users with a richer and more vivid interactive experience.

[0151] In this regard, the present application provides a component effect display method that can provide users with richer display effects in the original component window, provide users with a more visually impactful display experience, and enhance the user's interactive experience.

[0152] Optionally, the component effect display method provided in the embodiment of the present application can be applied to the electronic device 100. Optionally, the electronic device 100 can be, for example, a mobile phone, a tablet computer, a personal computer (PC), an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), a wearable device, an artificial intelligence (AI) device, and other terminal devices. The operating system installed in the electronic device 100 includes but is not limited to Or other operating systems. This application does not limit the specific type of the electronic device 100 or the installed operating system.

[0153] For example, Figure 2 A schematic structural diagram of an electronic device 100 is shown.

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

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

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

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

[0158] The MIPI interface can be used to connect the processor 110 with peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI), a display serial interface (DSI), etc. In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to implement the shooting function of the electronic device 100. The processor 110 and the display screen 194 communicate via the DSI interface to implement the display function of the electronic device 100.

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

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

[0161] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be manufactured using a liquid crystal display (LCD), such as 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), Mini-led, Micro-led, Micro-oled, quantum dot light emitting diodes (QLED), etc. In some embodiments, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0162] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In some embodiments, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0163] The sensor module 180 may include a pressure sensor, a gyro sensor, an air pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, a proximity light sensor, a fingerprint sensor, a temperature sensor, a touch sensor, an ambient light sensor, a bone conduction sensor, and the like.

[0164] A touch sensor is also called a "touch control device". The touch sensor can be arranged on the display screen 194. The touch sensor and the display screen 194 form a touch screen, also called a "touch control screen". The touch sensor 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 can also be arranged on the surface of the electronic device 100, which is different from the position of the display screen 194.

[0165] In some embodiments, the user can trigger the electronic device 100 to display component animations through touch, gaze, gesture, voice, and other methods. For example, during the process of the electronic device 100 displaying a component, the electronic device 100 detects the user's touch operation on the component through the touch sensor, which can trigger the display of the animation corresponding to the component to achieve interaction with the user. For another example, during the process of the electronic device 100 displaying a component, the electronic device 100 detects the user's gaze on the component through the camera 193, which can trigger the display of the animation corresponding to the component. In this way, the component animation is displayed when the user pays attention to the component, which can reduce the display power consumption of the component animation while achieving interaction with the user.

[0166] 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 application takes the Android system of the layered architecture as an example to exemplify the software structure of the electronic device 100.

[0167] Figure 3 It is a software structure block diagram of the electronic device 100 according to an embodiment of the present application.

[0168] 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: the application layer, the application framework layer, the Android runtime and system library, and the kernel layer.

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

[0170] like Figure 3 As shown, the application package may include desktop, calendar, weather, memo, music, gallery, map, call, video and other applications.

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

[0172] like Figure 3 As shown, the application framework layer may include component rendering service, component management service, package management service, view system, window manager, etc.

[0173] Component rendering service, used to render components and component effects.

[0174] Component management service is used to manage components. For example, component management service is used to manage the relationship between component providers and component users, and to manage component users. Among them, component providers are used to provide component content, configuration information, etc. Component users are used to carry components. For example, the weather application in the application layer can generate weather cards as a component provider, and the weather card can be displayed in multiple locations such as the desktop and the negative one screen. When the weather card is displayed on the desktop, the desktop can be used as a component user. Then, the component management service can be used to manage the component usage relationship between the desktop and the weather application for the weather card.

[0175] The package management service is used to manage the installation of each application in the application layer, package resource parsing, etc. Optionally, the application installation package includes component resources. When component effects need to be displayed later, the component rendering service can obtain these component resources to render component effects.

[0176] For example, Figure 4 As shown, the component provider detects a component effect display event. For example, the weather card can switch different display contents according to the actual weather conditions. Then the weather application can use weather changes as component effect display events to switch and display the corresponding weather card display contents according to the component effect display event. Afterwards, in response to the component effect display event, the component provider requests the package management service and / or the content provider to obtain component effect display resources. Among them, the content provider is, for example, a server, which can be used to provide cloud-based component effect display resources. That is, the component provider can obtain component effect display resources from the local and / or cloud. Afterwards, the component provider sends a component effect display request to the component management service, and the component management service determines the component user corresponding to the component provider according to the component effect display request, and triggers the component rendering service to render the component display effect. Afterwards, the component rendering service sends the rendering data to the component user determined by the component management service, so that the component user displays the dynamic or static display effect of the corresponding component according to the rendering data, thereby increasing the visual impact of the user.

[0177] In some embodiments, the component provider is configured with a rendering engine, and the dynamic or static display effect of the component can also be rendered by the rendering engine in the component provider, and the rendering data can be output. Subsequently, the component user can directly obtain the rendering data and display it. In other words, compared to Figure 4 As shown in the process, the electronic device realizes the rendering and display of component effects through the interaction between the component provider and the component user in the application layer, without having to be processed by the component rendering service in the application framework layer.

[0178] Optionally, the rendering engine can be implemented through a preconfigured process in the component provider. For example, the component provider renders the component effect through the preconfigured process and obtains the corresponding rendering data. Afterwards, the component provider sends the rendering data to the component user through the preconfigured process to display the component effect. Optionally, the preconfigured process is, for example, a UIExtension process, and the rendering data obtained through the UIExtension process is, for example, a UIExtension component. It should be understood that the rendering engine can be implemented in different styles in different operating systems, and the embodiments of the present application do not limit the specific implementation method of the rendering engine. The following takes the implementation of the rendering engine as a UIExtension process and the corresponding rendering data as a UIExtension component as an example to exemplify the display process of some component effects.

[0179] Exemplarily, the component animation of a game component may be a 3D animation, and the processing process of the 3D animation is relatively complicated. Optionally, the game engine configured in the game application can trigger the rendering of the 3D animation, for example, the game application obtains the rendering data of the 3D animation by calling the UIExtension process. Afterwards, the game application sends the rendering data to the component user through the UIExtension process to realize the 3D animation display of the game component. Optionally, the rendering data is, for example, a UIExtension component.

[0180] In this way, the processing difficulty of displaying component effects is reduced.

[0181] It should be understood that the component rendering service will be used as an example to illustrate the display process of component dynamic effects. As for the component dynamic effect display process corresponding to the component effect rendering directly performed by the component provider, please refer to the various embodiments below, and no further examples will be given for this.

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

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

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

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

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

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

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

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

[0190] The following is a detailed introduction to the component effect display method provided in the embodiment of the present application.

[0191] In some embodiments, components can also be described as objects, elements, etc., which are simple encapsulations of data and methods, and have their own properties and methods. In some examples, applications have different functions, and corresponding components can be generated to help users use the functions. Optionally, components include, for example, user interface components, software development windows, text boxes, buttons, chart components, etc. For example, a card component is a type of component.

[0192] In some examples, components may include container components and non-container components. Among them, container components are a special type of components that may include other components (container components and / or non-container components). By arranging other components according to certain rules, a display page of the container component may be generated.

[0193] For example, Figure 5 As shown, a container component may include one or more components (e.g., non-container components or container components). The one or more components are arranged in a top-down layout mode to form a component tree. Optionally, a container component and components belonging to the container component belong to the same tree structure, such as components belonging to the container component can be described as subcomponents of the container component. Optionally, a component tree corresponds to a window, and different components in the same component tree all correspond to the window. For example, Figure 6 As shown in (a), the electronic device displays a vehicle card, which is a container component, and the component tree to which it belongs includes multiple subcomponents, such as a component for displaying text on the vehicle card, a component for displaying a vehicle logo, etc. The electronic device displays the vehicle card through window 1, and multiple components on the vehicle card are all displayed in window 1.

[0194] In some embodiments, the electronic device may display components in multiple locations such as the screen-off interface, the lock screen interface, the desktop, the negative one screen, the drop-down menu, and the pull-up menu.

[0195] The following text takes the container component as a card and introduces the display effect of the card on the desktop to introduce in detail the component effect display method provided in the embodiment of the present application.

[0196] In some embodiments, the card component can implement the functions of a card.

[0197] In some examples, cards are also called application cards, which are a form of interface display that can provide some functions of an application and can interact with the corresponding application to implement the corresponding functions when receiving control operations acting on corresponding buttons. For example, the application card of a payment application can display a payment code, a payment code, etc., and the application card of a music application can provide a play / pause button, a next song button, a previous song button, etc.

[0198] In some examples, application cards are usually customized by a third party (such as an application developer). Among them, application cards can be used to be embedded in other applications as part of their interface display, for example, it can allow the user (such as a desktop application, the third application in the embodiment of the present application) to embed the application card into its own interface for display. That is to say, for any application, the application card corresponding to the application is independent of the application, and data can be interacted with the application to update or add important information or operations of the application to the application card.

[0199] In some examples, application cards set up based on the Android operating system can be called widgets or widget cards, and application cards set up based on the Hongmeng operating system can be called service cards.

[0200] In some embodiments, the display effect of the component includes a static display effect and a dynamic display effect.

[0201] For example, Figure 6 As shown in (a), a vehicle card is displayed on the electronic device desktop, and the vehicle card is used to display the vehicle status of vehicle A and other contents. In some examples, after obtaining a component effect display event, the electronic device can display the card effect of the vehicle card. For example, when the electronic device detects that the user drives to a parking lot, it can determine that a component effect display event is obtained and that a parking lot effect needs to be displayed on the vehicle card. For example, the electronic device displays Figure 6The card content shown in (a) may be a static image to remind the user that the vehicle is currently parked; or, the card content may be a dynamic effect that changes with the movement of the actual position of the vehicle to assist the user in parking, such as a dynamic effect that changes the position of the vehicle logo as the actual position of the vehicle moves.

[0202] The following takes the component display effect as a dynamic display effect as an example to describe in detail the component effect display method provided in the embodiment of the present application. It should be understood that the static display effect of the component can refer to the relevant content of the dynamic display effect, which will not be repeated here.

[0203] In some embodiments, the container component has a container clipping function, which clips the content that exceeds the display area of ​​the container of the component, so that the user can see the display content within the container but cannot see the display content outside the container.

[0204] For example, Figure 6 As shown in (a), the electronic device displays a vehicle card in the display area 61. Generally, the electronic device crops the display content of the vehicle card outside the display area 61 so that the display content outside the display area 61 is invisible to the user. In some examples, when the electronic device determines that a dynamic display effect (hereinafter simply described as an animation effect) of a vehicle card needs to be displayed, the card animation effect may be displayed within the display area 61 and / or outside the display area 61. Among them, if the electronic device displays the card animation effect outside the display area 61, an overflow (or described as an over-range) display effect of the card can be achieved, enriching the user's visual experience.

[0205] Optionally, the vehicle card is a container component, and the electronic device realizes the card motion effect through the dynamic changes of subcomponents of the container component.

[0206] Optionally, the electronic device displays the vehicle card through window 1, and displays the card animation of the vehicle card through the window 1. In some examples, when the electronic device displays the card overflow animation, the display area 2 of the card animation is larger than the display area 1 of the vehicle card (such as display area 61), and the display area 1 and the display area 2 both correspond to the same window 1.

[0207] In this way, the electronic device displays component animation in the window of the original container component through the sub-components of the container component to achieve an overflow effect. While enriching the user's visual experience, there is no need to create new windows and animation elements, which simplifies the component animation display process and increases the versatility of component animation display.

[0208] In some embodiments, the electronic device obtains the motion effect information of the target component in response to the component motion effect display event. The target component is the component to display the motion effect, and the motion effect information includes, for example, the display content and display mode of the motion effect, information of the display area 1 of the target component, etc. Afterwards, the electronic device can display the motion effect according to the motion effect information.

[0209] For example, Figure 6 In the automatic parking scenario shown in (a), the electronic device responds to the automatic parking event, obtains parking space information and the current vehicle location information, and displays the automatic parking effect by displaying a moving vehicle logo on the vehicle card. Figure 6 As shown in (b), after the vehicle is parked in the target parking space, the electronic device can display the dynamic effect of the vehicle logo moving from outside the vehicle card to inside the vehicle card, to help the user understand that the vehicle has completed the automatic parking event.

[0210] It can be seen that the electronic device can display component animations in the vehicle card, or in the vehicle card and outside the vehicle card. When the electronic device needs to display component animations, it can obtain the display area 2 of the component animation, which is the display area 1 of the component, or it can be larger than the display area 1 of the component.

[0211] As another example, Figure 6 In the automatic outbound scene (c), the electronic device responds to the automatic outbound event, obtains the garage map, the current vehicle location information, etc., and displays the moving vehicle logo to achieve the automatic outbound animation. Figure 6 As shown in (d), the electronic device can display a rotating dynamic effect of the vehicle logo on the vehicle card; Figure 6 As shown in (e), the electronic device can also display the vehicle trunk lid opening and closing animation of the vehicle logo on the vehicle card to prompt the user to pay attention to the status of the vehicle doors, trunk lid, etc.

[0212] It can be seen that the above-mentioned vehicle logo dynamic effect can be displayed inside and outside the display area 1 of the vehicle card. The electronic device realizes the interaction with the user's vehicle outbound action through the continuous dynamic effect display of the same vehicle logo, thereby improving the user's interactive experience. In addition, the vehicle logo is a subcomponent belonging to the vehicle card, and the component dynamic effect can be displayed in the window of the vehicle card through the subcomponent.

[0213] In some embodiments, the electronic device obtains information about the display area 2 of the component animation based on the size information and position information of the target component display area 1 and the page information of the display interface where the display area 1 is located. Optionally, the page information includes, for example, display interface size information (which can also be described as display screen size information), information about other components on the display interface, etc.

[0214] For example, Figure 6 As shown in (b), when the electronic device displays the dynamic effect of the vehicle card, it displays the dynamic effect according to the size information and position information of the vehicle card and the size information of the display interface. The dynamic effect corresponding to the vehicle logo is displayed on the display screen through screen constraints.

[0215] As another example, Figure 7 As shown in (a), the electronic device displays a weather card 71, obtains weather information indicating heavy rain, and can display a heavy rain animation. In response to the component animation display event, the electronic device can display a heavy rain animation on the weather card 71. Or, Figure 7 As shown in (b), the electronic device can obtain the size information and position information of the weather card 71. In addition, the electronic device can obtain other components displayed on the current display interface based on the current page information of the weather card 71, such as card 72, card 73, and card 74 located around the weather card 71. Among them, card 72 and card 73 are located below the weather card 71, and card 72 and card 73 may affect the display effect of raindrops falling in the heavy rain animation of the weather card 71. Then, the electronic device can obtain the upper edge position information of card 72 and card 73, and use the position information as the lower edge of the display area 2 corresponding to the heavy rain animation, so that the display of the heavy rain animation of the weather card 71 will not affect the display of card 72 and card 73, and the display effect of raindrops falling on the upper edge of card 72 and card 73 can be achieved. For another example, in response to a user operation, the electronic device deletes card 72. Then, if Figure 8 As shown, the electronic device can obtain the display area 2 corresponding to the heavy rain dynamic effect according to the position information displayed by the card 73 and the card 74, and display the heavy rain dynamic effect in the display area 2 to achieve the display effect of raindrops falling on the upper edges of the card 73 and the card 74. It can be seen that the display area 2 is an area of ​​regular size or irregular size.

[0216] In some embodiments, the electronic device can obtain the actual allowed overflow range based on the size information and page information of the display area 1, and use the display area 1 and the actual allowed overflow range as the display area 2 corresponding to the component animation. It should be understood that the display area 2 may not include the display area 1, that is, the electronic device displays the component animation around the target component. Optionally, during the component development process, the developer can configure a preset effect display range. Then, in the process of obtaining the display area 2, the electronic device can obtain the overflow range based on the page information, and obtain the actual allowed overflow range in combination with the overflow range and the preconfigured preset effect display range.

[0217] For example, Fig.9AAs shown in (a), the electronic device can obtain the component display range, such as display area 1. In some example scenarios, the electronic device uses the display area of ​​the entire display screen except display area 1 as the actually allowed overflow range. In other example scenarios, the electronic device obtains the size information and position information of other components located around the current component based on the page information, and thereby obtains the actually allowed overflow range of the current component based on the size information and position information of other components. The actually allowed overflow range is outside the outer edges of other components, thereby avoiding the subsequent component effect display from affecting the display of other components. In other example scenarios, the component installation package includes a preset effect display range preset by the component developer. Then, the electronic device uses the preset effect display range as the actually allowed overflow range. In some other example scenarios, such as Fig.9A As shown in (b), the component installation package includes a preset effect display range preset by the component developer. Then, after the electronic device obtains the overflow range based on the size information and position information of other components located around the current component, it can match the overflow range with the preset effect display range, and use the intersection of the two as the actual allowed overflow range. In this way, it is avoided that the preset effect display range preset by the developer is too large, affecting the display of other components, and it is also avoided that the overflow range obtained by the electronic device based on the page information is not the display range required by the developer.

[0218] In this way, the electronic device obtains the actually allowed overflow range, and displays the component effect according to the actually allowed overflow range to meet the actual display requirements.

[0219] In some embodiments, the display content visible to the user on the component can be described as the main display content of the component. In some examples, the electronic device display component includes the main display content of the display component, and the display area 1 of the component is used to display the main display content. Then, the electronic device implements the overflow component effect including the component effect exceeding the scope of the display area 1 of the main display content. In addition, in the process of determining the actual allowable overflow range, the electronic device obtains the position information and size information of other components located around the current target component based on the page information, which is also determined based on the main display content of other components, thereby providing users with a more realistic and natural component effect display experience.

[0220] For example, Fig. 9BIn the scene shown, the target component is the weather card 71, and the component effect to be displayed is the heavy rain effect. The electronic device obtains the page information and obtains the cards 73 and 74 located around the weather card. Among them, the main display content of card 74 is the car logo 91, and the other content of card 74 except the car logo 91 is not visible to the user. Or, from the user's perspective, card 74 is the car logo 91. Then, the electronic device can display the following information based on the upper edge position information of card 73 and the upper edge position information of the car logo 91: Fig. 9B The heavy rain dynamic effect of the weather card 71 shown. It can be seen that the raindrops of the current heavy rain dynamic effect fall on the upper edge of the car logo 91, which better meets the component effect display expected by the user.

[0221] Optionally, the electronic device may obtain information such as size information and position information of the main display content of the component through an image recognition algorithm such as an image segmentation algorithm.

[0222] Optionally, the component may include one or more main display contents. In the case of multiple main display contents, the electronic device may combine the display areas of the multiple main display contents to obtain a large display area, and the large display area can cover the display areas of the multiple main display contents. Subsequently, the electronic device obtains the actually allowed overflow range based on the large display area.

[0223] In this way, the electronic device provides users with a better component effect display experience by identifying the main display content of the component.

[0224] Optionally, to simplify the description, the display area of ​​a component indicates a display area of ​​a main display content of the component, or a large display area formed by combining display areas of multiple main display contents, which will not be described in detail below.

[0225] In some embodiments, the display types of component animations include long-term display and short-term display. Among them, long-term display can also be described as long display, including continuously displaying the component animation during the display of the component. Short-term display includes displaying the component animation for a preset duration during the display of the component, or displaying the component animation for a preset duration according to a preset period.

[0226] In some examples, component animations that are displayed for a long time are, for example, component animations that do not need to be displayed in a large range. Then, even if the component animation is displayed for a long time, it will not affect the display of other components. In some examples, component animations that are displayed for a short time are, for example, component animations that need to be displayed in a large range. Then, the display of this component animation may affect the display of other components, so it is necessary to limit the display duration of the component animation. It should be understood that some component animations that are displayed for a long time can also be displayed in a large range, and some component animations that are displayed for a short time can also be displayed in a small range.

[0227] In some examples, the display type of component animation is preconfigured in the component. For example, during the component development process, the developer configures the component animation and the display type of the component animation.

[0228] In some examples, after obtaining a component animation display event, the component determines that an animation needs to be displayed, and can send an animation display request to the system, and carry the display type in the animation display request. Accordingly, the system responds to the animation display request and obtains the actual allowed overflow range of the component animation.

[0229] Optionally, when the display type is long-term display, the actually allowed overflow range is, for example, a safe range. The system can obtain information such as the distance between the component to be displayed and the surrounding components based on the position and size of the component, as well as the position and size of the surrounding components, thereby obtaining the safe range. Displaying component animation for a long time within the safe range will not affect the display of other components.

[0230] For example, Fig. 9C As shown in (a), the electronic device displays a desktop with a weather card 92 displayed on the desktop. In response to obtaining that the current weather is cloudy, the weather card 92 sends a dynamic effect display request to the system, and carries the display type of long-term display in the dynamic effect display request. Then, the system obtains a safe range 93 based on the display of each card, application icon, etc. on the current desktop. The safe range 93 is a range within a certain distance around the weather card 92. Afterwards, the system sends the safe range 93 to the weather card 92, and the weather card 92 can display a cloudy dynamic effect for a long time within the safe range 93. It can be seen that the cloudy dynamic effect will not affect the display of other cards, application icons, etc. on the desktop.

[0231] In this way, without affecting the display of other components, the electronic device can display component animations for a long time, thereby satisfying richer display effects while avoiding affecting the user's use of other components.

[0232] Optionally, when the display type is a short-time display, the system may obtain the display duration of the component animation effect displayed for a short time. The display duration is, for example, a preset duration and / or a preset period. Optionally, the system may also obtain the actual allowable overflow range of the component animation effect displayed for a short time. Optionally, a preset duration and a preset period are preset in the electronic device.

[0233] For example, Fig. 9CAs shown in (b), the electronic device displays a desktop, and a weather card 92 is displayed on the desktop. In response to obtaining that the current weather is thunderstorm, the weather card 92 sends a dynamic effect display request to the system, and carries the display type as short-time display in the dynamic effect display request. Alternatively, the weather card 92 sends a dynamic effect display request to the system, and carries the display area in the dynamic effect display request. The system obtains that the display area is a large-scale display area, and can determine to allocate a component dynamic effect for short-time display to the weather card 92. For example, the range of display area 2 of the thunderstorm dynamic effect is the range shown in the dotted box 94. The weather card 92 displays a thunderstorm dynamic effect of a preset duration in the dotted box 94. Optionally, the weather card 92 can also display a thunderstorm dynamic effect of a preset duration in the dotted box 94 according to a preset period.

[0234] In this way, the electronic device limits the display time of component animations that need to be displayed in a large area, thereby ensuring the display of component animations while avoiding the display of component animations affecting the display of other content and the user's use. In this way, it can also avoid the problem of some third-party components maliciously occupying the display area.

[0235] In some embodiments, in a preset scene, the electronic device does not limit the display duration of the component animation and / or the size of the display area 2. Optionally, the preset scene is, for example, a preset component in an activated state. Optionally, the preset component is, for example, a component that needs to interact with the user in a wide range, such as a game component.

[0236] In some examples, the component state includes an activated state and an inactivated state, etc. Among them, the activated state indicates that the component is activated for use, and the electronic device activates the component in response to the user operation. For example, in response to the user's touch on the component, gaze at the component and other operations, the electronic device obtains the focus on the component, which can trigger the component to be in an activated state. The inactivated state indicates that the component is not activated for use. Optionally, the activated state may also include a paused state. For example, when the component is in the activated state, the electronic device detects the user's operation instructing the user to operate other components or blank areas, such as switching the focus to other locations outside the component, indicating that the component switches to a paused state. Optionally, the component state may also be described as including an activated state, a paused state and an inactivated state, etc. Optionally, the component state may also be described as a component motion state.

[0237] In some examples, while a component is in an activated state, the component animation of the component is displayed. While a component is in a paused state, the display of the corresponding component animation is paused. While a component is in an inactive state, the component animation of the component is not displayed. Optionally, while a component is in a paused state, the electronic device may maintain the display of the component animation in the display area 1 of the component. Optionally, maintaining the display of the component animation includes maintaining the display of a reduced image of the last frame displayed in the activated state before switching the component state in the display area 1. Alternatively, while a component is in a paused state, the electronic device may not display the component animation.

[0238] In some examples, as described above, the component provider is configured with a rendering engine, and the dynamic or static display effect of the component can also be rendered by the rendering engine in the component provider, and the rendering data is output. For example, the application obtains the UIExtension component for displaying the component dynamic effect by calling the UIExtension process.

[0239] Exemplarily, the electronic device displays a non-activated game card on the desktop, and the currently displayed game card is an ordinary card. In response to trigger conditions such as user operations, the game application determines that the game card needs to be activated. Then, the electronic device can trigger and display the UIExtension component, and the display of the game card dynamic effect is realized through the UIExtension component. Among them, the UIExtension component displayed by the electronic device is in an activated state. Optionally, in response to user operations (such as user operations on blank spaces on the desktop, etc.), the UIExtension component switches to a paused state. Subsequently, in response to the user's instruction to exit the game dynamic effect, the electronic device can display an ordinary card again, and the ordinary card is an inactive game card. Optionally, in the current scene, the UIExtension component can also be described as a game play card. Optionally, in the current scene, it can be understood that the game card is configured with two component display modes, such as "one card with two sides", one side displays ordinary cards, and the other side displays game play cards. It should be understood that ordinary cards and game play cards are not displayed at the same time.

[0240] In some examples, a component (or an application corresponding to a component) may apply to the system for the ability to receive user input. For example, after obtaining the ability to receive user input, the component may receive and process the user's operation in the display area 1 of the component. For example, the component is a music card, and a play control is displayed on the music card. In response to the user's operation on the play control, the music card can play music. For another example, the component is a game card, and a mini-game control is displayed on the game card. In response to the user's operation on the mini-game control, the game card starts the mini-game. Optionally, in response to the start of the mini-game, the game card switches to an activated state and displays a mini-game animation, which may exceed the display area 1, thereby providing the user with a better gaming experience. For example, the user can directly perform mini-game operations directly on the desktop. In this way, the component takes over the user input to avoid conflicts between the user's gestures and some gesture commands in the system.

[0241] Optionally, after the electronic device displays the component, the system can also directly instruct the component to obtain the ability to receive user input without the component having to apply to the system. Optionally, the ability to receive user input directly instructed by the system to the component includes the ability to receive user input within the display area 1 of the component.

[0242] In some examples, the system is used to manage component states, for example, the system manages the life cycle of component animations. Optionally, when a component state needs to be switched, the system sends a component state change indication or notification to the corresponding component.

[0243] In some examples, in a preset scenario, the electronic device can display component animations in a large range. Optionally, the electronic device adjusts the transparency of the component animations so that the display of overflow animations beyond the display area 1 of the component does not affect the display of other components. Optionally, the overflow animations beyond the display area 1 of the component bear visual effects but do not bear receiving input events, so that the display of component animations does not affect the user's operation of other components that may be covered by the component animations.

[0244] For example, Fig. 9CAs shown in (c), the electronic device displays a desktop, and a game card 95 is displayed on the desktop. In response to the user's operation on the game card 95, the electronic device triggers the display of the component animation of the game card 95, and the display of the component animation exceeds the scope of the display area 1 of the game card 95, realizing the overflow animation. For example, the electronic device displays the component animation of the game card 95 in full screen. Optionally, the electronic device adjusts the transparency of the component animation so that the component animation of the game card 95 does not affect the display of the weather card 92. Optionally, in response to the user's operation on the weather card 92 (or the operation on the blank area of ​​the desktop), the component animation of the game card 95 is switched from the activated state to the paused state, and the electronic device displays the component animation in the display area 1 of the game card 95. Subsequently, in response to the user's operation on the game card 95, the electronic device triggers the component animation of the game card 95 to switch from the paused state to the activated state, and continues to display the component animation in full screen.

[0245] Optionally, the overflow animation beyond the display area 1 of the component is used as a visual effect and can also be used to receive input events, thereby increasing the interactivity between the component animation and the user. For example, a partial focus area is configured in the component animation. In response to the user's operation on the focus area, the electronic device can trigger the display of the corresponding animation to achieve interaction between the user and the component animation.

[0246] In this way, a more flexible component animation display effect can be achieved to avoid affecting user operations.

[0247] In some embodiments, after the component state is switched to the pause state, the electronic device can pause the display of the component animation and the component process; after the component state is switched to the inactive state, the electronic device can continue to display the component animation and continue the component process. In this way, the power consumption of the component animation display and the component process operation is reduced, and the power consumption of the electronic device is reduced.

[0248] Optionally, if the electronic device does not detect an operation to activate the component within a preset waiting time after the component state is switched to the pause state, the component state may be switched from the pause state to the inactive state, thereby further reducing power consumption.

[0249] For example, Fig. 9CAs shown in (c), in the process of the electronic device displaying the component dynamic effects of the game card 95, in response to the user's left or right swipe operation on the desktop, the electronic device switches to display other sub-pages of the desktop, and the game card 95 is not displayed on the other sub-pages. Among them, in the process of the electronic device not displaying the game card 95, the component dynamic effects of the game card 95 are switched from the activated state to the paused state. Subsequently, if the electronic device displays the sub-page including the game card 95 in response to the user's right or left swipe operation on the desktop, the component dynamic effects of the game card 95 are switched from the paused state to the activated state, and the component dynamic effects continue to be displayed. Alternatively, if the electronic device exceeds the preset waiting time (such as 20 minutes) without detecting the user's instruction to switch back to display the sub-page including the game card 95, the component dynamic effects of the game card 95 are switched from the paused state to the inactive state to reduce power consumption.

[0250] Optionally, after the component state is switched to the paused state, the component animation may not be displayed, but the same display content as the component display content when the component state is in the inactive state may be displayed. Optionally, when the component state is in the inactive state, the display content on the component is, for example, placeholder content, and the placeholder content is, for example, the component preview content displayed during the component addition process. Fig.10 As shown in (a), during the card adding process, the electronic device displays a card preview. Then, after the component state is switched to a paused state or an inactive state, the component content displayed by the electronic device is the preview content of the card. Optionally, when the component state is in an inactive state, the display content on the component can also be switched according to user operations. For example, in response to a user swiping left or right on a card, the electronic device can switch to display different function pages corresponding to the card.

[0251] In some embodiments, the electronic device does not display multiple 3D component animations at the same time, thereby reducing power consumption. Optionally, 2D component animations are allowed to be displayed in parallel. For example, while the electronic device is displaying a component animation (2D or 3D component animation), other 2D component animations are allowed to be displayed.

[0252] In some examples, when the electronic device displays a 3D component animation, it will not display other 3D component animations.

[0253] For example, Fig. 9C In the scene shown in (c), the electronic device periodically displays the lightning effect of the weather card 92, and the lightning effect is as follows Fig. 9C In the example of (b), the 3D animation effect with a large overflow is shown. In response to the user activating the game card 95, the electronic device displays the component animation effect of the game card 95. Then, during the display of the component animation effect of the game card 95, the electronic device stops the lightning animation effect of the weather card 92 that is periodically displayed. In this way, the power consumption of the electronic device is reduced, and the display conflict of different animation effects is avoided.

[0254] Alternatively, if Fig. 9C In the scene shown in (c), the electronic device, while displaying the component animation of the game card 95, still displays the 2D animation of rainy clouds within the safe range corresponding to the weather card 92. The display of the 2D animation consumes less power, which reduces power consumption while ensuring the display effect.

[0255] In other examples, the electronic device may periodically display multiple component animations, with the same or different periods. Optionally, during the display of multiple component animations, the display timing of some component animations may overlap, and the electronic device needs to decide which component animation to display.

[0256] Optionally, the electronic device displays component animations through a preemption mechanism. For example, two weather cards are displayed on the desktop, such as Weather Card 1 and Weather Card 2, and both weather cards need to display periodic component animations with overflow effects. In the process of the electronic device displaying the component animation of Weather Card 1 according to Period 1 of Weather Card 1, it obtains Period 2 of the component animation of Weather Card 2 that is currently displayed. Then, the electronic device can stop displaying the component animation of Weather Card 1 and start displaying the component animation of Weather Card 2. That is, the component animation of Weather Card 2 displayed later preempts the display of the component animation of Weather Card 1 displayed first. In this way, by presetting rules, the simultaneous display of multiple component animations can be avoided to reduce power consumption.

[0257] Optionally, if the display area 2 of the periodically displayed component animation A is the component display area 1 or a safe area near the component display area 1, then the display of other component animations (including periodic component animations) will not affect the display of the component animation A.

[0258] Optionally, the component animation that is periodically displayed is, for example, a 3D component animation that requires more resources, or may be a 2D component animation.

[0259] In some embodiments, the power consumption overhead of component animations corresponding to some components is relatively large. Then, in order to reduce the power consumption overhead, the electronic device allows the applications corresponding to such components to create one component, or a smaller number of components.

[0260] For example, a game application is configured with multiple mini-game functions, and different mini-game functions can create corresponding mini-game cards. Then, during the mini-game card creation process, if a mini-game card is already displayed on the desktop, the electronic device may no longer allow the addition of a new mini-game card. In this way, the electronic device can reduce the power consumption generated when the mini-game card displays component animations.

[0261] Optionally, the electronic device can display components of different sizes. Then, for components with large animation costs, the electronic device also allows the creation of a component of one size, or a smaller number of components of different sizes.

[0262] For example, the game application is configured with game cards of different sizes. Then, during the game card creation process, if a game card of the current game application is already displayed on the desktop, the electronic device no longer allows the addition of a game card of a new size. Optionally, the game card of the new size that is not allowed to be added corresponds to the same mini-game in the same game application as the game card already displayed on the desktop.

[0263] In this way, by limiting the creation of components, the power consumption of subsequent component animation display is reduced, thereby reducing the power consumption of electronic devices.

[0264] In some embodiments, the component animation is a 3D component animation, and the electronic device adjusts the size of the adaptive overflow area by adjusting the camera field of view of the 3D scene. For example, by enlarging or reducing the field of view, the size of the display area 2 of the component animation is adjusted. For example, Figure 7 In the 3D scene shown in the rainy dynamic effect display, the electronic device enlarges the size of the display area 2 by enlarging the field of view.

[0265] In this way, by displaying the component animation effect through adjusting the field of view angle, a better component animation display effect can be achieved compared to directly enlarging or reducing the display content of the component animation effect.

[0266] In some embodiments, after determining that a component animation effect needs to be displayed, the electronic device may increase the sub-component level used to display the component animation effect to realize the display of the component animation effect. Optionally, a component with a high level height may cover other components with a low level height. Wherein, as described above, the container component and its sub-components belong to the same component tree. In addition, all the display contents displayed on the display interface may also form a large component tree, and the component tree corresponding to the container component is a component branch structure in the large component tree. Wherein, the level in the large component tree is used to describe different component heights. The higher the component level, the more it can be displayed in the upper layer. The display content visible to the user is the upper component, while the covered component is invisible to the user. Wherein, the component level can be described by the Z-axis height. Optionally, the electronic device realizes the upper display component animation effect by adjusting the Z-axis height of the component tree corresponding to the container component and the Z-axis height of the sub-component in the component tree. Optionally, some or all of the sub-components in the sub-components that display the component animation effect can achieve the corresponding display effect by adjusting the transparency. Then, in some example scenarios, the user can also see other components covered by the component animation effect.

[0267] For example, Fig.9DAs shown, the electronic device needs to display the dynamic effect of the weather card 71. By adjusting the Z-axis height of the corresponding component, the overflow component dynamic effect can be displayed within the original card size and the overflow range.

[0268] In this way, the electronic device can constrain the display of component animation according to the display screen size and the display positions of other components, thereby improving the user's visual and interactive experience without affecting the user's use of other components.

[0269] In some embodiments, the hierarchical height of the component animation is lower than the hierarchical height of the preset display content, so as to avoid the display effect of the component animation affecting the display of the preset display content. Optionally, the preset display content is, for example, a notification, a floating window, etc. For example, to avoid the notification or floating window being covered by the component animation, affecting the timeliness of the notification, or affecting the user's use of the floating window. Optionally, the notification includes, for example, a pop-up notification.

[0270] Exemplarily, after the electronic device obtains the component animation display event corresponding to the game card, it displays the corresponding component animation in full screen, and the hierarchical height of the component animation is higher than the hierarchical height of other components displayed on the original desktop. During the display of the component animation, the electronic device obtains a notification message. Then, the electronic device can display the notification message in the form of a pop-up window, where the hierarchical height of the pop-up window is higher than the hierarchical height of the component animation of the game card. In this way, during the display of the component animation, it is ensured that the display of the notification is easy for the user to find, and does not affect the display of the component animation.

[0271] As another example, after obtaining the component animation display event corresponding to the game card, the electronic device obtains a floating window displayed on the current desktop, such as a picture-in-picture window corresponding to a video application. Then, the electronic device can also display the overflow effect of the component animation of the game card, but the level height of the component animation of the game card is lower than the level height of the floating window. In this way, while ensuring the display of the component animation, it avoids affecting the display content of the floating window that the user operates.

[0272] In some embodiments, the display areas of multiple component animations may overlap. Then, as described above, the electronic device can display the latest component animation that needs to be displayed through the preemption mechanism. Optionally, the overlap of some component animations may not be coordinated even through the preemption mechanism. Then, the electronic device can help coordinate the display of different component animations based on user operations or prompt information. For example, the display areas of multiple component animations that need to be displayed for a long time may overlap, or the display areas of overflow animations that are displayed for a short time and component animations that are displayed for a long time may overlap, etc.

[0273] For example, the electronic device displays multiple component animations in an overlapping manner. Then, the electronic device can move the display positions of the components corresponding to the overlapping component animations according to the user operation to avoid the overlapping of the component animations. In this way, the user can choose whether to adjust the overlapping display effect of the component animations according to his or her own aesthetic habits.

[0274] As another example, during the process of adding components, the electronic device automatically adds the components to an area where there will be no problem of overlapping component animations. For example, during the process of the user instructing to add components on the desktop, the electronic device obtains that there is a need to display component animations for the component to be added. Then, the electronic device can add components based on the demand for display area for component animations that may exist for components displayed on the current desktop, so that after subsequent components are added, the display of component animations of the component will not overlap with the display of component animations of other components. For example, there is a blank area on the sub-page of the current desktop, which can display the component to be added, but if the component is added to the current sub-page, there may be a problem of overlapping component animations. Then, the electronic device will also add the component to be added to other sub-pages.

[0275] Optionally, the electronic device also records the component animation display area 2 as the component placeholder area. In this way, during the component adding process, even if the component that has been added does not display the component animation, the electronic device can directly determine whether a new component can be added directly based on the placeholder status of the current subpage.

[0276] Optionally, during the component adding process, the component animation obtained by the electronic device may overlap with the animation of the component that has been added. Then, the electronic device may display a prompt message to prompt the user whether to continue adding the component. Afterwards, the electronic device determines whether to add the component according to the user operation.

[0277] For example, after the electronic device obtains the component animation display event, the component animation to be displayed may overlap with other component animations. Then, the electronic device may display a prompt message to prompt the user whether to continue to display the component animation. After that, the electronic device determines whether to display the component animation according to the user operation.

[0278] In this way, the electronic device can flexibly display component animations in a variety of ways to avoid overlapping of component animations that affect the display effects of component animations.

[0279] In some embodiments, in response to the display of the component effect, the electronic device may adjust the transparency of the component. For example, the electronic device may adjust the transparency of the component to 100%, or may adjust the transparency of the component to be greater than a preset transparency threshold. In this way, the display of a relatively transparent component will not affect the display of the component dynamic effect, and provide the user with a better component effect display experience. For example, the electronic device adjusts the transparency of all subcomponents in the target component except the subcomponent used to display the component effect to 100%.

[0280] In some embodiments, component animation supports user-defined settings to meet the user's personalized usage needs.

[0281] For example, Fig.10 As shown in (a), during the card adding process, the electronic device displays a card preview window 101 to facilitate the user to confirm the relevant information of the added card. In response to the user's operation on the setting control 102, as shown in FIG. Fig.10 As shown in (b), the electronic device may display a card content editing window 103, in which the user may choose to edit the card display content, card animation content, etc. For example, the card to be added is a game card, and the game application corresponding to the game card supports personalized usage content such as skins, characters, and equipment. Then, the electronic device may display an entry for editing the personalized usage content in the card content editing window 103, and the user may choose to edit the personalized usage content according to his or her own needs. Subsequently, in response to the user's selection in the card content editing window 103, Fig.10 The operation in the card preview window 101 shown in (a) is as follows: Fig.10 As shown in (c), the electronic device can add a game card 104. The display content of the game card 104 matches the personalized usage content edited by the user. In addition, when the animation of the game card 104 is subsequently triggered, the display content of the animation also matches the personalized usage content edited by the user. For example, the display content on the game card 104 includes the character selected by the user, and the animation includes the animation of the character selected by the user. Optionally, in response to the user's operation on the game card 104, the electronic device can display a menu bar 105. In response to the user's operation on the card content editing control 106 in the menu bar 105, the electronic device can start the game application and display the following. Fig.10 The card content editing interface in the game application shown in (d) is a card content editing interface in which users can edit personalized usage content.

[0282] It should be understood that in response to the user's operation on the setting control 102 in the card preview window 101, the electronic device can also directly start the game application and display the following information: Fig.10The card content editing interface in the game application shown in (d) is used to receive the user's editing of the personalized content and enrich the display of the game card animation. In addition, the game application also provides a card content editing entrance. In response to the user's operation in the game application, the electronic device can also switch to display the card content editing interface to receive the user's editing of the personalized content.

[0283] In this way, the electronic device displays the component animation required by the user according to the user's operation, providing the user with an animation display experience that better meets the personalized needs, thereby enriching the user's visual experience and improving the user's usage experience.

[0284] Optionally, the application corresponding to the component is internally configured with corresponding algorithm logic to support the updating of the display content of the component animation. In this way, the electronic device can also provide the user with personalized display effects without the user having to set it himself, thus simplifying the user operation.

[0285] Exemplarily, the electronic device displays a game card, and in response to a component animation display event, the electronic device can obtain the account logged into the corresponding game application through the game application corresponding to the game card, and obtain the game character information used by the account in the game application. Then, the electronic device can obtain the component animation associated with the game character. Optionally, the game character information includes, for example, skin, role, equipment, etc. In this way, as the skin, role, equipment, etc. change, the electronic device can display the corresponding different game card animations.

[0286] In this way, electronic devices can provide users with a more vivid and personalized component motion display experience.

[0287] The following takes the display of card animation on the desktop as an example to introduce the interaction process of each module during the display of component animation.

[0288] Fig.11 This is a flow chart of a component effect display method provided in an embodiment of the present application. It should be noted that this method does not Fig.11 The specific order described below is a limitation, and it should be understood that in other embodiments, the order of some steps in the method can be interchanged according to actual needs, or some steps can be omitted or deleted. The method includes the following steps:

[0289] S1101. The component provider detects a component animation display event and obtains animation information.

[0290] The component provider is, for example, an application corresponding to the target component of the component animation to be displayed. For example, if the target component is a weather card, the component provider is a weather application corresponding to the weather card.

[0291] In some embodiments, when the component provider determines that a preset trigger condition is met, it can be determined that a component animation display event is detected. Optionally, the preset trigger condition includes, for example, detecting a user preset operation, reaching a preset time, reaching a preset location, obtaining weather information, etc. For example, the component provider obtains weather information, determines that a component animation display event is detected, and needs to display a component animation that matches the current weather information.

[0292] Optionally, component animation display events can be understood as events that actively trigger component animation display and events that passively trigger component animation display. For example, events that actively trigger component animation display include user operations detected by electronic devices, triggering component animation display events. Events that passively trigger component animation display include triggering events such as timing mechanisms, fixed-point mechanisms, and content refresh display requirements. Optionally, content refresh display requirements include, for example, obtaining changes in weather information, and the need to refresh and display weather animations.

[0293] Optionally, the user preset operation includes, for example, a touch operation, gesture operation, voice operation, visual operation, etc. on the display screen. The component provider can obtain sensor data, and can also obtain weather information, determine whether to arrive at a preset time or place, etc. according to the sensor data.

[0294] In some embodiments, the motion effect information includes, for example, size information and position information of the target component, motion effect display content, resource location information, etc.

[0295] S1102: The component provider requests the component user to obtain page information.

[0296] Optionally, the component user is, for example, a desktop, a negative one screen, etc. For example, a card is displayed on the desktop, the desktop is the component user, and the application corresponding to the card is the component provider.

[0297] Optionally, the page information includes, for example, display interface size information, information of other components on the display interface, etc.

[0298] In some embodiments, after detecting a component animation display event, the component provider requests the component user to obtain page information in order to obtain the display area of ​​the subsequent component animation. That is, the embodiment of the present application does not limit the order in which the component provider obtains the animation information and the page information.

[0299] S1103. The component provider obtains the dynamic effect display information according to the page information and the dynamic effect information.

[0300] In some embodiments, after obtaining page information and motion effect information, the component provider can obtain motion effect display information based on the page information and motion effect information, and the motion effect display information indicates the display area, display position, display content and other information of the component motion effect.

[0301] For example, Figure 7 In the scene shown, a weather card is displayed on the desktop. In response to the obtained weather information that it is raining, the desktop is triggered to obtain page information and dynamic effect information. Based on the size information and position information of the display area 1 of the weather card, as well as the size information and position information of other cards displayed on the page, the desktop can obtain the dynamic effect display information of the rain dynamic effect of the weather card, such as the size information and position information of the display area 2, the location information of the rain dynamic effect resource, etc. Among them, the display area 2 is larger than the display area 1, so as to obtain the rain dynamic effect of the overflow card.

[0302] S1104. The component provider sends dynamic effect display information to the component rendering service.

[0303] In some embodiments, after obtaining the motion effect display information, the component provider may send the motion effect display information to the rendering service to trigger the rendering service to render the component motion effect.

[0304] In some examples, the component provider can also implement dynamic rendering. That is, the component provider can also implement the steps performed by the component rendering service in this process, which will not be described in detail below. Optionally, the electronic device instructs the component rendering service to perform the rendering task or instructs the component provider to perform the rendering task according to the preconfigured rules.

[0305] S1105. The component rendering service renders component animation and obtains rendering data.

[0306] In some embodiments, after receiving the motion effect display information, the component rendering service may obtain the motion effect resource according to the resource location information included therein, so as to perform component motion effect rendering and obtain rendering data.

[0307] Optionally, the resources include, for example, local resources, cloud resources, etc. In the case where the resources are cloud resources, the component provider can download the cloud resources and store them locally. The resource location information obtained by the component rendering service includes the storage location of the cloud resource after downloading, so that the rendering service can obtain all resources according to the resource location information to complete the rendering of the component animation.

[0308] Optionally, the component animation may be a two-dimensional animation or a three-dimensional animation. The resources include, for example, two-dimensional animation display resources and / or three-dimensional animation display resources.

[0309] S1106. The component rendering service sends rendering data to the component user.

[0310] In some embodiments, after obtaining the rendering data, the component rendering service sends the rendering data to the component user to trigger the component user to display the component animation. Correspondingly, the component user receives the rendering data sent by the component rendering service.

[0311] S1107. The component user adjusts the component bearing size and Z-axis height to display component motion effects.

[0312] In some embodiments, the component user can obtain the component animation display requirements when the component provider requests to obtain page information. Then, after obtaining the rendering data, the component user can adjust the component bearing size and Z-axis height of the target component according to the rendering data to display the component animation. Among them, the component bearing size is, for example, the size of the display area 2 used to display the component animation. Adjust the Z-axis height of the subcomponent corresponding to the component animation to be higher than the Z-axis height of other subcomponents, so that the component animation can be displayed over other subcomponents, which can provide users with an overflow display effect of the component animation.

[0313] In this way, by adjusting the display area size and Z-axis height of the component animation corresponding to the target component, the overflow display effect of the component animation is obtained, thereby enriching the user's visual experience and enhancing the interactivity of the component animation.

[0314] In some embodiments, when there are other components around the target component, the component animation of the target component can use the outer edge or the vicinity of the outer edge of other components as the edge of the display area 2 of the component animation. Alternatively, the component animation of the target component can also cover other components. Alternatively, the target component can also display component animation together with other components, thereby achieving the display effect of linkage animation and providing users with a better visual experience. Optionally, during the display of linkage animation, the target component and / or other components present the display effect of overflow animation.

[0315] For example, Fig.12 As shown in (a), the electronic device displays multiple cards, wherein the electronic device obtains the component dynamic effect display event of card 31, and obtains the size information and position information of the display area 1 of card 31. Afterwards, the electronic device can obtain the display area 2 of the component dynamic effect according to the page information, such as Fig.12 The display area 311 shown in (b) of FIG. Among them, the display area 311 partially covers the cards around the card 311, such as card 32, card 33, and card 34. Then, if the electronic device displays component animation on the display area 311, the component animation can achieve the display effect of overflowing the card 31. In addition, other cards covered by the display area 311 can also display joint animation to present an interactive display effect. Among them, as Fig.12As shown in (c), the electronic device adjusts the Z-axis height of the display area 311 to facilitate the subsequent top-level display of component animations visible to the user.

[0316] As another example, Fig.13 As shown in (a), the electronic device displays a card 131, and in response to a component animation display event, the electronic device displays a component animation in a display area 1 of the card 131. Fig.13 As shown in (b), in response to a component animation display event, the electronic device displays overflow animations (such as the eye animations displayed on card 131 and the lightning animations that exceed the display area 1) according to the page information, and also displays corresponding animations on other components around card 131, presenting an interactive effect and further enhancing the fun of the component animation display.

[0317] In this way, the electronic device presents linkage animation in the vicinity of the target component and other components around the target component according to the page information, thereby increasing the fun of the component animation display and improving the user experience.

[0318] In some examples, the electronic device realizes the display of linkage animation effects through the component provider corresponding to the target component.

[0319] For example, Fig.14 As shown, the above step S1107 also includes step S1401. Among them, in the above step S1103, the component provider can obtain the information of the components around the target component according to the page information, and obtain the display area 2 of the component animation according to the animation information, and the display area 2 can cover the display area of ​​other components. Subsequently, in the above step S1107, the component user adjusts the component bearing size and Z-axis height, so that the component user can make other components present linkage animation. Among them, the bearing size includes the display area of ​​other components, and the Z-axis height of the component corresponding to the component animation is adjusted to be higher than the Z-axis height of other components, so that the component animation can be displayed over other components. This can provide users with overflow display of component animation and linkage display with other components.

[0320] In this way, electronic devices can display linkage effects through component providers without the participation of other components.

[0321] In other examples, when the electronic device determines that it needs to display linkage effects, it can obtain the components involved in the linkage effects. Among them, the components involved in the linkage effects include the component provider corresponding to the target component that needs to display component effects. The component provider corresponding to the target component can send a linkage effect indication to the component providers of other components involved in the linkage effects. The linkage effect indication is used to instruct other components to display linkage effects. In this way, through the cooperation of the target component and other components, the electronic device can display linkage effects.

[0322] For example, Fig.15 As shown, in the above step S1103, the component provider can obtain the information of the components around the target component according to the page information, and obtain the display requirements of the linkage dynamic effect according to the dynamic effect information. Then, the component provider not only obtains the dynamic effect display information of the component dynamic effect that needs to be triggered and displayed, and sends the dynamic effect display information to the rendering service, but also sends the linkage effect indication to the component providers of other components that need to display the linkage dynamic effect (such as step S1501). Correspondingly, as shown in step S1502, after receiving the linkage effect indication, the component providers of other components can obtain the linkage dynamic effect display information in response to the indication. Among them, the linkage dynamic effect display information includes, for example, the resource location information, display area size information and location information of the corresponding linkage dynamic effect. Afterwards, the component providers of other components can send the linkage dynamic effect display information to the component rendering service to trigger the component rendering service to render the linkage dynamic effect. Then, the rendering data obtained by the component rendering service includes the rendering data indicated by the component provider of the target component, and the rendering data indicated by the component providers of other components. Subsequently, the component user can display linkage effects based on the acquired rendering data.

[0323] In this way, the electronic device cooperates with the component provider of the target component and the component providers of other components to realize the display of linkage dynamic effects.

[0324] In some embodiments, the electronic device may also generate display content of component motion effects by means of artificial intelligence generative content (AIGC), thereby presenting a more vivid component motion effect display effect.

[0325] For example, Fig.16 As shown in (a), the electronic device displays a weather card 161, and in response to the weather information indicating heavy rain, determines that a heavy rain dynamic effect needs to be displayed. Then, the electronic device can call the AIGC module to obtain dynamic effect display content. Fig.16 As shown in (b), the electronic device displays the dynamic display content output by the AIGC module, and the dynamic display content can provide better visual effects.

[0326] As another example, when an electronic device displays a game card, the electronic device can obtain the account logged into the corresponding game application, and obtain the game character information used by the account in the game application. Subsequently, the electronic device can obtain the component animation associated with the game character through the interaction between the AIGC module and the server. Optionally, the game character information includes, for example, skins, roles, equipment, etc. In this way, as the skins, roles, equipment, etc. change, the electronic device can display the corresponding different game card animations. In this way, the electronic device can provide users with a more vivid and personalized component animation display experience.

[0327] Optionally, Fig.17 A flowchart of another component effect display method provided in an embodiment of the present application. Fig.17 As shown, the process includes the following steps:

[0328] S1701. The component provider detects a component animation display event and obtains animation information.

[0329] S1702: The component provider requests the component user to obtain page information.

[0330] Optionally, the contents of step S1701-step S1702 may refer to the relevant contents of the above-mentioned step S1101-step S1102, which will not be repeated here.

[0331] S1703. The component provider sends the animation information and page information to the artificial intelligence generated content (AIGC) module.

[0332] In some embodiments, after obtaining the motion effect information and the page information, the component provider may send the motion effect information and the page information to the AIGC module. Correspondingly, the AIGC module receives the motion effect information and the page information sent by the component provider.

[0333] S1704. The AIGC module obtains the dynamic effect display content according to the dynamic effect information and the page information.

[0334] In some embodiments, the AIGC module constructs component animation of overflow effect according to the acquired animation information and page information, and acquires corresponding animation display content, wherein the animation display content includes resource information for displaying component animation of overflow effect.

[0335] For example, the AIGC module obtains the fireworks animation corresponding to the target component that needs to be displayed based on the animation information. In addition, the AIGC module obtains that there are three other components near the current target component based on the page information. Then, the AIGC module can generate fireworks animations that need to be displayed for the target component, as well as fireworks animations that need to be displayed for the other three components. Optionally, the AIGC module can obtain different or the same fireworks effects that need to be displayed for different components based on the display effects. The animation display content output by the AIGC module includes all fireworks animation content.

[0336] S1705. The AIGC module sends the dynamic effect display content to the component provider.

[0337] In some embodiments, after acquiring the dynamic effect display content, the AIGC module may send the dynamic effect display content to the component provider. Correspondingly, the component provider receives the dynamic effect display content sent by the AIGC module.

[0338] S1706. The component provider obtains the dynamic effect display information according to the page information and the dynamic effect display content.

[0339] In some embodiments, the component provider can obtain the size information and position information of the display areas corresponding to the target component and other components near the target component based on the page information, and then obtain the display area size and position information of the animation of each component. Then, the component provider can obtain the animation display information by combining the display area size and position information of the component animation and the animation display content.

[0340] For example, in the fireworks animation scene exemplified in step S1704 above, the component provider obtains animation display information based on the display content and page information of the fireworks animation that each component needs to display, such as the fireworks animation display content and display area information that each component needs to display, and the display area information includes size information and position information.

[0341] S1707. The component provider sends dynamic effect display information to the component rendering service.

[0342] S1708. The component rendering service renders component animation and obtains rendering data.

[0343] S1709. The component rendering service sends rendering data to the component user.

[0344] S1710. The component user adjusts the component bearing size and Z-axis height to display the component animation.

[0345] In some embodiments, after obtaining the dynamic effect display information, the component provider sends the dynamic effect display information to the component rendering service to trigger the component rendering service to render the component dynamic effect and obtain rendering data. Subsequently, the component user can obtain the rendering data and display the component dynamic effect by adjusting the bearing size and Z-axis height.

[0346] Optionally, for other contents of step S1707 to step S1710, reference may be made to the relevant contents of the above-mentioned step S1104 to step S1107, which will not be repeated here.

[0347] In this way, electronic devices can obtain richer component motion display content through the AIGC module, providing users with a more vivid motion display experience that meets personalized needs.

[0348] In some embodiments, the electronic device realizes the display of component animation based on local resources and / or cloud resources. Optionally, when installing the component provider, the electronic device can download an installation package, and the downloaded installation package can include local resources of component animation.

[0349] The following is an introduction to the local resources related to component animations in combination with the component display process.

[0350] Optionally, Fig.18 A schematic diagram of a target component display process provided by an embodiment of the present application. Fig.18 As shown, the process includes the following steps:

[0351] S1801: The component provider detects a user's instruction to add a component.

[0352] Optionally, the operation of adding a component indicated by the user includes, for example, an operation on a preset control, a gesture operation on an application icon, etc.

[0353] For example, when the electronic device detects a user's swipe-up operation on an application icon, it may display a temporary card corresponding to the application icon. In response to the user's operation on a preset control on the temporary card, it may be determined that the user instructs to add a fixed card on the desktop. That is, the component provider corresponding to the application icon detects the user's operation of instructing to add a component.

[0354] S1802: The component provider requests the package management service to obtain component data.

[0355] For example, Figure 3 As shown, the package management service in the application framework layer is used to manage the installation packages of each application in the application layer. Among them, the component provider is the application in the application layer, and the package management service can be used to manage the installation packages of the component provider.

[0356] In some embodiments, in response to the user indicating the operation of adding a component, the component provider requests the package management service to obtain component data. Fig.19 As shown, the component data corresponding to the direction provided by the component includes, for example, component-related code and resources. Among them, the component-related code is used to call resources to realize component display. Resources include, for example, component configuration files and component resources. Among them, the component configuration file includes, for example, the size information of the component. Component resources include, for example, display resources, engine-loadable resources, and other resources. Among them, display resources include, for example, text resources, image resources, and corresponding model resources that need to be displayed on the component. Engine-loadable resources are used to support component rendering, maintain the processing logic of display resources, etc. Other resources may also include, for example, some video resources.

[0357] Optionally, the component data in the installation package of the component provider maintained by the package management service can be used to support subsequent component animation display. For example, the component configuration file can also include the size information and position information of the display area of ​​the component animation. The display resources of the component resources can also include model resources for achieving three-dimensional display effects. The engine loadable resources can also be used to support the rendering and processing logic of three-dimensional models. Referring to the above-mentioned interaction process, in the above-mentioned step S1101, the component provider responds to the component animation display event and can obtain the animation information through interaction with the package management service, and the animation information includes the component data. Alternatively, the component provider has already obtained the component data in the current display component process (such as step S1802). Then, in the above-mentioned step S1101, the component provider responds to the component animation display event and can directly obtain the component data, and obtain the animation information based on the component data.

[0358] S1803. The component provider sends a component adding instruction to the component user.

[0359] In some embodiments, after obtaining component data, the component provider may send a component adding instruction to the component user, where the component adding instruction is used to instruct the component user to add the component to realize the display of the component.

[0360] Exemplarily, in response to a user's instruction to add a component, the component provider can obtain the display position of the added component, which corresponds to the component user. For example, the electronic device detects the user's operation on the application icon displayed on the desktop and determines that the user instructs to add a card. Then, the electronic device can determine that the component provider is the application corresponding to the application icon, and the component user is the desktop. After obtaining the component data, the component provider can instruct the desktop to add a card.

[0361] S1804. The component user sends a component usage relationship adding instruction to the component management service.

[0362] In some embodiments, the component user determines that a component needs to be added in response to the component adding instruction. Then, the component user sends a component usage relationship adding instruction to the component management service. Optionally, the component usage relationship adding instruction carries the identifier of the component provider. Accordingly, the component management service receives the component usage relationship adding instruction sent by the component user.

[0363] S1805. The component management service sends a component rendering instruction to the component rendering service.

[0364] Optionally, the component management service is used to manage the mapping relationship between the component provider and the component user corresponding to the component. For example, the component provider can query the component management service to find out where the components provided by itself are displayed.

[0365] In some embodiments, after establishing a mapping relationship between a component provider and a component user corresponding to a component to be displayed, the component management service may send a rendering instruction to the component rendering service to instruct the component rendering service to render the component. Optionally, in response to the component rendering instruction, the component rendering service may request the component provider to obtain component data.

[0366] Optionally, the component provider may also send a component rendering instruction to the component rendering service, and the component management service does not need to send a component rendering instruction to the component rendering service. Optionally, the component rendering instruction sent by the component provider to the component rendering service carries component data. For example, the component provider sends a component rendering instruction to the component rendering service after (or before) sending a component usage relationship addition instruction to the component management service.

[0367] S1806. The component rendering service renders the component.

[0368] In some embodiments, in response to a component rendering instruction, a component rendering service performs component rendering according to component data and obtains rendering data.

[0369] S1807. The component rendering service sends a component display instruction to the component user.

[0370] In some embodiments, after completing the component rendering, the component rendering service sends a component display instruction to the component user, wherein the component display instruction carries the rendering data. Then, in response to the component display instruction, the component user may display the component according to the rendering data.

[0371] In this way, the component provider realizes the display of the component through interaction with the component user and obtains the component data. Then, based on the component data, the component animation effect is displayed.

[0372] In some embodiments, the electronic device displays component animations according to preset rules. Optionally, the preset rules include, for example, displaying component animations for a long time after the component is displayed, displaying component animations for a long time after the component animation is triggered, and stopping displaying component animations after a preset time. Among them, the electronic device presets the time for displaying component animations to avoid displaying component animations for too long and increasing power consumption. In addition, it prevents component animations triggered by some applications from covering other components for a long time and affecting the display of other components.

[0373] For example, in response to a user operation, the electronic device adds a component on the desktop. After the component is added, the electronic device starts to display the dynamic effect of the component.

[0374] For another example, after adding a component to the desktop, the electronic device starts to display the component animation. Later, in response to the user's page turning operation, the component is no longer displayed on the interface after the page turning, and the electronic device can stop displaying the component animation corresponding to the component.

[0375] For another example, the component displays a game card, and in response to a user creating a game character, the electronic device begins to display motion effects corresponding to the game character on the game card.

[0376] For another example, the electronic device displays a clock card. In response to a ringing event, the electronic device displays a corresponding alarm clock effect on the alarm clock card. Subsequently, after a preset time or according to a user operation, the alarm clock event stops, and the electronic device can stop displaying the alarm clock effect.

[0377] In this way, the electronic device displays component animations in an orderly manner, which satisfies the user's visual experience needs for the component animations while preventing the component animations from affecting the user's usage.

[0378] In some embodiments, the electronic device maintains the display of component animations, which requires resources, generates power consumption and heat, and may affect the realization of other functions of the electronic device. Then, the electronic device can measure the resource occupation, power consumption and heat of the component animations, and if certain conditions are met, it can be determined that the current scene is abnormal, and the display of the component animations can be adjusted to release resources, reduce power consumption and heat generation.

[0379] The following article introduces the adjustment process of component animation in various abnormal scenarios.

[0380] In some examples, Fig. 20 This section describes how electronic devices can adjust the display of component animations through measures 1 or 2 in scenarios where component animations that consume a lot of resources are displayed abnormally. Fig. 20 As shown, the process includes the following steps:

[0381] S2001. The component management service sends a resource occupancy information acquisition request to the resource management service.

[0382] S2002. The resource management service sends resource occupancy information to the component management service.

[0383] In some embodiments, as described in step S1804 above, after adding a component, the component management service may create a mapping relationship between the component user and the component provider, and manage the mapping relationship. Based on the management of the mapping relationship, when the component animation is displayed, the component user may notify the component management service of the component animation display event. Then, in response to the addition of the component, or in response to the display of the component animation, the component management service may register a resource occupancy information acquisition request with the resource management service.

[0384] Accordingly, in response to the resource occupancy information acquisition request, the resource management service sends the resource occupancy information to the component management service according to a preset period. Alternatively, when the component occupies resources exceeding a certain threshold, the resource management service actively sends the resource occupancy information to the component management service.

[0385] Optionally, the resource occupancy information includes, for example, the occupancy of processor (such as CPU / GPU) resources, the occupancy of memory resources, the occupancy ratio of each related process, etc. during the component animation display process.

[0386] S2003. The component management service determines that the processor resource usage exceeds threshold 1; or determines that the memory resource usage exceeds threshold 2.

[0387] S2004. The component management service instructs the resource management service to reduce the quality of the dynamic effect display to reduce resource usage.

[0388] In some embodiments, the component management service obtains, based on the resource usage information, whether the resource usage caused by the component animation display exceeds a threshold, and may determine that the display of the component animation needs to be adjusted to reduce resource usage.

[0389] Optionally, the component management service releases some resources by reducing the display quality of component animations and reducing resource usage.

[0390] Optionally, the component management service instructs the component provider to reduce the component rendering frame rate, resolution, image quality, special effects, etc., so as to reduce the quality of component animation. In this way, the resource management service can obtain that the resources occupied by the component animation display process are reduced.

[0391] For example, Figure 7In the heavy rain dynamic effect display scene shown, the electronic device obtains the resource occupancy information of the current heavy rain dynamic effect, determines that the processor resource occupancy exceeds threshold 1 or the memory resource exceeds threshold 2, and can determine to adopt measure 1 to reduce the resource occupancy of the heavy rain dynamic effect by reducing the display quality of the heavy rain dynamic effect. For example, the electronic device reduces the display quality of the heavy rain dynamic effect by reducing the number of raindrops. For another example, the electronic device reduces the display quality of the heavy rain dynamic effect by means of frame insertion, image compression, etc.

[0392] In this way, when the display of component animations causes a large amount of resources to be occupied, the electronic device can release some resources by reducing the display quality of the component animations, thereby avoiding excessive resource occupation affecting the realization of other functions.

[0393] S2005. Component Management Service determines that system resources are insufficient.

[0394] S2006. The component management service instructs the resource management service to release component resources or freeze components.

[0395] In some embodiments, the component management service obtains resource occupancy according to the resource occupancy information. When it is determined that the current system resources are insufficient, it may be determined that the display of the component animation needs to be adjusted to reduce resource occupancy. Optionally, the system resources include, for example, system memory resources.

[0396] Optionally, the component management service may instruct the resource management service to release component resources, or freeze components (such as measure 2) to obtain more system resources. Avoid abnormal operation of electronic devices due to insufficient system resources. Optionally, releasing component resources includes, for example, releasing memory resources occupied by component animations. Optionally, in the case of insufficient system resources, the electronic device may also freeze the component while releasing the component resources.

[0397] For example, during the component animation display process, the component resources are stored in the memory to support the rapid response of the component animation. Then, when the system memory resources are insufficient, the component management service can instruct the resource management service to release the component animation display resources in the memory to the disk for storage to reduce the occupation of the system memory resources.

[0398] As another example, during the display of component animation, if the component management service determines that the system resources are insufficient, it can instruct the component user (or component provider) to freeze the component. Optionally, component freezing includes, for example, freezing the component animation, such as keeping a frame of image showing the component animation at the moment of freezing, and no longer updating the display of the component animation. Alternatively, component freezing includes, for example, no longer displaying the component animation. In this way, after the component is frozen, no content that needs to occupy system memory resources will be generated, thereby avoiding more occupation of system memory resources.

[0399] In this way, when the component animation display causes a large amount of resources to be occupied, the electronic device can release the component resources or freeze the component to avoid excessive resource occupation affecting the realization of other functions.

[0400] In other examples, Fig.21 This section describes how electronic devices can use measure 3 to adjust the display of component animations in scenarios where the animations of components with high power consumption are abnormal. Fig.21 As shown, the process includes the following steps:

[0401] S2101. The component management service sends a request for obtaining power consumption information to the power consumption management service.

[0402] S2102. The power consumption management service sends power consumption information to the component management service.

[0403] In some embodiments, as described in step S1804 above, after adding a component, the component management service may create a mapping relationship between the component user and the component provider, and manage the mapping relationship. Based on the management of the mapping relationship, when the component animation is displayed, the component user may notify the component management service of the component animation display event. Then, in response to the addition of the component, or in response to the display of the component animation, the component management service may register a power consumption information acquisition request with the power consumption management service.

[0404] Accordingly, in response to the power consumption information acquisition request, the power consumption management service sends the power consumption information to the component management service according to a preset period. Alternatively, when the power consumption exceeds a certain threshold, the power consumption management service actively sends the power consumption information to the component management service.

[0405] Optionally, the power consumption information includes, for example, power consumption of component animation display.

[0406] S2103 . The component management service determines that the power consumption exceeds threshold 3 .

[0407] S2104. The component management service freezes the component.

[0408] In some embodiments, the component management service obtains the power consumption generated during the component animation display process according to the power consumption information. When the power consumption exceeds the threshold 3, the component management service determines that the display of the component animation needs to be adjusted to reduce power consumption.

[0409] Optionally, the component management service can reduce the power consumption generated by displaying component animation by freezing the component (such as measure 3). Alternatively, the component management service can also directly instruct the component user (or component provider) to stop displaying component animation.

[0410] In this way, when the dynamic display of components causes more power consumption, the electronic device can reduce power consumption by freezing the components to avoid affecting the realization of other functions.

[0411] In some other examples, Fig. 22 This section describes how electronic devices can use measure 4 to adjust the display of component animations in scenarios where component animations with high heat levels are abnormal. Fig. 22 As shown, the process includes the following steps:

[0412] S2201. The component management service sends a thermal information acquisition request to the thermal management service.

[0413] S2202. The thermal management service sends thermal information to the component management service.

[0414] In some embodiments, as described in step S1804 above, after adding a component, the component management service may create a mapping relationship between the component user and the component provider, and manage the mapping relationship. Based on the management of the mapping relationship, when the component animation is displayed, the component user may notify the component management service of the component animation display event. Then, in response to the addition of the component, or in response to the display of the component animation, the component management service may register a request to obtain thermal information with the thermal management service.

[0415] Accordingly, in response to the heat information acquisition request, the thermal management service sends the heat information to the component management service according to a preset period. Alternatively, when the heat generated by the component animation exceeds a certain threshold, the thermal management service actively sends the heat information to the component management service.

[0416] Optionally, the thermal information includes, for example, changes in device temperature during component animation display.

[0417] S2203: The component management service determines that the device temperature exceeds threshold 4.

[0418] S2204: The component management service determines whether to freeze the component based on resource usage.

[0419] In some embodiments, the component management service obtains the device temperature of the electronic device during the display of the component animation according to the heat information. When the device temperature exceeds the threshold 4, the component management service may determine that the current device temperature is high and it may be necessary to adjust the function of the device, such as determining whether the display of the component animation needs to be adjusted.

[0420] Optionally, in the case where the resources occupied by the component animation display are high, it can be determined that the resource occupation may be the cause of the increase in device temperature. Therefore, the component management service can reduce the heat generated by displaying the component animation by freezing the component (such as measure 4) to reduce the device temperature. Alternatively, the component management service can also directly instruct the component user (or component provider) to stop displaying the component animation.

[0421] In this way, when the dynamic display of components causes a lot of heat to be generated, the electronic device can reduce the heat by freezing the components, thereby preventing the device temperature from being too high and affecting the realization of other functions or affecting the service life of the device.

[0422] In some embodiments, in response to the user looking at the component, the electronic device can activate the component animation. In this way, when the user focuses on the component, the component animation is displayed to avoid the above abnormal scenario.

[0423] For example, in response to an event in which a user gazes at a component, the electronic device begins to display component animation.

[0424] For another example, after a component is frozen, in response to an event in which the user gazes at the component, the electronic device restarts displaying the component animation.

[0425] For another example, in response to an event in which a user gazes at a component, the electronic device begins to display a component animation with an overflow effect.

[0426] For example, Fig.23 As shown, the electronic device displays a weather card 231. In response to the user's gaze on the weather card 231, the electronic device activates an overflowing heavy rain animation and begins to display a heavy rain animation with an overflowing effect in the display area 2 corresponding to the weather card 231.

[0427] Optionally, Fig.24 A schematic diagram of another component effect display method flow is provided for an embodiment of the present application. Fig.24 As shown, the process includes the following steps:

[0428] S2401: The component user detects a user gaze event and obtains a corresponding target component.

[0429] In some embodiments, the electronic device collects a user's facial image through a camera, and based on the facial image, it can be determined whether the user is looking at the electronic device display screen. In the case where the user is looking at the electronic device display screen, it can be determined that a user gaze event is detected. The electronic device can send the user gaze event to the component user.

[0430] In some embodiments, the electronic device may also determine the user's gaze position through a preset algorithm, thereby determining the component corresponding to the user's gaze position, and determining the component as the target component. After obtaining the target component, the electronic device determines that a user gaze event is detected, and sends the user gaze event to the component user.

[0431] S2402: When the target component is in an active state, the component uses the direction component provider to send a user gaze event.

[0432] S2403. In response to the user gaze event, the component provider obtains the corresponding animation effect.

[0433] Optionally, the target component activity state indicates that the target component is displaying a component animation.

[0434] In some embodiments, the component user can obtain the state of the target component, and when the target component is active, the user gaze event can be sent to the component provider to trigger the component provider to provide corresponding animations. For example, some component providers configure the gaze control function, and in response to the user's gaze, the target component can display corresponding component animations to increase interactivity.

[0435] In some embodiments, after the component user detects that the user is looking at the display screen, the component user may send a corresponding user gaze event to the component user. Subsequently, the component user obtains the user's gaze duration, and after the user's gaze on the target component exceeds a preset duration, determines that the user indicates to activate the corresponding animation. In this case, the component provider then obtains the corresponding animation.

[0436] In this way, when the target component is in an active state, in response to the user's gaze, the electronic device can instruct the target component to display a corresponding animation to increase the interactivity of the component animation.

[0437] S2404: When the target component is in an inactive state, the component uses a direction component management service to send an activation instruction.

[0438] S2405. The component management service activates the target component.

[0439] Optionally, the target component activity state indicates that the target component does not display component animation. For example, the target component does not start to display component animation. Or, the target component is frozen.

[0440] In some embodiments, the component user can obtain the state of the target component, and when the target component is in an inactive state, in response to a user gaze event, can send the activation instruction to the component management service to activate the target component. Optionally, the activation target component instruction triggers display or continues to display the component animation.

[0441] For example, in the above Figure 20-22 In the relevant abnormal scenario, the component management service freezes the target component. In response to the user looking at the target component, the component management service can activate the target component. In this way, when the user is not paying attention to the target component, the component management service can freeze the target component to avoid abnormal scenarios caused by the display of component animation. When the user pays attention to the target component, the component management service can activate the component animation to provide users with a better visual experience and increase interactivity.

[0442] In this way, when the target component is in an inactive state, in response to the user's gaze, the electronic device can instruct the target component to activate to display the corresponding animation, thereby increasing the interactivity of the component animation.

[0443] The above introduces various implementation methods of component effect display through multiple embodiments. The following uses the target component as a game card, the component provider as a game application, and the component user as a desktop as an example to exemplify the component effect display.

[0444] In some embodiments, the card state includes an unactivated state, an activated state, and a paused state. Optionally, the unactivated state can also be described as a non-activated state.

[0445] Optionally, different card states can be switched between each other during the process of displaying cards by the electronic device. For example, in response to a user operation, a game card is switched from an inactive state to an active state; or, in response to a user operation, a game card is switched from an active state to a paused state.

[0446] Optionally, when the game card is in an unactivated state or a paused state, the display effect of the game card will not overflow, such as the display area 2 corresponding to the display effect is smaller than or equal to the display area 1 of the game card. When the game card is in an activated state, the display effect of the game card may overflow, such as the display area 2 corresponding to the display effect is larger than the display area 1 of the game card.

[0447] For example, Fig.25 As shown in (a), during the game card adding process, the electronic device displays a card preview page. As shown in reference numeral 251, the card preview page displays a graphic description of the game card added later. In response to the operation of adding to desktop control 252, the electronic device triggers the game card to be added to the desktop. For example, Fig.25 As shown in (b), the electronic device displays a game card 253 on the desktop, and the game card 253 is in an unactivated state. Optionally, the display content on the unactivated game card is the same as the card preview content displayed on the card preview page during the game card adding process.

[0448] Afterwards, while displaying the inactive game card 253, the electronic device detects the user's operation on the game card 253, triggering the game card 253 to switch to the active state. Fig.26 As shown, in response to any area in the card being triggered, the card state is switched from an unactivated state to an activated state, and the display effect of the activated state card may overflow.

[0449] Optionally, based on the above Figure 4 When the game card 253 is in an inactive state, the electronic device performs component rendering through the component rendering service to display the game card 253. Fig.25 The game card 253 in the inactive state shown in (b) is shown in FIG. 2. Afterwards, the electronic device determines that the game card 253 needs to be switched to the active state, and then the electronic device calls the UIExtension process through the game application (such as the component provider) to render the component and obtain the UIExtension component, which is used to display the overflow animation of the component. For example, Fig.25 As shown in (c), the electronic device displays the activated game card 253 through the UIExtension component. The activated game card 253 can display an overflow animation, such as the display area 2 of the overflow animation is larger than the display area 1 of the game card 253.

[0450] Exemplarily, the game card is displayed in a two-sided display mode. The two sides include one side displaying a normal card and one side displaying a UIExtension component. For example, in the card preview stage or when the game card is in an unactivated state, the game card displayed by the electronic device is one side of a normal card. For another example, when the game card is in an activated state, the electronic device displays the game card as one side of a UIExtension component.

[0451] Optionally, the electronic device renders the game screen through the UIExtension process to display the UIExtension component, wherein the UIExtension component covers the ordinary card, thereby achieving an overflow animation effect visible to the user.

[0452] In some examples, when the electronic device is displaying the game card 253 in an activated state, the user can interact with the game card 253 by operating in the display area 1 for displaying the game card 253. Fig.26As shown, the electronic device detects the user's operation outside the display area 1 for displaying the game card 253, triggering the game card 253 to lose focus; or, the electronic device does not detect the user's operation in the display area 1 for displaying the game card 253 within a preset time (such as 10 seconds, 20 seconds, etc.), such as not detecting the interaction trigger between the user and the game card 253. Then, the electronic device can switch the component state of the game card 253 from the activated state to the suspended state.

[0453] Optionally, in response to the game card 253 switching to the pause state, the electronic device obtains a screenshot of the current game screen and hides the UIExtension component, so that the UIExtension process enters the background and pauses rendering. Fig.25 As shown in (d), the electronic device can display the obtained game screen screenshot in the display area 1 of the game card 253 by calling the pause state component. During the process of displaying the game screen screenshot, the game card 253 is in the pause state. Fig.25 As shown in (d), the game card 253 in the paused state does not display the overflow animation, thereby avoiding affecting the user's operation of other components on the desktop.

[0454] In some examples, when the electronic device is displaying the game card 253 in the paused state, if it detects the user's operation on the game card 253, it can trigger the game card 253 to switch back to the activated state. Fig.26 As shown, in response to any area in the card being triggered, the card switches from the paused state to the activated state. It should be understood that the arbitrary area does not include the area where the pre-configured card function is implemented. That is, the switching of the component state does not affect the logical implementation of the original game card. For example, a preset control is displayed on the original game card for playing music. In response to the user's operation of the preset control, the electronic device can play music without switching the component state. In this way, the user's realization of the card function can be satisfied, and the overflow animation can be presented to the user without switching to the activated state when the user does not need to play the game. Among them, the display of the component animation or the switching of the component state does not affect the original logic of the component, which will not be repeated below.

[0455] For example, Fig.25 As shown in (d), when the electronic device is displaying the game card 253 in the paused state, if the electronic device detects the user's operation on the game card 253, the game screen screenshot can be hidden and the UIExtension component can be displayed, so that the user can see the game card 253. Fig.25 The overflow animation shown in (c) of the activated game card 253. After the game card 253 is switched to the activated state, the UIExtension process returns to the foreground to continue rendering the game screen.

[0456] In some examples, the game card can also be switched to an inactive state when it is in an active state or a paused state. For example, in response to the end of the card game process, the electronic device switches the card state of the game card to an inactive state. For example, after the card game process crashes abnormally, the card game process ends, and the game card is switched from an active state or a paused state to an inactive state. For another example, when the game card is in a paused state for a long time, such as more than 10 seconds, 20 seconds, etc., the card game process ends, and the game card is switched from a paused state to an inactive state.

[0457] In this way, the electronic device realizes the two-side display of a game card through the UIExtension process, enriches the card display effect, reduces the difficulty of card development, and increases the universality of the overflow effect display.

[0458] In addition, by switching between different card states, the user's usage habits can be met and the flexibility of interaction can be increased.

[0459] In some embodiments, the UIExtension component rendered by the UIExtension process corresponds to the game function page, thereby realizing an interactive game experience presented to the user through card animation. Optionally, the main area of ​​the game screen in the UIExtension component is adapted to the display area 1 of the game card, so that the user's focus is still on the display area 1 of the game card, thereby standardizing the display overflow effect.

[0460] The game function page is a function page displayed after the game application is started. The display content of the game function page is designed by the game developer. The main area of ​​the game screen in the UIExtension component is used to display the main body of the game screen, which is defined by the game developer.

[0461] Optionally, the UIExtension component implements an overflow display effect, and the UIExtension component can be displayed in full screen to implement a full-screen card overflow dynamic effect display. Optionally, the full-screen card overflow dynamic effect corresponds to a game function page displayed in full screen after the game application is started.

[0462] For example, Fig. 27 As shown, the component provider (such as a game application) renders the UIExtension component through the UIExtension process, and the main area 271 of the game screen in the UIExtension component matches the display area 1 of the game card 253 on the component user (such as a desktop).

[0463] Some examples include Fig.25In the scenario shown, the electronic device detects the user's operation on the game card 253 during the process of displaying the game card 253 in an unactivated state, and sends card information to the UIExtension process, where the card information includes, for example, the size information and rounded corner information of the game card 253. Then, after obtaining the card information, the UIExtension process can render the UIExtension component according to the card information, so that the main area of ​​the game screen in the UIExtension component is adapted to the display area 1 of the game card. For example, according to the pre-configured matching rules, the UIExtension process renders the main area of ​​the game screen to the center of the game function page according to the card information during the rendering process. In this way, later on, after obtaining the UIExtension component, the desktop can overlay the center position on the display area 1 of the game card 253, thereby realizing the overflow dynamic effect display of the game card 253.

[0464] For example, Fig.28 As shown, in response to the user's operation on the game card 253, the game card 253 switches to the activated state, and the desktop overlays the center position of the UIExtension component sent by the UIExtension process onto the display area 1 of the game card 253. In particular, since the UIExtension process has rendered the main area of ​​the game screen according to the card information during the UIExtension component rendering process, the main area of ​​the game screen matches the display area 1 of the game card 253, meeting the requirement of displaying the main body of the game at the corresponding position of the game card 253.

[0465] However, it can be seen that since the UIExtension process renders the main area of ​​the game screen to the center of the game function page by default, when the game card is not displayed in the center area on the desktop, there may be a problem of mismatched dynamic display in areas outside the game card 253.

[0466] For example, Fig.28 As shown, the electronic device displays the game card 253 at the lower part of the desktop, so that the center position of the UIExtension component matches the display area 1 of the game card 253. The UIExtension component is lower as a whole, and part of the displayed content may need to be cropped to achieve overflow animation display. However, cropping the content may affect the overflow animation display effect. Fig.29As shown, the electronic device displays the game card 253 in the upper position of the desktop, so that the center position of the UIExtension component matches the display area 1 of the game card 253. The UIExtension component is overall biased upward, and part of the displayed content may need to be cropped to achieve overflow animation display, but the cropped content may affect the overflow animation display effect.

[0467] In other examples, such as Fig.25 In the scenario shown, the electronic device detects the user's operation on the game card 253 during the process of displaying the game card 253 in an unactivated state, and sends card information to the UIExtension process, the card information including, for example, the position information, size information, and fillet information of the game card 253. Then, after obtaining the card information, the UIExtension process can render the UIExtension component according to the card information, so that the main area of ​​the game screen in the UIExtension component is adapted to the display area 1 of the game card. In addition, the UIExtension process can also adjust the position of the main area of ​​the game screen in the UIExtension component in the game function page according to the position information in the card information, so that the adjusted position matches the position of the game card 253 on the desktop. In this way, after obtaining the UIExtension component, the desktop can directly cover the UIExtension component in full screen on the desktop. In this case, the main area of ​​the game screen in the UIExtension component can also be covered on the display area 1 of the game card 253, realizing the overflow dynamic effect display of the game card 253, thereby achieving a better overflow dynamic effect display effect.

[0468] For example, Fig.30 As shown, in response to the user's operation on the game card 253, the game card 253 switches to an activated state. In response to the position information indicating that the game card 253 is displayed at a lower position on the desktop, the UIExtension process adjusts the main area 271 of the game screen downward to the corresponding position indicated by the position information during the rendering process. In this way, after the desktop obtains the UIExtension component, it directly covers the UIExtension component on the desktop for display, and can also display the main game body in the display area 1 of the original game card 253 to meet the user's operation needs.

[0469] For example, Fig.31As shown, in response to the user's operation on the game card 253, the game card 253 switches to an activated state. In response to the position information indicating that the game card 253 is displayed on the desktop at an upper position, the UIExtension process adjusts the main area 271 of the game screen upward to the corresponding position indicated by the position information during the rendering process. In this way, after the desktop obtains the UIExtension component, it directly covers the UIExtension component on the desktop for display, and can also display the main game body in the display area 1 of the original game card 253 to meet the user's operation needs.

[0470] In this way, by obtaining the position information of the game cards, the UIExtension process can maintain a relatively fixed relationship between the main area of ​​the game screen in the rendered UIExtension component and the electronic device display screen, and the main area of ​​the game screen can be adjusted in time with the position changes of the game cards on the desktop, so that the main area of ​​the game screen is aligned with the display area 1, adaptively presenting a better display effect for the user.

[0471] In some embodiments, for the identification of the main area of ​​the game screen, the electronic device can perform image recognition based on the size information of the rounded rectangle (or other standard shape) of the display area 1 of the game card. Alternatively, the electronic device can also distinguish the main area of ​​the game screen from the overflow part by special-shaped cropping.

[0472] For example, Fig.32 As shown in (a), the display area 1 of the game card that the electronic device needs to display is a rounded rectangle, and the UIExtension process obtains the card information of the display area 1 of the game card. Fig.32 As shown in (b), the electronic device can also crop the main area of ​​the game screen in a special shape according to the game screen and the card information, so as to achieve better subsequent display and interaction effects.

[0473] In some embodiments, after obtaining the display area 1 for displaying the card, the electronic device can obtain the display area 2 for displaying the overflow screen based on the display area 1. Fig.32 Regarding the related content, the display area 2 can be a regular shape or an irregular shape.

[0474] For example, Fig.33 As shown in (a), the electronic device displays a card, and the display area 331 is used to display the card. Fig.33As shown in (b), the card size is enlarged, the display area 332 is obtained, and the subcomponents of the original card are displayed in the display area 332. The display positions of these subcomponents can be adapted to the display area 332, thereby achieving a display effect that overflows the original display area 331. Alternatively, in response to a component dynamic display event, such as Fig.33 As shown in (c), the card size remains unchanged, and some subcomponents move out of the display area 331, so that the expanded display area obtained includes the union of the display area 331 and the rectangular overflow area 333, and the overflow display effect can also be achieved. Among them, the transparency of the display area in the rectangular overflow area 333 except the display area occupied by the overflow subcomponent is greater than a preset threshold (such as 95%), so that occlusion and other problems can be avoided through transparency. Alternatively, in response to a component animation display event, such as Fig.33 As shown in (d), the card size remains unchanged, and some subcomponents are moved out of the display area 331, so that the expanded display area obtained includes the union of the display area 331 and the special-shaped display area 334 adapted to the outer edge of the overflow subcomponent, and the overflow display effect can also be achieved.

[0475] In this way, the display area 2 is flexibly determined in a variety of ways, thereby increasing the flexibility of the overflow effect display.

[0476] Fig.34 This is a flow chart of another component effect display method provided in an embodiment of the present application. It should be noted that this method does not Fig.34 The specific order described below is a limitation, and it should be understood that in other embodiments, the order of some steps in the method can be interchanged according to actual needs, or some steps can be omitted or deleted. The method includes the following steps:

[0477] S3401: The electronic device displays a first screen of a first component, wherein the first screen occupies a first display area on a display interface.

[0478] The first picture includes static picture content and / or dynamic picture content.

[0479] Exemplarily, in response to a user operation, the electronic device determines that a first component (such as a card component, etc.) needs to be added and displayed on the desktop. Then, the electronic device obtains a display area 1 for displaying the first component. Subsequently, the electronic device displays a first screen of the first component in the display area 1, and the first display area occupied by the first screen is part or all of the display area 1.

[0480] S3402: In response to the first trigger event, the electronic device refreshes the first screen to a second screen. The second screen is different from the first screen, the second screen occupies a second display area on the display interface, the second display area includes an area on the display interface that is different from the first display area, and the second screen includes static screen content and / or dynamic screen content.

[0481] In some embodiments, the second screen includes artificial intelligence generated content.

[0482] For example, as described in the above step S1704, the electronic device can obtain the dynamic effect display content, such as part or all of the second screen, through the AIGC module. In this way, the electronic device obtains richer component dynamic effect display content through the AIGC module, providing users with a more vivid and personalized dynamic effect display experience.

[0483] In some embodiments, the content source of the second screen includes an electronic device and / or a server.

[0484] The picture content of the second picture may be, for example, the picture content already in the first picture, or picture content related to the picture content already in the first picture.

[0485] Optionally, the second display area includes an area on the display interface that is different from the first display area, for example, to achieve an overflow display effect of the second screen.

[0486] Optionally, the static image content of the second image can be used to realize a static display effect of the component, for example. The dynamic image content of the second image can be used to realize a dynamic display effect of the component, such as a motion effect.

[0487] Optionally, all contents of the second screen may belong to the layer to which the contents of the first screen belong. In this way, the electronic device can display the second screen without adding a new layer.

[0488] Optionally, the second screen may belong to a window (such as a desktop window) to which the first screen belongs. In this way, the electronic device can display the second screen without adding a new window.

[0489] In some embodiments, the first trigger event includes at least one of the following events: a user operation event acting on the first component; a user gaze event acting on the first component; an event occurring in the application corresponding to the first component that triggers a component screen refresh; and an event used to indicate that the current moment has reached a preset moment.

[0490] For example, when the electronic device is displaying a game card, in response to a user's operation on the game card, the electronic device may be triggered to refresh the first screen of the game card to the second screen, and the second screen may overflow the first display area occupied by the original first screen.

[0491] For another example, when the electronic device is displaying a game card, it detects a user gaze event and determines that the target component corresponding to the gaze event is the game card. Then, the electronic device can activate the game card and display the second screen content corresponding to the game card. The specific content of the first trigger event being the user gaze event can be referred to above. Fig.23 or Fig.24 The relevant content described.

[0492] For another example, an electronic device displays a weather card, and in response to a weather change event, the weather card screen may be refreshed. Figure 8 As shown, in response to a rainfall event, the electronic device may refresh and display a second screen, where the second screen may, for example, include raindrops overflowing the original weather card display area.

[0493] For another example, the electronic device adds a schedule in the calendar application according to the user operation and obtains the preset time corresponding to the schedule. Then, in response to reaching the preset time, the electronic device can trigger the display of the schedule animation corresponding to the calendar card (such as the second screen).

[0494] In this way, through various trigger events, the screen refresh corresponding to the component is triggered, increasing the flexibility of component effect display.

[0495] In some embodiments, the second screen is used to present one or more of the following visual effects of the content of the first screen: an effect of moving from inside the first display area to outside the first display area. An effect of stretching from the first display area to outside the first display area. An effect of moving from outside the first display area to inside the first display area. An effect of stretching from outside the first display area to inside the first display area.

[0496] In this way, by changing the first screen content from the first display area to the second screen, a more coherent component effect display experience is provided to the user.

[0497] In some embodiments, the first picture may be enlarged before being refreshed to the second picture. Accordingly, the first display area is the display area occupied by the enlarged first picture.

[0498] In this way, a richer component effect triggering display process is achieved.

[0499] In some embodiments, the second display area also includes part or all of the first display area.

[0500] For example, Fig.33 As shown in (a), the first display area occupied by the first screen on the display interface is the display area 331; Fig.33 As shown in (b), the electronic device determines the display area 332 for displaying the second screen according to the first page information of the current display interface. Among them, the second display area occupied by the second screen can be part or all of the display area of ​​the display area 332. And the second display area occupied by the second screen includes part or all of the first display area. For example, the second screen includes the original first screen and the semicircular screen that exceeds the original first display area, that is, the second display area occupied by the second screen is a special-shaped area. Then, the second display area includes the entire display area of ​​the first display area, and the second display area occupies part of the display area of ​​the display area 332. For another example, through transparency adjustment, the second screen includes the original first screen visible to the user and the semicircular screen that exceeds the original first display area, as well as the screen that is invisible to the user in the display area 332 (such as the transparency is 100%). Then, the second display area includes the entire display area of ​​the first display area, and the second display area occupies the entire display area of ​​the display area 332.

[0501] In some embodiments, the second screen includes one or more of the following contents: dynamic screen content that uses the static screen content in the first screen to display motion effects; static screen content newly added to the first screen; dynamic screen content newly added to the first screen.

[0502] In some examples, the second picture may also include part or all of the picture content of the first picture.

[0503] In this way, the second picture is refreshed and displayed based on the first picture, which increases the continuity of picture refresh and improves the user's visual experience.

[0504] In some embodiments, the second screen may be displayed by the first component.

[0505] In some examples, the display method of the second screen includes one or any combination of the following methods: adding a subcomponent to the first component, and having the newly added subcomponent display the newly added screen content in the second screen; having the original subcomponent in the first component display the newly added screen content in the second screen; having the original subcomponent in the first component display dynamic screen content in the second screen that uses the static screen content in the first screen for motion effects.

[0506] Optionally, the newly added subcomponent may be located at the topmost layer of the subcomponents of the first component. Optionally, the newly added subcomponent still belongs to the first component, such as being located in the same layer or window as the first component.

[0507] For example, Fig. 9CAs shown in (a), the electronic device displays a desktop with a weather card 92 displayed on the desktop. In response to obtaining that the current weather is cloudy, the weather card 92 displays a corresponding cloud image. Subsequently, in response to obtaining that the weather changes to thunderstorms, lightning and raindrop subcomponents may be added to display the following: Fig. 9C The thunderstorm picture shown in (b) has additional picture contents of lightning and raindrops compared to the cloudy picture. The newly added lightning and raindrop subcomponents are located at the top layer of each subcomponent of the weather card (such as the first component), thereby achieving an overlay display effect.

[0508] In this way, the electronic device realizes the display of component effects through the subcomponents of the first component without creating layers or windows, thereby reducing the difficulty of displaying component effects.

[0509] In some embodiments, refreshing the first screen to the second screen includes: displaying the second screen by a second component corresponding to the first component.

[0510] Optionally, the first component is, for example, a card component, and the second component is, for example, a user interface extension component (UIExtension component). Optionally, as described above, the display effect of "one card with two sides" of the card is achieved through the card component and the UIExtension component.

[0511] Optionally, the display area of ​​the second component on the above display interface is the second display area.

[0512] In some examples, refreshing the first screen to the second screen includes: launching a second process of a second application to obtain a second screen rendered by the second process to display in the second component.

[0513] Optionally, the second application is an application corresponding to the second component.

[0514] Optionally, the second component covers the first component.

[0515] Optionally, the second screen is a game screen of the first game, and the second application is a game application for running the first game, or is used to load a game engine for running the first game.

[0516] For example, Fig.35 As shown, based on the current card framework, on the basis of card components (also described as ordinary cards), developers are supported to bind ordinary cards to extended game content and reuse the card management processes such as adding, moving, and deleting ordinary cards on the desktop. For example, the card management service can obtain the relationship configuration information between the card component and the UIExtension component established by the card provider.

[0517] Moreover, when the user clicks on an ordinary card, it supports activating and loading game content and interacting with the game. Among them, the game content developer side provides it through the user interface extension component capability (UIExtensionAbility), and the desktop embeds and loads content through the UIExtensionComponent component, and manages the game content status and UIExtensionAbility life cycle. For example, after the quick game loads the game content provided by UIExtensionAbility, the card provider can configure the association between the associated component card and the quick game. In this way, in the subsequent process of the desktop displaying the card component based on the content obtained from the card provider, in response to the activation of the card component, the UIExtension component (such as including game content) can be obtained through the game engine, covering the display of the original card component, thereby achieving an overflow display effect. In addition, the desktop can also switch the display back to the component card according to the user operation, that is, switch the display of the inactive card to achieve dynamic control of the overflow effect.

[0518] Among them, quick games are a type of quick applications. Quick applications are lightweight applications that are usually loaded quickly on electronic devices, provide a simple usage experience, and can be accessed by users without installation. Quick applications are usually small in size and have a fast startup time, suitable for quick entertainment or information acquisition.

[0519] It should be understood that Fig.35 The division of the modules shown is only for illustrative purposes. In some examples, the modules can be combined or split. For example, the card provider may also include a UIExtension component framework. Then the card provider loads the UIExtension component framework through the game engine to trigger the display of the UIExtension component on the desktop. For another example, the card provider may also directly include the UIExtension component framework and the game engine. Then the card provider can not only provide card component content, but also provide game content for the UIExtension component, that is, the loading of game content by the game engine is realized within the component provider.

[0520] In this way, the UIExtension component is loaded through the second application, which reduces the processing difficulty of displaying the component effect.

[0521] In some embodiments, the second display area may be part or all of the displayable area set by the application (such as a desktop application) to which the display interface belongs. Optionally, the displayable area may be specifically set by setting parameters of the first container (such as cropping attribute parameters, area position parameters, and area size parameters). Optionally, the first container may be a component (such as a first component, a second component) that displays the second screen or a parent container of the component.

[0522] In some examples, as described above, the container component has a container clipping function, which clips the content that exceeds the display area of ​​the component's container, so that the user can see the display content inside the container but not the display content outside the container. For example, the container component is configured with a clipping attribute. When the clipping attribute is true, it means clipping. Then, the container component will be clipped according to its own size. If the display area of ​​the subcomponent of the container component exceeds this size, the excess part will be clipped. When the clipping attribute is false, it means no clipping.

[0523] Optionally, the size of the container component can be adjusted by setting the width and height. Optionally, the electronic device can also obtain the position coordinates of the display area of ​​the container component.

[0524] In some examples, the electronic device can constrain the display area of ​​a component (such as the first component or the second component) through a first container. The first container is, for example, the component itself, or a parent container of the component. Alternatively, there is at least one container between the first container and the component, that is, the first container can also be an ancestor container above the parent container of the component.

[0525] For example, in response to a first trigger event, the electronic device determines that the second screen corresponding to the first component is displayed in overflow. Then, the electronic device obtains the first container corresponding to the first component. The electronic device sets the cropping attribute of the first container to false, then the first container will no longer limit the overflow range of the second screen, for example, the electronic device can display the second screen in full screen. Optionally, when an overflow recovery event is satisfied, the electronic device may set the cropping attribute of the first container to true, thereby avoiding overflow of the screen corresponding to the first component, such as displaying the first screen in the first display area. Among them, the overflow recovery event includes, for example, reaching the preset display time of the second screen, receiving an indication that the second screen ends display, etc.

[0526] For another example, in response to the first trigger event, the electronic device determines that the second screen corresponding to the first component is overflowed and displayed. Then, the electronic device obtains the first container corresponding to the first component. Then, the electronic device can enlarge the size of the first container, so as to display the second screen in the enlarged first container to achieve an overflow display effect. Subsequently, in response to the overflow recovery event, the electronic device can adjust the first container back to the original size. For example, when the first trigger event is received, the display size of the first container is 3*3. Then, in response to the first trigger event, the electronic device adjusts the size of the first container to 5*5 to achieve an overflow display effect. Subsequently, in response to the overflow recovery event, the electronic device can adjust the size of the first container back to 3*3.

[0527] In some examples, the first container is the parent container of the first component, and the displayable area of ​​the component is adjusted by setting the clipping property of the parent container (eg Fig.9A For example, under the premise that the clipping attribute parameters of all ancestor containers of the first container are set to false, if the clipping attribute parameter of the first container is set to false, the displayable area is the entire display interface; if the clipping attribute parameter of the first container is set to true, the displayable area is the area set by the size parameter of the first container.

[0528] In other examples, the first container may also be other containers between the parent container of a component (such as the first component or the second component) and the root node. In this case, the premise for setting the displayable area through the first container may be that the clipping properties of other containers between the component and the root node except the first container are set to false.

[0529] It should be understood that the clipping property of other containers that only affect the setting of the displayable area of ​​the component can also be set to false, and those that do not affect can be left unchanged. For example, the area of ​​the root node is the display interface of the entire window, so whether the clipping property of the root node is set to false or not, it generally does not constitute a substantial restriction on the display area of ​​the child nodes, so its clipping property does not need to be set to false.

[0530] Exemplarily, in response to the first trigger event, the first application obtains the page information of the current display interface, and based on the page information, obtains the displayable area. Afterwards, the first application may send a component effect display request to the desktop, and the component effect display request may carry the size information, position information, duration information, etc. of the displayable area. Among them, the size information and position information are used to indicate the size and position of the displayable area, for example, it can be a specific position, or it can be the distance moved in which direction / or the size of the expansion, etc. The duration information includes, for example, the display duration of the second screen, such as a short display (such as 5 seconds), or a long display (such as 10 seconds), or permanent display, etc. Optionally, the application may also negotiate with the desktop in advance about the information of the displayable area corresponding to the second screen, the display duration, and other information. Then, subsequently, the component effect display request sent by the application to the desktop may no longer need to carry this information.

[0531] Correspondingly, the desktop can set the cropping property of the first container to false or adjust the size of the first container according to the application request. After that, the desktop can obtain the screen content sent by the application, and display the second screen corresponding to the screen content in the displayable area. Optionally, the desktop can also set a countdown based on the duration information carried in the component effect request, and trigger the countdown to start after the second screen starts to be displayed. Then, at the end of the countdown, the desktop can set the cropping property of the first container to true or adjust the size of the first container back to its original size.

[0532] It should be understood that the above process is a cyclic process, and the display process of each application triggering the overflow animation can refer to the above example process. In addition, the display process of the second screen corresponding to the UIExtension component can also refer to the above example process, where the desktop obtains the display content of the second screen from the second application instead of from the first application, and this process will not be repeated.

[0533] In this way, the overflow effect is dynamically controlled through the first container to meet the display requirements of the overflow effect.

[0534] In some embodiments, in order to avoid abuse of the displayable area, after the electronic device obtains the second picture to be displayed, if the transparency of the picture that overflows the display area of ​​the original first component is lower than a preset threshold, then the electronic device may not display the second picture. Optionally, the transparency of the picture can be characterized by a plurality of sampled pixels or an average value of all pixels in the picture. Optionally, the preset threshold is, for example, a value between 0% and 10%, such as 5%. Optionally, part or all of the display area of ​​the first component is the first display area.

[0535] In this way, components can be prevented from overflowing the screen and seriously affecting the display of other components on the desktop, thereby affecting user usage.

[0536] In some embodiments, the first component is a card component (such as a common card), and the second component is a UIExtension component. The first component and the second component are not displayed at the same time, and the second component covers the first component. Then, the first component and the second component can each have their own corresponding first container, or the first component and the second component can also have the same first container.

[0537] In some embodiments, the second screen includes dynamic screen content. In response to satisfying a preset condition, the electronic device obtains a screenshot of the second component in the first display area. The preset condition includes detecting a user operation outside the first display area, or not detecting a user operation within the first display area within a preset time. Afterwards, the electronic device stops displaying the second component and displays the screenshot in the first display area.

[0538] In some examples, in response to a first operation performed by a user within a first display area, the electronic device switches from displaying a screenshot to displaying a second component.

[0539] Optionally, the electronic device may also destroy the second component.

[0540] For example, Fig.25 As shown in (b), the electronic device displays a game card 253 on the desktop, and the game card 253 is in an unactivated state. For example, the electronic device displays a first component, and the first component is a common card corresponding to the game card 235. Afterwards, the electronic device detects the user's operation on the game card 253, triggering the game card 253 to switch to an activated state. Fig.26 As shown, in response to any area in the card being triggered, the card state switches from an unactivated state to an activated state, and the display effect of the activated state card can overflow. Fig.25 As shown in (c), the electronic device displays the game card 253 in an activated state through the UIExtension component (such as the second component), and the game card 253 in the activated state can display an overflow animation, such as the display area 2 of the overflow animation is larger than the display area 1 of the game card 253. For example, the electronic device covers the first component through the second component. Subsequently, the electronic device detects the user's operation outside the display area 1 for displaying the game card 253, triggering the game card 253 to lose focus; or, the electronic device does not detect the user's operation in the display area 1 for displaying the game card 253 within a preset time (such as 10 seconds, 20 seconds, etc.), such as no interaction trigger between the user and the game card 253 is detected. Then, the electronic device can switch the component state of the game card 253 from an activated state to a paused state. Optionally, in response to the game card 253 being switched to a paused state, the electronic device obtains a screenshot of the current game screen. Afterwards, as Fig.25 As shown in (d), the electronic device can display the obtained game screen screenshot in the display area 1 of the game card 253 by calling the pause state component. During the process of displaying the game screen screenshot, the game card 253 is in the pause state. Fig.25 As shown in (d), the game card 253 in the paused state does not display overflow animation, so as to avoid affecting the user's operation on other components on the desktop. Later, when the electronic device is displaying the game card 253 in the paused state, it detects the user's operation on the game card 253, hides the game screen screenshot, and displays the UIExtension component, so that the user can see the game card 253. Fig.25 The overflow effect displayed by the activated game card 253 shown in (c).

[0541] In this way, the electronic device realizes the two-side display of a game card through the UIExtension process, enriches the card display effect, reduces the difficulty of card development, and increases the universality of the overflow effect display.

[0542] In addition, by switching between different card states, the user's usage habits can be met and the flexibility of interaction can be increased.

[0543] In some other embodiments, the second screen includes dynamic screen content. In response to satisfying a preset condition, the electronic device stops displaying the second component, displays the first component in the first display area, and overlays a transparency mask on the first component. The preset condition includes detecting a user operation outside the first display area, or not detecting a user operation within the first display area within a preset time.

[0544] In some examples, in response to a first operation of a user within the first display area, the electronic device switches from displaying the first component and the transparency mask to displaying the second component. Alternatively, in response to a second operation of a user within the first display area, the transparency mask is removed.

[0545] Optionally, the electronic device may also destroy the second component.

[0546] Optionally, the transparency mask includes, for example, a preset control that can be used to toggle the state of the component.

[0547] In this way, the electronic device can achieve the pause state of the card through screenshots or transparency masks, thereby reducing power consumption when the user does not need to operate the card.

[0548] In some embodiments, in response to the second process ending, the electronic device switches from displaying the second component to displaying the first component.

[0549] Optionally, the second process is, for example, a process of a second application, such as a UIExtension process, for example, used to trigger the display of a game screen. Optionally, the first process is a process of a first application, for example, used to trigger the display of a common card.

[0550] In this way, after the second process ends, the electronic device can automatically switch back to the display of the first component, thereby achieving flexible switching of component states.

[0551] In some embodiments, the second screen is a function page in the second application, and the display position of the main screen in the function page on the display interface corresponds to the position of the first display area.

[0552] Optionally, a first position relationship of the main image in the second component may be the same as or different from a second position relationship of the first display area in the display interface.

[0553] Optionally, part of the content of the second picture other than the main picture is fully transparent or semi-transparent. Full transparency means that the transparency is 100%, and semi-transparency means that the transparency is greater than 0% and less than 100%. For example, the transparency of the part of the content can be greater than 50%.

[0554] In some examples, taking a game card scene as an example, the second screen is a main screen in a game interface in a game application. Optionally, the desktop can obtain the main screen, thereby aligning the main screen with the first display area.

[0555] In some examples, the UIExtension component rendered by the UIExtension process corresponds to the game function page, thereby realizing an interactive game experience presented to the user through card animation. Optionally, the main area of ​​the game screen in the UIExtension component is adapted to the display area 1 of the game card, so that the user's focus is still on the display area 1 of the game card, thereby standardizing the display overflow effect.

[0556] For example, there are preset rules in the game application and the desktop, and the main screen displays the center of the function page. In this way, after the desktop obtains the function page, it only needs to align the center to display the appropriate second screen.

[0557] For example, Fig.28 As shown, in response to the user's operation on the game card 253, the game card 253 switches to the activated state, and the desktop overlays the center position of the UIExtension component sent by the UIExtension process onto the display area 1 of the game card 253. In particular, since the UIExtension process has rendered the main area of ​​the game screen (such as the center area of ​​the function page) according to the card information during the UIExtension component rendering process, the main area of ​​the game screen matches the display area 1 of the game card 253, meeting the requirement of displaying the main body of the game at the corresponding position of the game card 253.

[0558] For another example, when a game application sends a game screen to the desktop, it can also indicate the position of the main screen, so that the main screen matches the display area 1 to meet the display requirements.

[0559] For another example, the desktop may also indicate the position information of the current display area 1 of the game application on the display screen. In this way, the game application may also adjust the position of the main screen in the function page according to the position information to meet the display requirements.

[0560] For example, Fig.30As shown, in response to the user's operation on the game card 253, the game card 253 switches to an activated state. In response to the position information indicating that the game card 253 is displayed at a lower position on the desktop, the UIExtension process adjusts the main area 271 of the game screen downward to the corresponding position indicated by the position information during the rendering process. In this way, after the desktop obtains the UIExtension component, it directly covers the UIExtension component on the desktop for display, and can also display the main game body in the display area 1 of the original game card 253 to meet the user's operation needs.

[0561] Optionally, based on the above Fig.30 In the scenario where the main screen of the example matches the display area, the electronic device can move the display position of the game card (such as the first component) alone, and achieve matching by adaptively adjusting the position of the main screen. Alternatively, the electronic device can also move both the first component and the second component, and then the second component needs to be moved back in the opposite direction to achieve full screen coverage of the second screen without deviation. For example, the electronic device moves both the first component and the second component upward by a distance of 10 virtual pixels, and then the second component needs to be moved downward by a distance of 10 virtual pixels.

[0562] In this way, by obtaining the position information of the game cards, the UIExtension process can maintain a relatively fixed relationship between the main area of ​​the game screen in the rendered UIExtension component and the electronic device display screen, and the main area of ​​the game screen can be adjusted in time with the position changes of the game cards on the desktop, so that the main area of ​​the game screen is aligned with the display area 1, adaptively presenting a better display effect for the user.

[0563] In some embodiments, the electronic device obtains first page information of the display interface, the first page information including size information and position information of display areas of multiple components on the display interface. Then, the electronic device determines a display area for displaying the second screen according to the first page information.

[0564] Optionally, the first component corresponds to a first application, and the first application obtains the first page information and determines a display area for displaying the second screen according to the first page information.

[0565] Optionally, the second display area may be a display area determined to display the second picture, or may be a partial area of ​​the display area used to display the second picture.

[0566] In this way, the electronic device can obtain the actual allowed overflow range (display area of ​​the second screen) according to the current display interface, and display the component effect according to the actual allowed overflow range to meet the actual display requirements. Optionally, the component effect includes, for example, the second screen.

[0567] In some examples, the electronic device determines the second display area in any one or combination of the following ways: setting the edge of the display area for displaying the second screen to ensure that the second screen does not invade the display area of ​​other components; setting the edge of the display area for displaying the second screen to ensure that the second screen does not invade the display area of ​​the main content of other components; setting the edge of the display area for displaying the second screen to enable the second screen to cover part or all of the target component in other components.

[0568] For example, an electronic device displays a weather card, and in response to a weather change event, the weather card screen can be refreshed. Figure 8 As shown, the electronic device can obtain the display area 2 corresponding to the heavy rain dynamic effect according to the position information displayed by the cards 73 and 74, and display the heavy rain dynamic effect in the display area 2 to achieve the display effect of raindrops falling on the upper edges of the cards 73 and 74. That is, the edge of the display area where the second screen is displayed is achieved to ensure that the second screen does not invade the display area of ​​other components.

[0569] In this way, the electronic device obtains the display area of ​​the second screen according to the display areas of other components to avoid affecting the display of other components.

[0570] For example, Fig. 9B As shown in FIG. 1 , the electronic device obtains page information and obtains cards 73 and 74 located around the weather card. Among them, the main content of card 74 is the car logo 91. Then, the electronic device can display the following information based on the upper edge position information of card 73 and the upper edge position information of the car logo 91: Fig. 9B The heavy rain effect of the weather card 71 shown. It can be seen that the raindrops of the current heavy rain effect fall on the upper edge of the car logo 91, which better meets the component effect display expected by the user. That is, the edge of the display area of ​​the second picture is realized to ensure that the second picture does not invade the display area of ​​the main content of other components.

[0571] In this way, the display of the second screen is prevented from affecting the display of the main content of other components.

[0572] For example, Fig. 9C As shown in (b), the electronic device displays the second picture corresponding to the thunderstorm, covering some components in other components. That is, the edge of the display area where the second picture is displayed is realized so that the second picture covers part or all of the target components in other components. Optionally, in the current scene, the display duration of the second picture can be limited.

[0573] In this way, the electronic device limits the display time of the second screen that needs to be displayed in a large area, thereby ensuring the display of the second screen while avoiding the display of the second screen affecting the display of other content and the user's use. In this way, it can also avoid the problem of some third-party components maliciously occupying the display area.

[0574] In some embodiments, the second screen includes a first sub-screen and a second sub-screen. The first sub-screen is displayed in a first sub-area of ​​a display area for displaying the second screen, and the second sub-screen is displayed in a second sub-area of ​​a display area for displaying the second screen. In response to a first trigger event, the first screen is refreshed to the second screen, including: in response to the first trigger event, the first application corresponding to the first component obtains the first page information of the display interface, and the first page information includes the size information and position information of multiple components on the display interface. The first application determines the first sub-area and the target component adjacent to the first component based on the first page information, and triggers the display of the first sub-screen in the first sub-area. The first application sends a linkage effect indication to the target application corresponding to the target component. The target application determines the second sub-area based on the linkage animation indication and triggers the display of the second sub-screen in the second sub-area.

[0575] Optionally, the first application may indicate information such as the display duration of the linkage effect to the target application. Optionally, the first application may determine the display range required for the linkage effect, thereby obtaining the target application that needs linkage based on the first page information, and the target component of the target application is displayed within the display range required for the linkage effect.

[0576] In some examples, the display of linkage animations may be triggered entirely by the first application, or may be jointly triggered by target applications corresponding to components that the first application expects to be linked.

[0577] For example, when an electronic device determines that it needs to display a linkage effect, it can obtain the components involved in the linkage effect. Among them, the components involved in the linkage effect include the component provider corresponding to the target component that needs to display the component effect. The component provider corresponding to the target component can send a linkage effect indication to the component providers of other components involved in the linkage effect. The linkage effect indication is used to instruct other components to display the linkage effect. In this way, through the cooperation of the target component and other components, the electronic device can display the linkage effect.

[0578] For example, Fig.13 As shown in (a), the electronic device displays a card 131, and in response to a component animation display event, the electronic device displays a component animation in a display area 1 of the card 131. Fig.13As shown in (b), in response to a component animation display event, the electronic device displays an overflow animation (such as the eye animation displayed on the card 131 and the lightning animation beyond the display area 1) according to the page information (such as during the display of the first sub-screen), and also displays corresponding animations (such as the second sub-screen) on other components around the card 131, presenting an interactive effect and further enhancing the fun of the component animation display.

[0579] In this way, the electronic device presents linkage animation in the vicinity of the target component and other components around the target component according to the page information, thereby increasing the fun of the component animation display and improving the user experience.

[0580] In some embodiments, during the display of the second screen, the display interface further includes a third screen of the third component, and the third screen occupies a third display area on the display interface. Then, in response to the second trigger event, the electronic device refreshes the third screen to a fourth screen. The fourth screen is different from the third screen, and the fourth screen occupies a fourth display area on the display interface. The fourth display area includes an area on the display interface that is different from the third display area, and the fourth screen includes static screen content and / or dynamic screen content.

[0581] In some examples, when the fourth screen starts to be displayed, the second screen is refreshed to the first screen.

[0582] In some other examples, the second display area is a display area within a safety range corresponding to the first display area. Then, during the process of displaying the fourth picture, the electronic device keeps displaying the second picture on the display interface.

[0583] Alternatively, if Fig.35 As shown, the desktop can also be configured with a conflict resolution strategy to avoid conflicts between the animation images corresponding to different components.

[0584] For example, Fig. 9C In the scene shown in (c), the electronic device periodically displays the lightning effect of the weather card 92 (such as the second screen), and the lightning effect is as follows Fig. 9C In the example of (b), the 3D animation effect with a large overflow is shown. In response to the user activating the game card 95, the electronic device displays the component animation effect of the game card 95 (such as the fourth screen). Then, during the display of the component animation effect of the game card 95, the electronic device stops the lightning animation effect of the weather card 92 that is periodically displayed. In this way, the power consumption of the electronic device is reduced, and the display conflict of different animation effects is avoided.

[0585] As another example, Fig. 9CIn the scenario shown in (c), the electronic device, while displaying the component dynamic effects (such as the fourth screen) of the game card 95, still maintains the 2D dynamic effect (such as the second screen) of the rainy clouds within the safety range corresponding to the weather card 92. Among them, the display of the 2D dynamic effect consumes less power, while ensuring the display effect, reducing power consumption. In addition, even if the second screen within the safety range is a 3D dynamic effect, it can also be displayed. The display effect of the dynamic effect is guaranteed through the safety range.

[0586] In some embodiments, the second screen includes dynamic screen content. When the first event occurs, the electronic device controls the display of the second screen in a first manner. The first event includes at least one of the following events: the resource occupancy corresponding to the second screen exceeds the first resource limit; the system resources of the electronic device are insufficient; the power consumption corresponding to the second screen exceeds the power consumption threshold; the device temperature of the electronic device exceeds the temperature threshold. The first manner includes: reducing the display quality of the second screen; stopping displaying the second screen; releasing the component resources corresponding to the second screen.

[0587] Optionally, the second screen is stopped from being displayed, for example, the first component is frozen.

[0588] In some examples, electronic devices maintain the display of dynamic picture content, which requires occupying resources, generating power consumption and heat, and may affect the realization of other functions of the electronic device. Then, the electronic device can measure the resource occupation, power consumption and heat of the dynamic picture content, and when certain conditions are met, it is determined that the current scene is abnormal, and the display of the dynamic picture content can be adjusted to release resources, reduce power consumption and heat generation.

[0589] In some schemes, multiple embodiments of the present application can be combined, and the combined scheme can be implemented. Optionally, some operations in the process of each method embodiment are optionally combined, and / or the order of some operations is optionally changed. In addition, the execution order between the steps of each process is only exemplary and does not constitute a restriction on the execution order between the steps. There can also be other execution orders between the steps. It is not intended to indicate that the execution order is the only order in which these operations can be performed. A person of ordinary skill in the art will think of a variety of ways to reorder the operations described herein. In addition, it should be noted that the process details involved in a certain embodiment of this article are also applicable to other embodiments in a similar manner, or different embodiments can be used in combination.

[0590] In addition, some steps in the method embodiment may be equivalently replaced by other possible steps. Alternatively, some steps in the method embodiment may be optional and may be deleted in certain usage scenarios. Alternatively, other possible steps may be added to the method embodiment.

[0591] Furthermore, the various method embodiments may be implemented separately or in combination.

[0592] Combination of the above Figure 4-Figure 35 The component display method provided by the embodiment of the present application is described in detail. Fig.36 The electronic device provided by the embodiments of the present application is described in detail.

[0593] In one possible design, Fig.36 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Fig.36 As shown, the electronic device 3600 may include: a transceiver unit 3601, a processing unit 3602, and a display unit 3603. The electronic device 3600 may be used to implement the functions of the electronic device involved in the above method embodiment.

[0594] Optionally, the transceiver unit 3601 is used to receive user operations, for example, to support the electronic device 3600 to perform Fig.34 S3402 in.

[0595] Optionally, the processing unit 3602 is used to support the electronic device 3600 to execute Fig.34 S3402 in.

[0596] Optionally, the display unit 3603 is used to support the electronic device 3600 to execute Fig.34 S3401 and S3402 in.

[0597] Among them, the transceiver unit may include a receiving unit and a sending unit, and may be implemented by a transceiver or a transceiver-related circuit component, and may be a transceiver or a transceiver module. The operations and / or functions of each unit in the electronic device 3600 are respectively to implement the corresponding processes of the component display method described in the above method embodiment. All relevant contents of each step involved in the above method embodiment can be referred to the functional description of the corresponding functional unit, and for the sake of brevity, they will not be repeated here.

[0598] Optionally, Fig.36 The electronic device 3600 shown may also include a storage unit ( Fig.36 (not shown), the storage unit stores a program or instruction. When the transceiver unit 3601, the processing unit 3602 and the display unit 3603 execute the program or instruction, Fig.36 The electronic device 3600 shown can execute the component display method described in the above method embodiment.

[0599] Fig.36 The technical effects of the electronic device 3600 shown can refer to the technical effects of the component display method described in the above method embodiment, and will not be repeated here.

[0600] In addition to being in the form of electronic device 3600, the technical solution provided in the present application may also be a functional unit or chip in the electronic device, or a device used in conjunction with the electronic device.

[0601] An embodiment of the present application also provides a chip system, including: a processor, the processor is coupled to a memory, the memory is used to store programs or instructions, when the program or instructions are executed by the processor, the chip system implements the method in any of the above method embodiments.

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

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

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

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

[0606] An embodiment of the present application also provides a computer-readable storage medium, in which a computer program is stored. When the computer program is run on a computer, the computer executes the above-mentioned related steps to implement the component effect display method in the above-mentioned embodiment.

[0607] The embodiment of the present application also provides a computer program product. When the computer program product is run on a computer, the computer is enabled to execute the above-mentioned related steps to implement the component effect display method in the above-mentioned embodiment.

[0608] 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 component effect display method in the above-mentioned method embodiments.

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

[0610] The steps of the method or algorithm described in conjunction with the disclosure of the embodiments of the present application can be implemented in hardware or by executing software instructions by a processor. The software instructions can be composed of corresponding software modules, and the software modules can be stored in random access memory (RAM), flash memory, read only memory (ROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), registers, hard disks, mobile hard disks, CD-ROMs or any other form of storage medium known in the art. An exemplary storage medium is coupled to a processor so that the processor can read information from the storage medium and can write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can be located in an application specific integrated circuit (ASIC).

[0611] Through the description of the above implementation methods, those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed; that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device and unit described above can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0612] In the several embodiments provided in the present application, it should be understood that the disclosed method can be implemented in other ways. The device embodiments described above are merely schematic. For example, the division of the modules or units is only a logical function division, and there may be other division methods in actual implementation; for example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of modules or units, which can be electrical, mechanical or other forms.

[0613] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0614] Computer-readable storage media include, but are not limited to, any of the following: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and other media that can store program codes.

[0615] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions within the technical scope disclosed in the present application shall be included in the protection scope of the present application. Therefore, the protection scope of the present application shall be based on the protection scope of the claims.

Claims

1. A component display method, characterized in that: Applied to electronic equipment, the method comprises: Displaying a first screen of a first component, wherein the first screen occupies a first display area on a display interface; In response to a first trigger event, the first screen is refreshed to a second screen, wherein the second screen is different from the first screen, the second screen occupies a second display area on the display interface, the second display area includes an area on the display interface that is different from the first display area, and the second screen includes static screen content and / or dynamic screen content.

2. The method according to claim 1, characterized in that The second display area also includes part or all of the first display area.

3. The method according to claim 1 or 2, characterized in that: The first triggering event includes at least one of the following events: A user operation event acting on the first component; A user gaze event acting on the first component; An event that occurs in the application corresponding to the first component and triggers a component screen refresh; An event used to indicate that the current time has reached a preset time.

4. The method according to any one of claims 1 to 3, characterized in that: The second screen is used to present one or more of the following visual effects of the content of the first screen: Effect of moving from the first display area to outside the first display area; An effect of extending from the first display area to outside the first display area; Effect of moving from outside the first display area to within the first display area; Effect of stretching from outside the first display area to inside the first display area.

5. The method according to any one of claims 1 to 4, characterized in that: The second screen includes one or more of the following contents: Dynamic picture content that uses the static picture content in the first picture to display dynamic effects; The static picture content newly added on the first picture; The dynamic picture content newly added on the first picture.

6. The method according to claim 5, characterized in that The display mode of the second screen includes one or any combination of the following modes: Adding a subcomponent to the first component, and using the newly added subcomponent to display the newly added screen content in the second screen; The original subcomponent in the first component displays the newly added screen content in the second screen; The original subcomponent in the first component displays the dynamic picture content in the second picture using the static picture content in the first picture for motion effect display.

7. The method according to any one of claims 1 to 6, characterized in that: The refreshing of the first picture to the second picture includes: The second screen is displayed by a second component corresponding to the first component.

8. The method according to claim 7, characterized in that The second component covers the first component.

9. The method according to claim 7 or 8, characterized in that: The refreshing of the first picture to the second picture includes: The second process of the second application is launched to obtain the second screen rendered by the second process to be displayed in the second component.

10. The method according to claim 9, characterized in that The second application is an application corresponding to the second component.

11. The method according to claim 9 or 10, characterized in that: The second screen is a game screen of the first game, and the second application is a game application for running the first game, or a game engine for loading and running the first game.

12. The method according to any one of claims 7 to 11, characterized in that: The second picture includes dynamic picture content, and the method further includes: In response to satisfying a preset condition, obtaining a screenshot of the second component in the first display area; wherein the preset condition includes detecting a user operation outside the first display area, or not detecting a user operation in the first display area within a preset time; Stop displaying the second component and display the screenshot in the first display area.

13. The method according to any one of claims 7 to 11, characterized in that: The second picture includes dynamic picture content, and the method further includes: In response to satisfying a preset condition, stop displaying the second component, display the first component within the first display area, and overlay a transparency mask on the first component; wherein the preset condition includes detecting a user operation outside the first display area, or not detecting a user operation within the first display area within a preset time.

14. The method according to claim 13, characterized in that The method further comprises: In response to a first operation of a user within the first display area, displaying the first component and the transparency mask is switched to displaying the second component; or, In response to a second operation of the user within the first display area, the transparency mask is removed.

15. The method according to any one of claims 9 to 11, characterized in that: The method further comprises: In response to the second process ending, display of the first component is switched from display of the second component.

16. The method according to any one of claims 9 to 11, characterized in that: The second screen is a function page in the second application, and a display position of a main screen in the function page on the display interface corresponds to a position of the first display area.

17. The method according to any one of claims 1 to 16, characterized in that: Before refreshing the first picture to the second picture, the method further includes: Acquire first page information of the display interface, where the first page information includes size information and position information of display areas of multiple components on the display interface; A display area for displaying the second picture is determined according to the first page information.

18. The method according to claim 17, characterized in that The method of determining the second display area includes any one or a combination of the following methods: Setting the edge of the display area for displaying the second picture to ensure that the second picture does not intrude into the display area of ​​other components; Setting the edge of the display area for displaying the second picture to ensure that the second picture does not intrude into the display area of ​​the main content of other components; The edge of the display area for displaying the second picture is set to achieve that the second picture covers part or all of the target component in other components.

19. The method according to any one of claims 1 to 18, characterized in that: The second picture includes a first sub-picture and a second sub-picture, wherein the first sub-picture is displayed in a first sub-area of ​​the display area for displaying the second picture, and the second sub-picture is displayed in a second sub-area of ​​the display area for displaying the second picture; The refreshing of the first picture to a second picture in response to the first triggering event includes: In response to the first trigger event, a first application corresponding to the first component obtains first page information of the display interface, where the first page information includes size information and position information of multiple components on the display interface; The first application determines the first sub-region and a target component adjacent to the first component according to the first page information, and triggers display of the first sub-screen in the first sub-region; The first application sends a linkage effect indication to a target application corresponding to the target component; The target application determines the second sub-area according to the linkage animation effect indication and triggers display of the second sub-screen in the second sub-area.

20. The method according to any one of claims 1 to 19, characterized in that: During display of the second screen, the display interface further includes a third screen of a third component, and the third screen occupies a third display area on the display interface; and the method further includes: In response to a second trigger event, the third screen is refreshed to a fourth screen, wherein the fourth screen is different from the third screen, the fourth screen occupies a fourth display area on the display interface, the fourth display area includes an area on the display interface that is different from the third display area, and the fourth screen includes static screen content and / or dynamic screen content.

21. The method according to claim 20, characterized in that The method further comprises: When the fourth picture starts to be displayed, the second picture is refreshed to the first picture.

22. The method according to claim 20 or 21, characterized in that The second display area is a display area within a safety range corresponding to the first display area, and the method further includes: During the process of displaying the fourth picture, the second picture is kept displayed on the display interface.

23. The method according to any one of claims 1 to 22, characterized in that: The second picture includes dynamic picture content, and the method further includes: When a first event occurs, controlling the display of the second screen in a first manner; The first event includes at least one of the following events: The resource occupation corresponding to the second picture exceeds the first resource limit; Insufficient system resources of the electronic device; The power consumption corresponding to the second picture exceeds the power consumption threshold; The device temperature of the electronic device exceeds a temperature threshold; The first method includes: reducing the display quality of the second picture; Stop displaying the second picture; Release the component resources corresponding to the second screen.

24. The method according to any one of claims 1 to 23, characterized in that: The second screen includes artificial intelligence generated content.

25. The method according to any one of claims 1 to 24, characterized in that: The content source of the second picture includes the electronic device and / or the server.

26. An electronic device, characterized in that: include: A processor, a memory and a display screen, wherein the memory and the display screen are coupled to the processor, the memory is used to store computer program code, and the computer program code includes computer instructions. When the processor reads the computer instructions from the memory, the electronic device executes the method as described in any one of claims 1 to 25.

27. A computer-readable storage medium, characterized in that: The computer-readable storage medium comprises a computer program, and when the computer program is executed on an electronic device, the electronic device is enabled to execute the method according to any one of claims 1 to 25.

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

Images