Display method and device

Abstract

The present application relates to the technical field of display. Provided are a display method and a device. The method comprises: an electronic device being capable of displaying a target interface, wherein the target interface comprises a first element and a second element; and the electronic device being further capable of controlling a target region in the first element to display a target light and shadow effect, wherein the target light and shadow effect is used for presenting an illumination effect generated when a first virtual light source, which is simulated as being located at a position where the second element is located, illuminates the first element, and the target region is a region of the first element that is illuminated by the first virtual light source. Therefore, the display diversity of interface elements is improved, and the refinement of interface display is enhanced, thereby providing a richer interaction experience for users.

Description

A display method and device

[0001] This application claims priority to Chinese Patent Application No. 202411276319.7, filed with the State Intellectual Property Office of China on September 11, 2024, entitled "A Display Method and Device", and to Chinese Patent Application No. 202411364976.7, filed with the State Intellectual Property Office of China on September 27, 2024, entitled "A Display Method and Device", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of display technology, and more particularly to a display method and device. Background Technology

[0003] With the continuous development of technology, electronic devices and their display technologies are also constantly advancing. Electronic devices typically display a large number of interface elements (such as icons, windows, and controls), which users can interact with to achieve corresponding functions. However, traditional interface elements are often displayed in a fixed and monotonous manner, especially when users interact with electronic devices, failing to meet the growing demands for diversity and interactivity. This results in a poor user experience. Summary of the Invention

[0004] This application provides a display method and device that controls the display of target light and shadow effects in target areas within interface elements, thereby improving the display diversity of interface elements and providing users with unique and aesthetically pleasing visual effects.

[0005] To achieve the above objectives, this application adopts the following technical solution:

[0006] In a first aspect, this application provides a display method applied to an electronic device. The method includes: the electronic device can display a target interface and control a target area within a first element to display a target lighting effect. The target lighting effect is used to present an illumination effect simulating a first virtual light source located at the position of a second element, illuminating the first element. The target area is the area where the first virtual light source illuminates the first element.

[0007] Thus, the electronic device in this embodiment can control the target area within the first element to display target lighting effects. These effects can simulate the illumination effect produced when a virtual light source located at the second element illuminates the first element. This improves the diversity of interface element displays, enhances the sophistication of the interface display, and provides users with a richer interactive experience.

[0008] In one possible implementation, the electronic device may receive a first operation before displaying the target interface. The electronic device may then respond to the first operation by displaying the target interface.

[0009] Thus, the mobile phone in this embodiment can also display the target interface and the target lighting and shadow effects within the target area of ​​the first element after receiving the user's operation. This enhances the diversity of implementation scenarios and display effects.

[0010] In one possible implementation, after displaying the target interface, the electronic device can receive a first operation. In response to the first operation, the electronic device can also control the target area within the first element to display target lighting and shadow effects.

[0011] Thus, in this embodiment, the mobile phone can also display target lighting and shadow effects in the target area within the first element after receiving a user's operation. This not only enhances the diversity of display effects but also improves the interactivity between the device and the user.

[0012] In one possible implementation, the color of the target lighting effect is related to the color of the first virtual light source, the color of which is determined based on the color of the second element.

[0013] Thus, the color of the target lighting effect in this embodiment can be determined based on the color of the second element, enabling a more realistic simulation of the target lighting effect produced by the second element, i.e., the illumination effect produced when the second element illuminates the first element. This results in a more realistic and natural display effect, enhancing the diversity and aesthetics of the display.

[0014] In one possible implementation, the first operation is to move the second element, the position of the first virtual light source changes as the position of the second element changes, and the target area changes following the position of the first virtual light source.

[0015] Thus, in this embodiment, the first operation can be the operation of moving the second element. The user can move the second element, and the mobile phone can respond to the user's movement operation by generating dynamic target lighting and shadow effects in the target area within the first element. The position of the first virtual light source and the target area both change with the user's movement operation. This increases the diversity of display effects and enhances user playability, thereby improving the user experience.

[0016] In one implementation, the second element is located outside the first element, and the first operation is to move the second element into the first element. The first element includes a folder control, and the second element includes the application icon corresponding to the target application.

[0017] Thus, in this embodiment, as the user moves the second element into the first element, the target area within the first element will generate dynamic target lighting and shadow effects as the user moves. Specifically, in a scenario where the user moves an application icon into a folder control, dynamic target lighting and shadow effects will be generated in the target area within the folder control. This increases the diversity of display effects and enhances user engagement, thereby improving the user experience.

[0018] In one possible implementation, the second element comprises element regions of different colors, the positions of which change dynamically, and when displaying the target lighting effect, the color of the first sub-region in the target area is determined based on the color of the element region closest to the second element.

[0019] Thus, the second element in this embodiment can include different color regions, and the positions of these different color regions can change dynamically. Simultaneously, the target area can also include different sub-regions, which can be determined based on the color of the element region closest to the second element when displaying the target lighting effect. In this way, during the display of the target lighting effect, the lighting can display multiple different colors, and the display position of the colors can also change dynamically. This further enhances the diversity of the display effect, providing users with a more vibrant visual experience, thereby improving the user's visual experience.

[0020] In one possible implementation, the second element is located inside the first element.

[0021] The first element includes a voice assistant window, and the second element includes a voice assistant control within the voice assistant window, which is used to indicate that the voice assistant application is in a woke-up state.

[0022] Thus, this embodiment of the application can generate dynamic target lighting and shadow effects in the target area within the voice assistant window in a voice assistant scenario. The target lighting and shadow effects can display multiple different colors, and the display position of the colors can also change dynamically. This improves the diversity of implementation scenarios and increases user playability.

[0023] In one possible implementation, the first operation is an input operation in the voice assistant window.

[0024] Thus, the first operation in this embodiment can be an input operation to the voice assistant window. The mobile phone can respond to the input operation and control the voice assistant window to display the target lighting and shadow effect. Subsequently, the target lighting and shadow effect can display multiple different colors, and the display position of the colors can also change dynamically. Furthermore, it provides diversity in implementation scenarios and display effects.

[0025] In one possible implementation, the electronic device can also acquire the normal map corresponding to the first element and / or the content color of the element content in the second element. The electronic device can also render the target area based on the content color and / or the normal map corresponding to the first element to obtain the lighting and shadow animation corresponding to the first element. While controlling the display of the target lighting and shadow effect in the target area within the first element, the electronic device can display the lighting and shadow animation corresponding to the first element.

[0026] Thus, this embodiment of the application can generate and display the lighting and shadow animation corresponding to the first element by using the normal map corresponding to the first element and / or the content color of the element content in the second element, so as to present the target lighting and shadow effect corresponding to the first element. This improves the diversity of display effects and can provide users with more dazzling visual effects.

[0027] In one possible implementation, the electronic device can also control the first element to be displayed with a first display effect.

[0028] The first display effect is used to present light emitted by a second virtual light source that simulates the display screen of an electronic device in the edge area within the first element. After being reflected by the background layer of the first element, the light is refracted through the transparent material layer of the first element, resulting in a dispersion effect. The dispersion effect is related to the content color of the background layer.

[0029] Thus, this embodiment of the application simulates the dispersion process caused by the refraction of light of the content color in the background layer of the first element through the transparent material layer of the first element, thereby creating a dispersion effect of different colors after light refraction. This allows the edge area of ​​the first element to exhibit a certain color effect, enhancing the display diversity of interface elements and providing users with a more vibrant visual experience.

[0030] In one possible implementation, the electronic device can obtain a black-and-white texture map corresponding to the first element and the dispersion parameters corresponding to the first element. The dispersion parameters are determined based on the content color in the background layer. The electronic device can also render the first element according to the black-and-white texture map and the dispersion parameters to obtain a first image corresponding to the first element. The electronic device displays the first image corresponding to the first element while controlling the first element to be displayed with a first display effect.

[0031] Thus, this embodiment of the application can generate and display a first image by obtaining the black and white texture and dispersion parameters corresponding to the first element, so that the first element presents a dispersion effect. This improves the display diversity of interface elements and provides users with a unique and beautiful visual effect.

[0032] In one possible implementation, the first display effect is further used to present light simulating a second virtual light source in the edge area within the first element. After being reflected by the content in the content layer of the first element, the light is reflected through the edge area of ​​the transparent material layer, resulting in a color overlay effect. The color overlay effect is related to the color of the content in the content layer.

[0033] Thus, in this embodiment, a color overlay effect is created by simulating the reflection of light of the content color in the content layer of the first element after passing through the transparent material layer of the first element. This allows the content color in the content layer to be overlaid on the edge area of ​​the first element, making the first element more aesthetically pleasing.

[0034] Furthermore, the edge areas of the first element can exhibit color overlay and dispersion effects, resulting in a more vivid and vibrant display. This enhances the display diversity of interface elements and the user's visual experience.

[0035] In one possible implementation, the electronic device may respond to a first triggering operation by displaying a first element in a target interface with a first display effect.

[0036] The first triggering operation may include an operation to trigger the display of a target interface, such as the target interface being the main screen interface, and the first operation being a screen unlocking operation. The first trigger may also include an operation to display a first element, such as an operation to trigger the display of a first element within a target interface that is already displayed but does not yet contain the first element.

[0037] The first element includes a magnifying glass control used to magnify the target content. Alternatively, the first element includes a side view interface corresponding to the target application, which is the application interface of the target application rotated by a preset angle along a central axis parallel to the screen of the electronic device. In this way, the first operation can include triggering the display of the magnifying glass control or triggering the display of the side view interface.

[0038] Thus, in response to a first trigger operation, the embodiments of this application can trigger the display of a first element with a first display effect. This not only enhances the diversity of display effects but also improves the interactivity between the device and the user.

[0039] In one possible implementation, the electronic device can acquire a black-and-white texture map corresponding to the first element and target rendering parameters. The target rendering parameters include dispersion parameters and reflection parameters corresponding to the first element, whereby the dispersion parameters are determined based on the content color in the background layer, and the reflection parameters are determined based on the content color in the content layer.

[0040] The electronic device can also render the first element based on the black-and-white texture and target rendering parameters to obtain the first effect image corresponding to the first element. In this way, while controlling the first element to be displayed with the first display effect, the electronic device can display the first effect image corresponding to the first element.

[0041] Thus, this embodiment of the application can generate and display a first effect image by obtaining the black and white texture map corresponding to the first element and the target rendering parameters, so that the first element presents a first display effect. This improves the display diversity of interface elements and provides users with a unique and beautiful visual effect.

[0042] In one possible implementation, the electronic device can display a first element with an initial display effect, which is used to present a caustic effect in the edge area within the first element and a glass blur effect in the area within the first element excluding the edge area. The electronic device can also, in response to an effect switching operation, control the display effect of the first element on the target interface to change from the initial display effect to the first display effect while controlling the first element to be displayed with the first display effect.

[0043] Thus, the first element in this embodiment can also be displayed in its initial state, and the first element can also change from its initial state to its current state. This enhances the diversity of interface element displays and improves the interactivity between the device and the user.

[0044] In one possible implementation, the electronic device can acquire preset rendering parameters. The preset rendering parameters include caustic effect parameters for a first region and glass blur effect parameters for a second region within a first element. The first region is the edge region within the first element, and the second region is the region within the first element excluding the first region. The caustic effect parameters and the glass blur effect parameters are determined based on the content color in the background layer of the first element.

[0045] The electronic device can also render the first element according to preset rendering parameters to obtain the initial effect image corresponding to the first element, and display the initial effect image corresponding to the first element while displaying the first element with the initial display effect.

[0046] Thus, this embodiment of the application can generate and display an initial effect image by obtaining preset rendering parameters, so that the first element presents an initial display effect. This improves the display diversity of interface elements and provides users with a unique and beautiful visual effect.

[0047] In one possible implementation, the target interface also includes a third element. The electronic device can control the third element to be displayed in a second display effect.

[0048] The second display effect is related to the background area of ​​the third element. The background area of ​​the third element is the area corresponding to the position of the third element in the target interface. The second display effect is used to present the dynamic blur effect generated by the image in the background area of ​​the third element.

[0049] Thus, the embodiments of this application can combine the background image of the elements to create a dynamic blur effect, such as simulated water flow, thereby increasing the display diversity of interface elements. This provides users with a unique and aesthetically pleasing visual experience, enhancing the user experience.

[0050] In one possible implementation, the third element includes at least one sub-element. During the process of controlling the third element to display with the second display effect, the electronic device can respond to a second triggering operation targeting a target sub-element among the at least one sub-element to control the display effect of the third element to display with the second display effect.

[0051] In the second display effect, the style of the image content in the background area changes as the position of the target sub-element changes or the target sub-element disappears. The style includes at least one of the image content's position, color, shape, brightness, and size.

[0052] Thus, in this embodiment of the application, the user can manipulate the sub-elements within the third element to change the style of the image content in the second display effect. In this way, while the phone displays the third element in the second display effect, the style of the image content in the second display effect can change according to the user's actions. This further improves the display diversity and flexibility of interface elements, thereby enhancing the user experience.

[0053] In one possible implementation, the speed at which the style of the image content within the background area in the second display effect changes is positively correlated with the speed of the second triggering operation.

[0054] Thus, in the process of controlling the elements to present a dynamic blur effect, the dynamic blur effect can change according to the user's operation speed, improving the display diversity of interface elements and the user's operational flexibility. This provides users with a unique and aesthetically pleasing visual effect and enhanced playability.

[0055] In one possible implementation, when the target sub-element is associated with a specific business function, the style change rate of the elements displayed in the background area of ​​the second display effect is positively correlated with the business priority of the specified business function.

[0056] Thus, in the process of controlling the dynamic blur effect of elements in this embodiment, the dynamic blur effect can change according to the priority of the associated business of the element, improving the display diversity of interface elements and scene diversity. This provides users with a unique and aesthetically pleasing visual effect and enhanced playability.

[0057] In one implementation, the third element includes a floating volume icon control, and the target child element includes a volume control; or, the third element includes a notification list, and the target child element includes a notification display control.

[0058] In one possible implementation, the target interface includes a fourth element, which is adjacent to the third element. While controlling the third element to display with a second display effect, the electronic device can, in response to an operation on the third element, control the third element to display with the second display effect and control the fourth element to display with the third display effect.

[0059] The third display effect is related to the background area of ​​the fourth element. The background area of ​​the fourth element is the area where the fourth element is located in the target interface. The third display effect is used to present a dynamic blur effect based on the image in the background area of ​​the fourth element.

[0060] Thus, this embodiment of the application can display not only the third element with the second display effect, but also the fourth element with the third display effect. It can combine the background image of an element to create a dynamic blur effect around other elements, improving the display diversity of interface elements. Furthermore, it provides users with a unique and aesthetically pleasing visual experience.

[0061] In one possible implementation, the image content of the first and last frames of the second display effect is consistent with the image content corresponding to the background area of ​​the third element, and the image content of the first and last frames of the third display effect is consistent with the image content corresponding to the background area of ​​the fourth element.

[0062] Thus, the display elements in this embodiment can exhibit a dynamic blur effect for a certain period of time after user interaction. This improves the display flexibility of interface elements, thereby enhancing the user experience.

[0063] In one possible implementation, the target interface is a virtual keyboard interface, the third element includes a first control in the virtual keyboard interface, and the fourth element includes a second control in the virtual keyboard interface that is closer to the first control.

[0064] In one possible implementation, the electronic device can control the third element to display a lighting effect, which is used to illuminate other interface elements when there are other interface elements around the third element.

[0065] Thus, embodiments of this application can also control the illumination effect of the third element to illuminate other interface elements. This makes the display effect of the third element more obvious and improves the display diversity of interface elements.

[0066] In one possible implementation, the electronic device can magnify the third element while the third element is being displayed with a second display effect.

[0067] Thus, the embodiments of this application can also control the third element to be enlarged, making the display effect of the third element more obvious and improving the display diversity of interface elements.

[0068] In one possible implementation, the third element includes at least one child element. The electronic device can, in response to a second triggering operation targeting a target child element among the at least one child element, control the display effect of the third element to change from a second display effect to a fifth display effect.

[0069] The fifth display effect is used to present a dynamic blur effect based on the content color of the image and the corresponding element content of the target sub-element within the background area of ​​the third element.

[0070] Thus, in the process of controlling the dynamic blur effect of elements in this embodiment, the dynamic blur effect is not only related to the background area of ​​the element, but also to the element content of the target sub-element, resulting in richer color variations in the dynamic blur effect. This improves the display diversity of interface elements, thereby providing users with a unique and aesthetically pleasing visual experience.

[0071] In one possible implementation, the content color of the target child element's corresponding element content in the fifth display effect is rendered around the target child element.

[0072] Thus, by making the content color of the element corresponding to the target sub-element surround the target sub-element, the aesthetics of the fifth display effect and the diversity of interface element display are further improved in this embodiment.

[0073] In one possible implementation, the third element includes a call notification window, and the target child element includes an answer control.

[0074] Secondly, embodiments of this application provide a display method in which an electronic device can control a first element to be displayed with a first display effect.

[0075] The first display effect is used to present light emitted by a second virtual light source that simulates the display screen of an electronic device in the edge area within the first element. After being reflected by the background layer of the first element, the light is refracted through the transparent material layer of the first element, resulting in a dispersion effect. The dispersion effect is related to the content color of the background layer.

[0076] In one possible implementation, the electronic device can obtain a black-and-white texture map corresponding to the first element and the dispersion parameters corresponding to the first element. The dispersion parameters are determined based on the content color in the background layer. The electronic device can also render the first element according to the black-and-white texture map and the dispersion parameters to obtain a first image corresponding to the first element. The electronic device displays the first image corresponding to the first element while controlling the first element to be displayed with a first display effect.

[0077] In one possible implementation, the first display effect is further used to present light simulating a second virtual light source in the edge area within the first element. After being reflected by the content in the content layer of the first element, the light is reflected through the edge area of ​​the transparent material layer, resulting in a color overlay effect. The color overlay effect is related to the color of the content in the content layer.

[0078] Furthermore, the edge areas of the first element can exhibit color overlay and dispersion effects, resulting in a more vivid and vibrant display. This enhances the display diversity of interface elements and the user's visual experience.

[0079] In one possible implementation, the electronic device may respond to a first triggering operation by displaying a first element in a target interface with a first display effect.

[0080] In one possible implementation, the electronic device can acquire a black-and-white texture map corresponding to the first element and target rendering parameters. The target rendering parameters include dispersion parameters and reflection parameters corresponding to the first element, whereby the dispersion parameters are determined based on the content color in the background layer, and the reflection parameters are determined based on the content color in the content layer.

[0081] The electronic device can also render the first element based on the black-and-white texture and target rendering parameters to obtain the first effect image corresponding to the first element. In this way, while controlling the first element to be displayed with the first display effect, the electronic device can display the first effect image corresponding to the first element.

[0082] In one possible implementation, the electronic device can display a first element with an initial display effect, which is used to present a caustic effect in the edge area within the first element and a glass blur effect in the area within the first element excluding the edge area. The electronic device can also, in response to an effect switching operation, control the display effect of the first element on the target interface to change from the initial display effect to the first display effect while controlling the first element to be displayed with the first display effect.

[0083] In one possible implementation, the electronic device can acquire preset rendering parameters. The preset rendering parameters include caustic effect parameters for a first region and glass blur effect parameters for a second region within a first element. The first region is the edge region within the first element, and the second region is the region within the first element excluding the first region. The caustic effect parameters and the glass blur effect parameters are determined based on the content color in the background layer of the first element.

[0084] The electronic device can also render the first element according to preset rendering parameters to obtain the initial effect image corresponding to the first element, and display the initial effect image corresponding to the first element while displaying the first element with the initial display effect.

[0085] For the technical effects of the second aspect and any of its implementation methods, please refer to the technical effects of the first aspect and any of its implementation methods mentioned above, which will not be repeated here.

[0086] Thirdly, embodiments of this application provide a display method in which an electronic device can display a target interface, the target interface including a third element. The electronic device can control the third element to be displayed with a second display effect.

[0087] The second display effect is related to the background area of ​​the third element. The background area of ​​the third element is the area corresponding to the position of the third element in the target interface. The second display effect is used to present the dynamic blur effect generated by the image in the background area of ​​the third element.

[0088] In one possible implementation, the third element includes at least one sub-element. During the process of controlling the third element to display with the second display effect, the electronic device can respond to a second triggering operation targeting a target sub-element among the at least one sub-element to control the display effect of the third element to display with the second display effect.

[0089] In the second display effect, the style of the image content in the background area changes as the position of the target sub-element changes or the target sub-element disappears. The style includes at least one of the image content's position, color, shape, brightness, and size.

[0090] In one possible implementation, the speed at which the style of the image content within the background area in the second display effect changes is positively correlated with the speed of the second triggering operation.

[0091] In one possible implementation, when the target sub-element is associated with a specific business function, the style change rate of the elements displayed in the background area of ​​the second display effect is positively correlated with the business priority of the specified business function.

[0092] In one implementation, the third element includes a floating volume icon control, and the target child element includes a volume control; or, the third element includes a notification list, and the target child element includes a notification display control.

[0093] In one possible implementation, the target interface includes a fourth element, which is adjacent to the third element. While controlling the third element to display with a second display effect, the electronic device can, in response to an operation on the third element, control the third element to display with the second display effect and control the fourth element to display with the third display effect.

[0094] The third display effect is related to the background area of ​​the fourth element. The background area of ​​the fourth element is the area where the fourth element is located in the target interface. The third display effect is used to present a dynamic blur effect based on the image in the background area of ​​the fourth element.

[0095] In one possible implementation, the image content of the first and last frames of the second display effect is consistent with the image content corresponding to the background area of ​​the third element, and the image content of the first and last frames of the third display effect is consistent with the image content corresponding to the background area of ​​the fourth element.

[0096] In one possible implementation, the target interface is a virtual keyboard interface, the third element includes a first control in the virtual keyboard interface, and the fourth element includes a second control in the virtual keyboard interface that is closer to the first control.

[0097] In one possible implementation, the electronic device can control the third element to display a lighting effect, which is used to illuminate other interface elements when there are other interface elements around the third element.

[0098] In one possible implementation, the electronic device can magnify the third element while the third element is being displayed with a second display effect.

[0099] In one possible implementation, the third element includes at least one child element. The electronic device can, in response to a second triggering operation targeting a target child element among the at least one child element, control the display effect of the third element to change from a second display effect to a fifth display effect.

[0100] The fifth display effect is used to present a dynamic blur effect based on the content color of the image and the corresponding element content of the target sub-element within the background area of ​​the third element.

[0101] In one possible implementation, the content color of the target child element's corresponding element content in the fifth display effect is rendered around the target child element.

[0102] In one possible implementation, the third element includes a call notification window, and the target child element includes an answer control.

[0103] For the technical effects of the third aspect and any of its implementation methods, please refer to the technical effects of the first aspect and any of its implementation methods mentioned above, which will not be repeated here.

[0104] Fourthly, embodiments of this application provide an electronic device, which includes: a processor and a memory;

[0105] The processor is connected to a memory, which stores computer execution instructions. The processor executes the computer execution instructions stored in the memory to cause the electronic device to perform the method described in the first aspect above, or the method described in the second aspect above, or the method described in the third aspect above.

[0106] Fifthly, embodiments of this application provide a computer-readable storage medium storing instructions that, when executed on an electronic device, cause the electronic device to perform the method described in the first aspect above, or the method described in the second aspect above, or the method described in the third aspect above.

[0107] In a sixth aspect, embodiments of this application provide a computer program product containing instructions that, when the computer program product is run on an electronic device, cause the electronic device to perform the method described in the first aspect above, or the method described in the second aspect above, or the method described in the third aspect above. Attached Figure Description

[0108] Figure 1 is a schematic diagram of a related technology scenario provided in an embodiment of this application;

[0109] Figure 2 is a schematic diagram of the display effect of a related technology provided in an embodiment of this application;

[0110] Figure 3 is a schematic diagram of the hardware structure of a mobile phone provided in an embodiment of this application;

[0111] Figure 4 is a schematic diagram of the software structure of a mobile phone provided in an embodiment of this application;

[0112] Figure 5 is a flowchart illustrating a display method provided in an embodiment of this application;

[0113] Figure 6 is a schematic diagram of an interface for a target lighting effect provided in an embodiment of this application;

[0114] Figure 7 is a schematic diagram of an interface for a target lighting effect provided in an embodiment of this application;

[0115] Figure 8 is a schematic diagram of the interface of a first sub-region and a second sub-region provided in an embodiment of this application;

[0116] Figure 9 is a flowchart illustrating a first display effect provided in an embodiment of this application;

[0117] Figure 10 is a schematic diagram of an interface showing a first display effect according to an embodiment of this application;

[0118] Figure 11 is a schematic diagram of a first display effect provided in an embodiment of this application;

[0119] Figure 12 is a schematic diagram of an interface showing a first display effect according to an embodiment of this application;

[0120] Figure 13 is a schematic diagram of an interface showing a first display effect and a target lighting effect according to an embodiment of this application;

[0121] Figure 14 is a schematic diagram of an interface showing a first display effect and a target lighting effect according to an embodiment of this application;

[0122] Figure 15 is a schematic diagram of an initial display effect provided in an embodiment of this application;

[0123] Figure 16 is a schematic diagram of an interface for switching display effects provided in an embodiment of this application;

[0124] Figure 17 is a schematic diagram of a second display effect provided in an embodiment of this application;

[0125] Figure 18 is a schematic diagram of a second display effect provided in an embodiment of this application;

[0126] Figure 19 is a schematic diagram of a second display effect provided in an embodiment of this application;

[0127] Figure 20 is a schematic diagram of a second display effect provided in an embodiment of this application;

[0128] Figure 21 is a schematic diagram of a second display effect provided in an embodiment of this application;

[0129] Figure 22 is a schematic diagram of a second display effect provided in an embodiment of this application.

[0130] Figure 23 is a schematic diagram of an interface showing a second display effect and a third display effect provided in an embodiment of this application;

[0131] Figure 24 is a schematic diagram of an interface showing a fifth display effect according to an embodiment of this application;

[0132] Figure 25 is a structural schematic diagram of a mobile phone provided in an embodiment of this application. Detailed Implementation

[0133] The technical solutions of the embodiments of this application will be described below with reference to the accompanying drawings. In the description of this application, unless otherwise stated, " / " indicates that the objects before and after are in an "or" relationship. For example, A / B can represent A or B. "And / or" in this application is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, and B alone, where A and B can be singular or plural. Furthermore, in the description of this application, unless otherwise stated, "multiple" refers to two or more. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can represent: a, b, c, ab, ac, bc, or abc, where a, b, and c can be single or multiple. In addition, in order to clearly describe the technical solutions of the embodiments of this application, the terms "first" and "second" are used in the embodiments of this application to distinguish the same or similar items with basically the same function and effect.

[0134] Those skilled in the art will understand that the terms "first," "second," etc., do not limit the quantity or order of execution, and that "first," "second," etc., are not necessarily different. Furthermore, in some embodiments of this application, words such as "exemplary" or "for example" are used to indicate that something is being described as an example, illustration, or description. Any embodiment or design scheme described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design schemes. Specifically, the use of words such as "exemplary" or "for example" is intended to present the relevant concepts in a concrete manner for ease of understanding.

[0135] Furthermore, the device architecture and business scenarios described in the embodiments of this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided in the embodiments of this application. As those skilled in the art will know, with the evolution of device architecture and the emergence of new business scenarios, the technical solutions provided in the embodiments of this application are also applicable to similar technical problems.

[0136] Interface Elements: The user interface is the medium through which applications or operating systems interact and exchange information with users. It converts information from its internal form to a form that users can accept. A common form of user interface is the Graphical User Interface (GUI), which refers to a user interface related to computer operation displayed graphically.

[0137] Interface elements refer to the various components that make up the user interface and are used to display information on the screen, such as icons, windows, and controls; among them, controls can include visual interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets.

[0138] In some embodiments of this application, the display screen may show at least one interface element. For example, if there is one interface element on the display screen, the interface element may be a call notification window for a call service. The interface element may also be a notification reminder window for a notification service, etc. For example, if there are multiple interface elements on the display screen, the interface elements may be multiple controls, such as application controls corresponding to multiple applications, etc.

[0139] In some embodiments of this application, an interface element may further include at least one child element, which may be a control. For example, when an interface element includes only one child element, the interface element may be a text box displaying text, a list box displaying a message list, an image box displaying an image, etc. When an interface element includes multiple child elements, the interface element may be a combined interface element comprising multiple text boxes, image boxes, list boxes, etc.

[0140] For example, when the interface on the display screen is used to present multiple applications to the user, such as "Messages" and "Settings," as shown in Figure 1(A), the interface elements include text boxes for the application names and image boxes for the application icons. When the interface on the display screen is the interface after opening an application, the interface elements can be the content presented to the user by the application. As shown in Figure 1(B), after opening the "Settings" application, the interface element is a text box corresponding to a setting option (such as Wi-Fi, Bluetooth, sound, brightness, etc.).

[0141] It should be noted that the embodiments of this application do not impose specific restrictions on the implementation form and number of interface elements.

[0142] Display effects refer to the visual characteristics presented by various interface elements in the user interface. These visual characteristics include not only static attributes such as the background shape, font type, font size, and color of interface elements, but also dynamic effects such as animation, gradients, and shadows.

[0143] Typically, referring to Figure 2, the display method of interface elements in related technologies usually adopts a frosted glass display effect. The display effect of the interface elements is transparent like glass, allowing the blurred shape of the underlying background to be seen through the surface of the interface elements. During user interaction with an interface element, the display effect of that interface element will switch to a lit display effect. This can be understood as the display brightness of that interface element being higher than that of other interface elements, thus presenting a lighting effect similar to the emission of a light source.

[0144] However, the display methods of interface elements in related technologies are often fixed and monotonous, especially when users interact with electronic devices, failing to meet users' growing needs for diversity and interactivity. This results in a poor user experience.

[0145] To address the aforementioned technical problems, this application provides a display method applied to an electronic device. The method includes: the electronic device can display a target interface, the target interface including a first element and a second element. The electronic device can control a target area within the first element to display a target lighting effect. The target lighting effect is used to present an illumination effect simulating a first virtual light source located at the position of the second element, illuminating the first element. The target area is the area where the first virtual light source illuminates the first element.

[0146] Thus, the electronic device in this embodiment can control the target area within the first element to display target lighting effects. These effects can simulate the illumination effect produced when a virtual light source located at the second element illuminates the first element. This improves the diversity of interface element displays, enhances the sophistication of the interface display, and provides users with a richer interactive experience.

[0147] In some embodiments of this application, the electronic device can be a small-screen electronic device such as a smart wearable device (e.g., a smartwatch, a smart bracelet), a doorbell with a display function, or a mobile phone, tablet computer, desktop, laptop, handheld computer, notebook computer, ultra-mobile personal computer (UMPC), netbook, as well as cellular phones, personal digital assistants (PDAs), augmented reality (AR) / virtual reality (VR) devices, etc., all of which include a display screen. This application does not impose any special limitations on the specific form of the electronic device.

[0148] The operating systems installed on electronic devices include, but are not limited to, Alternatively, other operating systems may be used. Of course, electronic devices may not have an operating system installed. This application does not limit the specific type of electronic device, whether or not an operating system is installed, or the type of operating system if an operating system is installed.

[0149] Figure 3 shows a schematic diagram of the structure of mobile phone 100.

[0150] Mobile phone 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, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, sensor module 180, buttons 190, motor 191, indicator 192, camera 193, display screen 194, and subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0151] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the mobile phone 100. In other embodiments of this application, the mobile phone 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.

[0152] Processor 110 may include one or more processing units, such as an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU). Different processing units may be independent devices or integrated into one or more processors. It should be noted that in the following embodiments, the execution of this display method is executed using processor 110 as an example.

[0153] The controller can serve as the central nervous system and command center of the mobile phone 100. Based on the instruction operation code and timing signals, the controller generates operation control signals to control the fetching and execution of instructions.

[0154] The mobile phone 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. The processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0155] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Miniled LED, a MicroLED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the mobile phone 100 may include one or N displays 194, where N is a positive integer greater than 1.

[0156] In some embodiments of this application, the display screen 194 may display one or more interface elements and control the interface elements to present specific display effects.

[0157] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0158] The wireless communication function of mobile phone 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor.

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

[0160] The mobile communication module 150 can provide wireless communication solutions for mobile phones 100, including 2G / 3G / 4G / 5G / future communication technologies. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.

[0161] The wireless communication module 160 can provide solutions for wireless communication applications on the mobile phone 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 2.

[0162] In some embodiments, antenna 1 of mobile phone 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling mobile phone 100 to communicate with networks and other devices via wireless communication technology. Wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time-Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies, etc. GNSS can include the Global Positioning System (GPS), the Global Navigation Satellite System (GLONASS), the BeiDou Navigation Satellite System (BDS), the Quasi-Zenith Satellite System (QZSS), and / or satellite-based augmentation systems (SBAS).

[0163] The mobile phone 100 can achieve shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0164] The mobile phone 100 can achieve audio functions such as music playback and recording through the audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor.

[0165] The software system of mobile phone 100 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This embodiment of the invention uses the layered architecture Android system as an example to illustrate the software structure of mobile phone 100.

[0166] Figure 4 is a software structure block diagram of the mobile phone 100 according to an embodiment of this application.

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

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

[0169] As shown in Figure 4, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS.

[0170] The application framework layer provides application programming interfaces (APIs) and programming frameworks for applications in the application layer. The application framework layer includes predefined functions. Electronic devices can access different applications through the API interface.

[0171] As shown in Figure 4, the application framework layer may include a window manager, content provider, view system, phone manager, resource manager, notification manager, etc.

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

[0173] Content providers store and retrieve data, making that data accessible to applications. This data can include videos, images, audio, phone calls made and received, browsing history and bookmarks, phone books, and more.

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

[0175] The phone manager is used to provide communication functions for the mobile phone 100. For example, it manages call status (including connection, hang-up, etc.).

[0176] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0177] The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify users of completed downloads or message alerts. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0178] The Android Runtime consists of core libraries and a virtual machine. The Android Runtime is responsible for the scheduling and management of the Android system.

[0179] The core library consists of two parts: one part is the functionalities that need to be called by the Java language, and the other part is the Android core library.

[0180] The application layer and application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0181] A system library can include multiple functional modules. For example, a display module and a rendering module.

[0182] In some embodiments, the rendering module is used to render the first element so that the first element is displayed with a first display effect or a second display effect. The display module is used to control the display effect of the first element in the target interface to change from the first display effect to the second display effect.

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

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

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

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

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

[0188] The following will use a mobile phone as an example to specifically describe the display method provided in the embodiments of this application.

[0189] Figure 5 is a flowchart illustrating a display method according to an embodiment of this application. As shown in Figure 5, the method may include the following steps S501-S502.

[0190] S501, The mobile phone displays the target interface, which includes a first element and a second element.

[0191] In some embodiments of this application, the mobile phone can display a target interface, which can be any user interface displayed by the mobile phone. The target interface may include one or more interface elements.

[0192] When a target interface includes a UI element, that UI element can be understood as the target interface itself; that is, the UI element is the target interface.

[0193] When the target interface includes multiple interface elements, such as a first element and a second element, the first element can be located inside or outside the second element, and the second element can also be located inside or outside the first element.

[0194] For example, the first element includes a folder control, and the second element includes the application icon corresponding to the target application. The application icon can be located inside or outside the folder control. As another example, the first element includes a voice assistant window, and the second element includes a voice assistant control within the voice assistant window. The voice assistant control is used to indicate that the voice assistant application is in a activated state; the voice assistant control can be located inside the voice assistant window.

[0195] It should be noted that the embodiments of this application do not limit the implementation method of the target interface or the implementation method of the interface elements.

[0196] S502, the mobile phone controls the target area within the first element to display the target lighting and shadow effects.

[0197] The target lighting effect is used to simulate the illumination effect produced when a first virtual light source, located at the position of the second element, shines on the first element. The target area is the region where the first virtual light source illuminates the first element. The target area is the region close to the second element.

[0198] In some embodiments of this application, the color of the target lighting effect is related to the light source color of the first virtual light source, and the light source color is determined based on the color of the second element.

[0199] In one possible implementation, the color of the light source can be the same as the color of the second element, or the color of the light source can be a color similar to the color of the second element, such as a color from the same color family.

[0200] For example, the second element could be the browser application's icon, which is green. Thus, the light source could also be green. Consequently, the target lighting effect would also be green.

[0201] In another possible implementation, the color of the target lighting effect can also be a preset color. It should be noted that the embodiments of this application do not limit the color of the target lighting effect.

[0202] Thus, the color of the target lighting effect in this embodiment can be determined based on the color of the second element, enabling a more realistic simulation of the target lighting effect produced by the second element, i.e., the illumination effect produced when the second element illuminates the first element. This results in a more realistic and natural display effect, enhancing the diversity and aesthetics of the display.

[0203] In some embodiments of this application, after the mobile phone displays the target interface, it can receive a first operation. The mobile phone can also respond to the first operation by controlling the target area within the first element to display target lighting and shadow effects.

[0204] Thus, in this embodiment, the mobile phone can also display target lighting and shadow effects in the target area within the first element after receiving a user's operation. This not only enhances the diversity of display effects but also improves the interactivity between the device and the user.

[0205] In some examples, the first operation can be the operation of moving the second element, the position of the first virtual light source changes as the position of the second element changes, and the target area changes following the position of the first virtual light source.

[0206] In one possible implementation, the second element is located outside the first element.

[0207] For example, the first element includes a folder control, and the second element includes the application icon corresponding to the target application. The user can move the application icon closer to the top edge of the folder control, and then move it to the bottom edge. In this way, the position of the first virtual light source changes according to the position of the application icon, changing from the top edge to the bottom edge of the folder control. The target area also changes from the top edge to the bottom edge of the folder control.

[0208] In another possible implementation, the second element is located inside the first element.

[0209] For example, continuing with the case where the first element includes a folder control and the second element includes the application icon corresponding to the target application, the user can move the application icon from the left side of the folder control to the right side. In this way, the position of the first virtual light source changes accordingly, shifting from the left side to the right side of the folder control. The target area also changes from the left side to the right side of the folder control.

[0210] Thus, in this embodiment, the first operation can be the operation of moving the second element. The user can move the second element, and the mobile phone can respond to the user's movement operation by generating dynamic target lighting and shadow effects in the target area within the first element. The position of the first virtual light source and the target area both change with the user's movement operation. This increases the diversity of display effects and enhances user playability, thereby improving the user experience.

[0211] In some embodiments of this application, the second element is located outside the first element, and the first operation can be an operation of moving the second element into the first element.

[0212] For example, the first element includes a folder control, and the second element includes an application icon corresponding to the target application, with the application icon located outside the folder control. The first operation is to move the application icon corresponding to the target application into the folder control.

[0213] For example, see Figure 6(A), where the browser application icon is green. As the user drags the application icon to the folder control, the target area of ​​the folder control displays the target lighting effect.

[0214] Specifically, the first virtual light source is a virtual light source outside the first element, and the color of the first virtual light source can be the same as the color of the application icon, i.e., green. Thus, the color of the target lighting effect is also green. Referring to Figure 6(B), as the application icon moves closer to the folder control, the target lighting effect can be displayed in the first target area. Referring to Figure 6(C), as the position of the application icon changes, the target lighting effect can be displayed in the second target area; that is, the area displaying the target lighting effect changes from the first target area to the second target area.

[0215] It should be noted that the target area can adaptively change according to the distance between the first element and the second element, and the target area can be associated with the illuminated area of ​​the first virtual light source. This application embodiment does not specifically limit the setting location or setting range corresponding to the target area.

[0216] Thus, in this embodiment, as the user moves the second element into the first element, the target area within the first element will generate dynamic target lighting and shadow effects as the user moves. Specifically, in a scenario where the user moves an application icon into a folder control, dynamic target lighting and shadow effects will be generated in the target area within the folder control. This increases the diversity of display effects and enhances user engagement, thereby improving the user experience.

[0217] In some embodiments of this application, the second element includes element regions of different colors, and the color of the target region is determined based on the color of the element regions close to the second element.

[0218] In one implementation, the second element may include element regions of different colors. The second element can have multiple colors, and each element region can be a different color. The positions of the element regions of different colors remain fixed. Thus, the color of the target region can be determined based on the colors of the element regions closest to the second element.

[0219] For example, referring to Figure 7(A), continuing with the example of the Notes app icon, the app icon includes a first element area and a second element area. The first element area is white, and the second element area can be yellow. Referring to Figure 7(B), as the app icon moves closer to the folder control, a target lighting effect can be displayed in the first target area. Since the first target area is closer to the first element area, its color can be white. Referring to Figure 7(C), as the app icon moves, a target lighting effect can be displayed in the second target area; that is, the area displaying the target lighting effect changes from the first target area to the second target area. Since the second target area is closer to the second element area, its color can be yellow.

[0220] Of course, the target area can also include multiple sub-areas, and the color of the sub-areas is determined based on the color of the element area closest to the second element.

[0221] In some other embodiments of this application, the second element includes element regions of different colors, the positions of which change dynamically, and the color of the first sub-region in the target area is determined based on the color of the element region closest to the second element when displaying the target lighting effect.

[0222] The second element can include element regions of different colors, and the second element can have multiple colors, with each element region having a different color. The positions of the element regions of different colors can change dynamically. Of course, the colors corresponding to the element regions of different colors can also change dynamically.

[0223] Therefore, the color of the target region can be determined based on the color of the element region closest to the second element. If the target region comprises multiple sub-regions, the color of the first sub-region within the target region can also be determined based on the color of the element region closest to the second element.

[0224] In one possible implementation, the second element is located inside the first element.

[0225] For example, referring to Figure 8(A), the first element includes a voice assistant window, and the second element includes a voice assistant control within the voice assistant window. The voice assistant control is used to indicate that the voice assistant application is in a wake-up state. Referring to Figure 8(B), the user can perform a first operation on the voice assistant application, such as dragging a target file into the voice assistant window. The voice assistant control may include a first element area and a second element area, where the first element area is blue and the second element area can be yellow. The positions of the first and second element areas can change dynamically. That is, the mobile phone can respond to the first operation by controlling the posture of the voice assistant control to change (such as controlling the voice assistant control to rotate or increasing the rotation speed of the voice assistant control). In this way, the positions of the first and second element areas of the voice assistant control can change dynamically. It should be noted that the embodiments of this application do not limit the timing or specific implementation of the posture change of the voice assistant control.

[0226] Referring to Figure 8(C), the first element area of ​​the voice assistant control is closer to the left edge of the phone screen, and the second element area of ​​the voice assistant control is closer to the right edge of the phone screen. Referring to Figure 8(D), the second element area of ​​the voice assistant control is closer to the left edge of the phone screen, and the first element area of ​​the voice assistant control is closer to the right edge of the phone screen.

[0227] Thus, referring to Figure 8(C), the first element area of ​​the voice assistant control is blue, and the first sub-area in the target area is adjacent to the first element area of ​​the voice assistant control; similarly, the first sub-area can also be blue. The second element area of ​​the voice assistant control is yellow, and the second sub-area in the target area is adjacent to the second element area of ​​the voice assistant control; similarly, the second sub-area can also be yellow. Referring to Figure 8(D), the first element area of ​​the voice assistant control is blue, and the second sub-area in the target area is adjacent to the first element area of ​​the voice assistant control; similarly, the first sub-area can also be blue. The second element area of ​​the voice assistant control is yellow, and the first sub-area in the target area is adjacent to the second element area of ​​the voice assistant control; similarly, the second sub-area can also be yellow.

[0228] In another possible implementation, the second element is located outside the first element. For example, continuing to refer to Figures 7(A)-7(C), the application icon includes a first element area and a second element area. The color of the first element area can dynamically change from white to yellow, and the color of the second element area can also dynamically change from yellow to white. As the application icon approaches the folder control, a target lighting effect can be displayed in the first target area. If the color of the first element area changes to yellow, the color of the first target area will also be yellow. If the color of the first element area changes to white, the color of the first target area will also be white.

[0229] It should be noted that the target area may include multiple sub-regions, and the color of each sub-region can be determined based on the color of the element region closest to the second element. This application does not specifically limit the dynamic change process of the element regions within an element, nor the color determination process of the sub-regions within the target area.

[0230] Thus, the second element in this embodiment can include different color regions, and the positions of these different color regions can change dynamically. Simultaneously, the target area can also include different sub-regions, which can be determined based on the color of the element region closest to the second element when displaying the target lighting effect. In this way, during the display of the target lighting effect, the lighting can display multiple different colors, and the display position of the colors can also change dynamically. This further enhances the diversity of the display effect, providing users with a more vibrant visual experience, thereby improving the user's visual experience.

[0231] In some embodiments of this application, the first operation described above can be an input operation within a voice assistant window. For example, the first operation may include moving a file control corresponding to the target file into the voice assistant window. The first operation may also include voice command input for the target file. The first operation may also include an input operation performed through an input box in the voice assistant window.

[0232] For example, a user can move the file control corresponding to the target file into the voice assistant window to trigger the voice assistant application to process the target file, such as converting the target file into a voice broadcast. Before the phone receives the first operation, the posture of the voice assistant control can include an initial posture, such as maintaining an initial rotation speed. After the phone receives the first operation, i.e., during the process of converting the target file into a voice broadcast, the posture of the voice assistant control can change, such as maintaining a target rotation speed, where the target rotation speed is greater than the initial rotation speed. After the phone completes the conversion of the target file into a voice broadcast, the posture of the voice assistant control can return to its initial posture.

[0233] As another example, before receiving the first operation, the phone may not fully display the voice assistant window, for example, only showing a portion of the voice assistant window. Simultaneously, the voice assistant control maintains its initial rotation speed. After receiving the first operation, the phone fully displays the voice assistant window, and the voice assistant control maintains its target rotation speed. Similarly, after the phone completes converting the target file into voice playback, the voice assistant control resumes its initial rotation speed.

[0234] It should be noted that the embodiments of this application do not limit the specific operation corresponding to the first operation. Furthermore, in the voice assistant application scenario, the specific display effects of the voice assistant window and voice assistant controls are not limited.

[0235] Thus, the first operation in this embodiment can be an input operation to the voice assistant window. The mobile phone can respond to the input operation and control the voice assistant window to display the target lighting and shadow effect. Subsequently, the target lighting and shadow effect can display multiple different colors, and the display position of the colors can also change dynamically. Furthermore, it provides diversity in implementation scenarios and display effects.

[0236] In some embodiments of this application, the mobile phone may receive a first operation before displaying the target interface. The mobile phone may also display the target interface in response to the first operation.

[0237] For example, the first operation may include an operation to wake up a voice assistant application. For instance, the first operation may include a user's voice activation of the voice assistant application. The mobile phone may respond to the user's voice activation by displaying the target interface corresponding to the voice assistant application. The target interface may include a voice assistant window and voice assistant controls. That is, after receiving the first operation, the voice assistant controls may maintain their initial rotation speed, and the target area within the voice assistant window may display target lighting and shadow effects.

[0238] Thus, the embodiments of this application can receive a first operation and, in response to the first operation, display a target interface and present a target lighting and shadow effect. This enhances the diversity of implementation scenarios and display effects.

[0239] In some embodiments of this application, the mobile phone can obtain the normal map corresponding to the first element and / or the content color of the element content in the second element. The mobile phone can also render the target area based on the content color and / or the normal map corresponding to the first element to obtain a lighting and shadow effect image corresponding to the first element, such as a lighting and shadow animation. Thus, while controlling the display of the target lighting and shadow effect in the target area within the first element, the mobile phone can display the lighting and shadow animation corresponding to the first element.

[0240] In one feasible approach, the phone can obtain the normal map corresponding to the first element and the content color of the element's content in the second element. The phone can then render the target area based on the content color and the normal map corresponding to the first element to obtain the lighting and shadow animation corresponding to the first element. In this way, the phone can display the lighting and shadow animation corresponding to the first element.

[0241] The normal map is used to indicate the brightness and shading information produced when light shines on the first element. Understandably, the normal map is used to simulate the unevenness of the first element's surface.

[0242] For example, continuing with the case where the first element includes a folder control and the second element includes an application icon control, the phone can obtain the content color of the application icon control and, based on the content color of the application icon control and the normal map of the folder control, render the target area inside the folder control to obtain the lighting and shadow animation of the folder control. For instance, if the application icon control is green, the phone can extract the RGB value corresponding to green and, based on the RGB value of green and the normal map of the folder control, render the target area inside the folder control to obtain the lighting and shadow animation of the folder control. The color of this lighting and shadow animation can be green.

[0243] In another possible approach, the phone can directly determine the content color of the second element and render the target area based on that color to obtain the lighting and shadow animation corresponding to the first element. In this way, the phone can display the lighting and shadow animation corresponding to the first element.

[0244] In another possible approach, the color of the target lighting effect can also be a preset color. The phone can obtain the normal map and preset color corresponding to the first element. The phone can then render the target area based on the preset color and the normal map corresponding to the first element to obtain the lighting animation corresponding to the first element. In this way, the phone can display the lighting animation corresponding to the first element.

[0245] Thus, this embodiment of the application can generate and display the lighting and shadow animation corresponding to the first element by using the normal map corresponding to the first element and / or the content color of the element content in the second element, so as to present the target lighting and shadow effect corresponding to the first element. This improves the diversity of display effects and can provide users with more dazzling visual effects.

[0246] In some embodiments of this application, the mobile phone can control the first element to be displayed with a first display effect.

[0247] The first display effect is used to present light simulating the light emitted by a second virtual light source located outside the screen of a mobile phone in the edge area within the first element. After being reflected by the background layer of the first element, the light is refracted through the transparent material layer of the first element to produce a dispersion effect. The dispersion effect is related to the content color of the background layer.

[0248] In one possible implementation, the first element may include a transparent material layer and a content layer, with the content layer located on top of the transparent material layer. The content layer may include at least one content object. The transparent material layer and the content layer can be understood as two different layers, and the first element can be displayed by overlaying these two layers. The first element also has a corresponding background layer, located below the transparent material layer, and the content of the background layer is the image corresponding to the position of the first element in the target interface.

[0249] For example, referring to Figure 9, taking a folder control as the first element, the content layer corresponding to the folder control can include multiple application icons. The content in the background layer is the wallpaper image corresponding to the location of the folder control.

[0250] The phone can simulate a second virtual light source located outside the phone's display screen. For example, the second virtual light source could include a global line light source located outside the phone's display screen. The light emitted by the global line light source can reach the background layer of a folder control. This light can also be reflected by the background layer of the folder control and then reflected to the edge area of ​​the folder control's transparent material layer. This light can also produce a dispersion effect through refraction at the edge area of ​​the folder control's transparent material layer. Thus, the dispersion effect is related to the color of the wallpaper image.

[0251] It is understandable that different colors of light have different refractive indices in the same material, and different colors of light can be refracted into a large number of monochromatic lights, each of which will also appear to be the same or different colors.

[0252] Thus, this embodiment of the application simulates the dispersion process caused by the refraction of light of the content color in the background layer of the first element through the transparent material layer of the first element, thereby creating a dispersion effect of different colors after light refraction. This allows the edge area of ​​the first element to exhibit a certain color effect, enhancing the display diversity of interface elements and providing users with a more vibrant visual experience.

[0253] In some embodiments of this application, the first display effect is also used to present light emitted by a simulated second virtual light source in the edge area within the first element. The light is reflected by the content in the content layer of the first element and then reflected through the edge area of ​​the transparent material layer to produce a color overlay effect. The color overlay effect is related to the color of the content in the content layer.

[0254] For example, continuing to refer to Figure 9, and taking the first element as a folder control, the second virtual light source can include a global line light source located outside the phone's display screen. The light emitted by the global line light source can reach the content layer of the folder control. This light can also be reflected by the application icon of the target application and reach the edge area of ​​the transparent material layer. This light can also produce a color overlay effect through reflection at the edge area of ​​the transparent material layer. In this way, the color of the color overlay effect is related to the color of the application icon.

[0255] Thus, this embodiment of the application simulates the reflection of light of the content color in the content layer of the first element through the transparent material layer of the first element to produce a color overlay effect. This allows the edge area of ​​the first element to overlay the content color in the content layer, making the first element more aesthetically pleasing. Furthermore, the edge area of ​​the first element can exhibit both color overlay and dispersion effects, resulting in a more vivid and vibrant display. This enhances the display diversity of interface elements and the user's visual experience.

[0256] In one possible implementation, the first element is a folder control. Referring to Figure 10(A), the folder control is displayed with a first display effect. The first display effect exhibits a dispersion effect related to the colors of the wallpaper image. The first display effect also exhibits a color overlay effect related to the colors of the application icon.

[0257] In another possible implementation, the first element is a voice assistant window. Referring to Figure 10(B), the voice assistant window is displayed with a first display effect. The folder control is also displayed with a first display effect. The first display effect exhibits a dispersion effect related to the colors of the wallpaper image. The first display effect also exhibits a color overlay effect related to the colors of the voice assistant control.

[0258] It should be noted that the aforementioned first display effect can exist independently in any scenario, for example, displaying a folder control with the first display effect on the main screen interface. Of course, the aforementioned first display effect can also be combined with other display effects in any scenario, and the embodiments of this application do not specifically limit the display form of the first display effect.

[0259] In some embodiments of this application, during the process of controlling the first element to be displayed with a first display effect, the mobile phone can respond to a first trigger operation and display the first element with a first display effect on the target interface.

[0260] The first triggering operation may include an operation to trigger the display of a target interface, such as an operation to unlock the screen if the target interface is the main screen. The first trigger may also include an operation to display a first element, such as an operation to trigger the display of a first element in a target interface that is already displayed but does not yet contain the first element. For example, if the first element is a magnifying glass control, the first operation is to trigger the display of the magnifying glass control.

[0261] Thus, in response to a first trigger operation, the embodiments of this application can trigger the display of a first element with a first display effect. This not only enhances the diversity of display effects but also improves the interactivity between the device and the user.

[0262] In some examples, the above scenario refers to a scenario where the first element is already displayed on the target interface. In scenarios where the first element is not displayed on the target interface, the phone can respond to the first trigger operation, display the first element, and control the first element to be displayed with the first display effect. That is, the first element can be displayed after the user interacts with the phone, and the display effect of the first element can directly be the first display effect.

[0263] In one possible implementation, a user can use the magnifying glass function on their mobile phone to zoom in on content displayed in the user interface. The first element includes a magnifying glass control, which is used to magnify the target content.

[0264] Specifically, the mobile phone can respond to an operation on the target content by displaying a magnifying glass control and controlling the display effect of the edge area inside the magnifying glass control as the primary display effect.

[0265] The target content can be the text content of the target area in the target file. In the first display effect, a dispersion effect related to the color of the content in the background layer corresponding to the magnifying glass control is presented. The first display effect also presents a color overlay effect related to the color of the content layer corresponding to the magnifying glass control.

[0266] For example, referring to Figure 11, a user can long-press on the target content, which is "Desktop". In response to this long-press, the phone displays a magnifying glass control with the text "Desktop". The magnifying glass control is used to enlarge the "Desktop" text. The edge area within the magnifying glass control can display the first effect.

[0267] In some embodiments, the display position of the magnifying glass control can change with the content of the target content, while the magnifying glass control maintains the first display effect.

[0268] In other words, users can change the target content. The display position of the magnifying glass control changes according to the content of the target content, and the edge area of ​​the magnifying glass control can still maintain the original display effect.

[0269] In another possible implementation, the target application typically supports a side-view function, which is used to rotate and display the application interface of the target application. When the user enables the side-view function of the target application, the mobile phone will display the corresponding side-view interface of the target application, which is the rotated application interface. It should be noted that the above-mentioned side-view function can also be named by other names, such as side-view mode, cosmic cube side-view function, cosmic cube side-view mode, etc., and this application embodiment does not specifically limit it in this way.

[0270] For example, when a user enables the side-view function of the target application, the first element includes the side-view interface corresponding to the target application. The side-view interface is the interface of the target application after rotating the application interface along the central axis by a preset angle, with the central axis parallel to the screen of the mobile phone. The application interface can rotate counterclockwise or clockwise along the central axis.

[0271] Referring to Figure 12, the mobile phone can respond to operations related to the side-view function (such as the operation to enable the side-view function), display the side-view interface, and control the display effect of the edge area inside the side-view interface to be the first display effect.

[0272] It should be noted that the above example illustrates the first display effect in the edge area of ​​the first element. Of course, other areas within the first element besides the edge area can also exhibit the first display effect. The area capable of exhibiting the first display effect can be a system-preset area or an area pre-defined by the user for element display before the element is displayed. This application does not specifically limit the area capable of exhibiting the first display effect.

[0273] Thus, the embodiments of this application can make interface elements exhibit dispersion and color overlay effects in magnifying glass scenes and side-view interface scenes, thereby giving the interface elements a certain color effect, improving the diversity of display scenes and the display diversity of interface elements. This, in turn, provides users with a unique and aesthetically pleasing visual effect, enhancing the user experience.

[0274] In some embodiments of this application, the mobile phone can obtain a black-and-white texture map and target rendering parameters corresponding to the first element. The target rendering parameters include dispersion parameters and reflection parameters corresponding to the first element. The dispersion parameters are determined based on the content color in the background layer, and the reflection parameters are determined based on the content color in the content layer. The mobile phone can also render the first element according to the black-and-white texture map and target rendering parameters to obtain a first effect image corresponding to the first element. In this way, while controlling the first element to be displayed with a first display effect, the mobile phone can display the first effect image corresponding to the first element.

[0275] In one possible implementation, the mobile phone can obtain a black-and-white texture map corresponding to the first element and the dispersion parameters corresponding to the first element. The dispersion parameters are determined based on the content color in the background layer. The black-and-white texture map is used to indicate the offset information caused by light illuminating the first element. It can be understood that the black-and-white texture map is used to represent the edge information of the first element. The mobile phone can also render the edge region of the first element based on the black-and-white texture map and the dispersion parameters corresponding to the first element to obtain the first image.

[0276] For example, continuing with the example of a folder control as the first element, the mobile phone can obtain the content color of the background layer corresponding to the folder control (e.g., extracting the first RGB value of the image in the background layer) and a black and white texture. The mobile phone can input the first RGB value and the black and white texture into the caustic model to obtain initial dispersion parameters. Then, the initial dispersion parameters are input into the dispersion model to obtain the target dispersion parameters of the corresponding edge region inside the folder control. The mobile phone can use the target dispersion parameters to render the edge region of the first element to obtain the first image. It should be noted that the first RGB value can represent the content color of all content in the background layer, or it can be the content color of part of the content in the background layer. This application embodiment does not specifically limit this.

[0277] In this application, embodiments may employ Convolutional Neural Networks (CNN), Region Proposal Networks (RPN), Regions with CNN features (RCNN), Faster RCNN, MobileV2, and residual networks, or a combination of these networks, to determine the dispersion parameters. It should be noted that the caustic and dispersion models provided in this application may include one or more of the YOLO, SSD, and DenseBox algorithms. This application also trains the caustic and dispersion models. During training, a large number of RGB values ​​can be used as training samples to enable the model to learn the ability to determine dispersion parameters based on RGB values.

[0278] As another example, the mobile phone can input the first RGB value into the caustic model to obtain the initial dispersion parameters. Then, the initial dispersion parameters are input into the dispersion model to obtain the target dispersion parameters for the corresponding edge region inside the folder control. It should be noted that the caustic model and dispersion model themselves need to have the ability to correspond to black and white textures. This application embodiment does not limit the specific form of the caustic model and dispersion model.

[0279] The phone can also obtain the black-and-white texture map and reflection parameters corresponding to the first element. Based on these parameters, the phone can then render the edge region of the first element to obtain the second image.

[0280] For example, continuing with the example of a folder control as the first element, the mobile phone can obtain the content color of the content layer corresponding to the folder control (such as extracting the second RGB value of the icon in the content layer) and a black and white texture. The mobile phone can input the second RGB value and the black and white texture into the reflection model to determine the target reflection parameters of the corresponding edge area inside the folder control. The mobile phone can use the target reflection parameters to render the edge area of ​​the first element to obtain the second image. It should be noted that the second RGB value can represent the content color of all content in the content layer, or it can be the content color of some content in the content layer. This application embodiment does not specifically limit this.

[0281] As another example, the mobile phone can also input the second RGB value into the reflection model to determine the target reflection parameters of the corresponding edge area inside the folder control. It should be noted that the reflection model itself needs to have the capability to correspond to black and white textures. This application does not limit the specific form of the reflection model.

[0282] In one possible implementation, the mobile phone superimposes the first image and the second image to obtain the first effect image.

[0283] In another possible implementation, the mobile phone can superimpose the obtained target dispersion parameters and target reflection parameters, and use the superimposed parameters to render the edge region of the first element to obtain the first effect image.

[0284] In another possible implementation, the mobile phone can display the first image and the second image independently. When displaying the first image, the edge areas of the first element may only exhibit a dispersion effect. When displaying the second image, the edge areas of the first element may only exhibit a color overlay effect. It should be noted that this application does not limit the specific implementation of the first display effect.

[0285] In some embodiments of this application, the mobile phone needs to render not only the first region but also the second region. The first region is the edge region within the first element. The second region is the region within the first element excluding the edge region. The target rendering parameters may also include rendering parameters corresponding to the content in the second region. The mobile phone can render the content in the second region using the rendering parameters corresponding to the content in the second region to obtain the first effect image. It should be noted that the embodiments of this application do not specifically limit the rendering process of the first element.

[0286] Thus, this embodiment of the application can generate and display a first effect image by obtaining the black and white texture map corresponding to the first element and the target rendering parameters, so that the first element presents a first display effect. This improves the display diversity of interface elements and provides users with a unique and beautiful visual effect.

[0287] In some embodiments of this application, the first display effect can be superimposed on the aforementioned target lighting effect.

[0288] In one possible implementation, while the mobile phone controls the edge area within the first element to display with a first display effect, it can respond to input operations and control the target area within the first element to display a target lighting and shadow effect. The target area can be a portion of the edge area, and the target area can overlap with the edge area.

[0289] For example, referring to Figure 13(A), continuing with the example of a browser application icon, the edge area of ​​the folder control displays a first-order effect before the user drags the application icon to the folder control. Referring to Figures 13(B)-13(C), as the user drags the application icon to the folder control, the phone controls the target area of ​​the folder control to display the target lighting effect, while maintaining the edge area of ​​the folder control displaying the first-order effect.

[0290] As another example, referring to Figures 14(A)-14(B), continuing with the voice assistant window as an example, before the user drags the file control to the voice assistant window, the edge area of ​​the voice assistant window displays the first display effect. Referring to Figures 14(C)-14(D), during the process of the user dragging the file control to the voice assistant window, the phone controls the first and second sub-areas of the voice assistant window to display the target lighting and shadow effects, while maintaining the edge area of ​​the voice assistant window displaying the first display effect.

[0291] In another possible implementation, the mobile phone, in response to an input operation, controls the target area within the first element to display a target lighting effect and the edge area within the first element to display a first display effect.

[0292] In other words, the edge area within the first element is the first display effect that appears after the input operation.

[0293] It should be noted that the embodiments of this application do not specifically limit the display timing or display position of the target lighting effect and the first display effect.

[0294] In some embodiments of this application, the mobile phone can overlay the light and shadow animation and the first effect image corresponding to the first element obtained above to achieve simultaneous presentation of the first display effect and the target light and shadow effect.

[0295] Thus, the embodiments of this application can overlay the first display effect while displaying the target lighting and shadow effect, thereby making the interface elements present more vivid and beautiful special effects and improving the display diversity of interface elements. Furthermore, it provides users with a unique and aesthetically pleasing visual experience, enhancing the user's overall experience.

[0296] In some embodiments of this application, the mobile phone may also display the first element with an initial display effect, wherein the initial display effect is used to present a caustic effect in the edge area within the first element, and to present a glass blur effect in the area within the first element other than the edge area.

[0297] Caustics refers to the phenomenon where, when light passes through a transparent object, the unevenness of the object's surface causes the light to refract in a non-parallel manner, resulting in diffuse refraction and the dispersion of photons on the projected surface. Caustics at the edges can give these areas a sense of thickness, making them appear three-dimensional rather than flat. Furthermore, the presence of caustics helps to enhance the realism of the first element.

[0298] For example, continuing with the target interface as the phone's home screen, the first element is a folder control on the home screen. The folder control displays the application icon of at least one application within the folder. The folder control can be displayed with its initial effect. The edge area inside the folder control has a caustic effect, while the area outside the edge area has a glass blur effect.

[0299] For example, see Figure 15(A), where the edge area inside the folder control has a caustic effect, and the area inside the folder control other than the edge area can have a glass blur effect.

[0300] In some other embodiments of this application, the initial display effect is used to present a caustic effect across the entire area within the first element.

[0301] For example, referring to Figure 15(B), continuing with the target interface as the phone's home screen, the first element is a folder control in the home screen as an example. The folder control can be displayed in its initial state. The entire area within the folder control exhibits a caustic effect.

[0302] It should be noted that the embodiments of this application do not limit the area corresponding to the initial display effect inside the first element.

[0303] In some embodiments of this application, during the process of controlling the first element to be displayed with a first display effect, the mobile phone can respond to the effect switching operation and control the display effect of the first element in the target interface to change from the initial display effect to the first display effect.

[0304] For example, continuing to refer to Figure 16(A), the folder control can be displayed in its initial state. Continuing to refer to Figure 16(B), the mobile phone can respond to a click on the corresponding application icon of the browser, controlling the folder control to change from its initial state to its first state.

[0305] It should be noted that the embodiments of this application do not specifically limit the implementation form of the effect switching operation.

[0306] Thus, the first element in this embodiment can also be displayed in its initial state, and the first element can also change from its initial state to its current state. This enhances the diversity of interface element displays and improves the interactivity between the device and the user.

[0307] In some embodiments of this application, the mobile phone can obtain preset rendering parameters, including caustic effect parameters for a first region and glass blur effect parameters for a second region within the first element. The first region is the edge region within the first element, and the second region is the region within the first element excluding the first region. The caustic effect parameters and glass blur effect parameters are determined based on the content color in the background layer of the first element. The mobile phone can render the first element according to the preset rendering parameters to obtain an initial effect image corresponding to the first element. Thus, while displaying the first element with its initial display effect, the mobile phone can display the initial effect image corresponding to the first element.

[0308] For example, continuing with the case where the first element includes a folder control, the mobile phone can obtain the content color of the background layer corresponding to the folder control (e.g., extracting the third RGB value of the image in the background layer) and input the third RGB value into the caustic model to obtain caustic effect parameters. The mobile phone can also obtain the content color of the background layer corresponding to the folder control (e.g., extracting the fourth RGB value of the image in the background layer) and input the fourth RGB value into the blur model to obtain glass blur effect parameters. The mobile phone can also render the folder control based on the obtained caustic effect parameters and glass blur effect parameters to obtain the initial effect image corresponding to the first element.

[0309] For another example, the mobile phone can obtain the content color of the background layer corresponding to the folder control (e.g., extract the third RGB value of the image in the background layer), and input the third RGB value and a black and white texture into a caustic model to obtain caustic effect parameters. The black and white texture input into the caustic model is used to represent the first region information of the folder control. The mobile phone can also obtain the content color of the background layer corresponding to the folder control (e.g., extract the fourth RGB value of the image in the background layer), and input the fourth RGB value and a black and white texture into a blur model to obtain glass blur effect parameters. The black and white texture input into the blur model is used to represent the second region information of the folder control.

[0310] In some feasible methods, the caustic model can use preset parameters to obtain the caustic effect parameters. These preset parameters may include waveform height parameters, smoothing parameters, water depth parameters, surface opacity parameters, light intensity parameters, and refractive index parameters, etc. It should be noted that the embodiments in this application do not limit the specific settings of the caustic effect parameters, the glass blur effect parameters, or the corresponding preset parameters.

[0311] In some embodiments of this application, the preset rendering parameters may further include rendering parameters corresponding to the content in the second region (such as the application icon of at least one application), and the content in the second region is rendered to obtain an initial effect image. It should be noted that the embodiments of this application do not specifically limit the rendering process of the first element.

[0312] Thus, this embodiment of the application can generate and display an initial effect image by obtaining preset rendering parameters, so that the first element presents an initial display effect. This improves the display diversity of interface elements and provides users with a unique and beautiful visual effect.

[0313] In some embodiments of this application, the target interface may further include a third element. The mobile phone can control the third element to be displayed with a second display effect, which is related to the background area of ​​the third element. The background area of ​​the third element is the area corresponding to the position of the third element in the target interface, and the second display effect is used to present a dynamic blur effect based on the image within the background area of ​​the third element.

[0314] The third element can be the same as or different from the first and second elements mentioned above.

[0315] In one possible implementation, the third element may include a notification list, as shown in Figure 17(A), where the phone displays the home screen. The user can swipe down on the home screen to access the notification list. The phone responds to this swipe-down action by displaying the notification list.

[0316] Referring to Figure 17(B), the mobile phone can control the notification list to display with a second display effect. This second display effect is related to the background area of ​​the notification list, which is the area corresponding to the location of the notification list on the target interface. The second display effect is used to present a dynamic blur effect based on the image within the background area of ​​the notification list.

[0317] As can be seen, the notification list is displayed in full screen on the phone. Therefore, the image in the background area corresponding to the notification list can be the main screen image corresponding to the main screen interface. The second display effect is used to present a dynamic blur effect based on the main screen image.

[0318] In some embodiments of this application, during the process of controlling the third element to display with the second display effect, the mobile phone can acquire a background image corresponding to the background area and blur the background image to obtain a blurred image. The mobile phone can also acquire a texture object, which can be any vector graphic composed of paths, text, patterns, etc. Then, the mobile phone performs dynamic noise processing on the texture object to obtain the initial animation effect. It is understood that dynamic noise can be used to simulate various textures in nature, such as water, clouds, and mountains, all of which can be simulated through noise algorithms. Different noises can synthesize different special effects.

[0319] In this embodiment, the mobile phone can add noise texture perturbation to the texture object to obtain an initial animation effect with vivid water flow effects. The mobile phone can also sample colors from the background image and map those colors onto the initial animation effect to obtain a first target animation effect. The mobile phone can also blend and overlay the first target animation effect and a blurred image to obtain a blurred animation. After obtaining the blurred animation, the mobile phone displays it so that the third element is presented with a second display effect. The blurred animation can display effects used to simulate water flow. It is understood that because the first target animation effect can simulate water flow effects, the style corresponding to the image content of the background image in the second display effect will change, such as the image content position shifting.

[0320] It should be noted that the first target animation effect may include vivid special effects such as flames, lightning, and water flow. This application embodiment does not specifically limit the effects presented in the target animation. Simultaneously, dynamic noise processing can utilize noise algorithms, which may include at least one of the following: Perlin noise algorithm, Workey noise algorithm, and Fractal Brownian Motion (FBM) noise algorithm. This application embodiment does not specifically limit the noise algorithm used.

[0321] Thus, the embodiments of this application can combine the background image of the elements to create a dynamic blur effect, such as simulated water flow, thereby increasing the display diversity of interface elements. This provides users with a unique and aesthetically pleasing visual experience, enhancing the user experience.

[0322] In some embodiments of this application, the third element includes at least one sub-element. The mobile phone can, in response to a second triggering operation targeting a target sub-element among the at least one sub-element, control the display effect of the third element to change from an initial display effect to a second display effect.

[0323] For example, the third element may include a floating volume icon control, and the target child element may include a volume operation control. Users can change the display effect of the volume icon control by moving the volume operation control. The mobile phone can respond to operations on the volume operation control, controlling the display effect of the volume icon control to change from the initial display effect to a second display effect.

[0324] Referring to Figure 18(A), the volume icon control is displayed with an initial effect, where the edge area of ​​the volume icon control exhibits a caustic effect, and the area inside the volume icon control, excluding the edge area, exhibits a glass blur effect. Referring to Figure 18(B), the mobile phone can respond to the operation of the volume control, changing the display effect of the volume icon control from the initial effect to a second effect. The second effect is related to the background area of ​​the volume icon control, which is the area corresponding to the position of the volume icon control in the target interface. The second effect is used to present a dynamic blur effect based on the image within the background area of ​​the volume icon control.

[0325] As can be seen, the display effect of the volume icon control can change with the user's operation. That is, the volume icon control presents the initial display effect before the user operates the volume operation control, and presents the second display effect after the user operates the volume operation control.

[0326] In some other embodiments of this application, the third element includes at least one sub-element. During the process of controlling the third element to display with the second display effect, the mobile phone can respond to a second trigger operation targeting a target sub-element among the at least one sub-element to control the display effect of the third element to display with the second display effect.

[0327] In the second display effect, the style of the image content in the background area changes as the position of the target sub-element changes or the target sub-element disappears. The style includes at least one of the image content's position, color, shape, brightness, and size.

[0328] For example, the third element may include a floating volume icon control, and the target child element may include a volume operation control. Users can change the display effect of the volume icon control by moving the volume operation control. The mobile phone can respond to operations on the volume operation control, changing the display effect of the volume icon control from the second display effect to the updated second display effect. Both the pre- and post-update second display effects are related to the background area of ​​the volume icon control; the style of the image content within the background area in the updated second display effect changes compared to the style of the image content within the background area in the pre-update second display effect.

[0329] Specifically, the position of the image content within the background area in the updated second display effect changes compared to the position of the image content within the background area in the unupdated second display effect.

[0330] Referring to Figure 19(A), the volume icon control is displayed with a second display effect, which features a motion blur effect. In this motion blur effect, the image content within the background area is positioned at a first position.

[0331] Referring to Figure 19(B), the mobile phone can respond to the operation of the volume control and control the display effect of the volume icon control to change from the second display effect to the updated second display effect. The updated second display effect continues to present a dynamic blur effect. In this dynamic blur effect, the position of the image content in the background area is in a second position, which is different from the first position.

[0332] As another example, the color of the image content in the background area in the updated second display effect may also change compared to the color of the image content in the background area in the unupdated second display effect.

[0333] As another example, the size of the image content in the background area in the updated second display effect may also change compared to the size of the image content in the background area in the unupdated second display effect.

[0334] As can be seen, the volume icon control exhibits a motion blur effect before the user interacts with the volume control, and continues to exhibit the motion blur effect after the user interacts with the volume control. However, the style of the image content in the two motion blur effects will change.

[0335] In another possible implementation, continuing with the example of a third element including a notification list, the child elements include notification display controls, which are used to display notifications in the notification list, with each notification display control corresponding to one notification.

[0336] Referring to Figure 20(A), the phone displays the home screen. The user can pull down the notification list. In response to the swipe down gesture on the home screen, the phone displays the notification list, which includes the notification control corresponding to notification 1. Referring to Figure 20(B), the phone can control the notification list to display with an initial effect: the edges of the notification list have a caustic effect, while the area inside the notification list, excluding the edges, has a glass blur effect. The user can then manipulate the notification controls in the notification list, such as deleting or moving them.

[0337] Referring to (C) in Figure 20, the mobile phone can respond to the operation of the notification display control (such as the deletion operation of notification 1) and control the display effect of the notification list to change from the initial display effect to the second display effect. The second display effect is related to the background area of ​​the notification list. The background area of ​​the notification list can also be the main screen image corresponding to the main screen interface. The second display effect is used to present a dynamic blur effect based on the main screen image.

[0338] In another possible implementation, continuing with the example of a third element comprising a notification list and child elements comprising a notification display control, the phone can respond to operations on the notification display control (such as deleting notification 1), changing the display effect of the notification list from the second display effect to the updated second display effect. In the updated second display effect, the style of the image content within the background area changes compared to the style of the image content within the background area in the previous second display effect. Specifically, the position of the image content within the background area changes compared to the position of the image content within the background area in the previous second display effect.

[0339] Referring to Figure 21(A), the notification list is displayed with a second display effect, which features a motion blur effect. In this motion blur effect, the image content within the background area is positioned in a third location.

[0340] Referring to (B) in Figure 21, the mobile phone can respond to the operation of the notification display control to change the display effect of the notification list from the second display effect to the updated second display effect. The updated second display effect continues to present a dynamic blur effect, in which the position of the image content in the background area is in the fourth position, which is different from the third position.

[0341] Thus, in this embodiment of the application, the user can manipulate the sub-elements within the third element to change the style of the image content in the second display effect. In this way, while the phone displays the third element in the second display effect, the style of the image content in the second display effect can change according to the user's actions. This further improves the display diversity and flexibility of interface elements, thereby enhancing the user experience.

[0342] In some embodiments of this application, the speed at which the style of the image content in the background area changes in the second display effect is positively correlated with the speed of the second triggering operation.

[0343] In other words, as users speed up their interactions with the target child element, the style of the image content within the background area changes faster. Conversely, as users slow down their interactions with the target child element, the style of the image content within the background area changes slower.

[0344] Thus, in the process of controlling the elements to present a dynamic blur effect, the special effects such as simulated water flow in the dynamic blur effect can change according to the user's operation speed, improving the display diversity of interface elements and the user's operational flexibility. This provides users with a unique and aesthetically pleasing visual experience and enhanced playability.

[0345] In some embodiments of this application, when the target sub-element is associated with a specified business, the style change rate of the displayed elements in the background area in the second display effect is positively correlated with the business priority of the specified business.

[0346] In other words, for example, the target child element includes a first child element and a second child element. The first child element is associated with a call service, and the second child element is associated with a message display service. The call service has higher priority than the message display service. Thus, when the target child element is associated with a call service, the style of the elements displayed in the background area of ​​the second display effect changes more quickly when the phone controls the third element to present the second display effect. When the target child element is associated with a message display service, the style of the elements displayed in the background area of ​​the second display effect changes more slowly when the phone controls the third element to present the second display effect.

[0347] Thus, in the process of controlling the dynamic blur effect of elements in this embodiment, the special effects such as simulated water flow in the dynamic blur effect can change according to the priority of the associated business of the element, improving the display diversity of interface elements and scene diversity. This provides users with a unique and aesthetically pleasing visual experience and enhanced playability.

[0348] In some embodiments of this application, the mobile phone can also control the target sub-element to display a lighting effect, which is used to illuminate other interface elements when there are other interface elements around the third element.

[0349] For example, continuing with the case where the third element includes a floating volume icon control, and the child element includes a volume operation control, the phone can also control the volume operation control to display an illumination effect while changing the display effect of the volume icon control from the initial display effect to the second display effect. Referring to Figure 22(A), the phone can display a lock screen interface, which includes a time control, but the volume icon control is not displayed on the lock screen interface. The brightness of the time control is the first brightness. Referring to Figure 22(B), while the phone controls the volume operation control to display an illumination effect, it will illuminate the time control on the lock screen interface. The brightness of the time control is the second brightness, which is greater than the first brightness of the time control.

[0350] In some embodiments of this application, the target interface includes a fourth element, which is adjacent to the third element. While controlling the third element to display with a second display effect, the mobile phone can respond to operations on the third element by controlling the third element to display with the second display effect, and by controlling the fourth element to display with the third display effect.

[0351] The third display effect is related to the background area of ​​the fourth element. The background area of ​​the fourth element is the area where the fourth element is located in the target interface. The third display effect is used to present a dynamic blur effect based on the image in the background area of ​​the fourth element.

[0352] In some feasible ways, the third element can be displayed with the initial display effect. The mobile phone can respond to an operation on the third element, controlling the display effect of the third element to change from the initial display effect to the second display effect, and controlling the fourth element to be displayed with the third display effect.

[0353] For example, taking a virtual keyboard interface as the target interface, the third element may include a first control in the virtual keyboard interface, and the fourth element may include a second control in the virtual keyboard interface that is closer to the first control.

[0354] Referring to Figure 23(A), the first control can be a number 5 control, and the second control can be a number 6 control. Both the first and second controls are displayed with the initial effect, that is, the inner edge area of ​​the control shows a caustic effect, and the area outside the edge area shows a glass blur effect.

[0355] Referring to Figure 23(B), the mobile phone can respond to operations on the first control, controlling its display effect to change from the initial display effect to the second display effect, and controlling the second control to display with the third display effect. In other words, the mobile phone can not only control an element to exhibit a motion blur effect, but also control other elements surrounding that element to exhibit the same motion blur effect. It should be noted that the different motion blur effects exhibited by different elements are all related to the background area corresponding to each element.

[0356] Thus, this embodiment of the application can display not only the third element with the second display effect, but also the fourth element with the third display effect. It can combine the background image of an element to create a dynamic blur effect around other elements, improving the display diversity of interface elements. Furthermore, it provides users with a unique and aesthetically pleasing visual experience.

[0357] In some embodiments of this application, the image content of the first and last frames of the second display effect is consistent with the image content corresponding to the background area of ​​the third element, and the image content of the first and last frames of the third display effect is consistent with the image content corresponding to the background area of ​​the fourth element.

[0358] In other words, the second and third display effects do not always present a dynamic background blur effect; they will revert to the initial display effect at the beginning and end of the display.

[0359] Thus, the display elements in this embodiment can exhibit a dynamic blur effect for a certain period of time after user interaction. This improves the display flexibility of interface elements, thereby enhancing the user experience.

[0360] In some embodiments of this application, the mobile phone can also control the third element to display a lighting effect. The lighting effect is used to illuminate other interface elements when there are other interface elements around the third element.

[0361] Thus, embodiments of this application can also control the illumination effect of the third element to illuminate other interface elements. This makes the display effect of the third element more obvious and improves the display diversity of interface elements.

[0362] In some embodiments of this application, the mobile phone can also magnify the third element while displaying it with the second display effect.

[0363] For example, continuing to refer to Figure 23(B), the mobile phone can respond to an operation on the first control and can also magnify the display of the first control. Of course, the mobile phone can also control the first control to display a lighting effect.

[0364] Thus, the embodiments of this application can also control the third element to be enlarged, making the display effect of the third element more obvious and improving the display diversity of interface elements.

[0365] In some embodiments of this application, the mobile phone can also respond to an operation on the target sub-element by controlling the display effect of the third element to change from the second display effect to the fifth display effect. The fifth display effect is used to present a dynamic blur effect based on the content color of the image in the background area of ​​the third element and the content of the corresponding element of the target sub-element.

[0366] In the fifth display effect, the content color of the target child element's corresponding element content is presented around the target child element.

[0367] For example, the third element may include a call notification window, and the target child element may include an answer control.

[0368] Referring to Figure 24(A), the mobile phone can display a call notification window, which is the second display effect. Referring to Figure 24(B), the mobile phone can respond to an operation on the answer control, changing the display effect of the call notification window from the second display effect to the fifth display effect. The fifth display effect is used to present a dynamic blur effect based on the image in the background area of ​​the call notification window and the control color of the answer control. In the fifth display effect, the answer control is surrounded by a corresponding red color.

[0369] Thus, by making the content color of the element corresponding to the target sub-element surround the target sub-element, the aesthetics of the fifth display effect and the diversity of interface element display are further improved in this embodiment.

[0370] In some embodiments of this application, during the process of controlling the third element to display with the fifth display effect, the mobile phone can acquire the background image of the third element and blur the background image to obtain a blurred image. The mobile phone can also acquire a texture object and perform dynamic noise processing on the texture object to obtain an initial animation effect.

[0371] Similarly, the initial animation features vivid water flow effects. The phone can also sample the colors of the background image and the target sub-element, mix the colors, and map them onto the initial animation to obtain the target animation. The phone can also blend and overlay the target animation with a blurred image to create a blurred animation. After obtaining the blurred animation, the phone displays it, causing the third element to appear as the fifth element.

[0372] Thus, in the process of controlling the dynamic blur effect of elements in this embodiment, the dynamic blur effect is not only related to the background area of ​​the element, but also to the element content of the target sub-element, resulting in richer color variations in the dynamic blur effect. This improves the display diversity of interface elements, thereby providing users with a unique and aesthetically pleasing visual experience.

[0373] In some embodiments of this application, the first element may be the same as or different from the third element. When the first element and the third element are the same, the first element can overlay the target lighting effect, the first display effect, and the second display effect. For example, the target area of ​​the first element displays the target lighting effect, the edge area displays the first display effect, and the area other than the target area and the edge area displays a dynamic blur effect.

[0374] It should be noted that the display effects proposed in the embodiments of this application can be presented independently or superimposed on each other, and there is no specific limitation on this.

[0375] In some solutions, multiple embodiments of this application can be combined, and the combined solution can be implemented. Optionally, some operations in the process 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.

[0376] Those skilled in the art will conceive of various ways to reorder the operations described in the embodiments of this application. Furthermore, it should be noted that process details involved in one embodiment of this application are similarly applicable to other embodiments, or different embodiments can be combined.

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

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

[0379] This application also provides an electronic device, such as the mobile phone described above, as shown in FIG25. The mobile phone may include one or more processors 2110, memory 2120 and communication interface 2130.

[0380] The memory 2120, communication interface 2130, and processor 2110 are coupled together. For example, the memory 2120, communication interface 2130, and processor 2110 can be coupled together via bus 2140.

[0381] The communication interface 2130 is used for data transmission with other devices. The memory 2120 stores computer program code. The computer program code includes computer instructions, which, when executed by the processor 2110, cause the electronic device to perform the relevant method steps in the embodiments of this application.

[0382] Processor 2110 may be a processor or controller, such as a central processing unit (CPU), a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. It may implement or execute the various exemplary logic blocks, modules, and circuits described in connection with this disclosure. A processor may also be a combination that implements computational functions, such as a combination of one or more microprocessors, a combination of a DSP and a microprocessor, etc.

[0383] Bus 2140 can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The aforementioned bus 2140 can be divided into address bus, data bus, control bus, etc. For ease of illustration, only one thick line is used in Figure 25, but this does not indicate that there is only one bus or one type of bus.

[0384] This application also provides an electronic device, which includes a memory and one or more processors; the memory is coupled to the processors; wherein the memory stores computer program code, which includes computer instructions, and when the computer instructions are executed by the processor, the electronic device performs the relevant method steps in the above method embodiments.

[0385] This application also provides a computer-readable storage medium storing computer program code. When the processor executes the computer program code, the electronic device executes the relevant method steps in the above method embodiments.

[0386] This application also provides a computer program product containing instructions that, when executed on a computer or processor, cause the computer or processor to perform the relevant method steps as described in the above method embodiments.

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

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

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

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

[0391] The electronic devices, computer storage media, or computer program products provided in 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 in the corresponding methods provided above, and will not be repeated here.

[0392] Through the above description of the embodiments, those skilled in the art can clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual 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.

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

[0394] The units described as separate components may or may not be physically separate. A component shown as a unit can be one or more physical units, located in one place or distributed in multiple different locations. Some or all of the units can be selected to achieve the purpose of this embodiment, depending on actual needs.

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

[0396] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, or the contributing parts, or all or part of the technical solutions, can be embodied in the form of a software product. This software product is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0397] 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 display method, characterized in that, Applied to electronic devices, the method includes: Display a target interface, the target interface including a first element and a second element; Control the target area within the first element to display the target lighting and shadow effects; The target lighting effect is used to present a lighting effect that simulates the first virtual light source located at the location of the second element, which illuminates the first element. The target area is the area where the first virtual light source illuminates the first element.

2. The method according to claim 1, characterized in that, Before displaying the target interface, the method further includes: Receive the first operation; The target display interface includes: In response to the first operation, the target interface is displayed.

3. The method according to claim 1, characterized in that, After displaying the target interface, the method further includes: Receive the first operation; The control of the target area within the first element to display target lighting and shadow effects includes: In response to the first operation, the target area within the first element is controlled to display the target lighting and shadow effects.

4. The method according to any one of claims 1-3, characterized in that, The color of the target lighting effect is related to the color of the first virtual light source, and the color of the light source is determined based on the color of the second element.

5. The method according to claim 3, characterized in that, The first operation is to move the second element. The position of the first virtual light source changes as the position of the second element changes, and the target area changes as the position of the first virtual light source changes.

6. The method according to claim 5, characterized in that, The second element is located outside the first element, and the first operation is to move the second element into the first element.

7. The method according to claim 6, characterized in that, The first element includes a folder control, and the second element includes the application icon corresponding to the target application.

8. The method according to claim 2 or 3, characterized in that, The second element includes element regions of different colors, the positions of which change dynamically. When displaying the target lighting effect, the color of the first sub-region in the target region is determined based on the color of the element region closest to the second element.

9. The method according to claim 8, characterized in that, The second element is located inside the first element.

10. The method according to claim 9, characterized in that, The first element includes a voice assistant window, and the second element includes a voice assistant control in the voice assistant window, the voice assistant control being used to indicate that the voice assistant application is in a wake-up state.

11. The method according to any one of claims 8-10, characterized in that, The first operation is the input operation in the voice assistant window.

12. The method according to any one of claims 1-11, characterized in that, The method further includes: Obtain the normal map corresponding to the first element and / or the content color of the element content in the second element; Based on the content color and / or the normal map corresponding to the first element, the target area is rendered to obtain the lighting and shadow animation corresponding to the first element; The control of the target area within the first element to display target lighting and shadow effects includes: Display the lighting and shadow animation corresponding to the first element.

13. The method according to any one of claims 1-12, characterized in that, The method further includes: Control the first element to display with the first display effect; The first display effect is used to present light simulating the light emitted by a second virtual light source located outside the display screen of the electronic device in the edge area within the first element. After being reflected by the background layer of the first element, the light is refracted through the transparent material layer of the first element, resulting in a dispersion effect. The dispersion effect is related to the content color of the background layer.

14. The method according to claim 13, characterized in that, The first display effect is also used to present a color overlay effect in the edge area of ​​the first element, which simulates the light emitted by the second virtual light source. After being reflected by the content in the content layer of the first element, the light is reflected through the edge area of ​​the transparent material layer. The color overlay effect is related to the color of the content in the content layer.

15. The method according to claim 13 or 14, characterized in that, The control of displaying the first element with a first display effect includes: In response to the first triggering operation, the first element is displayed in the target interface with the first display effect.

16. The method according to claim 15, characterized in that, The first element includes a magnifying glass control, which is used to magnify and display the target content; Alternatively, the first element may include a side view interface corresponding to the target application, wherein the side view interface is the application interface of the target application rotated by a preset angle along the central axis, and the central axis is parallel to the screen of the electronic device.

17. The method according to any one of claims 14-16, characterized in that, The method further includes: Obtain the black and white texture and target rendering parameters corresponding to the first element. The target rendering parameters include the dispersion parameters and reflection parameters corresponding to the first element. The dispersion parameters are determined based on the content color in the background layer, and the reflection parameters are determined based on the content color in the content layer. Based on the black and white texture and the target rendering parameters, the first element is rendered to obtain the first effect image corresponding to the first element; The control of displaying the first element with a first display effect includes: Display the first effect image corresponding to the first element.

18. The method according to any one of claims 13-17, characterized in that, The method further includes: The first element is displayed with an initial display effect, which is used to present a caustic effect in the edge area within the first element and a glass blur effect in the area within the first element other than the edge area. The control of displaying the first element with a first display effect includes: In response to the effect switching operation, the display effect of the first element in the target interface is controlled to change from the initial display effect to the first display effect.

19. The method according to claim 18, characterized in that, The method further includes: Obtain preset rendering parameters, which include caustic effect parameters for the first region and glass blur effect parameters for the second region in the first element. The first region is the edge region within the first element, and the second region is the region within the first element other than the first region. The caustic effect parameters and the glass blur effect parameters are determined based on the content color in the background layer of the first element. According to the preset rendering parameters, the first element is rendered to obtain the initial effect image corresponding to the first element; Displaying the first element with the initial display effect includes: Display the initial effect image corresponding to the first element.

20. The method according to any one of claims 1-19, characterized in that, The target interface also includes a third element, and the method further includes: Control the third element to display in a second display effect; The second display effect is related to the background area of ​​the third element, which is the area corresponding to the position of the third element in the target interface. The second display effect is used to present a dynamic blur effect based on the image generated within the background area of ​​the third element.

21. The method according to claim 20, characterized in that, The third element includes at least one sub-element; controlling the third element to display with the second display effect includes: In response to a second trigger operation targeting a target sub-element among the at least one sub-elements, the display effect of the third element is controlled to be displayed in the second display effect, wherein the style of the image content in the background area of ​​the second display effect changes as the position of the target sub-element changes or the target sub-element disappears, and the style includes at least one of the position, color, shape, brightness and size of the image content.

22. The method according to claim 21, characterized in that, The speed at which the style of the image content within the background area changes in the second display effect is positively correlated with the speed of the second triggering operation.

23. The method according to claim 21 or 22, characterized in that, When the target sub-element is associated with a specific business, the style change rate of the displayed elements in the background area in the second display effect is positively correlated with the business priority of the specified business.

24. The method according to any one of claims 21-23, characterized in that, The third element includes a floating volume icon control, and the target sub-element includes a volume operation control; Alternatively, the third element may include a notification list, and the target sub-element may include a notification display control.

25. The method according to claim 20, characterized in that, The target interface includes a fourth element, which is adjacent to the third element. Controlling the third element to display with the second display effect includes: In response to an operation on the third element, the display effect of the third element is controlled to be displayed with the second display effect, and the fourth element is controlled to be displayed with the third display effect; the third display effect is related to the background area of ​​the fourth element, the background area of ​​the fourth element is the area where the fourth element is located in the target interface, and the third display effect is used to present a dynamic blur effect based on the image generated in the background area of ​​the fourth element.

26. The method according to claim 25, characterized in that, In the second display effect, the image content of the first and last frames during the display process is consistent with the image content corresponding to the background area of ​​the third element, and in the third display effect, the image content corresponding to the first and last frames during the display process is consistent with the image content corresponding to the background area of ​​the fourth element.

27. The method according to claim 25 or 26, characterized in that, The target interface is a virtual keyboard interface, the third element includes a first control in the virtual keyboard interface, and the fourth element includes a second control in the virtual keyboard interface that is close to the first control.

28. The method according to any one of claims 25-27, characterized in that, The method further includes: The third element is controlled to display a lighting effect, which is used to illuminate other interface elements when there are other interface elements around the third element.

29. The method according to any one of claims 20-28, characterized in that, The method further includes: During the process of displaying the third element with the second display effect, the third element is enlarged.

30. The method according to claim 20, characterized in that, The third element includes at least one sub-element, and the method further includes: In response to a second trigger operation targeting a target sub-element among the at least one sub-element, the display effect of the third element is controlled to change from the second display effect to a fifth display effect, the fifth display effect being used to present a dynamic blur effect based on the content color of the image within the background area of ​​the third element and the content of the corresponding element of the target sub-element.

31. The method according to claim 30, characterized in that, In the fifth display effect, the content color of the element corresponding to the target sub-element is presented around the target sub-element.

32. The method according to claim 30 or 31, characterized in that, The third element includes a call notification window, and the target sub-element includes an answer control.

33. An electronic device, characterized in that, The electronic device includes: a processor and a memory; The processor is connected to a memory for storing computer execution instructions, and the processor executes the computer execution instructions stored in the memory to cause the electronic device to perform the method as described in any one of claims 1-32.

34. A computer-readable storage medium storing instructions, characterized in that, When the instructions are executed on an electronic device, the electronic device causes the electronic device to perform the method as described in any one of claims 1-32.

35. A computer program product containing instructions, characterized in that, When the computer program product is run on an electronic device, it causes the electronic device to perform the method as described in any one of claims 1-32.

Images