Component effect display method and electronic device

Abstract

The application provides a component effect display method and an electronic device, and relates to the technical field of terminals. The application can respond to a trigger event, refresh the display picture of a first component, make the refreshed display picture occupy a display area on a display interface different from an original picture, provide a display experience with more visual impact for a user, and improve the interactive experience of the user. The method comprises the following steps: an electronic device displays a first picture of a first component, wherein the first picture occupies a first display area on a display interface. In response to a first trigger event, the first picture is refreshed into a second picture, wherein 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 on the display interface different from the first display area, and the second picture comprises static picture content and / or dynamic picture content.

Description

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

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

[0003] With the development of terminal technology, electronic devices are equipped with more and more functions, and operating systems support the development of components to provide users with a richer user experience. For example, electronic devices can display desktop cards and widgets to present key information to users and help them quickly activate corresponding functions. For instance, electronic devices can display weather cards to show users weather information and enable quick launch of weather applications.

[0004] However, the current components support limited content and cannot provide users with a richer and more vivid interactive experience. Summary of the Invention

[0005] To address the aforementioned technical problems, this application provides a component effect display method and an electronic device. The technical solution provided by this application, in response to a trigger event, can refresh the display screen of the first component, allowing the refreshed display screen to occupy a display area on the display interface that differs from the original screen, providing users with a more visually impactful display experience and enhancing the user's interactive experience.

[0006] To achieve the above-mentioned technical objectives, this application provides the following technical solution:

[0007] In a first aspect, a method for displaying component effects is provided, applied to an electronic device. The method includes: displaying a first screen of a first component, wherein the first screen occupies a first display area on a display interface; and, in response to a first triggering event, refreshing the first screen to a second screen, wherein the second screen differs from the first screen, occupies a second display area on the display interface, the second display area includes areas on the display interface different from the first display area, and the second screen includes static image content and / or dynamic image content.

[0008] In this way, the electronic device can display a second screen in a second display area that is different from the original first display area, 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 point, all content in the second screen can belong to the same layer as the content in the first screen. Thus, 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 above, the second screen can belong to the window to which the first screen belongs (such as a desktop window). 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 of the first aspect above, the second screen is used to present one or more of the following visual effects of the first screen: the effect of moving from the first display area to outside the first display area; the effect of extending from the first display area to outside the first display area; the effect of moving from outside the first display area to the first display area; and the effect of extending from outside the first display area to the first display area.

[0012] In this way, by changing the content of the first screen from the first display area to the second screen, a more seamless 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 screen may be enlarged before being refreshed to the second screen. Accordingly, the first display area is the display area occupied by the enlarged first screen.

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

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

[0016] According to the first aspect, or any implementation of the first aspect above, 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 triggers the refresh of the component screen occurring in the application corresponding to the first component; and an event used to indicate that the current time has reached a preset time.

[0017] In this way, by triggering various events, the corresponding screen of the component is refreshed, increasing the flexibility of the component's display effect.

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

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

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

[0021] According to the first aspect, or any of the above implementations of the first aspect, the second screen can be displayed by the first component.

[0022] In some examples, the second screen is displayed in one or any combination of the following ways: adding a child component to the first component and displaying the newly added screen content in the second screen by the newly added child component; displaying the newly added screen content in the second screen by the existing child component in the first component; or displaying the dynamic screen content in the second screen that uses the static screen content in the first screen to display animation effects by the existing child component in the first component.

[0023] Optionally, the new child component can be placed at the top of each of the child components of the first component.

[0024] In this way, electronic devices can display component effects through sub-components of the first component without having to create layers or windows, thus reducing the difficulty of displaying component effects.

[0025] According to the first aspect, or any of the above implementations of the first aspect, the first screen is refreshed to the second screen, including: the second screen is displayed by the 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 of the above implementations of the first aspect, the second component overrides 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 the second process of the second application to obtain the second screen rendered by the second process and displaying it in the second component.

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

[0030] In this way, by loading user interface extension components through a second application, the processing difficulty of component effect display is reduced.

[0031] According to the first aspect, or any of the above implementations of the first aspect, the second screen is the game screen of the first game, and the second application is the game application that runs the first game, or the game engine used to load and run the first game.

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

[0033] In this way, the overflow effect can be dynamically controlled through the first container, thus meeting 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, acquiring a screenshot of the second component within the first display area; wherein the preset condition includes detecting user operation outside the first display area, or not detecting user operation within the first display area within a preset time. The second component is then stopped from being displayed, and the screenshot is displayed within the first display area.

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

[0036] In this way, electronic devices can extend the process through the user interface to display game cards on both sides, enriching the card display effects, reducing the difficulty of card development, and increasing the universality of overflow effect display.

[0037] Furthermore, switching between different card states can meet users' usage habits and increase the flexibility of interaction.

[0038] 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, stopping the display of the second component, displaying the first component in the first display area, and overlaying a transparency mask on the first component; wherein the preset condition includes detecting user operation outside the first display area, or not detecting 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 by 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 by the user within the first display area, removing the transparency mask.

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

[0041] In this way, electronic devices can pause the card by taking a screenshot or using a transparency mask, 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] Thus, after the second process ends, the electronic device can automatically switch back to displaying the first component, 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 of the above implementations of the first aspect, the first positional relationship of the main image in the second component may be the same as or different from the second positional 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 ensure that the main area of ​​the main screen in the rendered second component maintains a relatively fixed relationship with the electronic device display screen. The main area of ​​the game screen can be adjusted in a timely manner according to 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, and adaptively presents 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 the first page information of the display interface, the first page information including the size and position information of the display areas of multiple components on the display interface; and determining the display area for displaying the second screen based on the first page information.

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

[0049] In this way, the electronic device can obtain the actual allowable overflow range (the display area of ​​the second screen) based on the current display interface, and display the component effects according to the actual allowable overflow range to meet the actual display requirements. Optionally, the component effects may include the second screen.

[0050] According to the first aspect, or any implementation of the first aspect above, 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 screen to ensure that the second screen does not intrude into 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 intrude into 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, if the second screen covers part or all of the target component in other components, the display duration of the second screen can be limited.

[0052] In this way, the electronic device determines the display area of ​​the second screen based on the display areas of other components, avoiding interference with the display of other components. Alternatively, it can prevent the display of the second screen from interfering with the display of the main content of other components. Or, the electronic device can limit the display duration of the second screen, which requires a large area, thus ensuring the display of the second screen while preventing it from affecting the display of other content and the user experience. This also helps prevent third-party components from maliciously occupying display area.

[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-region of the display area used to display the second screen, and the second sub-screen is displayed in a second sub-region of the display area used to display the second screen. Refreshing the first screen to the second screen in response to a first trigger event includes: in response to the first trigger event, the first application corresponding to the first component obtains first page information of the display interface, the first page information including size and position information of multiple components on the display interface. Based on the first page information, the first application determines the first sub-region and the target component adjacent to the first component, and triggers the display of the first sub-screen in the first sub-region. The first application sends a linkage effect instruction to the target application corresponding to the target component. The target application determines the second sub-region based on the linkage effect instruction and triggers the display of the second sub-screen in the second sub-region.

[0054] In this way, based on the page information, the electronic device displays interactive animations in the vicinity of the target component and other components around it, 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 display of the second screen, the display interface also includes a third screen of a third component, the third screen occupying a third display area on the display interface; the method further includes: in response to a second triggering 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 that is 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 above, the method further includes: refreshing the second screen to the first screen when the fourth screen begins to be displayed.

[0057] This reduces the power consumption of electronic devices and avoids display conflicts between the second screens corresponding to different components.

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

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

[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: controlling the display of the second screen according to the first method when the first event occurs. The first event includes at least one of the following events: the resource usage corresponding to the second screen exceeds a first resource limit; the system resources of the electronic device are insufficient; the power consumption corresponding to the second screen exceeds a 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 screen; stopping the display of the second screen; and releasing the component resources corresponding to the second screen.

[0061] In some examples, maintaining the display of dynamic visual content on electronic devices requires resources, generates power consumption and heat, which may affect the operation of other functions of the electronic device. Therefore, the electronic device can measure the resource consumption, power consumption and heat generation of the dynamic visual content, and under certain conditions, determine that it is in an abnormal scenario, and adjust the display of the dynamic visual content to release resources and reduce power consumption and heat generation.

[0062] According to the first aspect, or any of the above implementations of the first aspect, the second screen includes AI-generated content.

[0063] According to the first aspect, or any implementation of the first aspect above, the content source of the second screen includes electronic devices and / or servers.

[0064] Secondly, 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 stores computer program code, which includes computer instructions. 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 the display interface; and refreshing the first screen to a second screen in response to a first trigger event, wherein the second screen is different from the first screen, occupies a second display area on the display interface, and the second display area includes areas on the display interface different from the first display area. The second screen includes static image content and / or dynamic image content.

[0065] According to the second aspect, all content in the second screen can belong to the same layer as the content in the first screen.

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

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

[0068] According to the second aspect, or any of the implementations of the second aspect above, before the first screen is refreshed to the second screen, it may be enlarged first. Accordingly, the first display area is the display area occupied by the enlarged first screen.

[0069] According to the second aspect, or any of the implementation methods of the second aspect above, the content of the first screen can specifically be the existing screen content in the first screen, or the screen content related to the existing screen content in the first screen.

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

[0071] According to the second aspect, or any implementation of the second aspect above, 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 triggers the refresh of the component screen occurring in the application corresponding to the first component; and an event used to indicate that the current time has reached a preset time.

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

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

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

[0075] According to the second aspect, or any of the implementations of the second aspect above, the second screen can be displayed by the first component.

[0076] According to the second aspect, or any of the implementation methods of the second aspect above, the newly added sub-component can be located at the top of each sub-component of the first component.

[0077] According to the second aspect, or any implementation of the second aspect above, the first screen is refreshed to the second screen, including: the second screen is displayed by the second component corresponding to the first component.

[0078] According to the second aspect, or any implementation of the second aspect above, 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 above, the second component overrides 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 the second process of the second application to obtain the second screen rendered by the second process and displaying it in the second component.

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

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

[0083] According to the second aspect, or any implementation of the second aspect above, the second screen includes dynamic screen content. When the processor reads computer instructions from the memory, it further causes the electronic device to execute: in response to satisfying preset conditions, acquiring a screenshot of the second component within the first display area; wherein the preset conditions include detecting user operation outside the first display area, or not detecting user operation within the first display area within a preset time. Stop displaying the second component and display the screenshot within 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 memory, it also causes the electronic device to perform: in response to a first operation by the user within the first display area, switching from displaying a screenshot to displaying a 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 causes the electronic device to execute: in response to satisfying a preset condition, stop displaying the second component, display the first component in the first display area, and overlay a transparency mask on the first component; wherein the preset condition includes detecting user operation outside the first display area, or not detecting 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 computer instructions from memory, it further causes the electronic device to perform: in response to a first operation by 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 by 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 computer instructions from memory, it also causes the electronic device to perform: 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 of the above implementations of the second aspect, the first positional relationship of the main image in the second component may be the same as or different from the second positional relationship of the first display area in the display interface.

[0090] According to the second aspect, or any implementation thereof, when the processor reads computer instructions from memory, it further causes the electronic device to perform the following: obtaining first page information of the display interface, the first page information including size and position information of the display areas of multiple components on the display interface; and determining a display area for displaying a second screen based on the first page information.

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

[0092] According to the second aspect, or any implementation of the second aspect above, the method of determining the second display area includes any one or a combination of the following: setting the edge of the display area for displaying the second screen to ensure that the second screen does not intrude into 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 intrude into 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-region of the display area used to display the second screen, and the second sub-screen is displayed in a second sub-region of the display area used to display the second screen. Refreshing the first screen to the second screen in response to a first trigger event includes: in response to the first trigger event, the first application corresponding to the first component obtains first page information of the display interface, the first page information including size and position information of multiple components on the display interface. Based on the first page information, the first application determines the first sub-region and the target component adjacent to the first component, and triggers the display of the first sub-screen in the first sub-region. The first application sends a linkage effect instruction to the target application corresponding to the target component. The target application determines the second sub-region based on the linkage effect instruction and triggers the display of the second sub-screen in the second sub-region.

[0094] According to the second aspect, or any implementation of the second aspect above, during the display of the second screen, the display interface also includes a third screen of a third component, which occupies a third display area on the display interface. When the processor reads computer instructions from memory, it also causes the electronic device to execute: in response to the second triggering event, refresh the third screen to a fourth screen, wherein the fourth screen is different from the third screen, occupies a fourth display area on the display interface, the fourth display area includes areas on the display interface that are 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 computer instructions from memory, it also causes the electronic device to perform: when the fourth screen begins to be displayed, refresh 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 the display area within the safe range corresponding to the first display area. When the processor reads computer instructions from the memory, it also causes the electronic device to execute: while displaying the fourth screen, the second screen is kept displayed 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. When the processor reads computer instructions from memory, it also causes the electronic device to execute: in the event of a first event, controlling the display of the second screen according to a first method. The first event includes at least one of the following events: the resource usage corresponding to the second screen exceeds a first resource limit; the system resources of the electronic device are insufficient; the power consumption corresponding to the second screen exceeds a 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 screen; stopping the display of the second screen; and 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 AI-generated content.

[0099] According to the second aspect, or any implementation of the second aspect above, the content source of the second screen includes electronic devices and / or servers.

[0100] Thirdly, an electronic device is provided that has the function of implementing the method described in the first aspect and any of its possible implementations. This function can be implemented in hardware or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the described function.

[0101] Fourthly, a computer-readable storage medium is provided. The computer-readable storage medium stores a computer program (also referred to as instructions or code) that, when executed by an electronic device, causes the electronic device to perform the method of the first aspect or any embodiment of the first aspect.

[0102] Fifthly, a computer program product is provided that, when run on an electronic device, causes the electronic device to perform the method of the first aspect or any one of the embodiments of the first aspect.

[0103] In a sixth aspect, a circuit system is provided, the circuit system including processing circuitry configured to perform the method of the first aspect or any embodiment of the first aspect.

[0104] In a seventh aspect, a chip system is provided, including 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 performs the method of the first aspect or any embodiment of the first aspect.

[0105] The technical effects of the aforementioned aspects can be referenced from each other, and will not be elaborated further here. Attached Figure Description

[0106] Figure 1 This is a schematic diagram of the component display interface provided in an embodiment of this application;

[0107] Figure 2 A schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application;

[0108] Figure 3 A schematic diagram of the software structure of the electronic device provided in the embodiments of this application;

[0109] Figure 4 This is a schematic diagram of module interaction provided in an embodiment of this application;

[0110] Figure 5 A schematic diagram of component relationships provided for embodiments of this application;

[0111] Figure 6 This application provides a schematic diagram of a component animation display scenario. Figure 1 ;

[0112] Figure 7 This application provides a schematic diagram of a component animation display scenario. Figure 2 ;

[0113] Figure 8 This application provides a schematic diagram of a component animation display scenario. Figure 3 ;

[0114] Figure 9A This illustration shows the actual allowable overflow range of component animation provided in the embodiments of this application. Figure 1 ;

[0115] Figure 9B This illustration shows the actual allowable overflow range of component animation provided in the embodiments of this application. Figure 2 ;

[0116] Figure 9C This illustration shows the actual allowable overflow range of component animation provided in the embodiments of this application. Figure 3 ;

[0117] Figure 9D This is a schematic diagram of the component animation height provided in the embodiments of this application;

[0118] Figure 10 This is a schematic diagram of a component animation display content editing scenario provided in an embodiment of this application;

[0119] Figure 11 Flowchart of the component effect display method provided in the embodiments of this application Figure 1 ;

[0120] Figure 12 This is a schematic diagram showing the display area and height of the component linkage animation effect provided in the embodiments of this application;

[0121] Figure 13 This application provides a schematic diagram of a component animation display scenario. Figure 4 ;

[0122] Figure 14 Flowchart of the component effect display method provided in the embodiments of this application Figure 2 ;

[0123] Figure 15 Flowchart of the component effect display method provided in the embodiments of this application Figure 3 ;

[0124] Figure 16 This application provides a schematic diagram of a component animation display scenario. Figure 5 ;

[0125] Figure 17 Flowchart of the component effect display method provided in the embodiments of this application Figure 4 ;

[0126] Figure 18 This is a schematic diagram of the target component display process provided in the embodiments of this application;

[0127] Figure 19 This is a schematic diagram of component resources provided in an embodiment of this application;

[0128] Figure 20 Flowchart of the component effect display method provided in the embodiments of this application Figure 5 ;

[0129] Figure 21 Flowchart of the component effect display method provided in the embodiments of this application Figure 6 ;

[0130] Figure 22 Flowchart of the component effect display method provided in the embodiments of this application Figure 7 ;

[0131] Figure 23 This application provides a schematic diagram of a component animation display scenario. Figure 6 ;

[0132] Figure 24 Flowchart of the component effect display method provided in the embodiments of this application Figure 8 ;

[0133] Figure 25 This application provides a schematic diagram of a component state transition scenario. Figure 1 ;

[0134] Figure 26 This application provides a schematic diagram of a component state transition scenario. Figure 2 ;

[0135] Figure 27 This application provides a schematic diagram of a matching scenario between the main area of ​​the game screen and the display area of ​​the game cards in an embodiment. Figure 1 ;

[0136] Figure 28 This application provides a schematic diagram of a matching scenario between the main area of ​​the game screen and the display area of ​​the game cards in an embodiment. Figure 2 ;

[0137] Figure 29 This application provides a schematic diagram of a matching scenario between the main area of ​​the game screen and the display area of ​​the game cards in an embodiment. Figure 3 ;

[0138] Figure 30 This application provides a schematic diagram of a matching scenario between the main area of ​​the game screen and the display area of ​​the game cards in an embodiment. Figure 4 ;

[0139] Figure 31 This application provides a schematic diagram of a matching scenario between the main area of ​​the game screen and the display area of ​​the game cards in an embodiment. Figure 5 ;

[0140] Figure 32This is a schematic diagram of an irregularly shaped cropping scene for the main area of ​​the game screen provided in an embodiment of this application;

[0141] Figure 33 This is a schematic diagram of an example scenario for display area 2 provided in an embodiment of this application;

[0142] Figure 34 Flowchart nine illustrating the component effect display method provided in this application embodiment;

[0143] Figure 35 This is a schematic diagram of module interaction in a game animation scene provided in an embodiment of this application;

[0144] Figure 36 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0145] The technical solutions of the embodiments of this application are described below with reference to the accompanying drawings. In the description of the embodiments of this application, the terminology used in the following embodiments is for the purpose of describing specific embodiments only and is not intended to be a limitation of this application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to include expressions such as “one or more,” unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of this application, “at least one” and “one or more” refer to one or more (including two).

[0146] References to "one embodiment" or "some embodiments" in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized. The term "connection" includes direct connections and indirect connections, unless otherwise stated. "First" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated.

[0147] In the embodiments of this 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 this application should not be construed as being more preferred or advantageous than other embodiments or design solutions. Specifically, the use of the words "exemplarily" or "for example" is intended to present the relevant concepts in a specific manner.

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

[0149] For example, such as Figure 1 The electronic device shown in (a) displays a weather card 11 on its desktop. This weather card 11 displays weather information and allows for quick launch of weather applications. Figure 1 The electronic device shown in (a) also displays a clock card 12 on its desktop. This clock card 12 displays time information and allows for quick launch of the clock application. Alternatively, different types of electronic devices may display components in different forms, for example, such as... Figure 1 As shown by reference numeral 13 in Figure (b), the desktop of the electronic device displays multiple widgets for quick access to applications such as My Phone, Alarm Clock, and Clock. These widgets carry relatively little information. For example, such as... Figure 1 As shown in (c), the electronic device displays a more visual clock component 14 on the desktop to remind the user of the time.

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

[0151] In response, this 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 this application embodiment can be applied to electronic device 100. Optionally, electronic device 100 can be, for example, a mobile phone, tablet computer, personal computer (PC), ultra-mobile personal computer (UMPC), netbook, personal digital assistant (PDA), wearable device, artificial intelligence (AI) device, and other terminal devices. The operating system installed on electronic device 100 includes, but is not limited to, those that... Alternatively, other operating systems may be used. This application does not limit the specific type of electronic device 100 or the operating system installed on it.

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

[0154] Electronic device 100 may include processor 110, external memory interface 120, internal memory 121, universal serial bus (USB) interface 130, charging management module 140, power management module 141, battery 142, antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, audio module 170, sensor module 180, button 190, motor 191, indicator 192, camera 193, display screen 194, and subscriber identification module (SIM) card interface 195, etc.

[0155] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0156] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These 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. Interfaces 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 to peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI) and a display serial interface (DSI). In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to enable the electronic device 100 to capture images. The processor 110 and the display screen 194 communicate via the DSI interface to enable the electronic device 100 to display images.

[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 one or more communication frequency bands. Different antennas can also be multiplexed to improve antenna utilization. For example, antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with tuning switches.

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

[0161] Display screen 194 is used to display images, videos, etc. 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 (AMOLED), a flexible light-emitting diode (FLED), a mini-LED, a micro-LED, a micro-OLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, electronic device 100 may include one or N displays 194, where N is a positive integer greater than 1.

[0162] Camera 193 is used to capture still images or videos. An object is projected onto a photosensitive element by generating an optical image through the lens. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into image signals in standard RGB, YUV, or other formats. In some embodiments, the electronic device 100 may include one or N cameras 193, where N is a positive integer greater than 1.

[0163] The sensor module 180 may include pressure sensors, gyroscope sensors, barometric pressure sensors, magnetic sensors, accelerometers, distance sensors, proximity sensors, fingerprint sensors, temperature sensors, touch sensors, ambient light sensors, bone conduction sensors, etc.

[0164] A touch sensor, also known as a "touch device," can be located on the display screen 194. The touch sensor and the display screen 194 together form a touchscreen, also known as a "touchscreen." The touch sensor detects touch operations applied to or near it. The touch sensor can then transmit 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 some embodiments, the touch sensor may also be located on the surface of the electronic device 100, in a different position than the display screen 194.

[0165] In some embodiments, users can trigger animation effects of the display components of the electronic device 100 through various means such as touch, gaze, gesture, and voice. For example, during the display of a component by the electronic device 100, if the electronic device 100 detects a user's touch operation on the component via a touch sensor, it can trigger the display of the corresponding animation effect, thus achieving interaction with the user. As another example, during the display of a component by the electronic device 100, if the electronic device 100 detects a user's gaze on the component via a camera 193, it can trigger the display of the corresponding animation effect. Displaying the component animation effect only when the user is focused on it reduces the power consumption of the animation effect display while still enabling user interaction.

[0166] The software system of electronic device 100 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application embodiment uses the layered architecture Android system as an example to exemplify the software structure of electronic device 100.

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

[0168] A layered architecture divides software into several layers, each with a clear role and function. 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 libraries, and the kernel layer.

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

[0170] like Figure 3 As shown, the application package can include applications such as desktop, calendar, weather, notes, music, gallery, maps, calls, and video.

[0171] The application framework layer provides application programming interfaces (APIs) and a programming framework for 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 services, component management services, package management services, view systems, window managers, etc.

[0173] The component rendering service is used to render components and component effects.

[0174] Component management services are used for component management. For example, they manage the relationship between component providers and users, and also manage component users themselves. Component providers offer the component's content and configuration information. Component users host the component. For instance, a weather application in the application layer, acting as a component provider, can generate weather cards that can be displayed on the desktop, the negative one screen, and other locations. When the weather card is displayed on the desktop, the desktop acts as the component user. Therefore, the component management service can be used to manage the component usage relationship between the desktop and the weather application regarding the weather card.

[0175] Package management service is used to manage the installation of various applications 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 the component effects.

[0176] For example, such as Figure 4 As shown, when a component provider detects a component effect display event, such as a weather card that can switch its display content based on actual weather conditions, the weather application can use weather changes as a component effect display event to switch the displayed weather card content accordingly. Then, in response to this event, the component provider requests component effect display resources from the package management service and / or the content provider. The content provider, for example, is a server that can provide cloud-based component effect display resources. That is, the component provider can obtain component effect display resources from local storage and / or the cloud. Next, the component provider sends a component effect display request to the component management service. Based on this request, the component management service determines the component user corresponding to the component provider and triggers the component rendering service to render the component display effect. The component rendering service then sends the rendered data to the component user determined by the component management service, allowing the user to display the corresponding component's dynamic or static display effects, increasing the user's visual impact.

[0177] In some embodiments, the component provider is configured with a rendering engine, and the dynamic or static display effects 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 this rendering data and display it. That is to say, compared to Figure 4 As shown in the process, electronic devices render and display component effects through the interaction between component providers and component users in the application layer, without having to go through the component rendering service in the application framework layer.

[0178] Optionally, the rendering engine can be implemented through a pre-configured process in the component provider. For example, the component provider renders the component effect through this pre-configured process and obtains the corresponding rendering data. Then, the component provider sends the rendering data to the component user through the pre-configured process to display the component effect. Optionally, this pre-configured 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 this application embodiment does not limit the specific implementation method of the rendering engine. The following uses the example of the rendering engine being implemented as a UIExtension process and the corresponding rendering data being implemented as a UIExtension component to illustrate the display process of some component effects.

[0179] For example, the component animation of a game component may be a 3D animation, the processing of which is relatively complex. 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. Then, the game application sends the rendering data to the component user through the UIExtension process to realize the display of the 3D animation of the game component. Optionally, the rendering data is, for example, a UIExtension component.

[0180] This reduces the difficulty of processing the component effect display.

[0181] It should be understood that the following explanation will still use the component rendering service to render component effects as an example to illustrate the display process of component animations. For the component provider's direct rendering of component effects and the corresponding component animation display process, please refer to the various embodiments below, which will not be illustrated here again.

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

[0183] The window manager is used to manage windowed applications. It can retrieve screen size, determine the presence of a status bar, lock the screen, and capture screenshots, among other things.

[0184] System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0185] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

[0186] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[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 graphics engine for 2D drawing.

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

[0190] The following section provides a detailed description of the component effect display method provided in the embodiments of this application.

[0191] In some embodiments, components can also be described as objects, elements, etc., which are simple encapsulations of data and methods, possessing their own properties and methods. In some examples, applications with different functionalities can generate corresponding components to help users achieve these functionalities. Optionally, components may include, for example, user interface components, software development windows, text boxes, buttons, chart components, etc. For instance, a card component is one type of component.

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

[0193] For example, such as Figure 5 As shown, a container component may include one or more components (which can be non-container components or container components). These components are arranged in a top-to-bottom layout, forming a component tree. Optionally, the container component and the components belonging to it belong to the same tree structure; for example, components belonging to the container component can be described as child components of the container component. Optionally, a component tree corresponds to a window, and different components in the same component tree all correspond to that window. For example, as... Figure 6 As shown in (a), the electronic device displays a vehicle card, which is a container component. Its component tree includes multiple sub-components, such as components for displaying text on the vehicle card and components for displaying vehicle identification. The electronic device displays the vehicle card through window 1, and multiple components on the vehicle card are displayed in window 1.

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

[0195] The following section uses container components as cards to describe the display effects of the cards on the desktop, and details the component effect display method provided in the embodiments of this application.

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

[0197] In some examples, cards, also known as application cards, are a form of interface display that provides some of the application's functionality. They can interact with the application to achieve the corresponding function when a control operation is performed on a specific button. For example, application cards in a payment application might display payment codes or receiving codes, while application cards in a music application might provide play / pause, next track, and previous track buttons.

[0198] In some examples, application cards are typically customized by a third party (e.g., the application developer). These application cards can be embedded into other applications as part of their interface; for example, users (such as desktop applications or third applications in this embodiment) can embed application cards into their own interfaces. In other words, for any given application, the application card corresponding to that application is independent of the application itself, but can interact with the application to update or add important information or operations from that application.

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

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

[0201] For example, such as Figure 6 As shown in (a), a vehicle card is displayed on the desktop of the electronic device. This vehicle card displays information such as the vehicle status of vehicle A. In some examples, after receiving a component effect display event, the electronic device can display the card effect of the vehicle card. For example, if the electronic device detects that the user has driven to a parking lot, it can determine that it has received a component effect display event and needs to display a parking lot effect on the vehicle card. For example, the electronic device displays... Figure 6The card content shown in (a) can be a static image to indicate to the user that the vehicle is currently parking; or the card content can be a dynamic effect that changes as the vehicle moves to assist the user in parking, such as an animation effect that changes the position of the vehicle logo as the vehicle moves.

[0202] The following section uses a dynamic display effect of components as an example to describe in detail the component effect display method provided in this application embodiment. It should be understood that the static display effect of components can refer to the relevant content on dynamic display effects, and will not be repeated here.

[0203] In some embodiments, the container component has a container clipping function that clips 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.

[0204] For example, such as Figure 6 As shown in (a), the electronic device displays a vehicle card within display area 61. Generally, the electronic device clips the display content of the vehicle card outside display area 61 so that the user cannot see the display content outside display area 61. In some examples, when the electronic device determines that a dynamic display effect (hereinafter simply described as motion effect) of the vehicle card needs to be displayed, it can display the card motion effect within and / or outside display area 61. Wherein, if the electronic device displays the card motion effect outside display area 61, it can achieve the card overflow (or described as out-of-range) display effect, enriching the user's visual experience.

[0205] Optionally, the vehicle card is a container component, and the electronic device achieves card animation effects through the dynamic changes of the sub-components of the container component.

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

[0207] In this way, the electronic device displays component animation effects through the child components of the original container component's window, achieving an overflow effect. This enriches the user's visual experience without the need to create new windows and animation elements, simplifying the component animation display process and increasing the versatility of component animation display.

[0208] In some embodiments, the electronic device, in response to a component animation display event, acquires the animation information of a target component. The target component is the component whose animation is to be displayed, and the animation information includes, for example, the display content of the animation, the display method, and information about the display area 1 of the target component. The electronic device then displays the animation based on this animation information.

[0209] For example, such as 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's location information, and displays the automatic parking animation by showing a moving vehicle icon on the vehicle card. Then, as... Figure 6 As shown in (b), after the vehicle is parked in the target parking space, the electronic device can display an animation of the vehicle logo moving from outside the vehicle card into the vehicle card, helping the user understand that the vehicle has completed the automatic parking event.

[0210] As can be seen, the electronic device can display component animations within the vehicle card, or both within 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 same as or larger than the component's display area 1.

[0211] For example, such as Figure 6 In the automatic parking scenario (c), the electronic device responds to the automatic parking event by acquiring the garage map, the current vehicle's location information, etc., and displays an automatic parking animation by showing a moving vehicle icon. Then, after the vehicle leaves the garage, as... Figure 6 As shown in (d), the electronic device can display a rotating animation of the vehicle logo on the vehicle card; as Figure 6 As shown in (e), the electronic device can also display a vehicle identification image of the vehicle's trunk lid opening and closing animation on the vehicle card to prompt the user to pay attention to the status of the vehicle's doors, trunk lid, etc.

[0212] As can be seen, the animation effects of the aforementioned vehicle identifier can be displayed both within and outside the display area 1 of the vehicle card. The electronic device uses continuous animation effects of the same vehicle identifier to interact with the user's vehicle exiting the parking space, enhancing the user's interactive experience. Furthermore, this vehicle identifier is a sub-component belonging to the vehicle card; the component's animation effects can be displayed through this sub-component within the vehicle card's window.

[0213] In some embodiments, the electronic device obtains information about the display area 2 of the component animation based on the size 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 may include, for example, display interface size information (which may also be described as screen size information), information about other components on the display interface, etc.

[0214] For example, such as Figure 6 As shown in (b), when the electronic device displays the animation of a vehicle card, it does so based on the size and position information of the vehicle card, as well as the size information of the display interface. Specifically, screen constraints are used to ensure that the animation corresponding to the vehicle identification is displayed on the screen.

[0215] For example, such as Figure 7 As shown in (a), the electronic device displays a weather card 71, receives weather information indicating heavy rain, and can display a heavy rain animation. Specifically, the electronic device responds to a component animation display event and can display a heavy rain animation on the weather card 71. Alternatively, as... Figure 7 As shown in (b), the electronic device can obtain the size and position information of the weather card 71. Furthermore, based on the current page information of the weather card 71, the electronic device can determine if other components are displayed on the current screen, such as cards 72, 73, and 74 located around the weather card 71. Cards 72 and 73 are located below the weather card 71, and they may affect the display effect of raindrops falling in the heavy rain animation of the weather card 71. Therefore, the electronic device can obtain the position information of the upper edges of cards 72 and 73, and use this position information as the lower edge of the display area 2 corresponding to the heavy rain animation, thus ensuring that the display of the heavy rain animation of the weather card 71 does not affect the display of cards 72 and 73, and still achieves the display effect of raindrops falling on the upper edges of cards 72 and 73. For example, in response to a user operation, the electronic device deletes card 72. Then, as... Figure 8 As shown, the electronic device can obtain the display area 2 corresponding to the heavy rain animation effect based on the position information displayed on cards 73 and 74, and display the heavy rain animation effect in display area 2 to achieve the display effect of raindrops falling on the upper edges of cards 73 and 74. It can be seen that display area 2 is an area of ​​regular or irregular size.

[0216] In some embodiments, the electronic device can obtain the actual allowable overflow range based on the size information of display area 1 and page information, and use display area 1 and the actual allowable overflow range as the display area 2 corresponding to the component animation. It should be understood that display area 2 may also exclude display area 1, meaning the electronic device displays the component animation around the target component. Optionally, during component development, developers can configure a preset effect display range. Then, during the process of obtaining display area 2, the electronic device can obtain the overflow range based on page information, and combine the overflow range with the pre-configured preset effect display range to obtain the actual allowable overflow range.

[0217] For example, such as Figure 9AAs shown in (a), the electronic device can obtain the display range of a component, such as display area 1. In some example scenarios, the electronic device considers the entire display area excluding display area 1 as the actual allowed overflow range. In other example scenarios, the electronic device obtains the size and position information of other components surrounding the current component based on page information, and then obtains the actual allowed overflow range of the current component based on the size and position information of other components. This actual allowed overflow range is located outside the outer edges of other components, thus preventing subsequent component effects from affecting the display of other components. In other example scenarios, the component installation package includes a preset effect display range set by the component developer. In this case, the electronic device uses this preset effect display range as the actual allowed overflow range. In yet another example scenario, such as... Figure 9A As shown in (b), the component installation package includes a preset display range for the component developer. When the electronic device obtains the permissible overflow range based on the size and position information of other components surrounding the current component, it can match this permissible overflow range with the preset display range, taking the intersection of the two as the actual allowed overflow range. This avoids the developer's preset display range being too large, affecting the display of other components, and also prevents the situation where the permissible overflow range obtained by the electronic device based on page information is not the display range required by the developer.

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

[0219] In some embodiments, the user-visible display content on a component can be described as the component's main display content. In some examples, an electronic device displays a component including its main display content, with a display area 1 for displaying this main display content. Therefore, the electronic device achieving an overflow component effect includes the component effect extending beyond the display area 1 of the main display content. Furthermore, in determining the actual permissible overflow range, the electronic device obtains the position and size information of other components surrounding the current target component based on page information, which is also determined based on the main display content of these other components, thereby providing the user with a more realistic and natural component effect display experience.

[0220] For example, such as Figure 9BIn the scenario shown, the target component is weather card 71, and the effect to be displayed is a heavy rain animation. The electronic device obtains page information and identifies cards 73 and 74 surrounding the weather card. The main display content of card 74 is the car logo 91; other content on card 74 is invisible to the user. Alternatively, from the user's perspective, card 74 is the car logo 91. Therefore, the electronic device can display the following based on the top edge position information of card 73 and the top edge position information of the car logo 91: Figure 9B The weather card 71 shows a heavy rain animation. It can be seen that the raindrops are currently falling on the upper edge of the car logo 91, better meeting the user's expectations for the component's display effect.

[0221] Optionally, electronic devices can use image recognition algorithms such as image segmentation algorithms to obtain information such as the size and position of the main display content of the component.

[0222] Optionally, the component may include one or more primary display contents. When there are multiple primary display contents, the electronic device may combine the display areas of these multiple primary display contents to obtain a large display area that can cover the display areas of the multiple primary display contents. Subsequently, the electronic device determines the actual permissible overflow range based on this large display area.

[0223] In this way, electronic devices can provide users with a better component display experience by recognizing the main content displayed by the components.

[0224] Optionally, for the sake of simplicity, the display area of ​​a component refers to the display area of ​​the main display content of the component, or a large display area composed of the display areas of multiple main display content. This will not be elaborated further below.

[0225] In some embodiments, the display types of component animation effects include long-duration display and short-duration display. Long-duration display can also be described as continuous display, including continuously displaying the component animation effect during the display of the component. Short-duration display includes displaying the component animation effect for a preset duration during the display of the component, or displaying the component animation effect for a preset duration according to a preset cycle.

[0226] In some examples, component animations that are displayed for a long time are those that don't require a large display area. In this case, displaying the animation for an extended period won't affect the display of other components. Conversely, component animations that are displayed for a short time are those that require a large display area. In this case, displaying the animation might affect the display of other components, therefore, the duration of the animation needs to be limited. It should be understood that some long-duration component animations can also be displayed over a large area, and some short-duration component animations can also be displayed over a small area.

[0227] In some examples, the display type of component animations is pre-configured within the component. For instance, during component development, developers configure the component animations and their display types.

[0228] In some examples, after receiving a component animation display event, if a component determines that it needs to display an animation, it can send an animation display request to the system, including the display type in the request. Accordingly, the system responds to the animation display request by obtaining the actual allowed overflow range of the component animation.

[0229] Optionally, when the display type is long-duration display, the actual allowed overflow range is, for example, a safe range. The system can obtain information such as the distance between the component whose animation effect is to be displayed and its surrounding components based on the component's position and size, as well as the positions and sizes of surrounding components, thereby determining the safe range. Within this safe range, displaying the component's animation effect for an extended period will not affect the display of other components.

[0230] For example, such as Figure 9C As shown in (a), the electronic device displays a desktop with a weather card 92. In response to the current weather being cloudy, the weather card 92 sends an animation display request to the system, specifying a long-term display type in the request. The system then determines a safe range 93 based on the display of various cards and application icons on the desktop. This safe range 93 is a certain distance around the weather card 92. The system then sends this safe range 93 to the weather card 92, allowing the weather card 92 to continuously display the cloudy animation within the safe range 93. It can be seen that this cloudy animation does not affect the display of other cards and application icons on the desktop.

[0231] In this way, electronic devices can display component animations for extended periods without affecting the display of other components, satisfying a richer display experience while avoiding interference with the user's use of other components.

[0232] Optionally, when the display type is a short-duration display, the system can obtain the display duration of the component animation effect in the short-duration display. This display duration may be, for example, a preset duration and / or a preset period. Optionally, the system can also obtain the actual allowable overflow range of the component animation effect in the short-duration display. Optionally, the electronic device has preset durations and preset periods.

[0233] For example, such as Figure 9CAs shown in (b), the electronic device displays a desktop with a weather card 92 on it. In response to receiving information that the current weather is thunderstorm, the weather card 92 sends a motion effect display request to the system, specifying a short-duration display type in the request. Alternatively, the weather card 92 sends a motion effect display request to the system, specifying a display area in the request. If the system determines that the display area is a large area, it can assign a short-duration component motion effect to the weather card 92. For example, the display area 2 of the thunderstorm motion effect is the area shown in the dashed box 94. The weather card 92 displays a thunderstorm motion effect of a preset duration within the dashed box 94. Optionally, the weather card 92 can also display a thunderstorm motion effect of a preset duration within the dashed box 94 according to a preset cycle.

[0234] Therefore, electronic devices limit the display duration of animations for components that require a large display area. This ensures the animations display correctly while preventing them from interfering with the display of other content and affecting user experience. It also prevents third-party components from maliciously occupying display space.

[0235] In some embodiments, within a preset scenario, 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 scenario may be, for example, a preset component being in an active state. Optionally, the preset component may be, for example, a component that requires extensive interaction with the user, such as a game component.

[0236] In some examples, component states include active and inactive states. An active state indicates that the component is in use; the electronic device activates the component in response to user interaction. For example, in response to user touch on the component, eye contact with the component, or other actions, the electronic device gains focus on the component, triggering it to enter the active state. An inactive state indicates that the component is not in use. Optionally, the active state may also include a paused state. For example, while the component is in the active state, if the electronic device detects user input indicating that the user should interact with other components or blank areas, such as switching focus to a location outside the component, it instructs the component to switch to a paused state. Optionally, the component state can also be described as including active, paused, and inactive states. Optionally, the component state can also be described as the component animation state.

[0237] In some examples, the component's animation is displayed while the component is in an active state. The display of the corresponding component animation is paused while the component is in a paused state. The component's animation is not displayed while the component is in an inactive state. Optionally, while the component is in a paused state, the electronic device may maintain the display of the component animation within the component's display area 1. Optionally, maintaining the display of the component animation includes maintaining a scaled-down version of the last frame image displayed in the active state before the component state was switched within the display area 1. Alternatively, the electronic device may not display the component animation while the component is in a paused state.

[0238] In some examples, as mentioned above, the component provider has a rendering engine configured, and the component's dynamic or static display effects can also be rendered by the rendering engine in the component provider, which will then output the rendered data. For example, the application obtains the UIExtension component used to display the component's animation effects by calling the UIExtension process.

[0239] For example, an electronic device displays an inactive game card on a desktop; the currently displayed game card is a regular card. In response to user actions or other triggering conditions, the game application determines that the game card needs to be activated. The electronic device can then trigger and display a UIExtension component, through which the game card's animation effect is displayed. The UIExtension component displayed by the electronic device is in an active state. Optionally, in response to user actions (such as user interaction with an empty area of ​​the desktop), the UIExtension component switches to a paused state. Subsequently, in response to a user's instruction to exit the game animation effect, the electronic device can re-display a regular card, which is now an inactive game card. Optionally, in the current scenario, the UIExtension component can also be described as a game play card. Optionally, in the current scenario, the game card configuration can be understood as having two component display methods, such as "one card, two sides," where one side displays a regular card and the other side displays a game play card. It should be understood that the regular card and the game play card are not displayed simultaneously.

[0240] In some examples, a component (or its corresponding application) can request the ability to receive user input from the system. For instance, after acquiring this ability, the component can receive and process user actions within its display area 1. For example, if the component is a music card with play controls, the music card can play music in response to the user's interaction with the play controls. Or, if the component is a game card with mini-game controls, the game card can launch the mini-game in response to the user's interaction with the mini-game controls. Optionally, in response to the mini-game launching, the game card switches to an active state and displays mini-game animations that extend beyond display area 1, providing a better gaming experience for the user. For example, the user can directly perform mini-game operations on the desktop. In this way, the component takes over user input, avoiding conflicts between user gestures and some gesture commands in the system.

[0241] Optionally, after the electronic device displays the component, the system can directly instruct the component to acquire the ability to receive user input, without requiring the component to request it from 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 component's display area 1.

[0242] In some examples, the system is used to manage component states, such as managing the lifecycle 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, within a preset scenario, the electronic device can display component animations over a large area. Optionally, the electronic device adjusts the transparency of the component animations so that the display of overflowing animations beyond the component's display area 1 does not affect the display of other components. Optionally, the overflowing animations beyond the component's display area 1 serve as visual effects but do not receive input events, so that the display of component animations does not affect user operations on other components that may be covered by the component animations.

[0244] For example, such as Figure 9CAs shown in (c), the electronic device displays a desktop with a game card 95 on it. In response to a user's action on the game card 95, the electronic device triggers the display of a component animation of the game card 95. This component animation extends beyond the display area 1 of the game card 95, achieving an 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 it does not affect the display of the weather card 92. Optionally, in response to a user's action on the weather card 92 (or an action on a blank area of ​​the desktop), the component animation of the game card 95 switches from an active state to a paused state, and the electronic device displays the component animation within the display area 1 of the game card 95. Subsequently, in response to a user's action on the game card 95, the electronic device triggers the component animation of the game card 95 to switch from a paused state to an active state, continuing to display the component animation in full screen.

[0245] Optionally, overflow animations beyond the component's display area 1 can serve as visual effects or receive input events, thereby increasing the interactivity between the component's animations and the user. For example, a portion of the component's animation can be configured with a focus area. In response to the user's operation on the focus area, the electronic device can trigger the display of the corresponding animation, enabling interaction between the user and the component's animation.

[0246] This allows for more flexible component animation display effects, avoiding disruption to user operations.

[0247] In some embodiments, after a component's state switches to a paused state, the electronic device can pause the display of the component's animation and pause the component's process; after a component's state switches to an inactive state, the electronic device can continue displaying the component's animation and continuing the component's process. This reduces the power consumption of the component's animation display and process execution, thus reducing the electronic device's overall power consumption.

[0248] Optionally, if the electronic device does not detect any activation of the component within a preset waiting period after the component state switches to the paused state, the component state can then switch from the paused state to the inactive state, thereby further reducing power consumption.

[0249] For example, such as Figure 9CAs shown in (c), during the display of the component animation of game card 95 on the electronic device, in response to the user's left or right swipe operation on the desktop, the electronic device switches to displaying other sub-pages on the desktop, on which game card 95 is not displayed. During the period when game card 95 is not displayed, the component animation of game card 95 switches from an active state to a paused state. Subsequently, if the electronic device responds to the user's right or left swipe operation on the desktop and displays a sub-page including game card 95 again, the component animation of game card 95 switches from a paused state to an active state, and the component animation continues to be displayed. Alternatively, if the electronic device does not detect a user instruction to switch back to displaying a sub-page including game card 95 within a preset waiting time (e.g., 20 minutes), the component animation of game card 95 switches from a paused state to an inactive state to reduce power consumption.

[0250] Optionally, after a component's state switches to the paused state, the component animation may not be displayed; instead, the same content as when the component is inactive may be displayed. Alternatively, when the component is inactive, the displayed content may be placeholder content, such as a preview of the component shown during the component's addition process. For example, ... Figure 10 As shown in (a), during the card addition process, the electronic device displays a card preview. Then, after the component's state switches to a paused or inactive state, the electronic device displays the card preview content. Optionally, when the component's state is inactive, the displayed content can also be switched according to user actions. For example, in response to a user's left or right swipe on the card, the electronic device can switch between displaying different function pages corresponding to the card.

[0251] In some embodiments, the electronic device does not display multiple 3D component animations simultaneously, thereby reducing power consumption. Optionally, 2D component animations can be displayed in parallel. For example, while displaying component animations (2D or 3D component animations), the electronic device may display other 2D component animations.

[0252] In some examples, the electronic device does not display other 3D component animations while displaying 3D component animations.

[0253] For example, such as Figure 9C In the scene shown in (c), the electronic device periodically displays a lightning effect for the weather card 92. This lightning effect is as follows: Figure 9C The large-scale overflow of 3D animation is shown in (b). In response to the user activating game card 95, the electronic device displays the component animation of game card 95. During the display of the component animation of game card 95, the electronic device stops the periodically displayed lightning animation of weather card 92. This reduces the power consumption of the electronic device and avoids display conflicts between different animations.

[0254] Optionally, such as Figure 9C In the scenario shown in (c), while displaying the component animations of game card 95, the electronic device still displays the 2D animations of clouds and rain within the safe range corresponding to weather card 92. The 2D animations consume less power, thus reducing power consumption while maintaining display quality.

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

[0256] Optionally, the electronic device displays component animations through a preemptive mechanism. For example, two weather cards, Weather Card 1 and Weather Card 2, are displayed on a desktop. Both weather cards need to display periodic component animations with overflow effects. While the electronic device is displaying the component animation of Weather Card 1 according to period 1, it obtains the period 2 when it is time to display the component animation of Weather Card 2. 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, which is displayed later, preempts the display of the component animation of Weather Card 1, which was displayed earlier. In this way, by using preset rules, multiple component animations are avoided from being displayed simultaneously, reducing 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 component animation A.

[0258] Optionally, the periodically displayed component animation can be, for example, a 3D component animation that requires significant resources. Alternatively, it can be a 2D component animation.

[0259] In some embodiments, the power consumption of component animations for certain components is relatively high. Therefore, in order to reduce power consumption, electronic devices allow applications corresponding to such components to create one component, or a small number of components.

[0260] For example, a game application may have multiple mini-game functions, each of which can create corresponding mini-game cards. During the mini-game card creation process, if a mini-game card is already displayed on the screen, the electronic device may not allow the addition of a new mini-game card. This reduces the power consumption generated by the animation effects of the mini-game card display components.

[0261] Optionally, the electronic device can display components of different sizes. Therefore, for components with high animation overhead, the electronic device can also create a component of a single size, or a small number of components of different sizes.

[0262] For example, a game application may have game cards of different sizes. During the game card creation process, if a game card for the current game application is already displayed on the desktop, the electronic device will not allow the addition of a new game card of a new size. Optionally, the new game card of a different size that is not allowed to be added corresponds to the same mini-game within 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 displays 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 overflow area by adjusting the camera's field of view of the 3D scene. For example, the size of the display area 2 of the component animation is adjusted by magnifying or shrinking the field of view. For example, as... Figure 7 The 3D scene with rain animation shown is enlarged by the electronic device by magnifying the field of view to increase the size of the display area 2.

[0265] In this way, by adjusting the field of view, the display of component animation effects can achieve a better display effect compared to directly enlarging or shrinking the display content of component animation effects.

[0266] In some embodiments, after determining that component animation effects need to be displayed, the electronic device can raise the hierarchy of the sub-components used to display the animation effects to achieve the display of the component animation effects. Optionally, components with higher hierarchy heights can cover other components with lower hierarchy heights. As mentioned above, container components and their sub-components belong to the same component tree. Furthermore, all display content displayed on the interface can also form a large component tree, and the component tree corresponding to the container component is the component branch structure in this large component tree. The hierarchy in this large component tree is used to describe different component heights; the higher the component hierarchy, the higher it can be displayed. The display content visible to the user is the upper-level component, while the covered components are not visible to the user. The component hierarchy can be described by the Z-axis height. Optionally, the electronic device can achieve the display of upper-level component animation effects by adjusting the Z-axis height of the component tree corresponding to the container component and the Z-axis height of the sub-components in the component tree. Optionally, some or all of the sub-components in the sub-component displaying the component animation effects can achieve the corresponding display effect by adjusting their transparency. Therefore, in some example scenarios, the user can also see other components covered by the component animation effects.

[0267] For example, such as Figure 9DAs shown, the electronic device needs to display the animation of the weather card 71. This can be achieved by adjusting the Z-axis height of the corresponding component to display the overflow component animation within the original card size and overflow range.

[0268] In this way, electronic devices can constrain the display of component animations based on the screen size and the display position 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 component animation effect is positioned at a lower level than the preset display content, thereby preventing the component animation effect from affecting the display of the preset display content. Optionally, the preset display content may be, for example, a notification or a floating window. For example, this prevents the notification or floating window from being covered by the component animation effect, which could affect the timeliness of the notification or the user's use of the floating window. Optionally, the notification may include, for example, a pop-up notification.

[0270] For example, after receiving a component animation display event corresponding to a game card, the electronic device displays the corresponding component animation in full screen. The layer height of this component animation is higher than the layer height of other components displayed on the original desktop. During the display of this component animation, the electronic device receives a notification message. The electronic device can then display this notification message via a pop-up window, where the pop-up window's layer height is higher than the layer height of the game card's component animation. This ensures that the notification is easily visible to the user during the display of the component animation without affecting the display of the component animation itself.

[0271] For example, after the electronic device receives the component animation display event corresponding to the game card, it also detects that a floating window, such as a picture-in-picture window for a video application, is currently displayed on the desktop. The electronic device can then display the overflow effect of the game card's component animation, but the layer height of the game card's component animation must be lower than the layer height of the floating window. This ensures the component animation is displayed while avoiding interference with the user's operation of the floating window's content.

[0272] In some embodiments, the display areas of multiple component animations may overlap. Therefore, as mentioned above, the electronic device can use a preemption mechanism to display the latest required component animation. Optionally, the overlap of some component animations may not be reconciled even through the preemption mechanism. In this case, the electronic device can help coordinate the display of different component animations based on user actions or displayed prompts. 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 a short-duration overflow animation and a long-duration component animation may overlap.

[0273] For example, an electronic device may display multiple component animations overlapping. The device can then adjust the display position of the components corresponding to the overlapping animations based on user input to avoid overlap. This allows the user to choose whether to adjust the overlapping display effect of the component animations according to their aesthetic preferences.

[0274] For example, during the component addition process, the electronic device automatically adds the component to areas where component animations will not overlap. For instance, when a user instructs the addition of a component to the desktop, the electronic device detects that the component to be added requires displaying its animation. Therefore, the electronic device can add the component based on the display area requirements of the component animations currently displayed on the desktop, ensuring that the animations of the added component do not overlap with those of other components. For example, if there is a blank area on a subpage of the desktop that can display the component to be added, but adding the component to the current subpage might cause animation overlap, the electronic device will also add the component to other subpages.

[0275] Optionally, the electronic device also records the display area 2 of the component animation as the component's placeholder area. In this way, during the component addition process, even if the currently added component does not display its animation, the electronic device can directly determine whether a new component can be added based on the current placeholder situation of the subpage.

[0276] Optionally, during the component addition process, the electronic device may encounter an issue where the animation of the component to be added overlaps with the animation of an already added component. In such cases, the electronic device can display a prompt message to ask the user whether to continue adding the component. Afterward, the electronic device determines whether to add the component based on the user's actions.

[0277] As another example, after receiving a component animation display event, the electronic device may find that the currently displayed component animation might overlap with the display of other component animations. In this case, the electronic device can display a prompt message asking the user whether to continue displaying the component animation. Then, based on the user's action, the electronic device determines whether to display the component animation.

[0278] In this way, electronic devices can flexibly display component animations in various ways, avoiding overlapping component animations that would affect the display effect.

[0279] In some embodiments, the electronic device can adjust the transparency of a component in response to the display of its effects. For example, the electronic device can adjust the component transparency to 100%, or it can adjust the component transparency to be greater than a preset transparency threshold. This way, a more transparent component display will not affect the display of the component animation and provides the user with a better experience of displaying component effects. For example, the electronic device can adjust the transparency of all sub-components in the target component, except for the sub-component used to display the component effect, to 100%.

[0280] In some embodiments, component animations support user-customizable settings to meet users' personalized usage needs.

[0281] For example, such as Figure 10 As shown in (a), during the card addition process, the electronic device displays a card preview window 101 to allow the user to confirm the relevant information of the added card. In response to the user's operation of the settings control 102, such as... Figure 10 As shown in (b), the electronic device can display a card content editing window 103. In this window, the user can select to edit the displayed card content, card animation effects, etc. For example, if the card to be added is a game card, and the corresponding game application supports personalized content such as skins, characters, and equipment, then the electronic device can display an entry point in the card content editing window 103 for editing this personalized content. The user can then select to edit this personalized content according to their needs. Subsequently, in response to the user's... Figure 10 The operations in the card preview window 101 shown in (a) are as follows: Figure 10 As shown in (c), the electronic device can add game cards 104. The displayed content of the game card 104 matches the personalized content edited by the user. Furthermore, when an animation effect of the game card 104 is subsequently triggered, the displayed content of that animation also matches the personalized content edited by the user. For example, the displayed content on the game card 104 includes the character selected by the user, and the animation effect includes the animation effect of the selected character. 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 launch the game application and display, as shown in (c). Figure 10 The card content editing interface shown in (d) is part of the game application, where users can edit personalized content.

[0282] It should be understood that, in response to the user's operation of the settings control 102 in the card preview window 101, the electronic device can also directly launch the game application and display, as shown above. Figure 10The card content editing interface shown in (d) of the game application allows users to edit personalized content, enriching the display of game card animations. Furthermore, the game application also provides a card content editing entry point; in response to user actions within the game application, the electronic device can switch to display the card content editing interface to receive personalized edits.

[0283] In this way, electronic devices display the component animations requested by the user based on their actions, providing a more personalized animation display experience. This enriches the user's visual experience and enhances the overall user experience.

[0284] Optionally, the application corresponding to the component has built-in algorithm logic that supports updating the displayed content of the component's animation effects. This eliminates the need for users to configure settings themselves, allowing electronic devices to provide personalized display effects and simplifying user operations.

[0285] For example, when an electronic device displays a game card, in response to a component animation display event, the device can obtain the account logged into the corresponding game application through the game application associated with the game card, and obtain the game character information used by that account in that game application. Then, the electronic device can obtain the component animation associated with the game character. Optionally, the game character information includes, for example, skins, characters, equipment, etc. This allows the electronic device to display different game card animations as the skins, characters, equipment, etc., change.

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

[0287] The following example, using the card animation displayed on the desktop, illustrates the interaction flow of each module during the component animation display process.

[0288] Figure 11 This is a flowchart illustrating a component effect display method provided in an embodiment of this application. It should be noted that this method does not rely on... Figure 11 The specific order described below is a limitation. 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 the component animation display event and obtains the animation information.

[0290] In this context, the component provider is, for example, the application corresponding to the target component whose animation effect is to be displayed. For instance, if the target component is a weather card, the component provider is the weather application corresponding to the weather card.

[0291] In some embodiments, the component provider may determine that a component animation display event has been detected if a preset triggering condition is met. Optionally, the preset triggering condition may include, for example, detecting a preset user operation, reaching a predetermined time, reaching a preset location, or obtaining weather information. For instance, if the component provider obtains weather information and determines that a component animation display event has been detected, it 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 the electronic device, which trigger the component animation display. Events that passively trigger component animation display include events triggered by timed mechanisms, fixed-point mechanisms, content refresh display requirements, etc. Optionally, content refresh display requirements include, for example, obtaining changes in weather information, which requires refreshing the display of weather animations.

[0293] Optionally, user-preset operations may include touch operations, gesture operations, voice operations, and visual operations on the display screen. The component provider can obtain sensor data and, based on the sensor data, obtain weather information and determine whether a preset time or location has been reached.

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

[0295] S1102, The component provides a direction for the component user to request page information.

[0296] Optionally, the component user may be the desktop, the negative one screen, etc. For example, if 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 may include, for example, information about the display interface size and information about other components on the display interface.

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

[0299] S1103. The component provider obtains the animation display information based on the page information and animation information.

[0300] In some embodiments, after obtaining page information and animation information, the component provider can obtain animation display information based on the page information and animation information. The animation display information indicates information such as the display area, display position, and display content of the component animation.

[0301] For example, such as Figure 7 In the scenario shown, a weather card is displayed on the desktop. In response to the received weather information indicating rain, the desktop retrieves page information and animation information. Based on the size and position information of the weather card's display area 1, as well as the size and position information of other cards displayed on the page, the desktop can obtain the animation display information for the rain effect of the weather card, including the size and position information of display area 2, and the location information of the rain effect resource. Display area 2 is larger than display area 1 to facilitate the retrieval of rain effects that overflow the card.

[0302] S1104, The component provides direction component rendering services to send animation display information.

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

[0304] In some examples, the component provider can also implement motion rendering. That is, the component provider can also implement the steps executed by the component rendering service in this process, which will not be elaborated further below. Optionally, the electronic device may instruct the component rendering service to perform rendering tasks, or instruct the component provider to perform rendering tasks, according to pre-configured rules.

[0305] S1105, Component rendering service renders component animations and obtains rendering data.

[0306] In some embodiments, after receiving the animation display information, the component rendering service can obtain the animation resources based on the resource location information included therein, so as to perform component animation rendering and obtain rendering data.

[0307] Optionally, resources may include local resources, cloud resources, etc. When the resource is a cloud resource, the component provider can download the cloud resource and store it locally. The resource location information obtained by the component rendering service includes the storage location of the downloaded cloud resource. Based on this resource location information, the rendering service can obtain all resources to complete the rendering of the component's animation effects.

[0308] Optionally, the component animation can be two-dimensional or three-dimensional. 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 component animations. Correspondingly, the component user receives the rendering data sent by the component rendering service.

[0311] S1107. The component user adjusts the component's load-bearing dimensions and Z-axis height to display the component's animation effects.

[0312] In some embodiments, when the component provider requests page information, the component user can obtain the component animation display requirements. After obtaining the rendering data, the component user can adjust the component's footprint and Z-axis height based on the rendering data to display the component animation. The component footprint, for example, is the size of the display area 2 used to display the component animation. Adjusting the Z-axis height of the child component corresponding to the animation to be higher than the Z-axis height of other child components allows the animation to overlap and be displayed above other child components, thus providing the user with an overflow display effect for 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 can be obtained, enriching the user's visual experience and enhancing the interactivity of the component animation.

[0314] In some embodiments, when other components exist around the target component, the display area 2 of the target component's animation effect can be defined by the outer edge of or near the outer edge of the other components. Alternatively, the target component's animation effect can also cover other components. Alternatively, the target component can also display its animation effect together with other components, thereby achieving a linked animation effect and providing a better visual experience for the user. Optionally, during the linked animation effect display process, the target component and / or other components may exhibit an overflow animation effect.

[0315] For example, such as Figure 12 As shown in (a), the electronic device displays multiple cards. The electronic device receives a component animation display event for card 31 and obtains the size and position information of display area 1 of card 31. Then, the electronic device can obtain the display area 2 of the component animation based on the page information, such as... Figure 12 The display area 311 is shown in (b). The display area 311 partially covers the cards surrounding card 311, such as card 32, card 33, and card 34. Therefore, if the electronic device displays component animations on the display area 311, the component animations can achieve a display effect that overflows card 31. Furthermore, other cards covered by the display area 311 can also display combined animations, presenting an interactive display effect. For example, Figure 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 visible component animations.

[0316] For example, such as Figure 13 As shown in (a), the electronic device displays card 131, and in response to a component motion effect display event, the electronic device displays component motion effects within display area 1 of card 131. Alternatively, as... Figure 13 As shown in (b), in response to the component animation display event, the electronic device displays overflow animations (such as the eye animation displayed on card 131 and the lightning animation that exceeds the display area 1) according to the page information. At the same time, corresponding animations are also displayed on other components around card 131, presenting an interactive effect and further enhancing the fun of component animation display.

[0317] In this way, based on the page information, the electronic device displays interactive animations in the vicinity of the target component and other components around it, increasing the fun of the component animation display and improving the user experience.

[0318] In some examples, electronic devices achieve the display of linked animation effects through the component provider corresponding to the target component.

[0319] For example, such as Figure 14 As shown, step S1107 above also includes step S1401. Specifically, in step S1103, the component provider obtains information about the components surrounding the target component based on the page information, and obtains the display area 2 of the component's animation effect based on the animation information. This display area 2 can cover the display areas of other components. Subsequently, in step S1107, the component user adjusts the component's carrying size and Z-axis height, enabling other components to display synchronized animation effects. The carrying size includes the display areas of other components. Adjusting the Z-axis height of the component corresponding to the animation effect to be higher than the Z-axis height of other components allows the component's animation effect to overlap and display above other components, thus providing the user with an effect of overflowing component animation effects and synchronized display with other components.

[0320] In this way, electronic devices can achieve synchronized animation effects without the need for other components, through the component provider.

[0321] In other examples, when an electronic device determines that it needs to display a synchronized animation effect, it can obtain the components involved in the effect. These components include the component provider of the target component whose animation effect needs to be displayed. The component provider of the target component can send a synchronized effect instruction to the component providers of other components involved in the synchronized animation effect. This instruction instructs the other components to display the synchronized animation effect. In this way, through the cooperation of the target component and other components, the electronic device can display a synchronized animation effect.

[0322] For example, such as Figure 15 As shown, in step S1103 above, the component provider can obtain information about the components surrounding the target component based on the page information, and obtain the display requirements of the linkage animation based on the animation information. Therefore, the component provider not only obtains the animation display information of the component animation that it needs to trigger and sends this animation display information to the rendering service, but also sends linkage effect instructions to the component providers of other components that need to display linkage animations (as in step S1501). Correspondingly, as shown in step S1502, after receiving the linkage effect instruction, the component providers of other components can obtain the linkage animation display information in response to the instruction. This linkage animation display information includes, for example, the resource location information, display area size information, and location information of the corresponding linkage animation. Afterwards, the component providers of other components can send the linkage animation display information to the component rendering service to trigger the component rendering service to render the linkage animation. Therefore, the rendering data obtained by the component rendering service includes the rendering data instructed by the component provider of the target component, and the rendering data instructed by the component providers of other components. Subsequently, the component users can display interactive animations based on the obtained rendering data.

[0323] In this way, electronic devices can achieve synchronized animation effects by cooperating with the component providers of the target component and other components.

[0324] In some embodiments, electronic devices can also generate component animation display content through artificial intelligence generative content (AIGC), thereby presenting a more vivid component animation display effect.

[0325] For example, such as Figure 16 As shown in (a), the electronic device displays weather card 161. Responding to the weather information being heavy rain, it determines that a heavy rain animation effect needs to be displayed. Therefore, the electronic device can call the AIGC module to obtain the animation display content. For example... Figure 16 As shown in (b), the electronic device displays the animation content output by the AIGC module, which provides a better visual effect.

[0326] For example, when an electronic device displays a game card, it can obtain the corresponding game application login account and the game character information used by that account within the application. Subsequently, through the AIGC module and interaction with the server, the electronic device can obtain component animations associated with the game character. Optionally, the game character information includes, for example, skins, characters, and equipment. This allows the electronic device to display corresponding different game card animations as skins, characters, and equipment change. In this way, the electronic device can provide users with a more vivid and personalized component animation display experience.

[0327] Optionally, Figure 17 This is a flowchart illustrating another component effect display method provided in an embodiment of this application. Figure 17 As shown, the process includes the following steps:

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

[0329] S1702, The component provides a direction for the component user to request page information.

[0330] Optionally, the content of steps S1701-S1702 can be referred to the relevant content of steps S1101-S1102 above, and will not be repeated here.

[0331] S1703, The component provides direction for sending motion effect information and page information to the Artificial Intelligence Generated Content (AIGC) module.

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

[0333] S1704 The AIGC module obtains the animation display content based on the animation information and page information.

[0334] In some embodiments, the AIGC module constructs the component animation for the overflow effect based on the obtained animation information and page information, and obtains the corresponding animation display content. This animation display content includes resource information for displaying the component animation for the overflow effect.

[0335] For example, the AIGC module uses animation information to obtain the fireworks animation corresponding to the target component that needs to be displayed. Furthermore, based on page information, the AIGC module identifies three other components near the target component. Therefore, the AIGC module can generate the fireworks animation to be displayed for the target component, as well as the fireworks animations to be displayed for the other three components. Optionally, the AIGC module can obtain different or identical fireworks effects to be displayed for different components based on the desired display effect. The animation display content output by the AIGC module includes all fireworks animation content.

[0336] S1705, the AIGC module sends animation display content to the component provider.

[0337] In some embodiments, after obtaining the animation display content, the AIGC module can send the animation display content to the component provider. Correspondingly, the component provider receives the animation display content sent by the AIGC module.

[0338] S1706. The component provider obtains the animation display information based on the page information and the animation display content.

[0339] In some embodiments, the component provider can obtain the size 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, by combining the display area size and position information of the component animation with the animation display content, the component provider can obtain the animation display information.

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

[0341] S1707, The component provides directional component rendering services to send animation display information.

[0342] S1708, Component rendering service renders component animations 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's load-bearing dimensions and Z-axis height to display the component's animation effects.

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

[0346] Optionally, other contents of steps S1707-S1710 can be referred to the relevant contents of steps S1104-S1107 above, and will not be repeated here.

[0347] In this way, electronic devices can obtain richer display content of component animations through the AIGC module, providing users with a more vivid and personalized animation display experience.

[0348] In some embodiments, the electronic device displays component animations based on local resources and / or cloud resources. Optionally, when installing a component from a provider, the electronic device may download an installation package, which may include local resources for the component animations.

[0349] The following section introduces the local resources related to component animations, in conjunction with the component display process.

[0350] Optionally, Figure 18 This is a schematic diagram illustrating a target component display process provided in an embodiment of this application. For example... Figure 18 As shown, the process includes the following steps:

[0351] S1801, The component provider detected a user-instructed action to add a component.

[0352] Optionally, user-instructed actions for adding components may include actions on preset controls, gestures on application icons, etc.

[0353] For example, an electronic device detects a user's swipe-up gesture on an application icon and can display a temporary card corresponding to that application icon. In response to the user's interaction with a preset control on the temporary card, it can be determined that the user has instructed the addition of a permanent card to the desktop. That is, the component provider corresponding to the application icon detects the user's instruction to add a component.

[0354] S1802, The component provides a direction package management service request to obtain component data.

[0355] For example, such as Figure 3 As shown, the package management service in the application framework layer manages the installation packages of various applications within the application layer. The component providers are the applications within the application layer, and the package management service manages their installation packages.

[0356] In some embodiments, in response to a user instruction to add a component, the component provides a direction package management service request to obtain component data. Optionally, such as Figure 19 As shown, the component provides component data corresponding to the direction, including component-related code and resources. The component-related code is used to call resources to implement component display. Resources include, for example, component configuration files and component resources. The component configuration file includes, for example, component size information. Component resources include, for example, display resources, engine-loadable resources, and other resources. 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 and maintain the processing logic for display resources. Other resources may also include, for example, some video resources.

[0357] Optionally, the component data in the component provider's installation package 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 and position information of the display area for the component animation. The display resources of the component resources can also include model resources for achieving 3D display effects. Engine-loadable resources can also be used to support the rendering and processing logic of 3D models. Thus, referring to the above interaction flow, in step S1101, the component provider, in response to the component animation display event, can obtain animation information, including component data, through interaction with the package management service. Alternatively, the component provider has already obtained the component data in the current component display process (such as step S1802). Then, in step S1101, the component provider, in response to the component animation display event, can directly obtain the component data and obtain the animation information based on the component data.

[0358] S1803, The component provides a direction for the component user to send a component addition instruction.

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

[0360] For example, 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 instance, an electronic device detects a user's interaction with an application icon displayed on the desktop and determines that the user instructed 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 the card.

[0361] S1804, Component usage direction: The component management service sends instructions to add component usage relationships.

[0362] In some embodiments, in response to a component addition instruction, the component user determines that a component needs to be added. The component user then sends a component usage relationship addition instruction to the component management service. Optionally, the component usage relationship addition instruction carries the identifier of the component provider. Accordingly, the component management service receives the component usage relationship addition 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 component providers and component users. For example, a component provider can use the component management service to query where its provided components are displayed.

[0365] In some embodiments, after establishing the mapping relationship between the component provider and the component user corresponding to the 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 perform component rendering. Optionally, in response to the component rendering instruction, the component rendering service may request component data from the component provider.

[0366] Optionally, the component provider may also send a component rendering instruction to the component rendering service, while the component management service need not send a component rendering instruction to the component rendering service again. Optionally, the component rendering instruction sent by the component provider to the component rendering service carries component data. For example, the component provider sends the 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, Component rendering service renders components.

[0368] In some embodiments, in response to a component rendering instruction, the component rendering service renders the component based on the component data and obtains the rendering data.

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

[0370] In some embodiments, after completing component rendering, the component rendering service sends a component display instruction to the component user, which carries the rendering data. Then, in response to the component display instruction, the component user can display the component based on the rendering data.

[0371] In this way, the component provider displays the component and obtains the component data through interaction with the component user. Subsequently, based on the component data, the component's animation effects are displayed.

[0372] In some embodiments, the electronic device displays component animations according to preset rules. Optionally, the preset rules may include, for example, displaying the component animation for an extended period after the component is displayed, displaying the component animation for an extended period after the component animation is triggered, or stopping the display of the component animation after a preset time. The electronic device avoids excessively long display times for component animations, thus preventing increased power consumption. Furthermore, it prevents component animations triggered by some applications from covering other components for extended periods, thus affecting the display of other components.

[0373] For example, in response to a user action, an electronic device adds a component to the desktop. After the component is added, the electronic device begins to display the component's animation effects.

[0374] For example, after a component is added to the desktop, the electronic device starts displaying the component's animation. Subsequently, in response to the user's page turning operation, the component is no longer displayed on the next page, so the electronic device can stop displaying the component's corresponding animation.

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

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

[0377] In this way, electronic devices can display component animations in an orderly manner, satisfying users' visual experience needs for component animations while avoiding the impact of component animations on user operation.

[0378] In some embodiments, the display of component animations in an electronic device requires resources, generates power consumption and heat, which may affect the implementation of other functions of the electronic device. Therefore, the electronic device can measure the resource consumption, power consumption and heat generation of the component animations. Under certain conditions, if it determines that it is in an abnormal scenario, it can adjust the display of the component animations to release resources and reduce power consumption and heat generation.

[0379] The following sections will describe the process of adjusting component animations under various abnormal scenarios.

[0380] In some examples, through Figure 20 This section describes the process by which electronic devices can adjust the display of component animations in scenarios where resource-intensive components exhibit abnormal animation display, using either measure 1 or measure 2. For example... Figure 20 As shown, the process includes the following steps:

[0381] S2001, The component management service sends a request to the resource management service to obtain resource usage information.

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

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

[0384] Accordingly, in response to the request for resource usage information, the resource management service sends resource usage information to the component management service at a preset period. Alternatively, when the resource usage of a component exceeds a certain threshold, the resource management service proactively sends resource usage information to the component management service.

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

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

[0387] S2004, The component management service instructs the resource management service to reduce the animation display quality in order to reduce resource consumption.

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

[0389] Optionally, the component management service can release some resources by reducing the display quality of component animations and thus reducing resource consumption.

[0390] Optionally, the component management service instructs the component provider to reduce the component's rendering frame rate, resolution, image quality, and effects to decrease the quality of the component's animations. In this way, the resource management service can obtain information about the reduced resource consumption during the component's animation display process.

[0391] For example, such as Figure 7In the illustrated heavy rain animation scene, the electronic device obtains the resource usage information of the current heavy rain animation. If it determines that the processor resource usage exceeds threshold 1 or the memory resource usage exceeds threshold 2, it can determine to adopt measure 1, which reduces the display quality of the heavy rain animation to reduce the resource consumption of the animation. For example, the electronic device can reduce the number of raindrops to lower the display quality of the heavy rain animation. Alternatively, the electronic device can reduce the display quality of the heavy rain animation through frame interpolation, image compression, or other methods.

[0392] Thus, when component animation displays cause excessive resource consumption, electronic devices can reduce the display quality of component animations to release some resources and avoid excessive resource consumption affecting the implementation 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 usage information based on resource usage data. If it is determined that the current system resources are insufficient, it can be determined that the display of component animations needs to be adjusted to reduce resource consumption. Optionally, system resources include, for example, system memory resources.

[0396] Optionally, the component management service can instruct the resource management service to release component resources or freeze components (as in measure 2) to obtain more system resources. This avoids situations where electronic devices malfunction due to insufficient system resources. Optionally, releasing component resources may include, for example, releasing memory resources occupied by component animations. Optionally, in the event of insufficient system resources, the electronic device can also freeze components while releasing component resources.

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

[0398] For example, during the component animation display process, if the component management service determines that system resources are insufficient, it can instruct the component user (or component provider) to freeze the component. Optionally, component freezing may include freezing the component animation, such as maintaining the display of a single frame of the component animation at the moment of freezing and no longer updating the display of the component animation. Alternatively, component freezing may include not 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 further consumption of system memory resources.

[0399] Thus, when component animation displays cause excessive resource consumption, electronic devices can release component resources or freeze the component to avoid excessive resource consumption affecting the implementation of other functions.

[0400] In other examples, by Figure 21 This section describes how, in scenarios where component animations display abnormally due to high power consumption, electronic devices can adjust the display of component animations using measure 3. For example... Figure 21 As shown, the process includes the following steps:

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

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

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

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

[0405] Optionally, power consumption information may include, for example, the power consumption of component animation displays.

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

[0407] S2104, Component Management Service freezes components.

[0408] In some embodiments, the component management service obtains the power consumption generated during the component animation display process based on power consumption information. If the power consumption exceeds a threshold of 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 animations by freezing the component (as in measure 3). Alternatively, the component management service can directly instruct the component user (or component provider) to stop displaying component animations.

[0410] Thus, when component animation displays result in high power consumption, electronic devices can reduce power consumption and avoid affecting the implementation of other functions by freezing the components.

[0411] In some other examples, through Figure 22 This section describes how, in scenarios where component animations display abnormally due to high heat, electronic devices can adjust the display of component animations using measure 4. For example... Figure 22 As shown, the process includes the following steps:

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

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

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

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

[0416] Optionally, thermal information may include, for example, changes in device temperature during the component's dynamic display process.

[0417] S2203, Component Management Service determines that the device temperature exceeds the threshold 4.

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

[0419] In some embodiments, the component management service obtains the device temperature of the electronic device during the component animation display process based on thermal information. If the device temperature exceeds a threshold of 4, the component management service may determine that the current device temperature is high and adjustments may need to be made to the device's operating functions, such as determining whether adjustments to the component animation display are necessary.

[0420] Optionally, if the component animation display consumes a high amount of resources, it can be determined that this resource consumption may be the cause of the increased device temperature. Therefore, the component management service can reduce the heat generated by the displayed component animation by freezing the component (such as measure 4), thereby lowering 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 component animation display generates a lot of heat, the electronic device can reduce the heat by freezing the component, thus preventing the device temperature from being too high and affecting the implementation of other functions or the lifespan of the device.

[0422] In some embodiments, the electronic device can activate component animations in response to user eye contact with the component. This way, the component animations are only displayed when the user is looking at the component, avoiding the aforementioned abnormal scenario.

[0423] For example, in response to an event where a user looks at a component, the electronic device begins to display component animations.

[0424] For example, after a component is frozen, the electronic device resumes displaying the component's animation in response to a user looking at the component.

[0425] For example, in response to an event where a user looks at a component, an electronic device begins to display component animations with overflow effects.

[0426] For example, such as Figure 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 effect and begins to display the overflowing heavy rain animation effect in the display area 2 corresponding to the weather card 231.

[0427] Optionally, Figure 24 This application provides a schematic flowchart of another component effect display method. For example... Figure 24 As shown, the process includes the following steps:

[0428] S2401. When the component user detects a user gaze event, the corresponding target component is obtained.

[0429] In some embodiments, the electronic device captures a user's facial image via a camera. Based on the facial image, it can determine whether the user is looking at the electronic device's display screen. If the user is looking at the electronic device's display screen, a user gaze event can be detected. The electronic device can then send this user gaze event to the component user.

[0430] In some embodiments, the electronic device can also determine the user's gaze position using a preset algorithm, thereby identifying the component corresponding to the user's gaze position and designating that component as the target component. After acquiring the target component, the electronic device determines that a user gaze event has been detected and sends the user gaze event to the component user.

[0431] S2402. When the target component is active, the component sends a user gaze event to the component provider using the direction.

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

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

[0434] In some embodiments, the component user can obtain the state of the target component. When the target component is active, it can send a user gaze event to the component provider to trigger the component provider to provide corresponding animation effects. For example, some component providers configure gaze control functionality, so that in response to the user's gaze, the target component can display corresponding component animation effects to increase interactivity.

[0435] In some embodiments, after detecting a user's gaze at the display screen, the component user may send a corresponding user gaze event to the component user. Subsequently, the component user obtains the duration of the user's gaze, and if the user gazes at the target component for more than a preset duration, it determines that the user has instructed to activate the corresponding animation effect. In this case, the component provider then obtains the corresponding animation effect.

[0436] Thus, when the target component is active, in response to the user's gaze, the electronic device can instruct the target component to display corresponding animation effects, thereby increasing the interactivity of the component's animation effects.

[0437] S2404. When the target component is inactive, the component uses the Directional Component Management Service to send an activation instruction.

[0438] S2405, Component Management Service activates the target component.

[0439] Optionally, the target component's activity state indicates that the target component is not displaying component animations. For example, the target component has not started displaying component animations. Or, the target component is frozen.

[0440] In some embodiments, the component user can obtain the state of the target component. If the target component is inactive, in response to a user gaze event, an activation instruction can be sent to the component management service to activate the target component. Optionally, activating the target component indicates that the component animation should be displayed or continue to be displayed.

[0441] For example, in the above Figures 20-22 In relevant abnormal scenarios, the component management service freezes the target component. In response to user attention on the target component, the component management service can activate it. Thus, when the user is not paying attention to the target component, the component management service can freeze it, avoiding abnormal scenarios caused by the display of component animations. When the user is paying attention to the target component, the component management service can activate the component animations, providing a better visual experience and increasing interactivity.

[0442] Thus, when the target component is inactive, the electronic device can instruct the target component to activate in response to the user's gaze, thereby displaying the corresponding animation effect and increasing the interactivity of the component's animation effect.

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

[0444] In some embodiments, the card state includes an inactive state, an active state, and a paused state. Optionally, the inactive state can also be described as an inactive state.

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

[0446] Optionally, when the game card is inactive or paused, the display effect of the game card will not overflow, such as if the display area 2 corresponding to the display effect is less than or equal to the display area 1 of the game card. When the game card is active, the display effect of the game card can overflow, such as if the display area 2 corresponding to the display effect is greater than the display area 1 of the game card.

[0447] For example, such as Figure 25 As shown in (a), during the game card addition process, the electronic device displays a card preview page. As indicated by reference numeral 251, the card preview page displays text and images describing the subsequently added game cards. In response to the operation of adding to desktop control 252, the electronic device triggers the addition of the game cards to the desktop. For example, as... Figure 25 As shown in (b), the electronic device displays game card 253 on the desktop, which is in an inactive state. Optionally, the content displayed on the inactive game card is the same as the card preview content displayed on the card preview page during the game card addition process.

[0448] Subsequently, while the electronic device is displaying the inactive game card 253, it detects user interaction on the game card 253, triggering the game card 253 to switch to an active state. For example, Figure 26 As shown, in response to any area within the card being triggered, the card state switches from inactive to active, and the display effect of the active card can overflow.

[0449] Optionally, based on the above, Figure 4 The description of the relevant content shows that when game card 253 is in an inactive state, the electronic device renders the component through a component rendering service to display the following: Figure 25 The game card 253 is shown in the inactive state in (b). Afterwards, the electronic device determines that the game card 253 needs to be switched to the active state. The electronic device then 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 component's overflow animation. For example, as shown... Figure 25 As shown in (c), the electronic device displays an active game card 253 through the UIExtension component. The active game card 253 can display overflow animation effects, such as the display area 2 of the overflow animation effect being larger than the display area 1 of the game card 253.

[0450] For example, the game card is displayed using a two-sided display method. The two sides include a side displaying the normal card and a side displaying the UIExtension component. For instance, during the card preview stage or when the game card is inactive, the electronic device displays the normal card side of the game card. As another example, when the game card is active, the electronic device displays the UIExtension component side of the game card.

[0451] Optionally, the electronic device renders game visuals through the UIExtension process to display UIExtension components. These UIExtension components overlay regular cards, thus creating a visible overflow animation.

[0452] In some examples, while the electronic device is displaying the active game card 253, the user can interact with the game card 253 by operating within the display area 1 used to display the game card 253. Optionally, such as Figure 26As shown, if the electronic device detects an operation by the user outside the display area 1 used to display the game card 253, it triggers the game card 253 to go out of focus; or, if the electronic device does not detect any operation by the user within the display area 1 used to display the game card 253 within a preset time (such as 10 seconds, 20 seconds, etc.), such as no interaction 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 the active state to the paused state.

[0453] Optionally, in response to game card 253 switching to a paused state, the electronic device captures a screenshot of the current game screen and hides the UIExtension component, causing the UIExtension process to enter the background and pause rendering. Then, as... Figure 25 As shown in (d), the electronic device can display a captured game screenshot in display area 1 of the game card 253 by calling the pause state component. During the display of the game screenshot, the game card 253 is in a paused state. Wherein, as Figure 25 As shown in (d), the game card 253 in the paused state does not display overflow animation, thus avoiding affecting the user's operation of other components on the desktop.

[0454] In some examples, the electronic device detects user interaction on the game card 253 while it is displaying a paused game card 253, which can trigger the game card 253 to switch back to an active state. For example, as Figure 26 As shown, in response to any area within the card being triggered, the card switches from a paused state to an active state. It should be understood that this "any area" does not include the area where pre-configured card functions are implemented. That is, switching the component state does not affect the original game card's logic. For example, if the original game card displays a preset control for playing music, the electronic device can play music in response to the user's operation of this preset control without switching the component state. This satisfies the user's need for card functionality and allows for an overflow animation effect to be presented to the user without switching to the active state when the user does not need to play the game. The display of component animations or the switching of component states do not affect the original logic of the component, which will not be elaborated further below.

[0455] For example, such as Figure 25 As shown in (d), when the electronic device detects user interaction on the game card 253 while it is displaying the game card 253 in a paused state, it can hide the game screenshot and display the UIExtension component, allowing the user to see... Figure 25 The overflow animation shown in (c) illustrates the active game card 253. After game card 253 switches to the active state, the UIExtension process returns to the foreground to continue rendering the game screen.

[0456] In some examples, game cards can switch to an inactive state even when they are in an active or paused state. For instance, in response to the end of a card game, the electronic device switches the card's state to inactive. For example, if the card game crashes abnormally, the game ends, and the game card switches from an active or paused state to an inactive state. Or, if the game card has been paused for a long time, such as more than 10 or 20 seconds, the game ends, and the game card switches from a paused state to an inactive state.

[0457] In this way, electronic devices can display game cards on both sides of a single card through the UIExtension process, enriching the card display effects, reducing the difficulty of card development, and increasing the universality of overflow effect display.

[0458] Furthermore, switching between different card states can meet users' usage habits and increase the flexibility of interaction.

[0459] In some embodiments, the UIExtension component rendered by the UIExtension process corresponds to the game function page, thereby presenting an interactive game experience to the user through card animation effects. 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, thus standardizing the display overflow effect.

[0460] The game functionality page is the page displayed after the game application starts. The content displayed on this page is designed by the game developer. The main area of ​​the game screen within the UIExtension component displays the main game screen content, which is defined by the game developer.

[0461] Optionally, the UIExtension component implements an overflow display effect. This UIExtension component can be displayed in full screen, achieving a full-screen card overflow animation. Optionally, the full-screen card overflow animation corresponds, for example, to the full-screen display of game function pages after a game application launches.

[0462] For example, such as Figure 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 the desktop).

[0463] In some examples, such as Figure 25In the scenario shown, while the electronic device is displaying an inactive game card 253, it detects user interaction on the game card 253 and sends card information to the UIExtension process. This card information includes details such as the size and rounded corners of the game card 253. Upon receiving this card information, the UIExtension process renders the UIExtension component accordingly, ensuring that the main area of ​​the game screen within the UIExtension component matches the display area 1 of the game card. For example, according to pre-configured matching rules, the UIExtension process renders the main area of ​​the game screen to the center of the game function page based on the card information. Subsequently, when the desktop receives the UIExtension component, it can overlay the center area onto the display area 1 of the game card 253, thus achieving the overflow animation display of the game card 253.

[0464] For example, such as Figure 28 As shown, in response to the user's operation on the game card 253, the game card 253 switches to the active 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. Specifically, since the UIExtension process has already rendered the main area of ​​the game screen based on 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, thus fulfilling the requirement of displaying the main game element at the corresponding position on the game card 253.

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

[0466] For example, such as Figure 28 As shown, the electronic device displays the game card 253 at a lower position on the desktop. After aligning the center of the UIExtension component with the display area 1 of the game card 253, the UIExtension component is positioned lower overall. This may require cropping some of the displayed content to achieve the overflow animation effect. However, cropping the content may affect the display effect of the overflow animation. For example, as... Figure 29As shown, the electronic device displays the game card 253 at a position slightly above the desktop. After the center position of the UIExtension component is matched with the display area 1 of the game card 253, the UIExtension component is slightly above the desktop. It may be necessary to crop some of the displayed content in order to achieve the overflow animation effect. However, cropping the content may affect the overflow animation effect.

[0467] In other examples, such as Figure 25 In the scenario shown, when the electronic device is displaying an inactive game card 253, it detects user interaction on the game card 253 and sends card information to the UIExtension process. This card information includes, for example, the position, size, and rounded corners of the game card 253. After receiving the card information, the UIExtension process renders the UIExtension component accordingly, ensuring the main area of ​​the game screen within the UIExtension component matches the display area 1 of the game card. Furthermore, the UIExtension process can adjust the position of the main area of ​​the game screen within the UIExtension component on the game function page based on the position information in the card information, matching the position of the game card 253 on the desktop. Subsequently, when the desktop receives the UIExtension component, it can directly overlay the UIExtension component onto the entire desktop. In this case, the main area of ​​the game screen within the UIExtension component can also overlap the display area 1 of the game card 253, achieving an overflow animation effect for the game card 253 and resulting in a better overflow animation display effect.

[0468] For example, such as Figure 30 As shown, in response to user actions on game card 253, game card 253 switches to the active state. Specifically, in response to instructions to display game card 253 at a lower position on the desktop, the UIExtension process adjusts the main area 271 of the game screen downwards to the corresponding position indicated by the location information during rendering. This way, subsequently, after the desktop obtains the UIExtension component, it can directly overlay the UIExtension component onto the desktop for display, thus allowing the game to be displayed in the original display area 1 of game card 253, meeting the user's operational needs.

[0469] For example, such as Figure 31As shown, in response to user actions on game card 253, game card 253 switches to the active state. Specifically, in response to instructions to display game card 253 at a slightly higher position on the desktop, the UIExtension process adjusts the main area 271 of the game screen upwards to the corresponding position indicated by the location information during rendering. This way, subsequently, after the desktop obtains the UIExtension component, it can directly overlay the UIExtension component onto the desktop for display, thus allowing the game to be displayed in the original display area 1 of game card 253, meeting the user's operational needs.

[0470] In this way, by obtaining the position information of the game card, the UIExtension process can keep the main area of ​​the game screen in the rendered UIExtension component relatively fixed with the electronic device display screen. The main area of ​​the game screen can be adjusted in time as the position of the game card on the desktop changes, so that the main area of ​​the game screen is aligned with display area 1, and adaptively presents a better display effect to 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 between the main area and the overflow portion of the game screen through irregular cropping.

[0472] For example, such as Figure 32 As shown in (a), the display area 1 for the game card to be displayed on the electronic device is a rounded rectangle. The UIExtension process obtains the card information of the display area 1 for the game card. Then, as... Figure 32 As shown in (b), the electronic device can also crop the main area of ​​the game screen in an irregular shape according to the game screen and the card information, so as to achieve better display and interaction effects in the future.

[0473] In some embodiments, after acquiring the display area 1 for displaying the card, the electronic device can acquire the display area 2 for the user's overflow display based on the display area 1. Figure 32 The aforementioned content, the display area 2 can be a regular shape or an irregular shape.

[0474] For example, such as Figure 33 As shown in (a), the electronic device displays a card, and display area 331 is used to display the card. Subsequently, in response to a component animation display event, such as Figure 33As shown in (b), the card size is enlarged to obtain a display area 332, and the sub-components of the original card are displayed within this display area 332. The display positions of these sub-components can be adapted to the display area 332, thereby achieving the display effect of overflowing the original display area 331. Alternatively, in response to component animation display events, such as Figure 33 As shown in (c), the card size remains unchanged, but some sub-components move out of the display area 331. The resulting expanded display area includes the union of display area 331 and the rectangular overflow area 333, achieving an overflow display effect. The transparency of the display area 333, excluding the area occupied by the overflowing sub-components, is greater than a preset threshold (e.g., 95%), thus avoiding occlusion issues through transparency. Alternatively, in response to component animation display events, such as... Figure 33 As shown in (d), the card size remains unchanged, and some sub-components move out of the display area 331. The resulting expanded display area includes the union of the display area 331 and the irregularly shaped display area 334 adapted to the outer edge of the overflowing sub-component, which can also achieve the overflow display effect.

[0475] In this way, the display area 2 can be flexibly determined in multiple ways, increasing the flexibility of the overflow effect display.

[0476] Figure 34 This is a flowchart illustrating another component effect display method provided in an embodiment of this application. It should be noted that this method does not rely on... Figure 34 The specific order described below is a limitation. 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 the first screen of the first component. The first screen occupies the first display area on the display interface.

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

[0479] For example, in response to a user operation, the electronic device determines that a first component (such as a card component) needs to be added to the desktop. Then, the electronic device acquires a display area 1 for displaying the first component. Subsequently, the electronic device displays a first image of the first component in the display area 1, the first image occupying a portion 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 differs from the first screen, occupies a second display area on the display interface, and includes areas on the display interface that are different from the first display area. The second screen includes static image content and / or dynamic image content.

[0481] In some embodiments, the second screen includes AI-generated content.

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

[0483] In some embodiments, the content source of the second screen includes electronic devices and / or servers.

[0484] The content of the second screen can be, for example, content that is already present in the first screen, or content related to content that is already present in the first screen.

[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 content of the second screen can be used, for example, to achieve a static display effect for the component. The dynamic content of the second screen can be used, for example, to achieve a dynamic display effect for the component, such as animation effects.

[0487] Optionally, all content in the second screen can belong to the same layer as the content in the first screen. In this way, the electronic device can display the second screen without adding a new layer.

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

[0489] In some embodiments, 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 triggers the refresh of the component screen occurring in the application corresponding to the first component; and an event used to indicate that the current time has reached a preset time.

[0490] For example, when an electronic device is displaying a game card, in response to the user's operation on the game card, the electronic device can refresh the first screen of the game card to a second screen, which can overflow the first display area originally occupied by the first screen.

[0491] For example, when an 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 a game card. The electronic device can then activate the game card and display the corresponding second-screen content. The specific details of the first triggering event, the user gaze event, can be found above. Figure 23 or Figure 24 The aforementioned related content.

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

[0493] For example, an electronic device adds a schedule to a calendar application based on user input and retrieves the preset time for that schedule. Then, upon reaching the preset time, the electronic device can trigger the display of an animation for the schedule corresponding to the calendar card (as shown in the second screen).

[0494] In this way, by triggering various events, the corresponding screen of the component is refreshed, increasing the flexibility of the component's display effect.

[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 within the first display area to outside the first display area; an effect of extending from within the first display area to outside the first display area; an effect of moving from outside the first display area to within the first display area; and an effect of extending from outside the first display area to within the first display area.

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

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

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

[0499] In some embodiments, the second display area may further include a portion or all of the first display area.

[0500] For example, such as Figure 33 As shown in (a), the first display area occupied by the first screen on the display interface is display area 331; as Figure 33 As shown in (b), the electronic device determines the display area 332 for displaying the second screen based on the information of the first page of the current display interface. The second display area occupied by the second screen can be part or all of the display area of ​​display area 332. Furthermore, 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 a semi-circular image extending beyond the original first display area; that is, the second display area occupied by the second screen is an irregularly shaped area. In this case, 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 ​​display area 332. Alternatively, through transparency adjustment, the second screen includes the original first screen visible to the user, the semi-circular image extending beyond the original first display area, and the image invisible to the user within display area 332 (e.g., with transparency of 100%). In this case, 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 ​​display area 332.

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

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

[0503] In this way, the second screen is displayed based on the first screen, which increases the continuity of screen 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 second screen is displayed in one or any combination of the following ways: adding a child component to the first component and displaying the newly added screen content in the second screen by the newly added child component; displaying the newly added screen content in the second screen by the existing child component in the first component; or displaying the dynamic screen content in the second screen that uses the static screen content in the first screen to display animation effects by the existing child component in the first component.

[0506] Optionally, the newly added child component can be located on top of all the child components of the first component. Optionally, the newly added child component still belongs to the first component, such as being located on the same layer or window as the first component.

[0507] For example, such as Figure 9CAs shown in (a), the electronic device displays a desktop with a weather card 92. In response to the current weather being cloudy, the weather card 92 displays the corresponding cloud image. Subsequently, in response to the weather changing to thunderstorms, lightning and raindrop components can be added to display... Figure 9C The thunderstorm scene shown in (b) adds lightning and raindrops compared to the cloudy scene. The newly added lightning and raindrop sub-components are located on top of the various sub-components of the weather card (such as the first component), thus achieving an overlay display effect.

[0508] In this way, electronic devices can display component effects through sub-components of the first component without having to create layers or windows, thus 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 the 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 card component and the UIExtension component are used to achieve the "two sides of one card" display effect.

[0511] Optionally, the display area of ​​the second component on the aforementioned 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 the second screen rendered by the second process and displaying it in the second component.

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

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

[0515] Optionally, the second screen is the game screen of the first game, and the second application is the game application that runs the first game, or the game engine used to load and run the first game.

[0516] For example, such as Figure 35 As shown, based on the current card framework, and on top of card components (which can also be described as ordinary cards), developers can bind extended game content to ordinary cards, reusing card management processes such as adding, moving, and deleting cards on the desktop. For example, the card management service can obtain the relationship configuration information between card components and UIExtension components created by the card provider.

[0517] Furthermore, when a user clicks on a regular card, it supports activating and loading game content for interactive gameplay. Game content is provided by the game developer through the UIExtensionAbility, while the desktop uses the UIExtensionComponent to embed, load, and display content, and manage the game content state and the UIExtensionAbility lifecycle. For example, after a game loads game content provided by UIExtensionAbility, the card provider can configure the association between the associated component card and the game. Subsequently, when the desktop displays card components based on content obtained from the card provider, in response to card component activation, the game engine can obtain the UIExtension component (including game content) and overwrite the original card component's display, achieving an overflow effect. The desktop can also switch back to displaying component cards based on user actions, i.e., switching to displaying inactive cards, dynamically controlling the overflow effect.

[0518] Quick games are a type of quick app. Quick apps are lightweight applications that typically load quickly on electronic devices, providing a simple user experience that users can access without installation. Quick apps usually have a small size and fast startup time, making them suitable for quick entertainment or information retrieval.

[0519] It should be understood that Figure 35 The module divisions shown are merely illustrative; in some examples, the modules can be combined or split. For instance, the card provider may include a UIExtension component framework. In this case, the card provider loads the UIExtension component framework through a game engine, triggering the display of the UIExtension component on the desktop. Alternatively, the card provider may directly include both the UIExtension component framework and a game engine. In this case, the card provider can not only provide card component content but also game content for the UIExtension component, meaning the game engine loads the game content within the component provider itself.

[0520] In this way, loading UIExtension components through a second application reduces the difficulty of handling component display effects.

[0521] In some embodiments, the second display area can be a portion or all of the displayable area set by the application to which the display interface belongs (such as a desktop application). Optionally, the displayable area can 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 can be a component displaying the second screen (such as a first component and a second component) or the parent container of that component.

[0522] In some examples, as mentioned above, container components have a container clipping feature. This clipping feature truncates content that exceeds the display area of ​​the component's container, ensuring that the user can only see the content within the container and not the content outside the container. For example, the container component may be configured with a clipping property. When the clipping property is true, clipping is enabled. The container component will then clip according to its own size; if the display area of ​​a child component exceeds this size, the excess portion will be clipped. When the clipping property is false, no clipping is enabled.

[0523] Optionally, the size of the container component can be adjusted by setting its 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, an electronic device can constrain the display area of ​​a component (such as a first component or a second component) using a first container. This first container can be, for example, the component itself or a parent container of the component. Alternatively, at least one container may separate the first container from the component; that is, the first container can also be an ancestor container of the component's parent container.

[0525] For example, in response to a first trigger event, the electronic device determines that the second screen corresponding to the first component is overflowing. Then, the electronic device obtains the first container corresponding to the first component. The electronic device sets the clipping attribute of the first container to false, so the first container will no longer restrict the overflow range of the second screen; for example, the electronic device can display the second screen in full screen. Optionally, if the overflow recovery event is satisfied, the electronic device can set the clipping attribute of the first container to true, thereby preventing the screen corresponding to the first component from overflowing, such as displaying the first screen in the first display area. The overflow recovery event may include, for example, a preset display duration for the second screen, or receiving an indication that the second screen has ended displaying.

[0526] For example, in response to a first trigger event, the electronic device determines that the second screen corresponding to the first component is overflowing. Then, the electronic device obtains the first container corresponding to the first component. The electronic device can then enlarge the size of the first container, thereby displaying the second screen within the enlarged first container, achieving the overflow display effect. Subsequently, in response to an overflow recovery event, the electronic device can adjust the first container back to its original size. For instance, when the first trigger event is received, the display size of the first container is 3*3. In response to this first trigger event, the electronic device adjusts the size of the first container to 5*5 to achieve the overflow display effect. Subsequently, in response to an 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. The visible area of ​​the component is adjusted by setting the clipping property of the parent container (e.g., ...). Figure 9A (The actual allowed overflow range is shown). For example, assuming that the clipping attribute parameter of all ancestor containers of the first container is set to false, if the clipping attribute parameter of the first container is set to false, then the displayable area is the entire display interface; if the clipping attribute parameter of the first container is set to true, then the displayable area is the area set by the size parameter of the first container.

[0528] In other examples, the first container can also be another container between the parent container of a component (such as the first or second component) and the root node. In this case, setting the displayable area through the first container may be contingent on setting the clipping property of other containers between the component and the root node other than the first container to false.

[0529] It should be understood that the clipping property of other containers that only affect the displayable area of ​​this component can also be set to false, while those that do not have an effect do not need to be set to false. For example, the area of ​​the root node is the display interface of the entire window. Therefore, whether or not the clipping property of the root node is set to false, it generally will not substantially restrict the display area of ​​child nodes. Therefore, it is not necessary to set its clipping property to false.

[0530] For example, in response to a first trigger event, the first application obtains the page information of the currently displayed interface and, based on this page information, obtains the displayable area. Then, the first application can send a component effect display request to the desktop. This request may carry information such as the size, position, and duration of the displayable area. The size and position information, for example, indicate the size and position of the displayable area; it could be a specific location, or the distance moved in which directions / or the size of the expansion. The duration information includes, for example, the display duration of the second screen, such as a short display (e.g., 5 seconds), a long display (e.g., 10 seconds), or a permanent display. Optionally, the application may also pre-negotiate with the desktop the information regarding the displayable area and display duration corresponding to the second screen. In this case, subsequent component effect display requests sent by the application to the desktop may not need to carry this information.

[0531] Accordingly, based on the application's request, the desktop can set the clipping property of the first container to false or adjust the size of the first container. Then, the desktop can obtain the screen content sent by the application and display the corresponding second screen 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 after the second screen begins to be displayed. Then, when the countdown ends, the desktop can again set the clipping 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 loop, and the display process of each application triggering the overflow animation can be referred to the example process above. In addition, the display process of the second screen corresponding to the UIExtension component can also refer to the example process above, except that the desktop obtains the display content of the second screen from the second application instead of from the first application. This process will not be described in detail.

[0533] In this way, the overflow effect can be dynamically controlled through the first container, thus meeting the display requirements of the overflow effect.

[0534] In some embodiments, to avoid abuse of the displayable area, after acquiring the second image to be displayed, if the transparency of the second image extending beyond the original display area of ​​the first component is lower than a preset threshold, the electronic device may not display the second image. Optionally, the transparency of the image can be characterized by multiple sampled pixels or the average value of all pixels in the image. 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] This prevents components from overflowing the screen and severely affecting the display of other components on the desktop, thus impacting the user experience.

[0536] In some embodiments, the first component is a card component (such as a regular card), and the second component is a UIExtension component. The first and second components are not displayed simultaneously, and the second component covers the first component. Therefore, the first and second components can each have their own corresponding first container, or they can share the same first container.

[0537] In some embodiments, the second screen includes dynamic screen content. In response to a preset condition being met, the electronic device acquires a screenshot of the second component within the first display area. The preset condition includes detecting user activity outside the first display area, or not detecting user activity within the first display area within a preset time period. Afterward, the electronic device stops displaying the second component and displays the screenshot within the first display area.

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

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

[0540] For example, such as Figure 25 As shown in (b), the electronic device displays game card 253 on the desktop. Game card 253 is in an inactive state. The electronic device also displays a first component, which is the ordinary card corresponding to game card 235. Subsequently, the electronic device detects user interaction with game card 253, triggering game card 253 to switch to an active state. Wherein, as... Figure 26 As shown, in response to any area within the card being triggered, the card's state switches from inactive to active, and the display effect of the active card can overflow. For example... Figure 25 As shown in (c), the electronic device displays an active game card 253 via a UIExtension component (such as the second component). This active game card 253 can display overflow animations, such as the overflow animation's display area 2 being larger than the game card 253's display area 1. For example, the electronic device can cover the first component with the second component. Subsequently, if the electronic device detects a user operation outside the display area 1 used to display the game card 253, it triggers the game card 253 to go out of focus; or, if the electronic device does not detect a user operation within the display area 1 used to display the game card 253 within a preset time (such as 10 seconds, 20 seconds, etc.), such as no user interaction with the game card 253 is detected, then the electronic device can switch the component state of the game card 253 from active to paused. Optionally, in response to the game card 253 switching to paused state, the electronic device acquires a screenshot of the current game screen. Then, as... Figure 25 As shown in (d), the electronic device can display a captured game screenshot in display area 1 of the game card 253 by calling the pause state component. During the display of the game screenshot, the game card 253 is in a paused state. Wherein, as Figure 25 As shown in (d), the game card 253 in the paused state does not display overflow animation, thus avoiding interference with the user's operation of other components on the desktop. Subsequently, while the electronic device is displaying the paused game card 253, if it detects the user's operation on the game card 253, it can hide the game screenshot and display the UIExtension component, allowing the user to see... Figure 25 The overflow animation shown in (c) is the active game card 253.

[0541] In this way, electronic devices can display game cards on both sides of a single card through the UIExtension process, enriching the card display effects, reducing the difficulty of card development, and increasing the universality of overflow effect display.

[0542] Furthermore, switching between different card states can meet users' usage habits and increase the flexibility of interaction.

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

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

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

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

[0547] In this way, electronic devices can pause the card by taking a screenshot or using a transparency mask, reducing power consumption when the user does not need to operate the card.

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

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

[0550] Thus, after the second process ends, the electronic device can automatically switch back to displaying the first component, achieving flexible switching of component states.

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

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

[0553] Optionally, a portion of the content outside the main image in the second frame may be fully transparent or semi-transparent. Fully transparent means 100% transparency, while semi-transparent means transparency greater than 0% and less than 100%. For example, the transparency of this portion of the image may be greater than 50%.

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

[0555] In some examples, the UIExtension component rendered by the UIExtension process corresponds to the game function page, thereby presenting an interactive game experience to the user through card animation effects. 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, thus standardizing the display overflow effect.

[0556] For example, game applications and desktops are configured with preset rules that the main screen displays the center position of the function page. This way, when the desktop retrieves the function page, it only needs to align the center to display the appropriate second screen.

[0557] For example, such as Figure 28 As shown, in response to the user's operation on the game card 253, the game card 253 switches to the active 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. Specifically, since the UIExtension process has already 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, thus fulfilling the requirement of displaying the main game element at the corresponding position on the game card 253.

[0558] For example, when a game application sends the 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 and meets the display requirements.

[0559] For example, the desktop can also indicate the position of the game application's current display area 1 on the screen. This allows the game application to adjust the position of its main screen within the function pages based on this information, thus meeting display requirements.

[0560] For example, such as Figure 30As shown, in response to user actions on game card 253, game card 253 switches to the active state. Specifically, in response to instructions to display game card 253 at a lower position on the desktop, the UIExtension process adjusts the main area 271 of the game screen downwards to the corresponding position indicated by the location information during rendering. This way, subsequently, after the desktop obtains the UIExtension component, it can directly overlay the UIExtension component onto the desktop for display, thus allowing the game to be displayed in the original display area 1 of game card 253, meeting the user's operational needs.

[0561] Optionally, based on the above Figure 30 In the example scenario where the main screen matches the display area, the electronic device can move the display position of the game card (such as the first component) individually, and then adaptively adjust the position of the main screen to achieve a match. Alternatively, the electronic device can move both the first and second components, in which case the second component needs to be moved back in the opposite direction to achieve full-screen coverage of the second screen without any deviation. For example, if the electronic device moves both the first and second components upwards by 10 virtual pixels, then the second component needs to be moved downwards by 10 virtual pixels.

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

[0563] In some embodiments, the electronic device acquires first page information of a display interface, which includes size and position information of display areas for multiple components on the display interface. Then, based on the first page information, the electronic device determines a display area for displaying a second image.

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

[0565] Optionally, the second display area can be a defined display area for displaying the second image, or it can be a portion of the display area for displaying the second image.

[0566] In this way, the electronic device can obtain the actual allowable overflow range (the display area of ​​the second screen) based on the current display interface, and display the component effects according to the actual allowable overflow range to meet the actual display requirements. Optionally, the component effects may include the second screen.

[0567] In some examples, the electronic device determines the second display area in any one or a combination of the following ways: setting the edge of the display area for displaying the second image to ensure that the second image does not intrude into the display area of ​​other components; setting the edge of the display area for displaying the second image to ensure that the second image does not intrude into the display area of ​​the main content of other components; setting the edge of the display area for displaying the second image to achieve that the second image covers 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. For example, ... Figure 8 As shown, the electronic device can obtain the display area 2 corresponding to the heavy rain animation based on the position information displayed on cards 73 and 74, and display the heavy rain animation in display area 2 to achieve the display effect of raindrops falling on the upper edges of cards 73 and 74. That is, the edge of the display area for displaying the second image is ensured to prevent the second image from encroaching on the display areas of other components.

[0569] In this way, the electronic device obtains the display area of ​​the second screen based on the display area of ​​other components, thus avoiding affecting the display of other components.

[0570] For example, such as Figure 9B As shown, the electronic device acquires page information and obtains cards 73 and 74 located around the weather card. The main content of card 74 is a car logo 91. Therefore, the electronic device can display the following based on the top edge position information of card 73 and the top edge position information of car logo 91: Figure 9B The weather card 71 shows a heavy rain animation. It can be seen that the raindrops are currently falling on the upper edge of the car logo 91, better meeting the user's expectations for the component display effect. That is, the edge of the display area for the second screen is ensured to prevent the second screen from encroaching on the display area of ​​the main content of other components.

[0571] This avoids the display of the second screen affecting the display of the main content of other components.

[0572] For example, such as Figure 9C As shown in (b), the electronic device displays a second screen corresponding to a thunderstorm, covering some of the other components. That is, the edge of the display area for the second screen is defined to ensure that the second screen covers part or all of the target components among the other components. Optionally, the display duration of the second screen can be limited in the current scene.

[0573] Therefore, electronic devices limit the display time of the second screen, which needs to cover a large area. This ensures the second screen is displayed while preventing it from interfering with the display of other content and affecting user experience. It also prevents third-party components from maliciously occupying display space.

[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-region of the display area used to display the second screen, and the second sub-screen is displayed in a second sub-region of the display area used to display the second screen. Refreshing the first screen to the second screen in response to a first trigger event includes: in response to the first trigger event, a first application corresponding to a first component obtains first page information of the display interface, which includes size and position information of multiple components on the display interface. The first application, based on the first page information, determines a first sub-region and a target component adjacent to the first component, and triggers the display of the first sub-screen in the first sub-region. The first application sends a linkage effect instruction to the target application corresponding to the target component. The target application, based on the linkage effect instruction, determines a second sub-region and triggers the display of the second sub-screen in the second sub-region.

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

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

[0577] For example, when an electronic device determines that it needs to display a synchronized animation effect, it can obtain the components involved in the effect. These components include the component provider of the target component whose animation effect needs to be displayed. The component provider of the target component can send a synchronized effect instruction to the component providers of other components involved in the animation effect. This instruction instructs the other components to display the synchronized animation effect. In this way, through the cooperation of the target component and other components, the electronic device can display synchronized animation effects.

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

[0579] In this way, based on the page information, the electronic device displays interactive animations in the vicinity of the target component and other components around it, 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 a third component, which occupies a third display area on the display interface. Then, in response to a second trigger event, the electronic device refreshes the third screen to a fourth screen. The fourth screen differs from the third screen; it occupies a fourth display area on the display interface, which includes areas on the display interface different from the third display area, and includes static and / or dynamic screen content.

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

[0582] In other examples, the second display area is the display area within the safe range corresponding to the first display area. Therefore, while displaying the fourth screen, the electronic device maintains the display of the second screen on the display interface.

[0583] Optionally, such as Figure 35 As shown, the desktop can also be configured with conflict resolution strategies to avoid conflicts between animations of different components.

[0584] For example, such as Figure 9C In the scene shown in (c), the electronic device periodically displays a lightning effect for the weather card 92 (as shown in the second image). This lightning effect is as follows: Figure 9C The large-scale overflow of 3D animation is shown in (b). In response to the user's activation of game card 95, the electronic device displays the component animation of game card 95 (as shown in the fourth screen). During the display of the component animation of game card 95, the electronic device stops the periodically displayed lightning animation of weather card 92. This reduces the power consumption of the electronic device and avoids display conflicts between different animations.

[0585] For example, such as Figure 9CIn the scenario shown in (c), while displaying the component animations of game card 95 (as in the fourth screen), the electronic device still maintains the display of 2D cloud and rain animations (as in the second screen) within the safe range corresponding to weather card 92. The display of 2D animations consumes less power, thus reducing power consumption while ensuring display quality. Furthermore, even if the second screen within the safe range is a 3D animation, it can still be displayed. The safe range ensures the display quality of the animations.

[0586] In some embodiments, the second screen includes dynamic screen content. Upon the occurrence of a first event, the electronic device controls the display of the second screen according to a first method. The first event includes at least one of the following: the resource usage corresponding to the second screen exceeds a first resource limit; the system resources of the electronic device are insufficient; the power consumption corresponding to the second screen exceeds a 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 screen; stopping the display of the second screen; and releasing the component resources corresponding to the second screen.

[0587] Optionally, the second screen can be stopped from being displayed, for example, by freezing the first component.

[0588] In some examples, maintaining the display of dynamic visual content on electronic devices requires resources, generates power consumption and heat, which may affect the operation of other functions of the electronic device. Therefore, the electronic device can measure the resource consumption, power consumption and heat generation of the dynamic visual content, and under certain conditions, determine that it is in an abnormal scenario, and adjust the display of the dynamic visual content to release resources and reduce power consumption and heat generation.

[0589] In some solutions, multiple embodiments of this application can be combined, and the combined solution can be implemented. Optionally, some operations in the processes of each method embodiment may be combined, and / or the order of some operations may be changed. Furthermore, the execution order between the steps of each process is merely exemplary and does not constitute a limitation on the execution order between steps; other execution orders are also possible. It is not intended to indicate that the execution order is the only possible order in which these operations can be performed. Those skilled in the art will conceive of various ways to reorder the operations described herein. In addition, it should be noted that the process details involved in one embodiment of this document are similarly applicable to other embodiments, or different embodiments may be combined.

[0590] Furthermore, some steps in the method embodiments can be equivalently replaced with other possible steps. Alternatively, some steps in the method embodiments may be optional and can be deleted in certain use cases. Or, other possible steps may be added to the method embodiments.

[0591] Furthermore, the various method embodiments can be implemented individually or in combination.

[0592] The above combination Figures 4-35 The component display method provided in the embodiments of this application is described in detail below. Figure 36 This application provides a detailed description of the electronic device provided in its embodiments.

[0593] In one possible design, Figure 36 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Figure 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 can be used to implement the functions of the electronic device involved in the above method embodiments.

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

[0595] Optionally, the processing unit 3602 is used to support the electronic device 3600 in performing operations. Figure 34 S3402 in the middle.

[0596] Optionally, the display unit 3603 is used to support the electronic device 3600 in performing operations. Figure 34 S3401 and S3402 in the example.

[0597] The transceiver unit may include a receiving unit and a transmitting unit, and may be implemented by a transceiver or transceiver-related circuit components, and may be a transceiver or transceiver module. The operation and / or function of each unit in the electronic device 3600 are respectively to implement the corresponding process of the component display method described in the above method embodiments. All relevant content of each step involved in the above method embodiments can be referred to the functional description of the corresponding functional unit, and for the sake of brevity, it will not be repeated here.

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

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

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

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

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

[0603] Optionally, the chip system may contain one or more memories. The memory may be integrated with the processor or disposed separately from it; this application embodiment does not limit this. For example, the memory may be a non-transient processor, such as a read-only memory (ROM), which may be integrated with the processor on the same chip or disposed separately on different chips. This application embodiment does not specifically limit the type of memory or the arrangement of the memory and processor.

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

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

[0606] This application also provides a computer-readable storage medium storing a computer program. When the computer program is run on a computer, it causes the computer to perform the aforementioned steps to implement the component effect display method in the above embodiments.

[0607] This application also provides a computer program product that, when run on a computer, causes the computer to perform the aforementioned steps to achieve the component effect display method described in the above embodiments.

[0608] In addition, this application also provides an apparatus. Specifically, the apparatus may be a component or module, and may include one or more processors and a memory connected together. The memory stores a computer program. When the computer program is executed by one or more processors, the apparatus performs the component effect display method in the above-described method embodiments.

[0609] The apparatus, computer-readable storage medium, computer program product, or chip provided in the embodiments of this application are all used to execute the corresponding methods provided above. Therefore, the beneficial effects they can achieve can be referred to the beneficial effects of the corresponding methods provided above, and will not be repeated here.

[0610] The steps of the methods or algorithms described in conjunction with the embodiments of this application can be implemented in hardware or by a processor executing software instructions. The software instructions can consist of corresponding software modules, which 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, portable hard disks, CD-ROMs, or any other form of storage medium well known in the art. An exemplary storage medium is coupled to a processor, enabling the processor to read information from and 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 reside in an application-specific integrated circuit (ASIC).

[0611] Through the above description of the embodiments, those skilled in the art will clearly understand that, for the sake of convenience and brevity, the division of the above functional modules is only 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 can be 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 be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

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

[0613] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0614] Computer-readable storage media include, but are not limited to, any of the following: USB flash drive, portable hard drive, read-only memory (ROM), random access memory (RAM), magnetic disk or optical disk, and other media capable of storing program code.

[0615] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A component display method, characterized in that, Applied to electronic devices, the method includes: The first screen of the first component is displayed on the desktop application's display interface, wherein the first screen occupies a first display area on the display interface, and the first screen is a graphic and textual introduction of the first game; In response to a first trigger event, the size of the first container is enlarged or the clipping attribute of the first container is set to false. The process of the game engine is launched to obtain the game screen of the first game rendered by the process of the game engine. The game screen of the first game is displayed on the display interface of the desktop application by the second component corresponding to the game engine. The first game is loaded and running in the game engine. The second component covers the first component and the first component is invisible. The first component and the second component belong to the first container. The game screen is displayed within the enlarged first container, or the display area of ​​the game screen exceeds the range of the first container with the modified clipping attribute. The displayable area of ​​the game screen includes the display area of ​​the first screen and is larger than the display area of ​​the first screen. In response to an overflow recycling event, the size of the first container is restored or the clipping attribute of the first container is set to true. The overflow recycling event includes: reaching a preset display duration of the game screen, or receiving an indication that the game screen has ended display.

2. The method according to claim 1, characterized in that, The first triggering event includes at least one of the following events: User operation events that act on the first component; User gaze events acting on the first component; The event that triggers the component's screen refresh in the application corresponding to the first component; This is used to indicate that the current time has reached a preset time.

3. The method according to claim 1 or 2, characterized in that, The game screen of the first game is used to present one or more of the following visual effects for the content of the first screen: The effect of moving from within the first display area to outside the first display area; The effect of extending from within the first display area to outside the first display area; The effect of moving from outside the first display area to within the first display area; The effect of extending from outside the first display area into the first display area.

4. The method according to claim 1 or 2, characterized in that, The game screen of the first game includes the following: dynamic screen content that uses static screen content in the first screen to display dynamic effects.

5. The method according to claim 1 or 2, characterized in that, The game screen of the first game includes dynamic screen content, and the method further includes: In response to the fulfillment of preset conditions, a screenshot of the second component within the first display area is obtained; wherein, the preset conditions include detecting user operations outside the first display area, or not detecting user operations within the first display area within a preset time period; Stop displaying the second component and display the screenshot in the first display area.

6. The method according to claim 1 or 2, characterized in that, The game screen of the first game includes dynamic screen content, and the method further includes: In response to the fulfillment of preset conditions, the display of the second component is stopped, the first component is displayed in the first display area, and a transparency mask is overlaid on the first component; wherein, the preset conditions include detecting user operation outside the first display area, or not detecting user operation within the first display area within a preset time.

7. The method according to claim 6, characterized in that, The method further includes: In response to a user's first operation within the first display area, the display switches from showing the first component and the transparency mask to showing the second component; or... In response to a second user action within the first display area, the transparency mask is removed.

8. The method according to claim 1 or 2, characterized in that, The method further includes: In response to the termination of the game engine process, the display of the second component is switched to the display of the first component.

9. The method according to claim 1 or 2, characterized in that, The game screen of the first game is a function page in the game engine, and the main screen of the function page is displayed in a position on the display interface that corresponds to the position of the first display area.

10. The method according to any one of claims 1-2 and 7, characterized in that, During the display of the game screen of the first game, the display interface further includes a third screen of a third component, the third screen occupying a third display area on the display interface; the method further includes: In response to the second triggering 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.

11. The method according to claim 10, characterized in that, The method further includes: When the fourth screen is displayed, the game screen of the first game is refreshed to the first screen.

12. The method according to any one of claims 1-2, 7, and 11, characterized in that, The game screen of the first game includes dynamic screen content, and the method further includes: In the event of the first incident, the display of the game screen of the first game shall be controlled in accordance with the first method; The first event includes at least one of the following events: The resource usage corresponding to the game screen of the first game exceeds the first resource limit; The electronic device lacks sufficient system resources; The power consumption corresponding to the game screen of the first game exceeds the power consumption threshold; The temperature of the electronic device exceeds the temperature threshold. The first method includes: Reduce the display quality of the game graphics in the first game; Stop displaying the game screen of the first game; Release the component resources corresponding to the game screen of the first game.

13. An electronic device, characterized in that, include: The electronic device includes a processor, a memory, and a display screen, the memory and the display screen being coupled to the processor, the memory storing computer program code including computer instructions, which, when read from the memory by the processor, cause the electronic device to perform the method as described in any one of claims 1-12.

14. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a computer program that, when run on an electronic device, causes the electronic device to perform the method as described in any one of claims 1-12.

15. A computer program product, characterized in that, When the computer program product is run on a computer, it causes the computer to perform the method as described in any one of claims 1-12.

Images