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

Display method and device

[0001] The present application claims priority to Chinese Patent Application No. 202411276319.7, filed on September 11, 2024, entitled "A Display Method and Device", and Chinese Patent Application No. 202411364976.7, filed on September 27, 2024, entitled "A Display Method and Device", both of which are incorporated herein by reference in their entirety. TECHNICAL FIELD

[0002] The present application relates to the technical field of display, in particular to a display method and device. BACKGROUND

[0003] With the continuous development of technology, electronic devices and their display technology are also constantly improving. There are usually a large number of interface elements (such as icons, windows, controls, etc. on the interface) in electronic devices, and users can operate the interface elements to achieve corresponding functions. Generally, the display method of traditional interface elements is often fixed and single, especially when the user interacts with the electronic device, it cannot meet the growing demand of users for diversification and interactivity. This leads to poor user experience. SUMMARY

[0004] The present application provides a display method and device, which controls the target area within the interface element to display the target light and shadow effect, improves the display diversity of the interface element, and provides users with unique and beautiful visual effects.

[0005] To achieve the above purpose, the present application adopts the following technical solutions:

[0006] In a first aspect, the present application provides a display method applied to an electronic device, which includes: the electronic device can display a target interface and control a target area within a first element to display a target light and shadow effect. The target light and shadow effect is used to present a first virtual light source simulated to be located at a position of a second element, and the target area is a region of the first element irradiated by the first virtual light source.

[0007] In this way, the electronic device in the present application can control the target area within the first element to display the target light and shadow effect, and the target light and shadow effect can simulate a virtual light source located at the position of the second element, and the lighting effect produced by irradiating the first element. This improves the display diversity of the interface element and enhances the delicacy of the interface display, providing users with a more rich interactive experience.

[0008] In an implementation, the electronic device can receive the first operation before displaying the target interface. The electronic device can display the target interface in response to the first operation.

[0009] In this way, the mobile phone according to the embodiments of the present application can also display the target interface and the target light and shadow effect in the target region in the first element after receiving the operation of the user. The diversity of the implementation scene and the diversity of the display effect are improved.

[0010] In an implementation, the electronic device can receive the first operation after displaying the target interface. The electronic device can also control the target light and shadow effect to be displayed in the target region in the first element in response to the first operation.

[0011] In this way, the mobile phone according to the embodiments of the present application can also display the target light and shadow effect in the target region in the first element after receiving the operation of the user. Not only the diversity of the display effect is improved, but also the interactivity between the device and the user is improved.

[0012] In an implementation, the color of the target light and shadow effect is related to a light source color of the first virtual light source, and the light source color is determined based on the color of the second element.

[0013] In this way, the color of the target light and shadow effect according to the embodiments of the present application can be determined based on the color of the second element, so that the target light and shadow effect generated by the second element, i.e., the lighting effect generated by the second element irradiating the first element, can be simulated more realistically. Thus, the display effect of the element is more realistic and natural, and the diversity and aesthetics of the display effect are improved.

[0014] In an implementation, the first operation is an operation of moving the second element, the position of the first virtual light source changes with the position of the second element, and the target region changes with the position of the first virtual light source.

[0015] In this way, in the embodiments of the present application, the first operation can be an operation of moving the second element. The user can move the second element, and the mobile phone can generate a dynamic target light and shadow effect in the target region in the first element in response to the moving operation of the user. The position of the first virtual light source and the target region will change with the moving operation of the user. The diversity of the display effect is improved, and the playability of the user is increased. Thus, the user experience is improved.

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

[0017] Therefore, in the embodiment of the present application, the target area in the first element can generate a dynamic target light and shadow effect as the user moves. Specifically, in the scenario where the user moves the application icon into the folder control, the target area in the folder control can generate a dynamic target light and shadow effect. The display effect diversity is improved, and the user's playability is increased. Therefore, the user's use experience is improved.

[0018] In an implementation manner, the second element includes element areas of different colors, the positions of the element areas of different colors dynamically change, and the color of the first sub-area in the target area when the target light and shadow effect is displayed is determined based on the color of the element area close to the second element.

[0019] Therefore, the second element in the embodiment of the present application can include different color areas, and the positions of the different color areas can dynamically change. Meanwhile, the target area can also include different sub-areas, and the sub-areas can be determined based on the color of the element area close to the second element when the target light and shadow effect is displayed. In this way, in the process of displaying the target light and shadow effect, the color of the light and shadow can display multiple different colors, and the display position of the color can also dynamically change. The display effect diversity is further improved, and a more magnificent visual effect can be provided to the user. Therefore, the user's visual experience is improved.

[0020] In an implementation manner, 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 in the voice assistant window, the voice assistant control being used to present that the voice assistant application is in a wake-up state.

[0022] Therefore, in the scenario of the voice assistant, the embodiment of the present application can generate a dynamic target light and shadow effect in the target area in the voice assistant window, the color of the target light and shadow effect can display multiple different colors, and the display position of the color can also dynamically change. The implementation scenario diversity is improved, and the user's playability is increased.

[0023] In an implementation manner, the first operation is an input operation of the voice assistant window.

[0024] Therefore, the first operation in the embodiment of the present application can be an input operation of the voice assistant window, and the mobile phone can control the voice assistant window to present the target light and shadow effect in response to the input operation. The color of the subsequent target light and shadow effect can display multiple different colors, and the display position of the color can also dynamically change. Further, the implementation scenario diversity and the display effect diversity are provided.

[0025] In an implementation, the electronic device can further acquire a normal map corresponding to the first element and / or a content color of element content in the second element. The electronic device can further render the target region according to the content color and / or the normal map corresponding to the first element to obtain a light and shadow animation corresponding to the first element. In the process of controlling the target region in the first element to display the target light and shadow effect, the electronic device can display the light and shadow animation corresponding to the first element.

[0026] In this way, the embodiments of the present application can generate and display the light 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 light and shadow effect corresponding to the first element. The display effect diversity is improved, and more splendid visual effects can be provided for the user.

[0027] In an implementation, the electronic device can further control the first element to display in a first display effect.

[0028] The first display effect is used to present, in the edge region in the first element, a color dispersion effect caused by light emitted by a second virtual light source located outside the display screen of the electronic device, being reflected by a background layer of the first element and refracted by a transparent material layer of the first element. The color dispersion effect is related to a content color of the background layer.

[0029] In this way, the embodiments of the present application can present the color dispersion effect with different colors caused by light refraction by simulating the color dispersion process caused by the light in the background layer of the first element being refracted by the transparent material layer of the first element. Thus, the edge region of the first element can present a certain color effect. The display diversity of the interface element is improved, and more splendid visual effects can be provided for the user.

[0030] In an implementation, the electronic device can acquire a black-and-white map corresponding to the first element and a dispersion parameter corresponding to the first element. The dispersion parameter is determined based on a content color in the background layer. The electronic device can further render the first element according to the black-and-white map and the dispersion parameter to obtain a first image corresponding to the first element. In the process of controlling the first element to display in the first display effect, the electronic device displays the first image corresponding to the first element.

[0031] In this way, the embodiments of the present application can generate and display the first image by acquiring the black-and-white map corresponding to the first element and the dispersion parameter, so as to make the first element present the color dispersion effect. The display diversity of the interface element is improved, and unique and beautiful visual effects can be provided for the user.

[0032] In an implementation, the first display effect is further configured to present a color superposition effect in the edge region of the first element, the color superposition effect being caused by light emitted by the second virtual light source being reflected by the transparent material layer of the first element.

[0033] In this way, the color superposition effect is caused by simulating the light emitted by the content in the content layer of the first element being reflected by the transparent material layer of the first element. Thus, the edge region of the first element can superimpose the color of the content in the content layer, and the first element is more beautiful.

[0034] Further, the edge region of the first element can present the color superposition effect and the color dispersion effect, and the display effect is more vivid and gorgeous. The display diversity of the interface element and the visual experience of the user are improved.

[0035] In an implementation, the electronic device can display the first element in the target interface with the first display effect in response to a first trigger operation.

[0036] The first trigger operation can include an operation for triggering display of the target interface, such as the target interface being a home screen interface and the first operation being a screen unlocking operation. The first trigger operation can also include an operation for displaying the first element, such as an operation for triggering display of the first element in a target interface that has already been displayed and does not include the first element.

[0037] The first element includes a magnifying glass control configured to display target content in a magnified manner. Alternatively, the first element includes a side view interface of a target application, the side view interface being an interface obtained by rotating an application interface of the target application by a preset angle along a central axis that is parallel to a screen of the electronic device. In this way, the first operation can include an operation for triggering display of the magnifying glass control or an operation for triggering display of the side view interface.

[0038] In this way, the embodiments of the present application can display the first element with the first display effect in response to the first trigger operation. Not only can the display diversity be improved, but also the interactivity between the device and the user can be improved.

[0039] In an implementation, the electronic device can obtain a black-and-white map corresponding to the first element and target rendering parameters. The target rendering parameters include a color dispersion parameter corresponding to the first element and a reflection parameter, the color dispersion parameter being determined based on a color of content in a background layer, and the reflection parameter being determined based on a color of content in a content layer.

[0040] The electronic device can further render the first element according to the black-and-white map and the target rendering parameter to obtain a first effect image corresponding to the first element. In this way, the electronic device can display the first effect image corresponding to the first element in the process of controlling the first element to be displayed in the first display effect.

[0041] In this way, the embodiments of the present application can obtain the black-and-white map corresponding to the first element and the target rendering parameter, generate and display the first effect image, so that the first element presents the first display effect. The display diversity of the interface element is improved, and a unique and beautiful visual effect is provided for the user.

[0042] In an implementable manner, the electronic device can display the first element in an initial display effect, and the initial display effect is used to present a bokeh effect in an edge region within the first element and a glass blur effect in a region other than the edge region within the first element. The electronic device can further, in the process of controlling the first element to be displayed in the first display effect, in response to an effect switching operation, control the display effect of the first element in the target interface to change from the initial display effect to the first display effect.

[0043] In this way, the first element in the embodiments of the present application can also be displayed in the initial display effect, and the first element can also change from the initial display effect to the first display effect. The display diversity of the interface element is improved, and the interactivity between the device and the user can also be improved.

[0044] In an implementable manner, the electronic device can obtain a preset rendering parameter. The preset rendering parameter includes a bokeh effect parameter of a first region in the first element and a glass blur effect parameter of a second region in the first element, the first region is an edge region within the first element, the second region is a region other than the first region within the first element, and the bokeh effect parameter and the glass blur effect parameter are determined based on a content color in a background layer of the first element.

[0045] The electronic device can further render the first element according to the preset rendering parameter to obtain an initial effect image corresponding to the first element, and display the initial effect image corresponding to the first element in the process of displaying the first element in the initial display effect.

[0046] In this way, the embodiments of the present application can obtain the preset rendering parameter, generate and display the initial effect image, so that the first element presents the initial display effect. The display diversity of the interface element is improved, and a unique and beautiful visual effect is provided for the user.

[0047] In an implementable manner, the target interface further 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 a background area of the third element, the background area of the third element is a region corresponding to a position of the third element in the target interface, and the second display effect is used to present a dynamic blur effect generated based on an image in the background area of the third element.

[0049] In this way, the element can present a dynamic blur effect in combination with a background image of the element, for example, the dynamic blur effect can have special effects such as simulated water flow, and the display diversity of the interface element is improved. Further, a unique and beautiful visual effect is provided for the user, and the use experience of the user is improved.

[0050] In an implementation manner, the third element includes at least one sub-element. During the process of controlling the third element to display in the second display effect, the electronic device can control the display effect of the third element to display in the second display effect in response to a second trigger operation on a target sub-element in the at least one sub-element.

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

[0052] In this way, the user can operate the sub-element in the third element to change the style of the image content in the second display effect. In this way, the style of the image content in the second display effect can change with the user operation during the process of displaying the third element in the second display effect. The display diversity and flexibility of the interface element are further improved. Therefore, the use experience of the user is improved.

[0053] In an implementation manner, the change speed of the style of the image content in the background area in the second display effect is positively correlated with the operation speed of the second trigger operation.

[0054] In this way, the dynamic blur effect can change with the user operation speed during the process of controlling the element to present the dynamic blur effect, the display diversity of the interface element and the operation flexibility of the user are improved. Therefore, a unique and beautiful visual effect and playability are provided for the user.

[0055] In an implementation manner, in a case where the target sub-element is associated with a specified service, the change speed of the style of the display element in the background area in the second display effect is positively correlated with a service priority of the specified service.

[0056] Therefore, the display diversity and scene diversity of the interface element are improved, and a unique and beautiful visual effect and playability are provided for the user.

[0057] In an implementation, the third element includes a floating display volume icon control, and the target sub-element includes a volume operation control; or, the third element includes a notification list, and the target sub-element includes a notification display control.

[0058] In an implementation, the target interface includes a fourth element, and the fourth element is close to the third element. During the process of controlling the third element to be displayed in the second display effect, the electronic device can control the display effect of the third element to be displayed in the second display effect and control the fourth element to be displayed in a third display effect in response to an operation on the third element.

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

[0060] Therefore, the third element can be displayed in the second display effect, and the fourth element can be displayed in the third display effect. The dynamic blur effect of the surrounding other elements can be presented in combination with the background image of the element, and the display diversity of the interface element is improved. Further, a unique and beautiful visual effect is provided for the user.

[0061] In an implementation, the image content of the first frame image and the tail frame image in the display process of the second display effect is consistent with the image content corresponding to the background area of the third element, and the image content corresponding to the first frame image and the tail frame image in the display process of the third display effect is consistent with the image content corresponding to the background area of the fourth element.

[0062] Therefore, the display element of the embodiment of the present application can present the dynamic blur effect for a certain period of time after the user operation. The display flexibility of the interface element is improved. Therefore, the use experience of the user is improved.

[0063] In an 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 close to the first control in the virtual keyboard interface.

[0064] In an implementation, the electronic device can control the third element to display an illumination effect, and the illumination effect is used to present an effect of illuminating other interface elements in the case that there are other interface elements around the third element.

[0065] Thus, the embodiment of the present application can also control the third element to display a lighting effect to light other interface elements. This makes the display effect of the third element more obvious and improves the display diversity of interface elements.

[0066] In an implementable manner, the electronic device can display the third element in an enlarged manner during the display of the third element in the second display effect.

[0067] Thus, the embodiment of the present application can also control the third element to display a lighting effect to light other interface elements. This makes the display effect of the third element more obvious and improves the display diversity of interface elements.

[0068] In an implementable manner, the third element includes at least one sub-element. The electronic device can control the display effect of the third element to change from the second display effect to a fifth display effect in response to a second triggering operation on a target sub-element in the at least one sub-element.

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

[0070] Thus, in the process of controlling the element to present the dynamic blur effect, the dynamic blur effect of the embodiment of the present application is not only related to the background area of the element, but also related to the element content of the target sub-element. This makes the dynamic blur effect have richer color changes and improves the display diversity of interface elements. Thus, a unique and beautiful visual effect is provided for the user.

[0071] In an implementable manner, the content color of the element content corresponding to the target sub-element in the fifth display effect surrounds the target sub-element.

[0072] Thus, the embodiment of the present application further improves the beauty of the fifth display effect and the display diversity of interface elements by making the content color of the element content corresponding to the target sub-element surround the target sub-element.

[0073] In an implementable manner, the third element includes a call notification window, and the target sub-element includes an answer control.

[0074] In a second aspect, the embodiment of the present application provides a display method. The electronic device can control a first element to display in a first display effect.

[0075] The first display effect is used to present a dispersion effect in the edge area of the first element. The dispersion effect is generated by light emitted by a second virtual light source located outside the display screen of the electronic device, being reflected by a background layer of the first element, and being refracted by a transparent material layer of the first element. The dispersion effect is related to the content color of the background layer.

[0076] In an implementation, the electronic device can obtain a black-and-white map corresponding to the first element and a dispersion parameter corresponding to the first element. The dispersion parameter is determined based on a content color in the background layer. The electronic device can further render the first element according to the black-and-white map and the dispersion parameter to obtain a first image corresponding to the first element. The electronic device can display the first image corresponding to the first element in the process of controlling the first element to be displayed with the first display effect.

[0077] In an implementation, the first display effect is further configured to present a color superposition effect in the edge region of the first element, the color superposition effect being related to a content color in the content layer.

[0078] Further, the edge region of the first element can present the color superposition effect and the dispersion effect, which are more vivid and gorgeous in display effect. The display diversity of the interface element and the visual experience of the user are improved.

[0079] In an implementation, the electronic device can display the first element with the first display effect in the target interface in response to a first trigger operation.

[0080] In an implementation, the electronic device can obtain a black-and-white map corresponding to the first element and a target rendering parameter. The target rendering parameter includes a dispersion parameter corresponding to the first element and a reflection parameter, the dispersion parameter being determined based on a content color in the background layer, and the reflection parameter being determined based on a content color in the content layer.

[0081] The electronic device can further render the first element according to the black-and-white map and the target rendering parameter to obtain a first effect image corresponding to the first element. In this way, the electronic device can display the first effect image corresponding to the first element in the process of controlling the first element to be displayed with the first display effect.

[0082] In an implementation, the electronic device can display the first element with an initial display effect, the initial display effect being configured to present a caustic effect in the edge region of the first element and a glass blur effect in a region other than the edge region in the first element. The electronic device can further control the display effect of the first element in the target interface to change from the initial display effect to the first display effect in response to an effect switching operation in the process of controlling the first element to be displayed with the first display effect.

[0083] In an implementation, the electronic device can obtain preset rendering parameters. The preset rendering parameters include a caustic effect parameter of a first region in the first element and a glass blur effect parameter of a second region in the first element, the first region being an edge region in the first element, and the second region being a region in the first element other than the first region, the caustic effect parameter and the glass blur effect parameter being determined based on a content color in a background layer of the first element.

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

[0085] The technical effects of the second aspect and any implementation of the second aspect can refer to the technical effects of the first aspect and any implementation of the first aspect, which will not be repeated here.

[0086] In a third aspect, the embodiments of the present application provide a display method. An electronic device can display a target interface, and the target interface includes 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 a background region of the third element, the background region of the third element being a region corresponding to a position of the third element in the target interface, and the second display effect is used to present a dynamic blur effect generated based on an image in the background region of the third element.

[0088] In an implementation, the third element includes at least one sub-element. In the process of controlling the third element to be displayed with the second display effect, the electronic device can control the display effect of the third element to be displayed with the second display effect in response to a second trigger operation on a target sub-element in the at least one sub-element.

[0089] The style of the image content in the background region in the second display effect changes with a change in the position of the target sub-element or disappearance of the target sub-element, and the style includes at least one of a position, a color, a shape, a brightness, and a size of the image content.

[0090] In an implementation, the change speed of the style of the image content in the background region in the second display effect is positively correlated with an operation speed of the second trigger operation.

[0091] In an implementation, when the target sub-element is associated with a specified service, the change speed of the style of the display element in the background region in the second display effect is positively correlated with a service priority of the specified service.

[0092] In an implementation, the third element includes a floating display volume icon control, and the target sub-element includes a volume operation control; or, the third element includes a notification list, and the target sub-element includes a notification display control.

[0093] In an implementation, the target interface includes a fourth element, and the fourth element is adjacent to the third element. During the process of controlling the third element to be displayed in the second display effect, the electronic device can control the third element to be displayed in the second display effect and control the fourth element to be displayed in a third display effect in response to an operation on the third element.

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

[0095] In an implementation, the image content of the first frame image and the last frame image in the display process of the second display effect is consistent with the image content corresponding to the background area of the third element, and the image content corresponding to the first frame image and the last frame image in the display process of the third display effect is consistent with the image content corresponding to the background area of the fourth element.

[0096] In an 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 adjacent to the first control in the virtual keyboard interface.

[0097] In an implementation, the electronic device can control the third element to display an illumination effect, and the illumination effect is used to present an effect of illuminating other interface elements in a case where there are other interface elements around the third element.

[0098] In an implementation, the electronic device can display the third element in an enlarged manner during the process of displaying the third element in the second display effect.

[0099] In an implementation, the third element includes at least one sub-element. In response to a second trigger operation on a target sub-element in the at least one sub-element, the electronic device can control the display effect of the third element to change from the second display effect to a fifth display effect.

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

[0101] In an implementation, the content color of the corresponding element content of the target sub-element in the fifth display effect is presented around the target sub-element.

[0102] In an implementation, the third element includes a call notification window, and the target sub-element includes a receiving control.

[0103] The third aspect and the technical effects of any one of the implementation manners of the third aspect can refer to the technical effects of the first aspect and any one of the implementation manners of the first aspect, which will not be described herein.

[0104] In the fourth aspect, an electronic device is provided. The electronic device includes a processor and a memory.

[0105] The processor is connected with the memory. The memory is configured to store computer execution instructions. The processor executes the computer execution instructions stored in the memory, so that the electronic device executes the method of the first aspect, or executes the method of the second aspect, or executes the method of the third aspect.

[0106] In the fifth aspect, a computer readable storage medium is provided. The computer readable storage medium stores instructions. When the instructions are executed on the electronic device, the electronic device executes the method of the first aspect, or executes the method of the second aspect, or executes the method of the third aspect.

[0107] In the sixth aspect, a computer program product is provided. The computer program product includes instructions. When the computer program product is executed on the electronic device, the electronic device executes the method of the first aspect, or executes the method of the second aspect, or executes the method of the third aspect. BRIEF DESCRIPTION OF DRAWINGS

[0108] FIG. 1 is a scene schematic diagram of a related technology according to an embodiment of the present application;

[0109] FIG. 2 is a display effect schematic diagram of a related technology according to an embodiment of the present application;

[0110] FIG. 3 is a hardware structure schematic diagram of a mobile phone according to an embodiment of the present application;

[0111] FIG. 4 is a software structure schematic diagram of a mobile phone according to an embodiment of the present application;

[0112] FIG. 5 is a flow schematic diagram of a display method according to an embodiment of the present application;

[0113] FIG. 6 is an interface schematic diagram one of a target light and shadow effect according to an embodiment of the present application;

[0114] FIG. 7 is an interface schematic diagram two of a target light and shadow effect according to an embodiment of the present application;

[0115] FIG. 8 is an interface diagram of a first sub-region and a second sub-region according to an embodiment of the present application;

[0116] FIG. 9 is a flow diagram of a first display effect according to an embodiment of the present application;

[0117] FIG. 10 is an interface diagram of a first display effect according to an embodiment of the present application;

[0118] FIG. 11 is an interface diagram of a first display effect according to an embodiment of the present application;

[0119] FIG. 12 is an interface diagram of a first display effect according to an embodiment of the present application;

[0120] FIG. 13 is an interface diagram of a first display effect and a target light and shadow effect according to an embodiment of the present application;

[0121] FIG. 14 is an interface diagram of a first display effect and a target light and shadow effect according to an embodiment of the present application;

[0122] FIG. 15 is an interface diagram of an initial display effect according to an embodiment of the present application;

[0123] FIG. 16 is an interface diagram of a display effect switching according to an embodiment of the present application;

[0124] FIG. 17 is an interface diagram of a second display effect according to an embodiment of the present application;

[0125] FIG. 18 is an interface diagram of a second display effect according to an embodiment of the present application;

[0126] FIG. 19 is an interface diagram of a second display effect according to an embodiment of the present application;

[0127] FIG. 20 is an interface diagram of a second display effect according to an embodiment of the present application;

[0128] FIG. 21 is an interface diagram of a second display effect according to an embodiment of the present application;

[0129] FIG. 22 is an interface diagram of a second display effect according to an embodiment of the present application;

[0130] FIG. 23 is an interface diagram of a second display effect and a third display effect according to an embodiment of the present application;

[0131] FIG. 24 is an interface diagram of a fifth display effect according to an embodiment of the present application;

[0132] FIG. 25 is a structural diagram of a mobile phone according to an embodiment of the present application; DETAILED DESCRIPTION

[0133] The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application. In the description of the present application, unless otherwise specified, " / " represents an "or" relationship between the objects before and after the " / " symbol, for example, A / B can represent A or B; in the present application, "and / or" is only a description of the relationship between the associated objects, which means that there can be three relationships, for example, A and / or B can represent: A alone, A and B together, and B alone, where A and B can be singular or plural. In the description of the present application, unless otherwise specified, "multiple" means two or more than two. "At least one of the following" or similar expressions means any combination of the items, including any combination of single item or multiple items. For example, at least one of a, b, or c can represent: a, b, c, a-b, a-c, b-c, or a-b-c, where a, b, and c can be single or multiple. In addition, in order to clearly describe the technical solutions of the embodiments of the present application, in the embodiments of the present application, "first", "second", and the like are used to distinguish the same items or similar items with basically the same function and role.

[0134] Those skilled in the art can understand that the "first", "second", and the like do not limit the quantity and execution order, and the "first", "second", and the like do not necessarily mean different. At the same time, in some embodiments of the present application, the words "exemplary" or "for example" are used to represent an example, illustration or description. Any embodiment or design scheme described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as more preferred or more advantageous than other embodiments or design schemes. Rather, the use of "exemplary" or "for example" and the like is intended to present the relevant concept in a specific manner, for understanding.

[0135] In addition, the device architecture and business scenarios described in the embodiments of the present application are used to more clearly illustrate the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. Those skilled in the art can know that, as the device architecture evolves and new business scenarios appear, the technical solutions provided by the embodiments of the present application are also applicable to similar technical problems.

[0136] Interface element: The user interface is a medium interface for interaction and information exchange between an application program or an operating system and a user, which realizes the conversion between the internal form of information and the form that the user can accept. The common form of user interface is a graphic user interface (GUI), which refers to a user interface related to computer operation displayed in a graphical manner.

[0137] Interface element refers to each component of the user interface, which is used to display information on the display screen, such as icons, windows, controls, etc. Among them, the controls can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets, and other visible interface elements.

[0138] In some embodiments of the present application, at least one interface element can be displayed on the display screen. For example, in the case where there is one interface element on the display screen, the interface element can be a call prompt window of a call service. The interface element can also be a notification reminder window of a notification service, etc. For example, in the case where there are multiple interface elements on the display screen, the interface elements can be multiple controls, such as application controls corresponding to multiple application programs, etc.

[0139] In some embodiments of the present application, one interface element can also include at least one sub-element, and the sub-element can be a control. For example, when the interface element includes only one sub-element, the interface element can be a text box for displaying text, a list box for displaying a message list, a picture box for displaying a picture, etc. When the interface element includes multiple sub-elements, the interface element can be a combined interface element including multiple text boxes, picture boxes, list boxes, etc.

[0140] For example, when the interface on the display screen is used to present multiple application programs to the user, such as "short message" and "settings", as shown in (A) of FIG. 1, the interface element includes a text box of the application program name and a picture box of the application program icon. When the interface on the display screen is the interface after opening a certain application program, the interface element can be the content presented to the user by the application program. As shown in (B) of FIG. 1, after opening the "settings" application program, the interface element is a text box corresponding to a setting option (such as wireless local area network, Bluetooth, sound, brightness, etc.).

[0141] It should be noted that the present application does not specifically limit the implementation form and the implementation quantity of the interface element.

[0142] Display effect: refers to the visual features presented by each interface element in the user interface. These visual features include not only the static properties of the interface element, such as background shape, font type, font size, color, etc., but also dynamic effects, such as animation, gradient, shadow, etc.

[0143] Generally, referring to FIG. 2, the display mode of the interface element in the related art usually adopts a frosted glass display effect, the display effect of the interface element is transparent like glass, and the blurred form of the background under the interface element can be seen through the surface layer of the interface element. During the user's interaction with an interface element, the display effect of the interface element switches to a lighted display effect, which can be understood as the display brightness of the interface element is higher than that of other interface elements, thereby being able to present a lighted effect emitted by a light source similar to a simulated light effect.

[0144] However, the display mode of the interface element in the related art is often fixed and single, especially when the user interacts with the electronic device, it cannot meet the increasing demand of the user for diversification and interactivity. The user experience is poor.

[0145] To solve the above technical problems, the present application provides a display method applied to an electronic device, which 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 in the first element to display a target light and shadow effect. Wherein, the target light and shadow effect is used to present a first virtual light source simulated to be located at the position of the second element, and the lighting effect generated by the first virtual light source irradiating to the first element, and the target area is the area of the first virtual light source irradiating to the first element.

[0146] In this way, the electronic device in the embodiment of the present application can control the target area in the first element to display the target light and shadow effect, and the target light and shadow effect can simulate a virtual light source located at the position of the second element, and the lighting effect generated by the virtual light source irradiating to the first element. Thus, the display diversity of the interface element is improved, the delicacy of the interface display is enhanced, and a more rich interactive experience is provided for the user.

[0147] In some embodiments of the present application, the electronic device can be a smart wearable device (such as a smart watch, a smart bracelet), a small-screen electronic device with a display function (such as a doorbell), and can also be a mobile phone, a tablet computer, a desktop computer, a laptop computer, a notebook computer, an ultra-mobile personal computer (UMPC), a cellular phone, a personal digital assistant (PDA), an augmented reality (AR) \ virtual reality (VR) device, and other devices including a display screen. The specific form of the electronic device is not specially limited in the embodiments of the present application.

[0148] The operating system installed on the electronic device includes but is not limited to or other operating systems. Of course, an electronic device can also be implemented without an operating system. The specific type of electronic device, whether or not an operating system is installed, and the type of operating system, if installed, are not limited in the present application.

[0149] FIG. 3 shows a structural schematic diagram of the mobile phone 100.

[0150] The mobile phone 100 can include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charge management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a loudspeaker 170A, a receiver 170B, a microphone 170C, a headset interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 can include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0151] It can be understood that the structure shown in the embodiments of the present application does not constitute a specific limitation on the mobile phone 100. In other embodiments of the present application, the mobile phone 100 can include more or fewer components than shown, or combine certain components, or split certain components, or different component arrangements. The components shown can be implemented in hardware, software, or a combination of software and hardware.

[0152] The processor 110 can 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, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units can be independent devices or integrated in one or more processors. It should be noted that in the following embodiments, the execution subject of the display method is taken as the processor 110.

[0153] The controller can be the nerve center and command center of the mobile phone 100. The controller can generate operation control signals according to instruction operation codes and timing signals to complete the control of fetching and executing instructions.

[0154] The mobile phone 100 realizes the display function through the GPU, the display screen 194, and the application processor, etc. The GPU is a microprocessor for image processing, connected with the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 can include one or more GPUs that execute program instructions to generate or change 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 adopt 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, a MicroLed, a Micro-oLed, a quantum dot light emitting diode (QLED), etc. In some embodiments, the mobile phone 100 can include 1 or N display screens 194, and N is a positive integer greater than 1.

[0156] In some embodiments of the present application, the display screen 194 can display one or more interface elements, and the control interface element presents a specific display effect.

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

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

[0159] The antenna 1 and the antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in the mobile phone 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization rate of the antennas. For example, the antenna 1 can be multiplexed as a diversity antenna of a wireless local area network. In some other embodiments, the antennas can be used in combination with tuning switches.

[0160] The mobile communication module 150 can provide a solution for wireless communication including 2G / 3G / 4G / 5G / future communication technology, etc. applied to the mobile phone 100. The mobile communication module 150 can 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 including wireless local area networks (WLAN) (e.g., wireless fidelity (Wi-Fi) network), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, etc. applied to the handset 100. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency-modulates and filters the electromagnetic wave signals, and transmits the processed signals to the processor 110. The wireless communication module 160 can also receive signals to be transmitted from the processor 110, frequency-modulate them, amplify them, and radiate them as electromagnetic waves via the antenna 2.

[0162] In some embodiments, the antenna 1 and the mobile communication module 150 of the mobile phone 100 are coupled, and the antenna 2 and the wireless communication module 160 are coupled, so that the mobile phone 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technology can include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology, etc. The GNSS can include global positioning system (GPS), global navigation satellite system (GLONASS), beidou navigation satellite system (BDS), quasi-zenith satellite system (QZSS), and / or satellite based augmentation systems (SBAS).

[0163] The mobile phone 100 can realize the photographing function through the ISP, the camera 193, the video codec, the GPU, the display screen 194, and the application processor, etc.

[0164] The mobile phone 100 can realize the audio function through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, and the application processor, etc. For example, music playing, recording, etc.

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

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

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

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

[0169] As shown in FIG. 4, the application package can include camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc.

[0170] The application framework layer provides application programming interfaces (APIs) and programming frameworks for the applications of the application layer. The application framework layer includes some pre-defined functions. The electronic device can access different applications through the API interface.

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

[0172] The window manager is used to manage the window program. The window manager can obtain the size of the display screen, determine whether there is a status bar, lock the screen, and take a screenshot, etc.

[0173] The content provider is used to store and obtain data, and make the data accessible to the application. The data can include video, image, audio, dialed and received calls, browsing history and bookmarks, phonebook, etc.

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

[0175] The phone manager is used to provide the communication function of the mobile phone 100. For example, the management of the call state (including connection, hang up, etc.).

[0176] The resource manager provides various resources for the application, such as localized strings, icons, pictures, layout files, video files, etc.

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

[0178] The Android Runtime includes a core library and a virtual machine. The Android Runtime is responsible for scheduling and managing the Android system.

[0179] The core library contains two parts: one part is the function function that the java language needs to call, and the other part is the core library of Android.

[0180] The application layer and the application framework layer run in the virtual machine. The virtual machine executes the java file of the application layer and the application framework layer into a binary file. The virtual machine is used to manage the object lifecycle, stack management, thread management, security and exception management, and garbage collection functions.

[0181] The 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 the first display effect or the 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 2D and 3D layer fusion for multiple applications.

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

[0185] The three-dimensional graphics processing library is used to realize three-dimensional graphics drawing, image rendering, synthesis, and layer processing, etc.

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

[0187] The kernel layer is a layer between hardware and software. The kernel layer at least contains display drivers, camera drivers, audio drivers, sensor drivers.

[0188] The display method provided by the embodiments of the present application will be described in detail below with the electronic device being a mobile phone as an example.

[0189] FIG. 5 is a flowchart of a display method according to an embodiment of the present application. As shown in FIG. 5, the method can include the following S501-S502.

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

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

[0192] In the case where the target interface includes one interface element, the interface element can be understood as the target interface itself, that is, the interface element is the target interface.

[0193] In the case where 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 an application icon corresponding to a target application, that is, the application icon can be located inside the folder control or outside the folder control. For another example, the first element includes a voice assistant window, and the second element includes a voice assistant control in the voice assistant window, which is used to present that the voice assistant application is in an awakened state, that is, the voice assistant control can be located inside the voice assistant window.

[0195] It should be noted that the embodiments of the present application do not limit the implementation manner of the target interface and the implementation manner of the interface element.

[0196] S502, the mobile phone controls the target area in the first element to display a target light and shadow effect.

[0197] The target light and shadow effect is used to present a first virtual light source simulated to be located at the position of the second element, and the target area is the area of the first virtual light source irradiated to the first element. The target area is the area close to the second element.

[0198] In some embodiments of the present application, the color of the target light and shadow 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 implementation manner, the light source color can be the same as the color of the second element, and the light source color can also be a color similar to the color of the second element, such as a color in the same color system.

[0200] For example, the second element can be an application icon of the browser application, and the application icon of the browser application is green. In this way, the color of the light source can also be green. Thus, the color of the target light and shadow effect is also green.

[0201] In another implementation, the color of the target light and shadow effect can also be a preset color. It should be noted that the color of the target light and shadow effect is not limited in the embodiments of the present application.

[0202] In this way, the color of the target light and shadow effect can be determined based on the color of the second element, and the target light and shadow effect generated by the second element, i.e., the lighting effect generated by the second element irradiating the first element, can be more realistically simulated. Thus, the display effect of the element is more realistic and natural, and the diversity and aesthetics of the display effect are improved.

[0203] In some embodiments of the present application, the phone can receive a first operation after displaying the target interface. The phone can also display the target light and shadow effect in the target area in the first element in response to the first operation.

[0204] In this way, the phone of the present application can also display the target light and shadow effect in the target area in the first element after receiving the operation of the user. Not only can the diversity of the display effect be improved, but also the interactivity between the device and the user can be improved.

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

[0206] In one 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 an application icon corresponding to a target application. The user can move the application icon corresponding to the target application close to the top end surface of the folder control, and then move to the bottom end surface of the folder control. In this way, the position of the first virtual light source can change with the position of the application icon corresponding to the target application, and the position of the first virtual light source changes from the top end surface of the folder control to the bottom end surface of the folder control. The target area also changes from the top end surface of the folder control to the bottom end surface of the folder control.

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

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

[0210] In this way, the first operation in the embodiment of the present application can be an operation of moving the second element. The user can move the second element, and the mobile phone can generate a dynamic target light and shadow effect in the target area in the first element in response to the movement operation of the user. The position of the first virtual light source and the target area can change along with the movement operation of the user. The diversity of the display effect is improved, and the playability of the user is increased. Therefore, the use experience of the user is improved.

[0211] In some embodiments of the present 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 a target application. The first operation is an operation of moving the application icon corresponding to the target application into the folder control.

[0213] For example, referring to (A) in FIG. 6, the application icon of the browser application is green. During the process in which the user drags the application icon to the folder control, the target area of the folder control displays the target light and shadow effect.

[0214] Specifically, the first virtual light source is a virtual light source outside the first element, and the light source color of the first virtual light source can be the same as the color of the application icon, that is, green. In this way, the color of the target light and shadow effect is also green. Referring to (B) in FIG. 6, as the application icon approaches the folder control, the target light and shadow effect can be presented in the first target area. Referring to (C) in FIG. 6, as the position of the application icon changes, the target light and shadow effect can be presented in the second target area, that is, the area displaying the target light and shadow effect changes from the first target area to the second target area.

[0215] It should be noted that the target area can change adaptively according to the distance between the first element and the second element, and the target area can be associated with the illumination area of the first virtual light source. The present application does not specifically limit the setting position and setting range of the target area.

[0216] Thus, in the embodiments of the present application, the target area in the first element can generate a dynamic target light and shade effect as the user moves the second element into the first element. Specifically, in the scenario where the user moves the application icon into the folder control, the target area in the folder control can generate a dynamic target light and shade effect. This improves the diversity of display effects and increases the playability of the user. Thus, the user's experience is improved.

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

[0218] In an implementation manner, the second element can include element areas of different colors, and the second element can have multiple colors, and each element area can have a different color. The positions of the element areas of different colors are fixed. In this way, the color of the target area can be determined based on the color of the element area close to the second element.

[0219] For example, referring to (A) in FIG. 7, continue to take the application icon of the memo application as an example. For example, the application icon includes a first element area and a second element area, the color of the first element area is white, and the color of the second element area can be yellow. Referring to (B) in FIG. 7, as the application icon approaches the folder control, the target light and shade effect can be presented in the first target area, and the first target area is close to the first element area, so that the color of the first target area can be white. Referring to (C) in FIG. 7, as the moving position of the application icon changes, the target light and shade effect can be presented in the second target area, that is, the area displaying the target light and shade effect changes from the first target area to the second target area. The second target area is close to the second element area, so that the color of the second target area can be yellow.

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

[0221] In some embodiments of the present application, the second element includes element areas of different colors, and the color of the target area is determined based on the color of the element area close to the second element.

[0222] For example, referring to (A) in FIG. 7, continue to take the application icon of the memo application as an example. For example, the application icon includes a first element area and a second element area, the color of the first element area is white, and the color of the second element area can be yellow. Referring to (B) in FIG. 7, as the application icon approaches the folder control, the target light and shade effect can be presented in the first target area, and the first target area is close to the first element area, so that the color of the first target area can be white. Referring to (C) in FIG. 7, as the moving position of the application icon changes, the target light and shade effect can be presented in the second target area, that is, the area displaying the target light and shade effect changes from the first target area to the second target area. The second target area is close to the second element area, so that the color of the second target area can be yellow.

[0223] Thus, the color of the target region can be determined based on the color of the element region close to the second element. In the case that the target region comprises a plurality of sub-regions, the color of a first sub-region in the target region can also be determined based on the color of the element region close to the second element.

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

[0225] For example, referring to (A) in FIG. 8, the first element comprises a voice assistant window, and the second element comprises a voice assistant control in the voice assistant window, which is used to present that the voice assistant application is in an awakened state. Referring to (B) in FIG. 8, the user can perform a first operation on the voice assistant application, such as an operation of dragging a target file into the voice assistant window. The voice assistant control can comprise a first element region and a second element region, the first element region is blue, and the second element region can be yellow. The positions of the first element region and the second element region can dynamically change. That is, the mobile phone can control 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 response to the first operation. In this way, the positions of the first element region and the second element region of the voice assistant control can dynamically change. It should be noted that the present application does not limit the change time and specific implementation of the posture change of the voice assistant control.

[0226] Referring to (C) in FIG. 8, the first element region of the voice assistant control is close to the left end surface of the screen of the mobile phone, and the second element region of the voice assistant control is close to the right end surface of the screen of the mobile phone. Referring to (D) in FIG. 8, the second element region of the voice assistant control is close to the left end surface of the screen of the mobile phone, and the first element region of the voice assistant control is close to the right end surface of the screen of the mobile phone.

[0227] In this way, referring to (C) in FIG. 8, the color of the first element region in the voice assistant control is blue, and the first sub-region in the target region is close to the first element region of the voice assistant control, and the color of the first sub-region can also be blue. The color of the second element region of the voice assistant control is yellow, and the second sub-region in the target region is close to the second element region of the voice assistant control, and the color of the second sub-region can also be yellow. Referring to (D) in FIG. 8, the color of the first element region of the voice assistant control is blue, and the second sub-region in the target region is close to the first element region of the voice assistant control, and the color of the first sub-region can also be blue. The color of the second element region of the voice assistant control is yellow, and the first sub-region in the target region is close to the second element region of the voice assistant control, and the color of the second sub-region can also be yellow.

[0228] In another implementation, the second element is located outside the first element. For example, continuing to refer to (A) of FIG. 7 to (C) of FIG. 7, the application icon includes a first element region and a second element region, the color of the first element region can be dynamically changed from white to yellow, and the color of the second element region can also be dynamically changed from yellow to white. As the application icon approaches the folder control, a target light and shadow effect can be presented in a first target region, the first target region is close to the first element region, if the color of the first element region is changed to yellow, then the color of the first target region can be yellow. If the color of the first element region is changed to white, then the color of the first target region can be white.

[0229] It should be noted that the target region can include a plurality of sub-regions, and the color of each sub-region can be determined based on the color of the element region close to the second element. The embodiment of the present application does not specifically limit the dynamic change process of the element region in the element and the color determination process of the sub-region in the target region.

[0230] In this way, the second element of the embodiment of the present application can include different color regions, and the positions of the different color regions can be dynamically changed. Meanwhile, the target region can also include different sub-regions, and the sub-regions can be determined based on the color of the element region close to the second element when the target light and shadow effect is displayed. In this way, during the process of displaying the target light and shadow effect, the color of the light and shadow can display a plurality of different colors, and the display position of the color can also be dynamically changed. Further, the diversity of the display effect is improved, and a more magnificent visual effect can be provided to the user. Thus, the visual experience of the user is improved.

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

[0232] For example, the 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 receiving the first operation, the posture of the voice assistant control can include an initial posture, such as rotating at an initial rotation speed. After the mobile phone receives the first operation, that is, during the process of converting the target file into a voice broadcast, the posture of the voice assistant control can change, such as rotating at a target rotation speed, the target rotation speed being greater than the initial rotation speed. After the mobile phone completes the conversion of the target file into a voice broadcast, the posture of the voice assistant control can return to the initial posture.

[0233] For example, the phone can display the voice assistant window incompletely, such as displaying only a part of the voice assistant window, before receiving the first operation. Meanwhile, the voice assistant control keeps rotating at the initial rotation speed. After receiving the first operation, the phone displays the voice assistant window completely and the voice assistant control keeps rotating at the target rotation speed. Similarly, after completing the conversion of the target file into the voice broadcast, the voice assistant control resumes rotating at the initial rotation speed.

[0234] It should be noted that the embodiments of the present application do not limit the specific operation corresponding to the first operation. Meanwhile, in the voice assistant application scenario, the specific display effect of the voice assistant window and the voice assistant control is not limited.

[0235] In this way, the first operation in the embodiments of the present application can be an input operation of the voice assistant window, and the phone can control the voice assistant window to present the target light and shadow effect in response to the input operation. The color of the subsequent target light and shadow effect can display a plurality of different colors, and the display position of the color can also change dynamically. Further, the diversity of the implementation scenario and the display effect is provided.

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

[0237] For example, the first operation can include an operation for waking up the voice assistant application. For example, the first operation can include a voice start operation of the user for the voice assistant application. The phone can display the target interface corresponding to the voice assistant application in response to the voice start operation of the user. The target interface can include the voice assistant window and the voice assistant control. That is, after receiving the first operation, the voice assistant control can keep rotating at the initial rotation speed, and the target area in the voice assistant window can present the target light and shadow effect.

[0238] In this way, the embodiments of the present application can receive the first operation and display the target interface and present the target light and shadow effect in response to the first operation. The diversity of the implementation scenario and the display effect is improved.

[0239] In some embodiments of the present application, the 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 phone can also render the target area according to the content color and / or the normal map corresponding to the first element to obtain the light and shadow effect image corresponding to the first element, such as a light and shadow animation. In this way, the phone can display the light and shadow animation corresponding to the first element in the process of controlling the target area in the first element to display the target light and shadow effect.

[0240] In an implementable manner, the mobile phone can obtain the normal map corresponding to the first element and the content color of the element content in the second element. The mobile phone can further render the target region according to the content color and the normal map corresponding to the first element to obtain the light and shadow animation corresponding to the first element. In this way, the mobile phone can display the light and shadow animation corresponding to the first element.

[0241] The normal map is used to indicate the light and shade information generated when the light irradiates the first element. It can be understood that the normal map is used to simulate the concave-convex feeling of the surface of the first element.

[0242] For example, continuing to take the example that the first element includes a folder control and the second element includes an application icon control, the mobile phone can obtain the content color of the application icon control, and render the target region inside the folder control based on the content color of the application icon control and the normal map of the folder control to obtain the light and shadow animation of the folder control. For example, the application icon control is green, the mobile phone can extract the RGB value corresponding to the green color, and render the target region inside the folder control based on the RGB value corresponding to the green color and the normal map of the folder control to obtain the light and shadow animation of the folder control. The color of the light and shadow animation can be green.

[0243] In another implementable manner, the mobile phone can directly obtain the content color of the element content in the second element, and render the target region according to the content color to obtain the light and shadow animation corresponding to the first element. In this way, the mobile phone can display the light and shadow animation corresponding to the first element.

[0244] In another implementable manner, the color of the target light and shadow effect can also be a preset color. The mobile phone can obtain the normal map corresponding to the first element and the preset color. The mobile phone can further render the target region according to the preset color and the normal map corresponding to the first element to obtain the light and shadow animation corresponding to the first element. In this way, the mobile phone can display the light and shadow animation corresponding to the first element.

[0245] In this way, the embodiments of the present application can generate and display the light 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, to present the target light and shadow effect corresponding to the first element. The diversity of display effects is improved, and more beautiful visual effects can be provided for users.

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

[0247] The first display effect is used to present, in the edge region within the first element, light rays emitted by the second virtual light source located outside the display screen of the mobile phone, color dispersion effects generated by refraction of the light rays after reflection of the light rays by the background layer of the first element and refraction of the light rays by the transparent material layer of the first element, the color dispersion effects being related to the content color of the background layer.

[0248] In an implementable manner, the first element can include a transparent material layer and a content layer, the content layer being located on top of the transparent material layer. The content layer can 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 based on superposition of the two layers during display. The first element also corresponds to a background layer, the background layer being located on the bottom of the transparent material layer, and the content in the background layer being an image corresponding to a position of the first element in the target interface.

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

[0250] The mobile phone can simulate light rays emitted by a second virtual light source located outside the display screen of the mobile phone. For example, the second virtual light source can include a global line light source located outside the display screen of the mobile phone. The light rays emitted by the global line light source can reach the background layer of the folder control. The light rays can also be reflected by the background layer of the folder control to the edge region of the transparent material layer of the folder control. The light rays can also be refracted by the edge region of the transparent material layer of the folder control to generate color dispersion effects. In this way, the color dispersion effects are related to the color of the wallpaper image.

[0251] It can be understood that the refractive index of different color light rays in the same material is different, and a large amount of monochromatic light can be refracted by different color light rays, and each monochromatic light can also present the same or different colors.

[0252] In this way, the embodiment of the present application can present color dispersion effects of different colors generated by refraction of light rays by simulating the color dispersion process of light rays emitted by the second virtual light source located outside the display screen of the mobile phone and refracted by the transparent material layer of the first element. Thus, the edge region of the first element can present a certain color effect. The display diversity of the interface element is improved, and more beautiful visual effects can be provided for the user.

[0253] In some embodiments of the present application, the first display effect is also used to present, in the edge region within the first element, light rays emitted by the second virtual light source, color superposition effects generated by reflection of the light rays by the content in the content layer of the first element and reflection of the light rays by the edge region of the transparent material layer, the color superposition effects being related to the content color in the content layer.

[0254] For example, continuing to refer to FIG. 9, continuing to take the first element as the folder control, the second virtual light source can include a global linear light source located outside the display screen of the mobile phone. Light emitted by the global linear light source can reach the content layer of the folder control. The light can also be reflected by the application icon of the target application and then reach the edge area of the transparent material layer. The light can also be reflected by the edge area of the transparent material layer to generate a color superposition effect. In this way, the color of the color superposition effect is related to the color of the application icon.

[0255] In this way, the embodiment of the present application simulates the reflection of light of the content color in the content layer of the first element by the transparent material layer of the first element to generate a color superposition effect. Thus, the edge area of the first element can superimpose the content color in the content layer, and the first element is more beautiful. Further, the edge area of the first element can present a color superposition effect and a color dispersion effect, and the display effect is more lively and gorgeous. The display diversity of the interface element and the visual experience of the user are improved.

[0256] In one implementation manner, the first element is a folder control. Referring to (A) in FIG. 10, the folder control is displayed in a first display effect. The first display effect presents a color dispersion effect related to the color of the wallpaper image. The first display effect also presents a color superposition effect related to the color of the application icon.

[0257] In another implementation manner, the first element is a voice assistant window. Referring to (B) in FIG. 10, the voice assistant window is displayed in a first display effect. The folder control is displayed in the first display effect. The first display effect presents a color dispersion effect related to the color of the wallpaper image. The first display effect also presents a color superposition effect related to the color of the voice assistant control.

[0258] It should be noted that the above first display effect can exist independently in any scenario, for example, the folder control is displayed in the first display effect in the home screen interface. Of course, the above first display effect can also be combined with other display effects in any scenario, and the display form of the first display effect is not limited in the embodiment of the present application.

[0259] In some embodiments of the present application, the mobile phone can display the first element in the first display effect in the target interface in response to the first trigger operation in the process of controlling the first element to be displayed in the first display effect.

[0260] The first trigger operation can include an operation for triggering display of the target interface, such as the target interface being a home screen interface and the first operation being a screen unlocking operation. The first trigger can also include an operation for displaying the first element, such as an operation for triggering display of the first element in the target interface that has already been displayed and does not include the first element. For example, the first element is a magnifying glass control, and the first operation is an operation for triggering display of the magnifying glass control.

[0261] In this way, the embodiments of the present application can trigger display of the first element with the first display effect in response to the first trigger operation. Not only can the display effect diversity be improved, but the interactivity of the device and the user can also be improved.

[0262] In some examples, the above scenario is a scenario in which the target interface has already displayed the first element. In a scenario in which the target interface does not display the first element, the phone can display the first element in response to the first trigger operation 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 be the first display effect directly.

[0263] In one implementation manner, the user can use the magnifying glass function in the phone to magnify the display content in the user interface. The first element includes a magnifying glass control for magnifying and displaying the target content.

[0264] Specifically, the phone can display the magnifying glass control in response to an operation on the target content and control the display effect of the edge region inside the magnifying glass control to be the first display effect.

[0265] The target content can be text content of a target region of a target file, and the first display effect presents a color dispersion effect related to the content color in the background layer corresponding to the magnifying glass control. The first display effect also presents a color superposition effect related to the content color of the content layer corresponding to the magnifying glass control.

[0266] For example, referring to FIG. 11, the user can perform a long press operation on the target content, which is “desktop type”. The phone displays the magnifying glass control in response to the long press operation, and the text content is “desktop type”. The magnifying glass control is used to magnify and display “desktop type”. The edge region inside the magnifying glass control can present the first display effect.

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

[0268] That is, the user can change the target content. The display position of the magnifying glass control changes with the content change of the target content, and the edge region of the magnifying glass control can still present the first display effect.

[0269] In another implementation, the target application generally supports a side view function, which is used to display the application interface of the target application in a rotated manner. When the user enables the side view function of the target application, the phone displays a side view interface corresponding to the target application, which is the application interface of the target application after rotation. It should be noted that the side view function can also be named as other names, such as a side view mode, a universe cube side view function, a universe cube side view mode, etc., which are not limited in the embodiments of the present application.

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

[0271] Referring to FIG. 12, the phone can display the side view interface in response to the operation on the side view function (such as the opening operation on the side view function), and control the display effect of the edge area in the side view interface to be the first display effect.

[0272] It should be noted that the above example is to present the first display effect in the edge area of the first element, and of course, the first display effect can also be presented in other areas in the first element except the edge area. The area capable of presenting the first display effect can be a system preset area, or an area preset by the user before the display of the element. The embodiments of the present application do not limit the area capable of presenting the first display effect.

[0273] In this way, the embodiments of the present application can make the interface element present the dispersion effect and the color superposition effect in the magnifying glass scene and the side view interface scene, so as to make the interface element present a certain color effect, improve the diversity of the display scene and the display diversity of the interface element. Further, a unique and beautiful visual effect is provided for the user, and the use experience of the user is improved.

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

[0275] In an implementation, the mobile phone can obtain the black-and-white map corresponding to the first element and the dispersion parameter corresponding to the first element, and the dispersion parameter is determined based on the content color in the background layer. The black-and-white map is used to indicate the offset information generated by the light irradiation to the first element. It can be understood that the black-and-white map is used to represent the edge information of the first element. The mobile phone can further render the edge area of the first element according to the black-and-white map corresponding to the first element and the dispersion parameter corresponding to the first element, to obtain the first image.

[0276] For example, continuing to take the folder control as an example, the mobile phone can obtain the content color (such as extracting the first RGB value of the image in the background layer) of the background layer corresponding to the folder control and the black-and-white map. The mobile phone can input the first RGB value and the black-and-white map into the focal model to obtain the initial dispersion parameter. Then the initial dispersion parameter is input into the dispersion model to obtain the target dispersion parameter corresponding to the edge area inside the folder control. The mobile phone can render the edge area of the first element by using the target dispersion parameter to obtain the first image. It should be noted that the first RGB value can represent the content color of all the content in the background layer, or the content color of part of the content in the background layer. The embodiment of the present application does not make specific limitation on this.

[0277] In the embodiment of the present application, the convolutional neural network (CNN), the region proposal network (RPN), the region with CNN features (RCNN), the Faster-RCNN network, the MobileV2 network, and the residual network, or a combination of multiple networks can be used to determine the dispersion parameter. It should be noted that the focal model and the dispersion model provided by the embodiment of the present application can include one or several of the YOLO algorithm, the SSD algorithm, and the DenseBox algorithm. The focal model and the dispersion model can be trained. When training the focal model and the dispersion model, a large number of RGB values can be used as training samples to enable the model to learn the ability to determine the dispersion parameter based on the RGB value.

[0278] For another example, the mobile phone can input the first RGB value into the focal model to obtain the initial dispersion parameter. Then the initial dispersion parameter is input into the dispersion model to obtain the target dispersion parameter corresponding to the edge area inside the folder control. It should be noted that the focal model and the dispersion model themselves need to have the ability to correspond to the black-and-white map. The embodiment of the present application does not limit the specific form of the focal model and the dispersion model.

[0279] The mobile phone can also acquire a black-and-white map corresponding to the first element and a reflection parameter corresponding to the first element. The mobile phone can also render the edge region of the first element according to the black-and-white map corresponding to the first element and the reflection parameter corresponding to the first element to obtain a second image.

[0280] For example, continuing to take the folder control as an example, the mobile phone can acquire 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 the black-and-white map. The mobile phone can input the second RGB value and the black-and-white map into the reflection model to determine the target reflection parameter of the edge region corresponding to the inside of the folder control. The mobile phone can render the edge region of the first element by using the target reflection parameter to obtain a second image. It should be noted that the second RGB value can represent the content color of all content in the content layer, or can be the content color of part of the content in the content layer. The embodiments of the present application do not make specific limitations on this.

[0281] For another example, the mobile phone can also input the second RGB value into the reflection model to determine the target reflection parameter of the edge region corresponding to the inside of the folder control. It should be noted that the reflection model itself needs to have the capability of corresponding to the black-and-white map. The embodiments of the present application do not limit the specific form of the reflection model.

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

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

[0284] In another implementation manner, the mobile phone can display the first image and the second image independently. In the process of displaying the first image, the edge region of the first element can only present the dispersion effect. In the process of displaying the second image, the edge region of the first element can only present the color superimposition effect. It should be noted that the embodiments of the present application do not limit the specific implementation manner of the first display effect.

[0285] In some embodiments of the present application, the mobile phone needs to not only render the first region, but also render a second region. The first region is the edge region in the first element. The second region is a region in the first element except the edge region. The target rendering parameter can also include a rendering parameter corresponding to the content in the second region. The mobile phone can render the content in the second region by using the rendering parameter corresponding to the content in the second region to obtain a first effect image. It should be noted that the embodiments of the present application do not make specific limitations on the rendering process of the first element.

[0286] Therefore, the embodiment of the present application can generate and display the first effect image by acquiring the black and white map corresponding to the first element and the target rendering parameter, so that the first element presents the first display effect. The display diversity of the interface element is improved, and a unique and beautiful visual effect is provided for the user.

[0287] In some embodiments of the present application, the first display effect can be displayed simultaneously with the target light and shadow effect.

[0288] In one implementation manner, in the process of displaying the edge area in the first element with the first display effect, the phone can control the target area in the first element to display the target light and shadow effect in response to the input operation. The target area can be a part of the edge area, and the target area can overlap with the edge area.

[0289] For example, referring to (A) in FIG. 13, continue to take the application icon of the browser application as an example. Before the user drags the application icon to the folder control, the edge area of the folder control presents the first display effect. Referring to (B) in FIG. 13 to (C) in FIG. 13, in the process of the user dragging the application icon to the folder control, the phone controls the target area of the folder control to display the target light and shadow effect, while maintaining the edge area of the folder control to present the first display effect.

[0290] For another example, referring to (A) in FIG. 14 to (B) in FIG. 14, continue to take 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 presents the first display effect. Referring to (C) in FIG. 14 to (D) in FIG. 14, in the process of the user dragging the file control to the voice assistant window, the phone controls the first sub-area and the second sub-area of the voice assistant window to display the target light and shadow effect, while maintaining the edge area of the voice assistant window to present the first display effect.

[0291] In another implementation manner, the phone controls the target area in the first element to display the target light and shadow effect and the edge area in the first element to display the first display effect in response to the input operation.

[0292] That is, the edge area in the first element presents the first display effect after the input operation.

[0293] It should be noted that the display timing and display position of the target light and shadow effect and the first display effect are not specifically limited in the embodiments of the present application.

[0294] In some embodiments of the present application, the phone can superimpose and display the obtained light and shadow animation corresponding to the first element and the first effect image to realize the simultaneous presentation of the first display effect and the target light and shadow effect.

[0295] Thus, the embodiment of the present application can superimpose the first display effect in the process of displaying the target light and shadow effect, so that the interface element presents a more lively and beautiful special effect, improving the display diversity of the interface element. Further, a unique and beautiful visual effect is provided to the user, improving the user's use experience.

[0296] In some embodiments of the present application, the phone can also display the first element with an initial display effect, and the initial display effect is used to present a caustic effect in the edge region within the first element and a glass blur effect in the region within the first element except the edge region.

[0297] The caustic effect presented by the edge region can make the edge region present a certain thickness and feel its stereoscopic degree rather than a plane, and the presentation of the caustic effect helps to improve the realism of the first element.

[0298] For example, continuing to take the target interface as the home screen interface of the phone, and taking the folder control in the home screen interface as the first element. The folder control is used to display the application icons of at least one application program in the folder. The folder control can be displayed with the initial display effect. The edge region within the folder control presents the caustic effect, and the region within the folder control except the edge region presents the glass blur effect.

[0299] For example, referring to (A) in FIG. 15, the edge region within the folder control presents the caustic effect, and the region within the folder control except the edge region can present the glass blur effect.

[0300] In some embodiments of the present application, the initial display effect is used to present the caustic effect in all regions within the first element.

[0301] For example, referring to (B) in FIG. 15, continuing to take the target interface as the home screen interface of the phone, and taking the folder control in the home screen interface as the first element. The folder control can be displayed with the initial display effect. The caustic effect is presented in all regions within the folder control.

[0302] It should be noted that the embodiment of the present application does not limit the region within the first element that displays the initial display effect.

[0303] In some embodiments of the present application, the phone can control the display effect of the first element in the target interface to change from the initial display effect to the first display effect in response to an effect switching operation in the process of controlling the first element to be displayed with the first display effect.

[0304] For example, referring to (A) in FIG. 16, the folder control can be displayed in the initial display effect. Referring to (B) in FIG. 16, the mobile phone can control the folder control to change from the initial display effect to the first display effect in response to a click operation on the application icon corresponding to the browser.

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

[0306] In this way, the first element in the application embodiments can also be displayed in the initial display effect, and the first element can also change from the initial display effect to the first display effect. The display diversity of the interface element is improved, and the interactivity of the device and the user can also be improved.

[0307] In some embodiments of the application, the mobile phone can obtain preset rendering parameters, the preset rendering parameters including a caustic effect parameter of a first region in the first element and a glass blur effect parameter of a second region in the first element, the first region being an edge region in the first element, the second region being a region in the first element other than the first region, and the caustic effect parameter and the glass blur effect parameter being determined based on a content color in a 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. In this way, the mobile phone can display the initial effect image corresponding to the first element in the process of displaying the first element in the initial display effect.

[0308] For example, taking the first element including the folder control as an example, the mobile phone can obtain the content color of the background layer corresponding to the folder control (such as extracting the third RGB value of the image in the background layer), and input the third RGB value into the caustic model to obtain the caustic effect parameter. The mobile phone can also obtain the content color of the background layer corresponding to the folder control (such as extracting the fourth RGB value of the image in the background layer), and input the fourth RGB value into the blur model to obtain the glass blur effect parameter. The mobile phone can also render the folder control according to the obtained caustic effect parameter and glass blur effect parameter 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 (such as extracting the third RGB value of the image in the background layer), and input the third RGB value and the black and white map into the caustic model to obtain the caustic effect parameter. The black and white map 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 (such as extracting the fourth RGB value of the image in the background layer), and input the fourth RGB value and the black and white map into the blur model to obtain the glass blur effect parameter. The black and white map input into the blur model is used to represent the second region information of the folder control.

[0310] In some implementable manners, the caustics model can use preset parameters to obtain the caustics effect parameters. The preset parameters can include a waveform height parameter, a smoothing parameter, a water depth parameter, a surface opacity parameter, a light intensity parameter, and a refractive index parameter, etc. It should be noted that the specific settings of the caustics effect parameters, the glass blur effect parameters, and the preset parameters are not limited in the embodiments of the present application.

[0311] In some embodiments of the present application, the preset rendering parameters can further include rendering parameters corresponding to the content (such as the application icons of the at least one application) in the second area, and the content in the second area is rendered to obtain the initial effect image. It should be noted that the rendering process of the first element is not specifically limited in the embodiments of the present application.

[0312] In this way, the embodiments of the present application can obtain the preset rendering parameters, generate and display the initial effect image, so that the first element presents the initial display effect. The display diversity of the interface element is improved, and a unique and beautiful visual effect is provided to the user.

[0313] In some embodiments of the present application, the target interface can further include a third element. The phone can control the third element to display in a second display effect, the second display effect being related to a background area of the third element, the background area of the third element being an area corresponding to a position of the third element in the target interface, and the second display effect being used to present a dynamic blur effect generated based on an image in the background area of the third element.

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

[0315] In an implementable manner, the third element can include a notification list. Referring to (A) in FIG. 17, the phone displays a home screen interface. The user can perform a downward sliding operation on the home screen interface, that is, pull down the notification list. The phone displays the notification list in response to the downward sliding operation on the home screen interface.

[0316] Referring to (B) in FIG. 17, the phone can control the notification list to display in a second display effect. The second display effect is related to a background area of the notification list, the background area of the notification list being an area corresponding to a position of the notification list in the target interface, and the second display effect being used to present a dynamic blur effect generated based on an image in the background area of the notification list.

[0317] It can be seen that the notification list is displayed full screen on the phone, and thus the image in the background area corresponding to the notification list can be a home screen image corresponding to the home screen interface, and the second display effect is used to present a dynamic blur effect generated based on the home screen image.

[0318] In some embodiments of the present application, during the process of controlling the third element to display in the second display effect, the mobile phone can acquire a background image corresponding to the background area, and perform blur processing on the background image to obtain a blurred image. The mobile phone can also acquire a texture object, which can be any vector graphics composed of paths, texts, patterns, etc. Then, the mobile phone performs dynamic noise processing on the texture object to obtain an initial dynamic effect. It can be understood that dynamic noise can be used to simulate various texture materials in nature, such as water, clouds, mountains, etc., which can be simulated by noise algorithm. Different noises can be combined to synthesize different special effects.

[0319] In the embodiments of the present application, the mobile phone can add noise texture disturbance to the texture object to obtain an initial dynamic effect with a lively water flow special effect. The mobile phone can also perform color picking on the background image, map the colors in the initial dynamic effect, and obtain a first target dynamic effect. The mobile phone can also perform mixing and superimposition processing on the first target dynamic effect and the blurred image to obtain a blurred animation. In this way, after obtaining the blurred animation, the mobile phone displays the blurred animation to make the third element present in the second display effect. In the blurred animation, the special effect for simulating water flow can be presented. It can be understood that, since the first target dynamic effect can simulate the water flow special effect, the image content of the background image in the second display effect will change in style, such as the image content position will move.

[0320] It should be noted that the first target dynamic effect can include lively fire, lightning, water flow, etc. The embodiments of the present application do not specifically limit the effects presented in the target special effect. At the same time, dynamic noise processing can use noise algorithm, which can include at least one of Perlin noise algorithm, workey noise algorithm, Fractal Brownian Motion (FBM) noise algorithm, etc. The embodiments of the present application do not specifically limit the noise algorithm used.

[0321] In this way, the embodiments of the present application can combine the background image of the element to make the element present a dynamic blur effect, for example, the dynamic blur effect can have a simulated water flow special effect, which improves the display diversity of the interface element. Further, it provides a unique and beautiful visual effect for the user, and improves the user's use experience.

[0322] In some embodiments of the present application, the third element includes at least one sub-element. The mobile phone can respond to a second triggering operation on a target sub-element in the at least one sub-element, and 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 can include a floating volume icon control, and the target sub-element can include a volume operation control. The user can change the display effect of the volume icon control by moving the volume operation control. The phone can control the display effect of the volume icon control to change from the initial display effect to a second display effect in response to the operation on the volume operation control.

[0324] Referring to (A) in FIG. 18, the volume icon control is displayed with the initial display effect, i.e., the edge region of the volume icon control presents a bokeh effect, and the region inside the volume icon control other than the edge region presents a glass blur effect. Referring to (B) in FIG. 18, the phone can control the display effect of the volume icon control to change from the initial display effect to a second display effect in response to the operation on the volume operation control. The second display effect is related to the background region of the volume icon control, which is the region corresponding to the position of the volume icon control in the target interface, and the second display effect is used to present a dynamic blur effect generated based on the image in the background region of the volume icon control.

[0325] As can be seen, the display effect of the volume icon control can change with the operation of the user, i.e., the volume icon control presents the initial display effect before the operation of the user on the volume operation control, and presents the second display effect after the operation of the user on the volume operation control.

[0326] In some embodiments of the present application, the third element includes at least one sub-element. During the process of controlling the third element to be displayed with the second display effect, the phone can control the display effect of the third element to be displayed with the second display effect in response to a second trigger operation on a target sub-element of the at least one sub-element.

[0327] In some embodiments of the present application, the second display effect is related to the background region of the third element, and the style of the image content in the background region of the second display effect changes with the position of the target sub-element or the disappearance of the target sub-element. The style includes at least one of the position, color, shape, brightness, and size of the image content.

[0328] For example, the third element can include a floating volume icon control, and the target sub-element can include a volume operation control. The user can change the display effect of the volume icon control by moving the volume operation control. The phone can control the display effect of the volume icon control to change from the initial display effect to a second display effect in response to the operation on the volume operation control.

[0329] Specifically, the position of the image content in the background region in the updated second display effect is changed compared with the position of the image content in the background region in the second display effect before the update.

[0330] Referring to (A) in FIG. 19, the phone displays the volume icon control with a second display effect, and the second display effect presents a dynamic blur effect. In the dynamic blur effect, the position of the image content in the background region is at a first position.

[0331] Referring to (B) in FIG. 19, the phone can change the display effect of the volume icon control from the second display effect to an updated second display effect in response to the operation on the volume operation control. The updated second display effect continues to present the dynamic blur effect, and the position of the image content in the background region in the dynamic blur effect is at a second position, which is different from the first position.

[0332] For another example, the color of the image content in the background region in the updated second display effect can also be changed compared with the color of the image content in the background region in the second display effect before the update.

[0333] For another example, the size of the image content in the background region in the updated second display effect can also be changed compared with the size of the image content in the background region in the second display effect before the update.

[0334] As can be seen, the volume icon control presents a dynamic blur effect before the user operates the volume operation control, and continues to present the dynamic blur effect after the user operates the volume operation control, but the style of the image content in the two dynamic blur effects is changed.

[0335] In another implementable manner, taking the third element including the notification list as an example, the sub-element includes a notification display control, and the notification display control is used to display a notification in the notification list. Each notification display control can correspond to display one notification.

[0336] Referring to (A) in FIG. 20, the phone displays the home screen interface. The user can pull down the notification list. The phone displays the notification list in response to the downward sliding operation on the home screen interface, and the notification list includes a notification display control corresponding to notification 1. Referring to (B) in FIG. 20, the phone can control the notification list to be displayed with an initial display effect, that is, the edge region of the notification list presents a bokeh effect, and the region inside the notification list other than the edge region presents a glass blur effect. Then, the user can operate the notification display control in the notification list, such as deleting the notification display control, moving the notification display control, and the like.

[0337] Referring to (C) in FIG. 20, the phone can display the notification list in the second display effect in response to the operation of the notification display control (e.g., the deletion operation on notification 1). The second display effect is related to the image in the background area of the notification list. The image in the background area of the notification list can also be the home screen image corresponding to the home screen interface. The second display effect is used to present a dynamic blur effect generated based on the home screen image.

[0338] In another implementation, the third element includes the notification list, and the sub-element includes the notification display control. In response to the operation of the notification display control (e.g., the deletion operation on notification 1), the phone can display the notification list in the updated second display effect. The style of the image content in the background area in the updated second display effect is different from that in the second display effect. Specifically, the position of the image content in the background area in the updated second display effect is different from that in the second display effect.

[0339] Referring to (A) in FIG. 21, the notification list is displayed in the second display effect, which presents a dynamic blur effect. In the dynamic blur effect, the position of the image content in the background area is at a third position.

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

[0341] In this way, the user of the embodiment of the present application can operate the sub-element in the third element to change the style of the image content in the second display effect. In this way, the style of the image content in the second display effect can change with the user operation when the phone displays the third element in the second display effect. The display diversity and flexibility of the interface element are further improved. Thus, the user experience is improved.

[0342] In some embodiments of the present application, the speed of the change of the style of the image content in the background area in the second display effect is positively correlated with the operation speed of the second trigger operation.

[0343] That is, as the user speeds up the operation speed for the target sub-element, the speed of the change of the style of the image content in the background area will also speed up. Conversely, as the user slows down the operation speed for the target sub-element, the speed of the change of the style of the image content in the background area will also slow down.

[0344] Thus, in the process of controlling the element to present the dynamic blur effect, the simulated water flow and other special effects in the dynamic blur effect can change along with the change of the user operation speed, thereby improving the display diversity of the interface element and the operation flexibility of the user. Thus, a unique and beautiful visual effect and playability are provided for the user.

[0345] In some embodiments of the present application, the change speed of the style of the display element in the background area in the second display effect is positively correlated with the service priority of the specified service in the case that the target sub-element is associated with the specified service.

[0346] That is, for example, the target sub-element includes a first sub-element and a second sub-element. The first sub-element is associated with a call service, and the second sub-element is associated with a message display service. The priority of the call service is higher than that of the message display service. In this way, in the case that the target sub-element is associated with the call service, the change speed of the style of the display element in the background area in the second display effect is faster in the process of controlling the third element to present the second display effect. In the case that the target sub-element is associated with the message display service, the change speed of the style of the display element in the background area in the second display effect is slower in the process of controlling the third element to present the second display effect.

[0347] Thus, in the process of controlling the element to present the dynamic blur effect, the simulated water flow and other special effects in the dynamic blur effect can change along with the change of the priority of the service associated with the element, thereby improving the display diversity of the interface element and the scene diversity. Thus, a unique and beautiful visual effect and playability are provided for the user.

[0348] In some embodiments of the present application, the phone can also control the target sub-element to display an illumination effect, which is used to illuminate other interface elements in the case that there are other interface elements around the third element.

[0349] For example, continuing with the example that the third element includes a floating display volume icon control and the sub-element includes a volume operation control, in the process of controlling the display effect of the volume icon control to change from the initial display effect to the second display effect, the phone can also control the volume operation control to display an illumination effect. Referring to (A) in FIG. 22, the phone can display a lock screen interface including a time control, and the volume icon control is not displayed in the lock screen interface. The brightness of the time control is a first brightness. Referring to (B) in FIG. 22, in the process of controlling the volume operation control to display the illumination effect, the time control in the lock screen interface is illuminated, the brightness of the time control is a second brightness, and the second brightness of the time control is greater than the first brightness of the time control.

[0350] In some embodiments of the present application, the target interface includes a fourth element, the fourth element being adjacent to the third element. During the process that the mobile phone controls the third element to be displayed in the second display effect, the mobile phone can control the third element to be displayed in the second display effect and control the fourth element to be displayed in the third display effect in response to an operation on the third element.

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

[0352] In some implementable manners, the third element can be displayed in an initial display effect. The mobile phone can control the display effect of the third element to change from the initial display effect to the second display effect and control the fourth element to be displayed in the third display effect in response to an operation on the third element.

[0353] For example, the target interface is a virtual keyboard interface, the third element can include a first control in the virtual keyboard interface, and the fourth element can include a second control adjacent to the first control in the virtual keyboard interface.

[0354] Referring to (A) in FIG. 23, the first control can be a number 5 control, and the second control can be a number 6 control. The first control and the second control are both displayed in an initial display effect, that is, the internal edge area of the control presents a bokeh effect, and the area other than the edge area presents a glass blur effect.

[0355] Referring to (B) in FIG. 23, the mobile phone can control the display effect of the first control to change from the initial display effect to the second display effect and control the second control to be displayed in the third display effect in response to an operation on the first control. That is, the mobile phone can not only control one element to present a dynamic blur effect, but also control other elements around the element to also present a dynamic blur effect. It should be noted that different dynamic blur effects presented by different elements are related to the background areas corresponding to the respective elements.

[0356] In this way, the embodiments of the present application can not only display the third element in the second display effect, but also display the fourth element in the third display effect. The background image of the element can be combined to make the surrounding other elements present a dynamic blur effect, thereby improving the display diversity of the interface elements. Furthermore, a unique and beautiful visual effect is provided for the user.

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

[0358] That is, the second display effect and the third display effect do not always present the background dynamic blur effect, and at the beginning and end of the display, the initial display effect is restored.

[0359] In this way, the display element of the embodiment of the present application can present a dynamic blur effect for a certain period of time after the user operation. The display flexibility of the interface element is improved. Therefore, the user's use experience is improved.

[0360] In some embodiments of the present application, the mobile phone can also control the third element to display a lighting effect, and the lighting effect is used to present the effect of lighting other interface elements in the case that there are other interface elements around the third element.

[0361] In this way, the embodiment of the present application can also control the third element to display a lighting effect to light other interface elements. The display effect of the third element is more obvious, and the display diversity of the interface element is improved.

[0362] In some embodiments of the present application, the mobile phone can also magnify the display of the third element during the display of the third element in the second display effect.

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

[0364] In this way, the embodiment of the present application can also control the third element to be magnified, so that the display effect of the third element is more obvious, and the display diversity of the interface element is improved.

[0365] In some embodiments of the present application, the mobile phone can also control the display effect of the third element to change from the second display effect to the fifth display effect in response to the operation on the target sub-element, and the fifth display effect is used to present a dynamic blur effect generated based on the content color of the image in the background area of the third element and the element content of the target sub-element.

[0366] In the fifth display effect, the content color of the element content corresponding to the target sub-element is presented around the target sub-element.

[0367] For example, the third element can include a call notification window, and the target sub-element includes an answer control.

[0368] Referring to (A) in FIG. 24, the mobile phone can display a call notification window, and the display effect of the call notification window is a second display effect. Referring to (B) in FIG. 24, the mobile phone can change the display effect of the call notification window from the second display effect to a fifth display effect in response to an operation on the answer control, and the fifth display effect is used to present a dynamic blur effect generated based on the image in the background area of the call notification window and the control color of the answer control. The fifth display effect presents a corresponding red color around the answer control.

[0369] In this way, the embodiments of the present application further improve the aesthetics of the fifth display effect and the display diversity of the interface elements by causing the content color of the element content corresponding to the target sub-element to surround the target sub-element.

[0370] In some embodiments of the present application, the mobile phone can obtain a background image of the third element and perform blur processing on the background image to obtain a blurred image in the process of controlling the third element to be displayed in the fifth display effect.

[0371] Similarly, the initial dynamic effect has a lively water flow special effect. The mobile phone can also take colors of the background image and the color of the target sub-element, perform color mixing processing on the colors, and map the colors in the initial dynamic effect to obtain a target dynamic effect. The mobile phone can also perform superimposition processing on the target dynamic effect and the blurred image to obtain a blurred animation. In this way, the mobile phone displays the blurred animation after obtaining the blurred animation, so that the third element is presented in the fifth display effect.

[0372] In this way, in the process of controlling the element to present the dynamic blur effect, the dynamic blur effect is not only related to the background area of the element, but also related to the element content of the target sub-element, so that the dynamic blur effect has more rich color changes. The display diversity of the interface elements is improved. Thus, a unique and beautiful visual effect is provided for the user.

[0373] In some embodiments of the present application, the first element and the third element can be the same or different elements. In the case where the first element and the third element are the same element, the target light and shadow effect, the first display effect, and the second display effect can be superimposed and presented in the first element. For example, the target area of the first element presents the target light and shadow effect, the edge area presents the first display effect, and the area other than the target area and the edge area presents the dynamic blur effect.

[0374] It should be noted that the display effects proposed in the embodiments of the present application can be independently presented or superimposed and presented, and this is not specifically limited.

[0375] In some scenarios, multiple embodiments of the present application can be combined, and the combined scenario can be implemented. Optionally, some operations in the flow of each method embodiment are optionally combined, and / or the order of some operations is optionally changed. Also, the execution order between steps of each flow is only exemplary, and does not constitute a limitation on the execution order between steps, and other execution orders between steps can also be used. The execution order is not intended to indicate the only order in which the operations can be performed.

[0376] A person of ordinary skill in the art can think of various ways to reorder the operations described in the embodiments of the present application. In addition, it should be pointed out that the process details involved in some embodiments of the present application are also applicable in a similar manner to other embodiments, or different embodiments can be combined for use.

[0377] In addition, some steps in the method embodiments can be equivalently replaced by other possible steps. Alternatively, some steps in the method embodiments can be optional and can be deleted in some use scenarios. Alternatively, other possible steps can be added in the method embodiments.

[0378] Also, each method embodiment can be implemented individually, or in combination.

[0379] The embodiments of the present application also provide an electronic device, which can be a mobile phone as described above, as shown in FIG. 25. The mobile phone can include one or more processors 2110, a memory 2120, and a communication interface 2130.

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

[0381] The communication interface 2130 is configured to perform 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 related method steps in the embodiments of the present application.

[0382] The processor 2110 can 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 device, a transistor logic device, a hardware component, or any combination thereof. It can implement or execute various example logical blocks, modules, and circuits described in connection with the present disclosure. The processor can also be a combination of implementing computing functions, such as one or more microprocessor combinations, combinations of DSP and microprocessor, and the like.

[0383] The bus 2140 can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. The bus 2140 can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one thick line is shown in FIG. 25, but it does not mean that there is only one bus or only one type of bus.

[0384] The embodiments of the present application also provide an electronic device, which includes a memory and one or more processors; the memory is coupled with the processor; wherein the memory stores computer program codes, the computer program codes include computer instructions, when the computer instructions are executed by the processor, the electronic device executes the related method steps in the above method embodiments.

[0385] The embodiments of the present application also provide a computer readable storage medium, which stores computer program codes, when the above processor executes the computer program codes, the electronic device executes the related method steps in the above method embodiments.

[0386] The embodiments of the present application also provide a computer program product, which includes instructions, when the instructions run on a computer or a processor, the computer or the processor executes the related method steps in the above method embodiments.

[0387] The embodiments of the present application also provide a chip system, which includes a processor and a memory; the memory is used to store programs or instructions, when the programs or instructions are executed by the processor, the chip system implements the method in any of the above method embodiments.

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

[0389] Optionally, the memory in the chip system can also be one or more. The memory can be integrated with the processor or arranged separately from the processor, and the embodiments of the present application do not limit the same. Exemplarily, the memory can be a non-transient processor, for example, a read-only memory (ROM), which can be integrated on the same chip as the processor or arranged on different chips respectively, and the embodiments of the present application do not limit the type of the memory and the arrangement of the memory and the processor.

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

[0391] The electronic device, computer storage medium or computer program product provided in the present application are used to execute the corresponding method provided in the above, and thus the beneficial effects achieved thereby can refer to the beneficial effects of the corresponding method provided in the above, which will not be described herein again.

[0392] Through the description of the above embodiments, those skilled in the art can clearly understand that, for the convenience and brevity of description, only the division of the above functional modules is taken as an example for illustration, and in actual application, the above functions can be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above.

[0393] In several embodiments provided in the present application, it should be understood that the disclosed apparatus and method can be implemented in other manners. For example, the division of the apparatus embodiments is merely illustrative, and for example, the division of the modules or units can not mean physical division, and for example, a plurality of units or components can be combined or integrated into another device, or some features can be ignored or not executed. In addition, the displayed or discussed mutual couplings or direct couplings or communication connections can be indirect couplings or communication connections through some interfaces, devices or units, and can be in electrical, mechanical or other forms.

[0394] The units described as separate components may or may not be physically separate, and the components shown as units may be one physical unit or multiple physical units, which can be located in one place or distributed in multiple different places. Some or all of the units can be selected according to actual needs to achieve the purpose of the embodiments.

[0395] In addition, each functional unit in the various embodiments of the present application can be integrated into a processing unit, or each unit can be physically present alone, or two or more units can be integrated into one unit. The integrated unit can be realized in the form of hardware or in the form of a software functional unit.

[0396] If the integrated unit is realized in the form of 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 the present application can be embodied in the form of a software product in essence or the part that contributes or the whole or part of the technical solutions can be embodied in the form of a software product stored in a storage medium, including a plurality of instructions for causing an apparatus (which can be a single-chip microcomputer, a chip, etc.) or a processor to execute all or part of the steps of the various embodiments of the method of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various media that can store program codes.

[0397] The above is merely a specific implementation of the present application, but the protection scope of the present application is not limited thereto, and any changes or replacements within the technical scope disclosed in the present application should be covered within the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A display method characterized by comprising: The method applied to an electronic device comprises: displaying a target interface, the target interface comprising a first element and a second element; controlling a target area in the first element to display a target light and shadow effect; wherein the target light and shadow effect is used to present a first virtual light source simulated to be located at a position of the second element, and a lighting effect generated by the first virtual light source irradiating to the first element, and the target area is an area where the first virtual light source irradiates to the first element.

2. The method of claim 1, wherein, Before the displaying of the target interface, the method further comprises: receiving a first operation; the displaying of the target interface comprises: in response to the first operation, displaying the target interface.

3. The method of claim 1, wherein, After the displaying of the target interface, the method further comprises: receiving a first operation; the controlling of the target area in the first element to display the target light and shadow effect comprises: in response to the first operation, controlling the target area in the first element to display the target light and shadow effect.

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

5. The method of claim 3, wherein, The first operation is an operation of moving the second element, a position of the first virtual light source changes with a position change of the second element, and the target area changes with the position change of the first virtual light source.

6. The method of claim 5, wherein, The second element is located outside the first element, and the first operation is an operation of moving the second element into the first element.

7. The method of claim 6, wherein, The first element comprises a folder control, and the second element comprises an application icon corresponding to a target application.

8. The method of claim 2 or 3, wherein, The second element comprises element areas of different colors, positions of the element areas of different colors dynamically change, and a color of a first sub-area in the target area is determined based on a color of an element area close to the second element when the target light and shadow effect is displayed.

9. The method of claim 8, wherein, The second element is located inside the first element.

10. The method of claim 9, wherein, The first element comprises a voice assistant window, and the second element comprises a voice assistant control in the voice assistant window, the voice assistant control being used to present that a voice assistant application is in an awakened state.

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

12. The method according to any one of claims 1 to 11, characterized in that, The method further comprises: obtaining a normal map corresponding to the first element and / or a content color of element content in the second element; rendering the target area according to the content color and / or the normal map corresponding to the first element to obtain a light and shadow animation corresponding to the first element; the controlling of the target area in the first element to display the target light and shadow effect comprises: displaying the light and shadow animation corresponding to the first element.

13. The method according to any one of claims 1 to 12, characterized in that, The method further comprises: controlling the first element to display with a first display effect; wherein the first display effect is used to present, in an edge area in the first element, light rays simulated to be emitted by a second virtual light source located outside a display screen of the electronic device, a dispersion effect generated by the light rays after being reflected by a background layer of the first element and being refracted by a transparent material layer of the first element, the dispersion effect being related to a content color of the background layer.

14. The method of claim 13, wherein, The first display effect is further used to present, in an edge region within the first element, a color superposition effect produced by reflection of light emitted by the second virtual light source after reflection by content in a content layer of the first element, the color superposition effect being related to a content color in the content layer.

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

16. The method of claim 15, wherein, The first element includes a magnifying glass control for zoomed-in display of target content. Alternatively, the first element includes a side view interface corresponding to a target application, the side view interface being an interface obtained by rotating an application interface of the target application by a preset angle along a central axis parallel to a screen of the electronic device.

17. The method according to any one of claims 14-16, characterized by, The method further includes: obtaining a black-and-white map corresponding to the first element and target rendering parameters, the target rendering parameters including a dispersion parameter and a reflection parameter corresponding to the first element, the dispersion parameter being determined based on a content color in the background layer, and the reflection parameter being determined based on a content color in the content layer; rendering the first element according to the black-and-white map and the target rendering parameters to obtain a first effect image corresponding to the first element; The control of the first element to be displayed in the first display effect includes: displaying the first effect image corresponding to the first element.

18. The method according to any one of claims 13-17, characterized by, The method further includes: displaying the first element in an initial display effect, the initial display effect being used to present a caustic effect in an edge region within the first element and a glass blur effect in a region within the first element other than the edge region; The control of the first element to be displayed in the first display effect includes: in response to an effect switching operation, controlling the display effect of the first element in the target interface to change from the initial display effect to the first display effect.

19. The method of claim 18, wherein, The method further includes: obtaining preset rendering parameters, the preset rendering parameters including a caustic effect parameter of a first region in the first element and a glass blur effect parameter of a second region in the first element, the first region being an edge region within the first element, the second region being a region within the first element other than the first region, and the caustic effect parameter and the glass blur effect parameter being determined based on a content color in a background layer of the first element; rendering the first element according to the preset rendering parameters to obtain an initial effect image corresponding to the first element; The display of the first element in the initial display effect includes: displaying the initial effect image corresponding to the first element.

20. The method of any one of claims 1-19, wherein, The target interface further includes a third element, and the method further includes: controlling the third element to be displayed in a second display effect; The second display effect is related to a background region of the third element, the background region of the third element being a region corresponding to a position of the third element in the target interface, and the second display effect is used to present a dynamic blur effect produced based on an image in the background region of the third element.

21. The method of claim 20, wherein, The third element comprises at least one sub-element; and the control of the third element to display in the second display effect comprises: in response to a second trigger operation on a target sub-element of the at least one sub-element, the display effect of the third element is controlled to display in the second display effect, and in the second display effect, the style of the image content in the background area changes with the position of the target sub-element or the disappearance of the target sub-element, and the style comprises at least one of the position, color, shape, brightness and size of the image content.

22. The method of claim 21, wherein, The change speed of the style of the image content in the background area in the second display effect is positively correlated with the operation speed of the second trigger operation.

23. The method of claim 21 or 22, wherein, In a case where the target sub-element is associated with a specified service, the change speed of the style of the display element in the background area in the second display effect is positively correlated with the service priority of the specified service.

24. The method of any one of claims 21-23, wherein, The third element comprises a floating display volume icon control, and the target sub-element comprises a volume operation control. Alternatively, the third element comprises a notification list, and the target sub-element comprises a notification display control.

25. The method of claim 20, wherein, The target interface comprises a fourth element, and the fourth element is close to the third element; and the control of the third element to display in the second display effect comprises: in response to an operation on the third element, the display effect of the third element is controlled to display in the second display effect, and the fourth element is controlled to display in a third display effect; the third display effect is related to a background area of the fourth element, the background area of the fourth element is a region 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 an image in the background area of the fourth element.

26. The method of claim 25, wherein, The image content of the first frame image and the last frame image in the display process of the second display effect is consistent with the image content corresponding to the background area of the third element, and the image content corresponding to the first frame image and the last frame image in the display process of the third display effect is consistent with the image content corresponding to the background area of the fourth element.

27. The method of claim 25 or 26, wherein, The target interface is a virtual keyboard interface, the third element comprises a first control in the virtual keyboard interface, and the fourth element comprises a second control close to the first control in the virtual keyboard interface.

28. The method of any one of claims 25-27, wherein, The method further comprises: controlling the third element to display an illumination effect, and the illumination effect is used to present an effect of illuminating other interface elements in a case where there are other interface elements around the third element.

29. The method of any one of claims 20-28, wherein, The method further comprises: in the process of displaying the third element in the second display effect, the third element is enlarged and displayed.

30. The method of claim 20, wherein, The third element comprises at least one sub-element, and the method further comprises: in response to a second trigger operation on a target sub-element of 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, and the fifth display effect is used to present a dynamic blur effect based on an image in the background area of the third element and a content color of the corresponding element content of the target sub-element.

31. The method of claim 30, wherein, The content color of the target sub-element corresponding to the element content presents around the target sub-element in the fifth display effect.

32. The method of claim 30 or 31, wherein, The third element includes a call notification window, and the target sub-element includes a receiving control.

33. An electronic device, comprising: The electronic device includes a processor and a memory; The processor is connected with the memory, the memory is used for storing computer execution instructions, and the processor executes the computer execution instructions stored in the memory to make the electronic device execute the method in any one of claims 1-32.

34. A computer-readable storage medium having stored therein instructions, the computer-readable storage medium comprising: When the instructions run on the electronic device, the electronic device executes the method in any one of claims 1-32.

35. A computer program product comprising instructions, wherein: When the computer program product runs on the electronic device, the electronic device executes the method in any one of claims 1-32.

Images