Display method and electronic equipment

Abstract

The invention provides a display method and electronic equipment, and relates to the technical field of terminals. According to the invention, transparent visual experience can be provided for the user, and better light and shadow interaction experience can also be provided for the user. The method comprises the steps that the electronic equipment receives a first operation; and in response to the first operation, the electronic equipment displays a first interface. Wherein the first interface comprises a background image and a first control located on the background image, the background image covered by the first control is a target background image, and the first control comprises a glass layer; the color parameters of the plurality of pixel points in the glass layer correspond to the color parameters of the plurality of pixel points in the target background image, and the positions of the plurality of pixel points in the glass layer are different from the positions of the corresponding pixel points in the target background image.

Description

Technical Field

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

[0002] With the development of terminal technology, electronic devices are becoming increasingly feature-rich. However, the interface display of electronic devices is relatively simple, making it difficult to provide users with better visual aesthetics and interactive immersion, which still affects the user experience.

[0003] Designs such as frosted glass have been widely used to address this issue. The frosted glass effect provides users with a more transparent visual experience. However, the interaction remains relatively limited, making it difficult to offer an immersive experience. Summary of the Invention

[0004] To address the aforementioned technical problems, this application provides a display method and an electronic device. The technical solution provided by this application not only offers users a clear visual experience but also provides them with a better light and shadow interaction experience.

[0005] A first aspect provides a display method applied to an electronic device, the method comprising: receiving a first operation; and, in response to the first operation, displaying a first interface; wherein the first interface includes a background image and a first control located on the background image; wherein the background image covered by the first control is a target background image, and the first control includes a glass layer; the color parameters of multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image, and the positions of the multiple pixels in the glass layer are different from the positions of the corresponding pixels in the target background image.

[0006] In this way, electronic devices simulate the refraction effect of the first control by using the misalignment between the pixels in the glass layer and the corresponding pixels in the target background image, and by having the glass layer visually positioned above the background image (such as wallpaper), thereby providing users with a better visual experience and an immersive experience.

[0007] According to the first aspect, the method further includes: receiving a second operation for controlling the first control. During the process of controlling the first control in response to the second operation, multiple pixels in the glass layer continuously change to alter the display effect of the first control; wherein, during the process of controlling the first control, the color parameters of the multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image that is currently covered by the first control, and the positions of the multiple pixels in the glass layer differ from the positions of the corresponding pixels in the target background image.

[0008] In response to the second user interaction, multiple pixels in the glass layer continuously change, triggering the first control to change from a solid state to a liquid state, thus enhancing the user's interactive experience.

[0009] According to the first aspect, or any implementation of the first aspect above, the first control further includes a first particle layer located above the glass layer, and the method further includes: displaying the first particle layer while responding to the second operation controlling the first control; wherein the positions of multiple particles in the first particle layer continuously change.

[0010] In this way, the first particle layer can achieve dynamic effects of particle changes on the surface of the first control, enhancing the user's visual experience.

[0011] According to the first aspect, or any implementation of the first aspect above, the first control further includes an icon layer located above the glass layer, the icon layer being located above or below the first particle layer; or, the first control further includes an element layer, both the icon layer and the element layer being located above or below the first particle layer, the display of the element layer changing based on the second operation.

[0012] In this way, by displaying element layers, the display of the first control is enriched, and the user's interactive experience is enhanced.

[0013] According to the first aspect, or any implementation of the first aspect above, the method further includes: receiving a third operation for deleting the first control. During the process of deleting the first control in response to the third operation, the position of the pixels of the first control continuously changes.

[0014] In this way, during the deletion of the first control, the position of the pixels of the first control can be continuously changed to present the user with the animation of the first control disappearing, thereby improving the user's visual experience.

[0015] According to the first aspect, or any implementation of the first aspect above, compared to the pixels in the target background image, the positions of the corresponding multiple pixels in the glass layer are offset in a preset direction, and the offset of at least two pixels is different.

[0016] According to the first aspect, or any implementation of the first aspect above, the preset direction includes: a predefined direction and / or the direction of the line connecting the pixel point and the geometric center point.

[0017] According to the first aspect, or any implementation of the first aspect above, the positional offsets of the corresponding pixels in the glass layer compared to the pixels in the target background image are determined by a first perturbation noise map. The first perturbation noise map includes multiple pixels, and these pixels correspond to the multiple pixels in the glass layer. The positional offsets of the multiple pixels in the glass layer are determined by the parameters of the corresponding pixels in the first perturbation noise map.

[0018] In this way, the liquid effect of the glass layer can be achieved through the dynamic changes of the first noise map. Furthermore, in response to user interaction, the first control begins to change from a solid state to a liquid state, enhancing the user's interactive experience.

[0019] According to the first aspect, or any implementation of the first aspect above, the parameters of the corresponding pixels in the first perturbation noise image include grayscale values. Specifically, the larger the grayscale value of a pixel in the first perturbation noise image, the smaller the positional offset of the corresponding pixel in the glass layer; conversely, the smaller the grayscale value of a pixel in the first perturbation noise image, the larger the positional offset of the corresponding pixel in the glass layer. Alternatively, the larger the grayscale value of a pixel in the first perturbation noise image, the larger the positional offset of the corresponding pixel in the glass layer; and the smaller the grayscale value of a pixel in the first perturbation noise image, the smaller the positional offset of the corresponding pixel in the glass layer.

[0020] Thus, based on the grayscale values ​​of the pixels in the first perturbation noise map, the position in the glass layer can be flexibly moved to present the corresponding light and shadow effects of the first control.

[0021] In some examples, the color values ​​of multiple pixels offset in the glass layer are preset color values.

[0022] In this way, by moving and keeping pixels with different color values, color effects can be achieved, thereby simulating the distortion effect of refracted light and further improving the effect of simulated refraction.

[0023] According to the first aspect, or any implementation of the first aspect above, the positional offset of multiple pixels in the glass layer compared to pixels in the target background image is determined by a first perturbation noise map and a collision force black-and-white map; wherein, the color parameters of multiple pixels in the collision force black-and-white map are related to the movement trajectory and / or force of the second operation on the first control. Multiple pixels in the first perturbation noise map and multiple pixels in the collision force black-and-white map correspond to multiple pixels in the glass layer. The positional offset of multiple pixels in the glass layer is determined by the parameters of the corresponding multiple pixels in the first perturbation noise map and the parameters of the corresponding multiple pixels in the collision force black-and-white map.

[0024] In this way, by superimposing the first noise map and the collision force black and white map on the pixels in the glass layer, it is possible to simulate the visual effect of touching a liquid medium, thereby enhancing the spatial sense and immersion of the control.

[0025] According to the first aspect, or any implementation of the first aspect above, the first control also includes a first particle layer located above the glass layer, and the method further includes: the positions of multiple particles in the first particle layer are determined by a collision force black-and-white image.

[0026] In this way, by adjusting the position of pixels in the first particle layer using the collision force black and white image, the interaction effect between the particles on the surface of the first control and the user's second operation can be achieved, thus improving the user's interactive experience.

[0027] According to the first aspect, or any implementation of the first aspect above, the positional offsets of multiple pixels in the first control are determined by the second perturbation noise map. The second perturbation noise map includes multiple pixels, and the multiple pixels in the second perturbation noise map correspond to multiple pixels in the first control. The positional offsets of the multiple pixels in the first control are determined by the parameters of the corresponding multiple pixels in the second perturbation noise map.

[0028] Thus, after the calculation of the second noise map, the pixels in the first control are scrambled, simulating the dynamic effect of the first control distorting and disappearing.

[0029] According to the first aspect, or any implementation of the first aspect above, the parameters of the corresponding pixels in the second perturbation noise image include grayscale values. Specifically, the larger the grayscale value of a pixel in the second perturbation noise image, the smaller the positional offset of the corresponding pixel in the first control; conversely, the smaller the grayscale value of a pixel in the second perturbation noise image, the larger the positional offset of the corresponding pixel in the first control. Alternatively, the larger the grayscale value of a pixel in the second perturbation noise image, the larger the positional offset of the corresponding pixel in the first control; and the smaller the grayscale value of a pixel in the second perturbation noise image, the smaller the positional offset of the corresponding pixel in the first control.

[0030] Thus, based on the grayscale values ​​of the pixels in the second perturbation noise map, the display positions of the pixels in the first control can be adjusted in an orderly manner.

[0031] According to the first aspect, or any implementation of the first aspect above, the blur value of multiple pixels in the first control is determined by the parameters of the corresponding multiple pixels in the second perturbation noise map.

[0032] Thus, color interference based on blur values ​​can further enhance the simulated visual effects, such as visually accelerating the disappearance of controls through blurring, thereby enhancing the user's visual perception.

[0033] According to the first aspect, or any implementation of the first aspect above, the method further includes: in response to the third operation, displaying a second particle layer; wherein the blur values ​​of a plurality of pixels in the second particle layer are determined by a second perturbation noise map.

[0034] In this way, by displaying the second particle layer at the top of the first control, the icon layer in the first control is obscured, and the obscured part appears to dissipate visually, thereby visually accelerating the vaporization time of the first control.

[0035] According to the first aspect, or any implementation of the first aspect above, the first control is a folder control, and the second operation is used to adjust the size of the folder control or move the display position of the folder control; or, the first control is a notification message control, and the second operation is used to move the notification message control; or, the first control is a volume adjustment control or a brightness adjustment control, and the second operation is an operation to adjust the volume or brightness of the electronic device through the volume adjustment control or the brightness adjustment control; or, the first control is a folder control, and the second operation is used to add an icon control to the folder control; or, the first control is a dial pad control, and the second operation is a click operation on the numeric control in the dial pad control.

[0036] In a second aspect, a display method is provided, applied to an electronic device, the method comprising: receiving a second operation for controlling the first control during the display of a first control; and displaying a first particle layer in the first control during the response to the second operation to control the first control, wherein the positions of multiple particles in the first particle layer continuously change.

[0037] According to the second aspect, the first particle layer is located at the top layer of the first control. Alternatively, the first control includes a bottom layer at the bottom and an icon layer above the bottom layer, and the first particle layer may be located between the bottom layer and the icon layer.

[0038] According to the second aspect, or any implementation of the second aspect above, in response to the second operation, the multiple particles in the first control diffuse or change position. When the touch position of the second operation is different, the diffusion or position change of the multiple particles is different, and the first control can present the effect of multiple particles colliding with the touch point of the second operation. For example: in response to operation 1 applied to the first touch position of the first control, the multiple particles in the first control exhibit a first change; in response to operation 2 applied to the second touch position of the first control, the multiple particles in the first control exhibit a second change; the first change of the particles is associated with the first touch position, and the second change of the particles is associated with the second touch position.

[0039] According to the second aspect, or any implementation of the second aspect above, the positions of multiple particles in the first particle layer are determined by the collision force black-and-white map.

[0040] According to the second aspect, or any implementation of the second aspect above, before receiving the second operation for controlling the first control, the method further includes: receiving the first operation. In response to the first operation, a first interface is displayed; wherein the first interface includes a background image and a first control located on the background image; wherein the background image covered by the first control is a target background image, and the first control includes a glass layer; the color parameters of multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image, and the positions of the multiple pixels in the glass layer are different from the positions of the corresponding pixels in the target background image.

[0041] According to the second aspect, or any implementation of the second aspect above, the method further includes: during the process of responding to the second operation controlling the first control, multiple pixels in the glass layer continuously change, so as to change the display effect of the first control; wherein, during the process of the first control being controlled, the color parameters of multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image that is covered by the first control in real time, and the positions of multiple pixels in the glass layer are different from the positions of the corresponding pixels in the target background image in real time.

[0042] According to the second aspect, or any implementation of the second aspect above, the first control further includes an icon layer located above the glass layer, the icon layer being located above or below the first particle layer; or, the first control further includes an element layer, both the icon layer and the element layer being located above or below the first particle layer, the display of the element layer changing based on the second operation.

[0043] Thirdly, a display method is provided, which is applied to an electronic device. The method includes: during the display of a first control, receiving a third operation for deleting the first control; during the deletion of the first control in response to the third operation, the position of the pixels of the first control continuously changes until a fogging and disappearing effect is finally achieved.

[0044] According to a third aspect, before receiving a third operation for deleting the first control, the method further includes: receiving a first operation. In response to the first operation, a first interface is displayed; wherein the first interface includes a background image and a first control located on the background image; wherein the background image covered by the first control is a target background image, and the first control includes a glass layer; the color parameters of multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image, and the positions of the multiple pixels in the glass layer are different from the positions of the corresponding pixels in the target background image.

[0045] According to the third aspect, or any implementation of the third aspect above, before receiving the third operation for deleting the first control, the method further includes: receiving a second operation for controlling the first control. During the process of controlling the first control in response to the second operation, multiple pixels in the glass layer continuously change to change the display effect of the first control; wherein, during the process of controlling the first control, the color parameters of multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image that is covered by the first control in real time, and the positions of the multiple pixels in the glass layer are different from the positions of the corresponding pixels in the target background image in real time.

[0046] According to the third aspect, or any implementation of the third aspect above, the first control further includes a first particle layer located above the glass layer. Before receiving the third operation for deleting the first control, the method further includes: displaying the first particle layer while responding to the second operation controlling the first control; wherein the positions of multiple particles in the first particle layer continuously change.

[0047] According to the third aspect, or any implementation of the third aspect above, the first control further includes an icon layer located above the glass layer, the icon layer being located above or below the first particle layer; or, the first control further includes an element layer, both the icon layer and the element layer being located above or below the first particle layer, the display of the element layer changing based on the second operation.

[0048] Fourthly, an electronic device is provided. The electronic device includes a processor, a memory, and a display screen. The memory and the display screen are coupled to the processor. The memory stores computer program code, which includes computer instructions. When the processor reads the computer instructions from the memory, it causes the electronic device to perform a method as described in the first aspect or any embodiment of the first aspect.

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

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

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

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

[0053] A ninth aspect provides a chip system including at least one processor and at least one interface circuit, the at least one interface circuit being used to perform transceiver functions and send instructions to at least one processor, wherein when at least one processor executes instructions, at least one processor performs the method of the first aspect or any embodiment of the first aspect.

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

[0055] Figure 1 A schematic diagram of an interface provided for an embodiment of this application; Figure 2 A schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application; Figure 3 A schematic diagram of a layer structure provided in an embodiment of this application; Figure 4 A schematic diagram of the disturbance noise map provided in the embodiments of this application; Figure 5 This is a schematic diagram of a display scenario provided in an embodiment of this application; Figure 6 This is a schematic diagram of another display scenario provided in an embodiment of this application; Figure 7 A schematic diagram of a collision force black-and-white image provided for an embodiment of this application; Figure 8 This is a schematic diagram of another display scenario provided in an embodiment of this application; Figure 9 A schematic diagram of the interactive particle layer provided in an embodiment of this application; Figure 10 This is another schematic diagram of a layer structure provided in an embodiment of this application; Figure 11 This is a schematic diagram of another display scenario provided in an embodiment of this application; Figures 12A-12C This is a schematic diagram of another display scenario provided in an embodiment of this application; Figure 13 This is a schematic diagram of another display scenario provided in an embodiment of this application; Figure 14A schematic diagram of another collision force black-and-white diagram provided for an embodiment of this application; Figure 15 This is a schematic diagram of another display scenario provided in an embodiment of this application; Figures 16A-16C This is a schematic diagram of another display scenario provided in an embodiment of this application; Figure 17 This is a schematic diagram of another display scenario provided in an embodiment of this application; Figure 18 This is a schematic diagram of another display scenario provided in an embodiment of this application; Figure 19 A schematic diagram of the distortion noise map provided in an embodiment of this application; Figure 20 A schematic diagram of fuzzy values ​​provided in the embodiments of this application; Figure 21 This is a schematic diagram of another display scenario provided in an embodiment of this application; Figure 22 A schematic diagram of the gaseous particle interaction layer provided in an embodiment of this application; Figure 23 This is another schematic diagram of a layer structure provided in an embodiment of this application; Figure 24 This is a schematic diagram of another display scenario provided in an embodiment of this application; Figures 25A-25D This is a schematic diagram of another display scenario provided in an embodiment of this application; Figures 26A-26E This is a schematic diagram of another display scenario provided in an embodiment of this application; Figure 27 This is a flowchart illustrating a display method provided in an embodiment of this application. Detailed Implementation

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

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

[0058] In the embodiments of this application, the words "exemplarily" or "for example" are used to indicate examples, illustrations, or explanations. Any embodiment or design described as "exemplarily" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design solutions. Specifically, the use of the words "exemplarily" or "for example" is intended to present the relevant concepts in a specific manner.

[0059] In some embodiments, as the functionality of electronic devices increases, the content displayed on the electronic device's interface becomes increasingly rich. The controls displayed on the interface include, for example,... Figure 1 The diagram shows various types of controls, including icon control 11, folder control 12, card control 13, and parameter adjustment control 14. These controls can also be described as components, display elements, etc., and can be used to implement interaction with the user.

[0060] Alternatively, controls are usually presented in a static way, and the interface display effect is relatively simple, making it difficult to provide users with better visual aesthetics and interactive immersion, which will still affect the user experience.

[0061] Frosted glass and similar designs are widely used in response to this. Frosted glass design typically creates a semi-transparent, blurred glass-like effect. It gives the interface a hazy, layered visual effect, allowing foreground content to stand out without completely obscuring the background. This design enhances the aesthetics and sense of depth of the user interface.

[0062] However, designs such as frosted glass still offer a static display effect with limited interactive dimensions, making it difficult to provide an immersive experience.

[0063] Based on the above, this application provides a display method that not only provides users with a transparent visual experience, but also provides users with a better light and shadow interaction experience.

[0064] Optionally, the display method provided in this application embodiment can be applied to electronic device 100. Optionally, electronic device 100 can be, for example, a mobile phone, tablet computer, in-vehicle device, wearable device, personal computer (PC), ultra-mobile personal computer (UMPC), netbook, personal digital assistant (PDA), wearable device, artificial intelligence (AI) device, or other terminal device. The operating system installed on electronic device 100 includes, but is not limited to, Linux®, iOS®, Android®, Harmony®, Windows®, or other operating systems. This application does not limit the specific type of electronic device 100 or the operating system installed on it.

[0065] Figure 2 This is a schematic diagram of the hardware structure of the electronic device 100 provided in an embodiment of this application.

[0066] For example, such as Figure 2 As shown, the electronic device 100 may include a processor 210, an external memory interface 240, an internal memory 241, a universal serial bus (USB) interface 230, a charging management module 220, a power management module 221, a battery 222, an antenna 1, an antenna 2, a mobile communication module 250, a wireless communication module 260, an audio module 270, a sensor module 280, a button 290, a motor 291, an indicator 292, a camera 293, a display screen 294, and a subscriber identification module (SIM) card interface 295, etc.

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

[0068] For example, electronic device 100 is a laptop computer, and electronic device 100 may not include mobile communication module 250 and SIM card interface 295.

[0069] Processor 210 may include one or more processing units, such as a central processing unit (CPU), an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU). These different processing units may be independent devices or integrated into one or more processors.

[0070] The controller can generate operation control signals based on the instruction opcode and timing signals to complete the control of instruction fetching and execution.

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

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

[0073] The MIPI interface can be used to connect the processor 210 to peripheral devices such as the display screen 294 and the camera 293. The MIPI interface includes a camera serial interface (CSI) and a display serial interface (DSI). In some embodiments, the processor 210 and the camera 293 communicate via the CSI interface to enable the electronic device 100 to capture images. The processor 210 and the display screen 294 communicate via the DSI interface to enable the electronic device 100 to display images.

[0074] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

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

[0076] Display screen 294 is used to display images, videos, etc. Display screen 294 includes a display panel. The display panel can be manufactured using a liquid crystal display (LCD), such as an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a mini-LED, a micro-LED, a micro-OLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, electronic device 100 may include one or N displays 294, where N is a positive integer greater than 1.

[0077] The display method provided in the embodiments of this application will be described in detail below.

[0078] In some embodiments, the interface displayed by the electronic device includes a background image and controls. The controls are positioned on top of the background image. For example, the electronic device displays a desktop, where the background image is the wallpaper, and the controls are icons, folders, cards, and other types of desktop widgets displayed on the wallpaper. Another example is an application interface, where the background image is the application interface background, and the controls are various types of functional controls within the interface. Yet another example is a drop-down control center. Typically, the background of a control center has a blurred, transparent effect, allowing the lower layers of content to be seen. Therefore, the background image of the control center could be, for example, the wallpaper and the blurred background layer of the control center, and the controls could be various function switches or adjustment controls within the control center, such as volume control, brightness control, Bluetooth switch, ringer switch, share switch, etc.

[0079] Optionally, this application embodiment uses a control as an example to describe the display method provided by this application embodiment. In some examples, the control can also be described as a component, object, UI element, etc., wherein the component includes various carrier components that provide services in different forms, such as widgets, service cards, and atomic cards.

[0080] Optionally, the control includes a glass layer. This glass layer mimics the texture and transparency of glass. The light refraction effect is achieved by adjusting the color parameters, position, and transparency of the pixels in the glass layer. Details on how the pixels in the glass layer are processed are provided below. To enhance the sense of depth, subtle light and dark borders are often added to the edges of the glass layer to simulate light refraction at the glass edges, supplemented by soft shadows to highlight the floating layers of the elements. This design not only creates a deep visual hierarchy, clearly separating foreground elements from background content, but also allows users to subtly perceive blurred background information, effectively maintaining the contextual continuity of operations, avoiding the sense of disorientation caused by interface transitions, and enhancing the depth and layering of the control. It is often used to display background content without interfering with foreground elements. Optionally, the control may also include an icon layer above the glass layer. The icon layer displays foreground elements such as function buttons and application icons, which typically need to be clearly visible and easily identifiable.

[0081] Optionally, the glass layer is located at the bottom of the control. The glass layer can also be described as a transparent layer, a first layer, etc., and can present a glass effect, such as a semi-transparent effect. It should be noted that in specific implementations, the glass layer can be partially transparent, or it can be opaque but visually appear partially transparent. Optionally, the icon layer is located above the glass layer. For example, a folder control is displayed on the desktop, and the entire display area of ​​the folder control is covered by a glass layer. Above this glass layer is an icon layer, which is used to display at least two icon controls included in the folder. In this way, the display area of ​​the folder control not covered by the icon controls can see the display effect of the glass layer, presenting the user with the effect of seeing the desktop wallpaper through the folder control. As another example, an icon control is displayed on the desktop, and the entire display area of ​​the icon control is covered by a glass layer. Above this glass layer is an icon layer, which is used to display text, patterns, and other elements on the icon control. The display area of ​​the icon control not covered by these elements can, through the display effect of the glass layer, present the user with the effect of seeing the desktop wallpaper through the icon control. In practice, it can be either a real view of the desktop wallpaper through the glass layer, or image processing of the glass layer to create the visual effect of seeing the desktop wallpaper through the glass layer.

[0082] For example, such as Figure 3 As shown, the interface of the electronic device displays multiple controls. The background image is at the bottom layer, and multiple control layers, such as Control 1 and Control 2, are located above the background image. Each control includes an icon layer and a glass layer, with the icon layer located above the glass layer.

[0083] The previous section introduced the layer structure of the interface; the following section will provide a detailed explanation of the process by which the controls are displayed.

[0084] In some embodiments, the control includes a glass layer, which can increase the sense of depth and layering in the control display. However, the display effect is relatively simple. To address this, electronic devices can adjust the glass layer in the control to simulate the effect of glass refraction. In this way, the control can present light and shadow effects, improving the user's viewing experience.

[0085] In some examples, when an electronic device displays controls, a portion of the background image displayed by the device may be covered by the controls. The portion of the background image covered by the controls is described as the target background image.

[0086] In some examples, the display effect of the glass layer in the control is adjusted relative to the target background image. This allows the electronic device to present the lighting and shadow effects of the control relative to the target background image when displaying it.

[0087] For example, such as Figure 1 As shown, a folder control 12 is displayed on the desktop of the electronic device. The display of the folder control 12 covers part of the display area of ​​the desktop wallpaper, and the content displayed in this part of the display area can be called the target background image. Therefore, after adjusting the glass layer of the folder control 12, the electronic device can make the folder control 12 present corresponding lighting and shadow effects, such as... Figure 17 The folder control 12 shown in (a) is shown in the middle.

[0088] In some embodiments, the electronic device may first acquire a background image, then perform a screenshot on the background image to obtain a screenshot image. In some examples, the electronic device crops the screenshot image based on the relative position of the control and the background image to obtain an image to be processed, which is the same as the target background image covered by the control. The electronic device can then process the image to be processed and set the processed image as the glass layer of the control.

[0089] In other examples, the electronic device can directly use a screenshot as the image to be processed. The electronic device can then process the image. After processing, the electronic device also needs to crop the processed image. The cropping position can be determined based on the display position of the control on the background image, and the cropping area can be determined based on the area of ​​the control. The electronic device then sets the cropped image as the control's glass layer.

[0090] For example, after taking a screenshot of a background image, an electronic device can first crop the screenshot before processing it to obtain the glass layer of the control; alternatively, it can first process the screenshot and then crop it to obtain the glass layer of the control. Optionally, before obtaining the glass layer of the control, the electronic device can also adjust parameters such as transparency of the processed screenshot image (which may be cropped or uncropped) to obtain a glass layer with better display effect.

[0091] For example, after acquiring the image to be processed, the electronic device performs blurring algorithm processing, noise perturbation processing, and brightening / darkening algorithm processing on the image to be processed to obtain a glass layer.

[0092] The following section uses a screenshot (uncropped) as an example to describe the image processing procedure. The process of processing the cropped screenshot can be found in the embodiments described below, and will not be repeated here.

[0093] In some embodiments, the electronic device can move pixels in the image to be processed. This causes a discrepancy between the positions of the pixels in the glass layer of the control and the corresponding pixels in the target background image when the processed image is subsequently used as a glass layer for the control, creating a light refraction effect for the user. Optionally, after moving the pixels of the image to be processed, the electronic device can also overlay them onto the glass layer of the control to create a light refraction effect.

[0094] In some embodiments, an electronic device can process an image to be processed using a perturbation noise map. The perturbation noise map includes multiple black, white, and gray pixels that move over time according to a calculated trajectory. Optionally, the electronic device is equipped with a perturbation noise map algorithm, which can generate a perturbation noise map when adjustments to the image to be processed are required. The perturbation noise map algorithm, for example, is a random function that controls the changes in each pixel of an image including black, white, and gray pixels to obtain the perturbation noise map. The image of black, white, and gray pixels in the perturbation noise map can be randomly generated. Optionally, changes in the perturbation noise map include changes in the grayscale values ​​of the pixels. These changes may cause black pixels to become white pixels, white pixels to become black pixels, and grayscale values ​​of gray pixels to change. Optionally, changes in the perturbation noise map may also include changes in the brightness of the pixels.

[0095] It should be understood that a perturbation noise map is used to perturb multiple pixels in the image to be processed, thereby moving the positions of multiple pixels and creating the light refraction effect of the subsequent glass layer. The perturbation noise map is one exemplary processing method; electronic devices can also process images using other types of noise maps. The term "perturbation" does not limit the implementation of the noise map. The following section uses a perturbation noise map as an example to describe the image processing procedure, with details on the implementation methods for moving pixel positions provided below.

[0096] For example, such as Figure 4 (a) Figure 4 As shown in (c), the black, white and gray pixels move over time according to the calculated trajectory, resulting in different perturbation noise maps in different frames.

[0097] In some examples, electronic devices adjust the image to be processed using a single frame of still noise map to simulate the refraction effect of a glass layer. Optionally, this single frame of still noise map can be, for example, the initial frame of a perturbation noise map. Alternatively, the single frame of still noise map can also be any frame of a perturbation noise map. For example, the perturbation noise map can be understood as a video, and the still noise map can be a frame of an image from that video.

[0098] For example, the still noise diagram is as follows Figure 4 (a) Figure 4 The perturbation noise map of any frame shown in (c).

[0099] In some examples, the adjustments to the image being processed may involve adjusting the color parameters of the pixels in the image. These color parameters may be, for example, the RGB values ​​of the pixels, and adjusting these color parameters can change the display effect of the pixel.

[0100] Optionally, in display technology, the quality of the interface display directly affects the user experience. Screen resolution is an important indicator of display clarity, determining the level of detail of elements in the interface. The higher the resolution, the more detailed the content the screen can display. Behind this are two key concepts: physical pixels and image pixels. A physical pixel is the smallest actual unit on a display. Each physical pixel consists of small units of red, green, and blue colors, which combine to display different colors. The higher the screen resolution, the more physical pixels there are, and the clearer the images and text are displayed. An image pixel is the smallest unit used in image processing or interface design to represent information such as color in an image. Image pixels and physical pixels can have a one-to-one correspondence, or they may not. On high-resolution displays (such as Retina displays), one image pixel may map to multiple physical pixels, resulting in a more detailed display effect.

[0101] Optionally, the electronic device can move pixels in the image to be processed based on the perturbation noise map to achieve the glass refraction effect of the subsequent glass layer. For example, moving image pixel 1 3 pixels to the right can be understood as follows: before the movement, image pixel 1 corresponds to physical pixel 1; after the movement, it corresponds to physical pixel 4. Physical pixel 4 is the third pixel to the right of physical pixel 1. Adjusting the color of physical pixel 4 to match the original color of physical pixel 1 achieves the effect of moving image pixel 1 3 pixels to the right. The following text will directly describe the pixel movement without further explanation of the implementation process.

[0102] In some embodiments, the electronic device moves pixels in the image to be processed by using the grayscale values ​​of black, white, and gray pixels in the static noise map. Optionally, the area of ​​the static noise map is the same as the area of ​​the image to be processed, wherein the pixels in the static noise map correspond one-to-one with the pixels in the image to be processed, so that the color parameters of the corresponding pixels in the image to be processed can be adjusted subsequently based on the color parameters of the pixels in the static noise map.

[0103] Optionally, after capturing a screenshot of the background image, the electronic device obtains an image to be processed, where the color parameters of the pixels in the image to be processed are the same as the color parameters of the pixels in the background image. Subsequently, the electronic device moves multiple pixels in the image to be processed and captures a screenshot of the image after the pixel movement, based on the position of the target background image (or the position of the control covering the wallpaper). The final determined color parameters of multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image. Furthermore, because the positions of multiple pixels in the image have been moved, the positions of multiple pixels in the glass layer are different from the corresponding positions of pixels in the target background image. In this way, the control can present a refracted light and shadow effect based on the glass layer during display. Optionally, the electronic device can also first crop the screenshot image and then perform the pixel movement processing, thereby achieving a difference in the positions of multiple pixels in the glass layer from the corresponding positions of pixels in the target background image.

[0104] Optionally, the grayscale value of a pixel in the still noise image is used to control the movement distance of the pixel in the image to be processed. Optionally, the larger the grayscale value of a pixel in the still noise image, the greater the movement distance of the corresponding pixel in the image to be processed; the smaller the grayscale value of a pixel in the still noise image, the smaller the movement distance of the corresponding pixel in the image to be processed. Alternatively, the smaller the grayscale value of a pixel in the still noise image, the greater the movement distance of the corresponding pixel in the image to be processed; the larger the grayscale value of a pixel in the still noise image, the smaller the movement distance of the corresponding pixel in the image to be processed.

[0105] For example, the grayscale value of black, white and gray pixels is defined in the range of [0, 255], where 0 represents pure black and 255 represents pure white. The closer the grayscale value is to 255, the greater the movement distance of the corresponding pixel in the image to be processed; the closer the grayscale value is to 0, the smaller the movement distance of the corresponding pixel in the image to be processed. For example, the pixel in the image to be processed corresponding to a black pixel with a grayscale value of 255 will not move. For instance, when all pixels in a still noise image are pure black (grayscale value of 255), the corresponding pixels in the image to be processed will not move, and the control will not produce the corresponding refraction effect.

[0106] Alternatively, the closer the grayscale value is to 255, the smaller the movement distance of the corresponding pixel in the image to be processed; the closer the grayscale value is to 0, the larger the movement distance of the corresponding pixel in the image to be processed.

[0107] The grayscale values ​​in the range [0, 255] can refer to the 0-255 color gradation model. In other models, the grayscale values ​​can also be normalized to other values, such as [0, 100], where 0 represents pure white and 100 represents pure black, or 0 represents pure black and 100 represents pure white. This application does not limit the specific range of grayscale values.

[0108] In some embodiments, the electronic device can move pixels in the image to be processed using the three methods described below. For example, the electronic device can obtain the movement distance of pixels in the image to be processed using the following methods.

[0109] Option 1: The electronic device determines the movement distance of the corresponding pixel in the image to be processed based on the mapping relationship between grayscale values ​​and movement distance, according to the grayscale values ​​of pixels in the still noise image. Optionally, the mapping relationship between grayscale value α and movement distance L can be represented by a mapping function L(α), where L(α) can be a continuous function or a discontinuous function. Optionally, the electronic device is pre-configured with a set maximum movement distance. The maximum movement distance can vary depending on the size of the image to be processed.

[0110] Option 2: The electronic device can also determine the z-axis height of the corresponding image pixel in the control based on the grayscale value of the pixel in the still noise image, thus giving the image pixel a logical height. In this case, the entire control can be considered a three-dimensional surface rather than a plane during the calculation process. The coordinates of each pixel displayed by the control include x, y, and z coordinates, and the image pixels are three-dimensional data. Based on this, the entire control can form a 3D surface. This 3D surface may not be a smooth surface, but rather a 3D surface that floats up and down along the z-axis, based on the changes in the grayscale values ​​of different pixels in the still noise image. The electronic device can then obtain the normal direction of each pixel position on this 3D surface. Next, the electronic device obtains the movement distance of the pixel in the image to be processed corresponding to each pixel on the 3D surface based on the offset angle between the normal direction of each pixel position on the 3D surface and a preset direction. Optionally, the preset direction may be, for example, a direction perpendicular to the plane of the screen. Optionally, the electronic device can determine the movement distance of the pixel in the image to be processed based on the offset angle according to a predefined function. For example, the larger the offset angle, the greater the movement distance. In this way, based on the change in z-axis height, the movement of corresponding pixels in the image to be processed can be achieved, enabling more precise control and resulting in better simulation of refraction effects.

[0111] Option 3: Electronic devices can also use real-time simulation to determine the movement and changes of pixels in the image to be processed, thereby achieving a more realistic visual effect.

[0112] In some embodiments, based on the several schemes described in the examples above, the electronic device can determine the moving distance of pixels in the image to be processed. Optionally, the pixels in the image to be processed may also have a corresponding moving direction. In this way, the electronic device moves the pixels in the image to be processed according to the moving distance and moving direction, thereby achieving the refraction effect of the control display.

[0113] Optionally, the movement direction of pixels in the image to be processed can include any one or more of the following: a predefined direction, the direction of the line connecting the pixel to the geometric center point, or a calculated direction. For example, the predefined direction could include moving inwards (e.g., moving closer to the center point of the display area of ​​the image to be processed) along the vertical, horizontal, 45°, or -45° lines of the screen. Another example is when the display area of ​​the image to be processed is divided into a central region and an edge region, where the movement direction of pixels in the central region is a predefined direction, and the movement direction of pixels in the edge region is the direction of the line connecting the pixel to the geometric center point. Yet another example is that in the above scheme of calculating the movement distance based on the z-axis height of image pixels, the electronic device can also determine the movement direction of pixels in the image to be processed based on the determined normal direction; for example, in this scheme, the electronic device can determine the displacement of pixels in the image to be processed.

[0114] Optionally, the movement directions of different pixels in the image to be processed can be the same or different.

[0115] In this way, the electronic device moves the pixels in the image to be processed, causing the pixels in the image to be misaligned. In addition, the glass layer is visually on top of the background image, thus simulating the refraction effect through calculation.

[0116] For example, such as Figure 5 As shown in (a), the electronic device acquires a frame of static perturbation noise image. Furthermore, the electronic device takes a screenshot of the background image to obtain a screenshot image. Then, the electronic device crops the screenshot image to obtain an image to be processed, wherein the cropped image to be processed includes the target background image covered by the control. To facilitate the presentation of subsequent light and shadow refraction effects, the current... Figure 5 The content shown in (a) includes a static disturbance noise graph, currently... Figure 5 The content shown in (b) includes the image to be processed. As shown, this content is a portion of the screenshot image; the area of ​​this portion can be larger than the area of ​​the image to be processed. Similar illustrations will not be described in detail below. Subsequently, the electronic device can move the pixels in the image to be processed based on the still noise map to generate a glass layer. Thus, as shown... Figure 5As shown in (c), the pixels in the glass layer of control 51 are misaligned, giving control 51 a corresponding refraction effect, thereby enriching the light and shadow effects of control 51 and enhancing the user's visual experience. Alternatively, it can also be used with... Figure 5 The perturbation noise pairs shown in Figure (b) are of the same size. Figure 5 In the screenshots in (b), pixel shifting is performed, and then the processed image is captured again to obtain an image of the same size as control 51.

[0117] Among them, such as Figure 5 As shown in (c), to better demonstrate the refraction effect of the control, the icon layer on the current control is also set to a glass layer. In some scenarios, the icon layer includes display elements, which can obscure the background image below. Therefore, the user can actually see the simulated refraction effect through the glass layer that is not obscured by the icon layer.

[0118] In some embodiments, during the calculation of the displacement values ​​of pixels in the image to be processed, the electronic device may also determine whether a pixel needs to be moved based on its color value. For example, the electronic device may first determine the pixels that need to be moved based on their color values ​​in the image to be processed. Then, the electronic device determines the displacement values ​​of these pixels based on their grayscale values ​​in a still noise image, and moves these pixels based on their displacement values. As another example, the electronic device may first determine the displacement values ​​of pixels in the image to be processed based on their grayscale values ​​in a still noise image. And during or after this process, the electronic device determines the pixels that need to be moved based on their color values ​​in the image to be processed. Then, the electronic device moves the pixels that need to be moved according to their determined displacement values.

[0119] Optionally, the color value of a pixel in the image to be processed is determined by the maximum color parameter among the pixel's color parameters. Optionally, the color value of a pixel indicates whether the pixel is a red, green, or blue pixel. Optionally, the color value of a pixel can also be described as the pixel's color type. For example, the electronic device determines the color value of a pixel based on its RGB values ​​in the image to be processed. For example, the largest value among the pixel's R, G, and B values ​​can determine the pixel's color type. For example, the largest R value indicates a red pixel, the largest G value indicates a green pixel, and the largest B value indicates a blue pixel.

[0120] Optionally, after determining the color value, the electronic device can determine whether to move the pixels according to predefined rules. For example, the predefined rules include keeping blue pixels still while moving red and green pixels. Optionally, the maximum displacement values ​​of red and green pixels can be the same or different.

[0121] In this way, by moving and keeping pixels of different color types, color effects can be achieved, thereby simulating the distortion effect of refracted light and further improving the effect of simulated refraction.

[0122] The previous section introduced the static display effect of the control; the following section introduces the dynamic display effect of the control.

[0123] In some embodiments, the electronic device may detect user interaction with the control during the display process. In response to this interaction, the electronic device can dynamically change the lighting and shadow effects (such as refraction effects) of the control to enrich the user's interactive experience.

[0124] Optionally, the interactive operation may be a user's touch operation on the control, such as clicking, long-pressing, or swiping, or it may be an operation to delete, zoom in, or move the control.

[0125] Optionally, the static display effect of a control can be described, for example, as a solid state. In response to user interaction, the dynamic display effect of a control can be described, for example, as a liquid state. Optionally, the electronic device can move pixels in the image to transform the control from a solid state to a liquid state. The simulated change in light refraction allows the user to perceive the liquid change in the glass layer.

[0126] In some embodiments, in response to user interaction, the electronic device can use a dynamic perturbation noise map to move corresponding pixels in the image to be processed. This dynamically changes the position of the pixels in the image to be processed, resulting in a dynamically changing refraction effect.

[0127] Optionally, the static perturbation noise map mentioned above can be a frame from the dynamic perturbation noise map. For example, when an electronic device needs to display a control, it generates a perturbation noise map using a perturbation noise map algorithm, and uses a frame of the static noise map to achieve the display effect of the control's solid form. Subsequently, in response to user interaction, the electronic device acquires other frames from the generated perturbation noise map to achieve the display effect of the control's liquid form.

[0128] For example, as described above, the perturbation noise map includes multiple black and white pixels that can move over time according to a calculated trajectory. Therefore, in response to user interaction, the electronic device no longer moves pixels in the image to be processed based on a single frame of still noise map, but rather moves the corresponding pixels in the image to be processed based on subsequent perturbation noise maps that are continuously "played". Optionally, in response to user interaction, the electronic device can start by perturbating the noise map from the next frame (or other frames) after the still noise map to move the corresponding pixels in the image to be processed.

[0129] Optionally, in response to user interaction, the electronic device can also directly generate a new perturbation noise map using a perturbation noise map generation algorithm, starting from any frame, to move pixels in the corresponding image to be processed. The newly generated perturbation noise map may be the same as or different from the perturbation noise map corresponding to the static noise map. In other words, the static noise map used for refraction simulation in solid state and the perturbation noise map used for refraction simulation in liquid state are different noise maps calculated based on different random functions.

[0130] Optionally, during user interaction with the control, the electronic device displays the control in a liquid state based on a perturbation noise graph.

[0131] Optionally, the method for determining the moving distance and direction of pixels in the image to be processed can refer to the above embodiments, and will not be repeated here. Furthermore, in the various embodiments below, when it is necessary to determine the moving distance and direction of pixels in the image to be processed, the relevant embodiments above can be referred to, and will not be described in detail here.

[0132] Optionally, the electronic device can move the pixels in the image to be processed by passing through the perturbation noise map frame by frame according to the frame rate.

[0133] For example, such as Figure 6 (a) Figure 6 As shown in (c), the disturbance noise graph is a dynamic graph that changes over time. Therefore, as... Figure 6 (d) Figure 6 As shown in (f), the electronic device can move pixels in the image to be processed at corresponding time points according to the time correspondence, using a perturbation noise map. Thus, as... Figure 6 (g) Figure 6 As shown in (i), the control can display dynamic light refraction effects over time. For example, when a user clicks the control, if they hold down the control or drag it, the control can display different light refraction effects over time; or, when a user clicks the control, different light refraction effects can be displayed sequentially. Figure 6 (g) Figure 6 The multiple display effects in (i) present a dynamic light refraction effect.

[0134] In this way, by dynamically changing the noise map, a liquid effect can be achieved on the glass layer. Furthermore, in response to user interaction, the controls begin to change from a solid to a liquid state, enhancing the user's interactive experience. In some embodiments, during the process of displaying a solid-state control, the electronic device may also change the solid-state control into a liquid-state control according to a preset scenario, and the duration of the change may be, for example, a preset time.

[0135] Optionally, preset scenarios include, for example, when the control is initially displayed, when the user instructs the user to switch to the interface displaying the control, or when the user is looking at the control or the interface containing the control. In this way, the electronic device can dynamically display the control's reflection effect when the user is likely to focus on it, enhancing the user's visual experience.

[0136] In some embodiments, in response to user interaction, the electronic device may also generate a collision force black-and-white image. The collision force black-and-white image comprises a graph of black and white pixels, the positions of which can vary. Optionally, the changes in the pixels in the collision force black-and-white image are used to correspond to user control controls; for example, changes in pixels can respond to the movement trajectory and force of the interaction. Optionally, the electronic device can treat the collision force of the touch point on the control as a constant value, and then obtain the collision force black-and-white image based on this constant value according to a preset or random formula. Optionally, if the electronic device supports screen pressure detection, it can also generate a collision force black-and-white image based on real-time detected collision force. Optionally, different touch gestures produce different collision force black-and-white images; even the same gesture with different touch positions and trajectories can produce different collision force black-and-white images.

[0137] Optionally, the collision force black-and-white graph is a dynamic graph that changes over time.

[0138] For example, such as Figure 7 (a) Figure 7 As shown in (c), in response to a user's touch operation on a control, the collision force black-and-white image generated by the electronic device is a dynamic image that changes over time. This touch operation can be, for example, a single click, double click, or long press at a specific location on the interface. Alternatively, the touch operation can be a drag operation on the interface; in the case of a drag operation, the location corresponding to the collision force black-and-white image can be the position where the drag operation leaves the interface or the position where the interface element is dragged to.

[0139] In some embodiments, the area of ​​the collision force black-and-white image is the same as the area of ​​the perturbation noise image. After generating the collision force black-and-white image, the electronic device can superimpose the perturbation noise image and the collision force black-and-white image, recalculate the grayscale value of each pixel, and generate a corresponding interactive black-and-white image. Then, the electronic device can determine the displacement value of a pixel in the image to be processed based on the grayscale value of the pixel in the interactive black-and-white image, and thus move the pixel in the image to be processed based on that displacement value.

[0140] Optionally, during the overlay process, the electronic device can blend the grayscale values ​​of each pixel in the disturbance noise map and the collision force black-and-white map (e.g., α-blending), and the resulting α value of the pixel is the new grayscale value. The coefficients in the blending formula can be predefined by the electronic device.

[0141] Optionally, the electronic device can superimpose the perturbation noise map and the collision force black-and-white map frame by frame. For example, the electronic device can treat the first frame of both the perturbation noise map and the first frame of the collision force black-and-white map as having a time of 0, and then determine the corresponding frames of the static noise map and static collision force black-and-white map to be superimposed according to the temporal correspondence. Alternatively, the electronic device can perform staggered superposition. For example, the electronic device can play the collision force black-and-white map ahead or behind by a preset time, and then superimpose it with the perturbation noise map. In this way, the determination of the superimposed static noise map and static collision force black-and-white map is staggered superposition, and the superimposed static noise map and static collision force black-and-white map can be determined according to the temporal correspondence. Furthermore, the electronic device can also randomly superimpose the perturbation noise map and the collision force black-and-white map.

[0142] Alternatively, the electronic device can also move the positions of pixels in the image to be processed using the perturbation noise map and the collision force black-and-white map, respectively. For example, the electronic device does not need to overlay the perturbation noise map and the collision force black-and-white map in advance.

[0143] Optionally, during user interaction with the control, the electronic device displays the control in a liquid state based on a perturbation noise map and a collision force black-and-white map.

[0144] For example, such as Figure 8 (a) Figure 8 As shown in (c), the electronic device superimposes a time-varying disturbance noise map and a collision force black-and-white map to generate an interactive black-and-white map. Then, as time changes, as... Figure 8 (d) Figure 8 As shown in (f), the electronic device can move pixels in the image to be processed at corresponding time points according to a time correspondence using an interactive black-and-white image. Thus, as... Figure 8 (g) Figure 8 As shown in (i), the control can present a dynamic light refraction effect as time changes, and this light refraction effect can also respond to the user's interactive operation to achieve a responsive effect.

[0145] In this way, by superimposing the perturbation noise map and the collision force black and white map, it is possible to simulate the visual effect after touching a liquid medium, thereby enhancing the spatial sense and immersion of the control.

[0146] In some embodiments, in response to user interaction, the electronic device can also display particle effects of controls via an interactive particle layer. The interactive particle layer is a layer comprising black and white pixels. The aggregation of white pixels in the interactive particle layer creates a particle display effect, while the movement of the aggregated white pixels creates a particle movement effect. Optionally, the particle movement effect enables interaction with user actions.

[0147] For example, in response to user interaction, electronic devices can display particle movement effects through particle layers, thereby enhancing the user's interactive experience by enabling interaction between the particles and the user's actions.

[0148] For example, such as Figure 9 (a) Figure 9 As shown in (c), the interactive particle layer can display multiple discrete areas of white pixels by adjusting the transparency of the pixels, thus visually presenting a particle effect. Optionally, this interactive particle layer is a dynamic image that changes with user interaction.

[0149] Optionally, the interactive particle layer is located on top of the control. This allows for particle animation effects on the control's surface to be achieved by varying the opacity of pixels within the interactive particle layer.

[0150] For example, such as Figure 10 As shown, the control also includes an interactive particle layer. This interactive particle layer is positioned above the other layers included in the control. For example, the layers in control 1, from top to bottom, may include an interactive particle layer, an icon layer, and a glass layer.

[0151] Optionally, the interactive particle layer can also be located below other layers. For example, the interactive particle layer can also be located below the glass layer. Optionally, when the interactive particle layer is located below the glass layer, based on the descriptions of the various embodiments above, the electronic device can also move the corresponding pixels in the interactive particle layer while moving the pixels in the image to be processed. In this way, the glass layer can subsequently present the corresponding light refraction effect.

[0152] Optionally, the interactive particle layer is a grayscale image. Optionally, the electronic device can use a random algorithm to determine the location of the particle from multiple random pixels on the interactive particle layer, and control the transparency of the pixels at that location to be <100%, while the transparency of other locations is 100%. This allows the pixel to be a particle that the user can observe. Optionally, since a single pixel is difficult for a user to visually observe, the electronic device can group multiple pixels in close proximity into a pixel cluster and adjust their transparency together. In this way, by adjusting the transparency of the pixel cluster at the particle's location to <100%, the electronic device can present particles of different sizes that the user can observe at that location.

[0153] Optionally, in response to a user's interaction, the electronic device determines a particle area based on the touch position, randomly selects multiple pixels and / or pixel clusters within the particle area, and adjusts the transparency of these pixels and / or pixel clusters to display multiple particles within the particle area. Optionally, the particle area can be the entire area of ​​the interactive particle layer or a partial area. For example, the electronic device obtains a circle with a preset radius centered on the touch point based on the touch position, and uses the intersection of this circle and the control's border as the particle area.

[0154] In some embodiments, the electronic device displays an interactive particle layer in response to a user's interaction; after the interaction ends, the electronic device no longer displays the interactive particle layer. Optionally, the electronic device may also continuously display the interactive particle layer. If no interaction is detected, the electronic device adjusts the transparency of all pixels in the interactive particle layer to 100%; after the electronic device detects an interaction, it adjusts the transparency of the corresponding pixels and / or pixel clusters according to the touch position to achieve particle display.

[0155] In some embodiments, the electronic device can combine a collision force black-and-white image to move pixels in the interactive particle layer, thereby matching the particle display effect with the user's interactive operation. Optionally, based on the relevant content about pixels in the image to be processed described above, the electronic device can also determine the displacement value of pixels in the interactive particle layer based on the grayscale value of pixels in the collision force black-and-white image; for specific implementation methods, please refer to the relevant content above.

[0156] Optionally, when the display of particles requires adjusting multiple pixels to form a pixel cluster, the electronic device can first calculate the average grayscale value of the corresponding multiple pixels in the collision force black-and-white image. Then, based on this average grayscale value, the electronic device determines the displacement value of the pixel cluster. For example, multiple pixels in the pixel cluster may move the same distance and in the same direction. Optionally, in addition to the average value calculation method, the electronic device can also determine the required grayscale value using methods such as the median calculation method.

[0157] For example, the electronic device detects the user's operation on the control surface, such as Figure 11 (a) Figure 11 As shown in (c), the electronic device acquires the corresponding black-and-white image of the collision force. The control is, for example, a folder control (such as a large folder on the desktop), and the operation is, for example, the user moving an icon control displayed on the desktop onto the folder control (dragging an icon into the large folder). In some embodiments, the large folder may include multiple application icons, and the user can drag icons into or out of the large folder. Alternatively, the control is a card control, and the operation is, for example, the user clicking on the card control. Or, the control is, as shown in (c)... Figure 16A The flashlight control 163 shown is used for example, by clicking on the flashlight control 163 (in this scenario, Figure 11 (g) Figure 11 (The control shown in (i) does not show the contents of the icon layer). Optionally, depending on the different operation types, the location of the touch point, the pressure applied, etc., the electronic device can obtain the corresponding black-and-white force collision map. For example... Figure 11 (d) Figure 11 As shown in (f), the electronic device adjusts the transparency of corresponding pixels or clusters of pixels in the interactive particle layer according to the collision force black-and-white image, in chronological order. Thus, as... Figure 11 (g) Figure 11 As shown in (i), in chronological order, the control surfaces presented by the electronic device can display dynamic particle movement effects based on the operation position, thereby enhancing the user's interactive experience. It should be understood that... Figure 11 (a) Figure 11 (c) is used to illustrate the change in the touch area of ​​the control surface corresponding to the black and white collision force image, such as... Figure 11 (d) Figure 11 The 'f' option is used to illustrate changes in particles and does not restrict the location of operations on the control. For example, as... Figure 16A As shown, in response to a user's click on the flashlight control 163, particles can exhibit an animation effect that spreads outward from the clicked position on the flashlight control 163. Furthermore, the particles can spread to cover the entire surface of the flashlight control 163. Based on different click positions, the starting position of the particle diffusion varies, resulting in different particle diffusion effects and providing a more realistic interactive experience for the user. For example, when clicking a control, different touch positions will produce different particle diffusion effects; furthermore, the particle diffusion will show a diffusion from the touch position outwards in all directions or in a specific direction. Alternatively, when dragging icons into a large folder, placing the dragged icons in different positions will produce different particle effects.

[0158] Optionally, after the particles are presented, the electronic device can also respond to touch operations that move on the control to migrate the particles, which is manifested as the movement of the particles on the control.

[0159] In some embodiments, the interactive operations described above can be applied to a single control or multiple controls. When the interactive operation applies to multiple controls, the method for adjusting the display effect of each control can refer to the method for adjusting the display effect of a single control, and will not be exemplified one by one.

[0160] In some embodiments, the light refraction effect and particle interaction effect described above can be combined to achieve the desired effect.

[0161] For example, when there is no interactive operation, the controls displayed on the electronic device's interface have a solid glass effect. Subsequently, the electronic device detects user interaction on the control surface. Then, as... Figure 11 (g) Figure 11 As shown in (i), in response to this operation, the electronic device can move pixels in the image to be processed by perturbing the noise map and the collision force black-and-white map to simulate the refraction effect of the control. Furthermore, the electronic device can also realize particle movement animation on the surface of the control by using the collision force black-and-white map and the particle interaction layer.

[0162] In this way, when a user triggers an interactive event such as clicking or dragging on a control, the electronic device will generate a single interactive light refraction effect and collision force at the interaction location (such as a circular diffusion of black and white particles). Ripples of control refraction will then spread outward from the interaction location, revealing previously hidden particles and causing outward displacement diffusion centered on the location of the force (corresponding to the force in the collision force black and white image). For example, as... Figures 12A-12C As shown, during the display of the dial pad interface, in response to the user's click on the dial control, the electronic device can control the dial control to display particle diffusion and material ripple effects. However, to enhance the display effect, the particle diffusion effect is not limited to the control currently interacting with by the user. For example, as... Figure 12A As shown, when a user clicks the number 5 control, the particle diffusion effect expands to the nearby number 2, number 4, number 6, and number 8 controls. For example, as... Figure 12B As shown, when a user clicks the number 6 control, the particle diffusion effect expands to the number 2, number 3, number 5, number 8, and number 9 controls nearby. For example, as... Figure 12CAs shown, when a user clicks the number 8 control, the particle diffusion effect expands to the nearby number 5, number 6, number 9, and number 0 controls. This enriches the user's visual experience. For example, the size of the interactive particle layer can be larger than the size of the control currently interacting with. Alternatively, the entire lock screen button area can be considered a control area; for instance, the dial pad control can be viewed as a large control, and the numbers 0-9 can be considered display elements within the icon layer of that dial pad control, where each number can be treated as a smaller number control.

[0163] For example, such as Figure 13 (a) Figure 13 As shown in (d), the electronic device detects a long press operation by the user on the control. In response to this long press, the electronic device adjusts the pixels of the image to be processed based on the perturbation noise map and the collision force black-and-white map, and also adjusts the pixels in the interactive particle layer based on the collision force black-and-white map. This achieves a continuous interactive highlight effect and a single collision force (such as a circular diffusion of black-and-white particles) at the long press location, and generates material refraction ripples spreading outward from the long press location. The originally hidden particles will continue to be displayed as the long press continues, and will generate a single outward displacement diffusion centered on the location of the initial contact force. Subsequently, when the user lifts their hand, the long press operation ends, and a force is applied to the control material again, generating perturbation ripples.

[0164] As another example, the electronic device detects a user's swipe gesture on a control, and responds to a change in the touch position on the control in response to the swipe gesture, such as... Figure 14 (a) Figure 14 As shown in (d), the electronic device can generate a corresponding black-and-white image of the collision force. Then, based on this black-and-white image of the collision force, as... Figure 15 (a) Figure 15 As shown in (d), the electronic device can generate a continuous interactive highlight effect and a continuous impact force at the touch location, and produce material refraction ripples spreading outward from the touch location. Furthermore, particles that were originally hidden on the control will continuously appear as the swipe operation continues, generating one or more outward displacement diffusions centered on the location of the continuous intermittent force. The force generated by the touch operation is intermittently generated as the displacement rate at the touch location changes. For example, when the rate exceeds a threshold n, a force is generated every m time intervals. For example, as... Figure 16A As shown, during the process of displaying the pull-down control center on the electronic device, the volume adjustment control 161 can display light and shadow effects. The electronic device detects the user's long press and slide operation on the volume adjustment control 161, and determines that the user has instructed to increase the volume. Therefore, as... Figures 16B-16CAs shown, in response to the long-press and slide operation, the electronic device can adjust the corresponding pixels in the image to be processed based on the perturbation noise map and the collision force black-and-white map, and adjust the pixels in the interactive particle layer based on the collision force black-and-white map. This achieves a continuous interactive highlight effect and continuous collision force at the interactive position, and the control will generate directional liquid-like perturbation ripples due to the force. The particles that were originally hidden by the control will continue to be displayed with the long-press and slide event and will be displaced and diffused. For example, the particles will move their display positions accordingly as the long-press and slide operation on the control surface changes, thereby achieving a responsive effect. It should be noted that... Figure 15 The effect shown can also be seen when other controls are dragged into this control. For example, dragging an application icon into a large folder can display different effects depending on the touch position of the dragged application icon.

[0165] Optionally, the control also includes an element layer for displaying elements within the control. Both the icon layer and the element layer are located above or below the interactive particle layer, and the display of the element layer changes based on user interactions with the control.

[0166] For example, such as Figures 16B-16C In the volume change scenario shown, the element layer displays a white volume bar. The length of this white volume bar changes to explicitly inform the user that the current device volume is increasing or decreasing. The display size of the volume adjustment control 161 is generally fixed, while the length of the volume bar it includes can vary. For example, as the user long-presses and slides on the volume adjustment control 161, the volume bar increases, and the device volume increases accordingly.

[0167] In some embodiments, the electronic device can also move the display position of the control based on user interaction. As the control's display position changes, the target background image overlaid by the control on the background image also changes accordingly. During the control's movement, the electronic device can also adjust the positions of pixels in the image to be processed corresponding to the changing target background image using a perturbation noise map. Thus, the control can also exhibit a corresponding light refraction effect during its movement.

[0168] Optionally, if the electronic device determines that the control has moved a distance exceeding a preset distance, it begins to adjust the pixels in the image to be processed.

[0169] Optionally, during the movement of the control described above, the process by which the electronic device adjusts the pixels in the image to be processed based on the perturbation noise map can refer to the various embodiments described above.

[0170] In some examples, the electronic device can use the perturbation noise map, according to a temporal correspondence, to adjust the pixel displacement in the image to be processed. For example, the electronic device can "play" the perturbation noise map from the start of the displacement and, according to the temporal sequence, determine the still noise map used to perform the pixel displacement adjustment until the movement stops. Then, when the still noise map is obtained, the electronic device can determine the image to be processed corresponding to the target background image currently covered by the control, and thus adjust the displacement of the corresponding pixels in the image to be processed using the currently determined still noise map. Optionally, if the control movement duration is longer than the "playback" duration of the generated perturbation noise map, the electronic device can "play" the perturbation noise map cyclically to meet the adjustment needs of the image to be processed during control movement. In other examples, the electronic device can also determine the still noise map of the image to be processed within different movement distance ranges based on the movement distance of the control. For example, when the control starts to move, the electronic device acquires a frame of target perturbation noise map, and adjusts the displacement of the corresponding pixels in the image to be processed using this target perturbation noise map as long as the movement distance of the control does not exceed x pixels. Subsequently, when the movement distance of the control exceeds x, the electronic device can acquire the next frame of target perturbation noise map of the currently used target perturbation noise map, and adjust the displacement of the corresponding pixels in the image to be processed using the newly acquired target perturbation noise map as long as the movement distance is within the range of x-2x. By repeating the above steps, the control can achieve a corresponding refraction effect during the movement of the control. Optionally, the electronic device can also adjust the displacement of the corresponding pixels in the image to be processed using the corresponding target perturbation noise map only at the beginning position of the corresponding displacement range and at the final position of the control movement, thereby reducing power consumption.

[0171] For example, such as Figure 17 (a) Figure 17 As shown in (c), during the display of the folder control, the electronic device detects a user's long press and movement of the folder control. In response to this operation, the electronic device can adjust the displacement of pixels in the image to be processed using any of the methods described above, thereby achieving the refraction effect of the folder control. It can be seen that the image to be processed also changes as the folder control moves.

[0172] Alternatively, to reduce computational power consumption, the electronic device may not need to move the pixels in the image to be processed frame by frame during control movement. For example, the electronic device may reduce the frequency of adjusting the displacement of the pixels in the image to be processed based on factors such as a preset period and the control movement speed. Alternatively, the electronic device may only adjust the displacement of the pixels in the two images corresponding to the start and end positions of the control displacement at the beginning and end of the displacement, respectively.

[0173] In this way, as the control moves, the electronic device can also simulate the changes in light refraction effect of the control by moving the pixels in the image to be processed.

[0174] In some embodiments, the electronic device can adjust the size of the control based on user interaction. As the control size changes, the area of ​​the target background image covered by the control also changes. During this movement, the electronic device can also adjust the positions of pixels in the image to be processed corresponding to the changing target background image using a perturbation noise map. Thus, the control can also exhibit a corresponding light refraction effect during the size change.

[0175] Optionally, if the electronic device determines that the change in the size of the control exceeds a preset range, it begins to adjust the pixels in the image to be processed.

[0176] Optionally, during the aforementioned control size change process, the electronic device's adjustment process for pixels in the image to be processed based on the perturbation noise map can refer to the various embodiments described above.

[0177] In some examples, the electronic device can use a perturbation noise map, arranged in a temporal sequence, to adjust the pixel displacement in the image to be processed. For instance, the electronic device can "play" the perturbation noise map starting from the moment the size change begins, and determine a still noise map for pixel displacement adjustment according to the temporal sequence, until the movement stops. Upon obtaining the still noise map, the electronic device can determine the image to be processed corresponding to the target background image currently covered by the control, and thus adjust the pixel displacement in the corresponding image to be processed using the currently determined still noise map. Optionally, if the duration of the control size change is longer than the "play" duration of the generated perturbation noise map, the electronic device can loop the "play" of the perturbation noise map to meet the adjustment needs of the image to be processed during the control size change process. In other examples, the electronic device can also determine the range of size change amplitudes within which to adjust the still noise map of the image to be processed within which to adjust the control. For example, when the control begins to change size, the electronic device acquires a frame of target perturbation noise map, and adjusts the displacement of the corresponding pixels in the image to be processed using this target perturbation noise map as long as the size change amplitude does not exceed amplitude threshold 1. Subsequently, when the size change amplitude exceeds amplitude threshold 1, the electronic device can acquire the next frame of target perturbation noise map of the currently used target perturbation noise map, and adjust the displacement of the corresponding pixels in the image to be processed using the newly acquired target perturbation noise map as long as the size change amplitude does not exceed threshold amplitude 2. By repeating the above steps, the control can exhibit a corresponding refraction effect during the size change process. Optionally, the electronic device can also adjust the displacement of the corresponding pixels in the image to be processed using the corresponding target perturbation noise map only at the beginning of the corresponding amplitude threshold range and at the end of the size change of the control, thereby reducing power consumption.

[0178] For example, such as Figure 18 (a) Figure 18 As shown in (c), during the display of the folder control, the electronic device detects a user's long press and adjustment of the folder control's size. In response to this operation, the electronic device can adjust the displacement of pixels in the image to be processed using any of the methods described above, thereby achieving the refraction effect of the folder control. It can be seen that the image to be processed also changes as the folder control's size changes.

[0179] Alternatively, to reduce computational power consumption, the electronic device may not need to move the pixels in the image to be processed frame by frame during control size changes. For example, the electronic device may reduce the frequency of adjusting the displacement of pixels in the image to be processed based on factors such as a preset period and the speed of control size changes. Alternatively, the electronic device may only adjust the displacement of pixels in the corresponding two images to be processed at the beginning and end of the size change.

[0180] In this way, as the size of the control changes, the electronic device can also simulate the change in the light refraction effect of the control by moving the pixels in the image to be processed.

[0181] The preceding text introduced the implementation process of achieving light refraction effects for controls using perturbation noise maps and particle interaction effects using interactive particle layers. It should be understood that a control can achieve one of these effects independently, or it can achieve a combination of both. That is, the implementation of the two effects is not strongly coupled. For example, an electronic device can achieve light refraction effects for controls based on perturbation noise maps. As another example, an electronic device can achieve particle interaction effects for controls based on interactive particle layers. Yet another example is that an electronic device can combine perturbation noise maps and interactive particle layers to achieve both light refraction and particle interaction effects for controls simultaneously.

[0182] In some embodiments, the electronic device determines, based on user interaction, that the user has instructed to delete or hide a control. The electronic device can then distort the noise graph to transform the control from a solid state to a gaseous state, thereby achieving the final disappearance of the control.

[0183] It should be understood that distorted noise maps are used to distort multiple pixels of a control, thereby shifting the position of multiple pixels and achieving a display effect where the distortion of the control disappears. Distorted noise maps are just one example of a processing method; electronic devices can also process controls using other types of noise maps. The term "distortion" does not limit the implementation of the noise map. The following section uses distorted noise maps as an example to describe the control processing procedure.

[0184] Optionally, the electronic device adjusts the displacement of pixels in the control by distorting the noise map, thereby achieving the distortion and disappearance animation effect of the control. Specifically, the electronic device can adjust the displacement of pixels in the icon layer of the control, or adjust the displacement of pixels in both the icon layer and the glass layer of the control, based on the distorted noise map.

[0185] Optionally, the distorted noise map is an image comprising multiple black, white, and gray pixels, where these pixels can move over time according to a calculated trajectory. Optionally, unlike the perturbation noise map, in the final stage, the color parameters of all pixels in the distorted noise map are adjusted to the RGB value corresponding to white. Thus, the final distorted noise map only includes white pixels. For example, the grayscale value of all pixels in the distorted noise map gradually decreases, eventually becoming white. The whitening process (e.g., speed) of different pixels in the distorted noise map can be inconsistent.

[0186] Optionally, the electronic device is equipped with a distortion noise map algorithm. When adjustments to the control are required, the electronic device can generate a distortion noise map using this algorithm. The distortion noise map algorithm, for example, is a random function capable of controlling the changes in black, white, and gray pixels on an image containing only black, white, and gray pixels, thereby obtaining the distortion noise map. The black, white, and gray pixel image in the distortion noise map can be randomly generated. Optionally, the changes in the distortion noise map include changes in the grayscale of pixels, which may cause black pixels to become white pixels and white pixels to become black pixels.

[0187] For example, such as Figure 19 (a) Figure 19 As shown in (d), the black, white and gray pixels move over time according to the calculated trajectory, resulting in different distortion noise maps in different frames, and the final distortion noise map changes into a pure white image.

[0188] Optionally, the grayscale value of a pixel in the distortion noise image is used to control the movement distance of a pixel in the control. Optionally, the larger the grayscale value of a pixel in the distortion noise image, the smaller the movement distance of the corresponding pixel in the control; the smaller the grayscale value of a pixel in the distortion noise image, the larger the movement distance of the corresponding pixel in the control. For example, when a pixel in the distortion noise image is white, the corresponding pixel in the control moves a larger distance; when a pixel in the distortion noise image is black, the corresponding pixel in the control does not move. Alternatively, the larger the grayscale value of a pixel in the distortion noise image, the larger the movement distance of the corresponding pixel in the control; the smaller the grayscale value of a pixel in the distortion noise image, the smaller the movement distance of the corresponding pixel in the control.

[0189] Optionally, the area of ​​the distorted noise graph is the same as the area of ​​the control.

[0190] Optionally, the specific implementation method for determining the moving distance and direction of pixels in the control based on the gray values ​​of pixels in the distorted noise map can refer to the implementation method for determining the moving distance and direction of pixels in the image to be processed based on the gray values ​​of pixels in the distorted noise map above, which will not be repeated here.

[0191] In some embodiments, in response to a user's instruction to delete or hide a control, the electronic device may also adjust the blur value of pixels in the control based on the grayscale value of the distorted noise map, thereby presenting a more realistic light refraction effect to the user.

[0192] Optionally, during the blur value adjustment process, the blur value and the grayscale value have an inverse mapping relationship. For example, if the grayscale value of the distorted noise image is 100 (such as a black pixel), the blur value of the corresponding pixel in the control is 0; if the grayscale value of the distorted noise image is 0 (such as a white pixel), the blur value of the corresponding pixel in the control is 100.

[0193] Optionally, the blur value is typically used to indicate the amplification of the color displayed by a physical pixel, so that the corresponding image pixel covers more physical pixels. For example, when the blur value of an image pixel is 1, a physical pixel displays a blue image pixel; if the blur value of the image pixel is adjusted to 2, the display area of ​​the image pixel is expanded, not only displaying on the original physical pixel, but also displaying on the 8 pixels adjacent to the original physical pixel.

[0194] Optionally, the blur value is used to indicate that an image pixel occupies more of its adjacent physical pixels to display the same color, while the adjacent physical pixels themselves have a display color. Therefore, if the adjacent image pixels do not move, the change in the blur value will interfere with the color display of the adjacent physical pixels, causing the actual color displayed by the adjacent physical pixels to no longer be the original color displayed in the image, but rather the color resulting from the superposition of the original display color and the color of the interfering image pixels.

[0195] For example, such as Figure 20 As shown in (a), the control includes 9 image pixels. The color of each physical pixel is displayed to indicate its corresponding color. For simplicity, a grayscale value of 1 corresponds to a dark gray physical pixel, and a grayscale value of 9 corresponds to a pure white physical pixel. For example, the blur value of the dark gray image pixel in the middle is 1, as shown... Figure 20 As shown in (b), when the blur value of the middle image pixel is adjusted to 2, the dark gray will expand to display over 8 adjacent physical pixels, occupying 9 physical pixels for display. If the grayscale value of the corresponding pixel in the distortion noise image is 100 (e.g., pure black), then, based on the mapping relationship between grayscale value and movement distance described above, the displacement value of these 8 adjacent image pixels is 0. Therefore, the actual display color of these 8 adjacent physical pixels is a light gray resulting from the superposition of dark gray and white. If the image pixel corresponding to these 8 adjacent physical pixels has a displacement value, and no other image pixels cover it after movement, these 8 adjacent physical pixels display dark gray. If other image pixels cover the adjacent physical pixels after movement, the dark gray can be superimposed with the display color covering the other image pixels.

[0196] Thus, color interference based on blur values ​​can further enhance the simulated visual effects, such as visually accelerating the disappearance of controls through blurring, thereby enhancing the user's visual perception.

[0197] In some embodiments, in response to a user's instruction to delete or hide a control, the electronic device adjusts the displacement and blur values ​​of the pixels in the control based on the grayscale values ​​of the distorted noise map, thereby presenting a more realistic distortion disappearance effect to the user. Optionally, during the pixel displacement adjustment process in the control, after the pixel moves to a new position, the electronic device continues to adjust the displacement and blur values ​​of the pixels in the control based on the new positional relationship and the grayscale values ​​of the distorted noise map. In this way, the control can disappear and no longer be displayed after the distorted noise map playback ends.

[0198] For example, such as Figure 21 (a) Figure 21 As shown in (d), the distorted noise map is a dynamic graph that changes over time, and eventually the distorted noise map will transform into a pure white image. Therefore, as... Figure 21 (e) Figure 21 As shown in (h), electronic devices can adjust the displacement and blur value of pixels in controls (such as calculator controls) at corresponding time points according to a time correspondence by distorting the noise map. Thus, as shown... Figure 21 in(i)- Figure 21 As shown in (l), the control can display a blurring and gradually disappearing animation effect over time.

[0199] Thus, through the calculation of multiple distorted noise maps, the pixels in the control are scrambled and, combined with blurring changes, simulate the vaporization effect.

[0200] In some embodiments, in response to a user's interactive action of deleting or hiding a control, the electronic device can also display a particle effect on the control using a gaseous particle layer. For example, in response to a user's interactive action, the electronic device can display a gaseous particle diffusion effect using a particle layer. This gaseous particle diffusion effect, combined with the blurring and disappearing effect of the control, can speed up the disappearance of the control and increase the smoothness of the animation.

[0201] Optionally, the gaseous particle layer can be a gaseous (or described as cloud) particle mask.

[0202] For example, such as Figure 22As shown in (a), the gaseous particle layer is a grayscale image, consisting only of black, white, and gray pixels. By controlling the transparency of these pixels, the gaseous particle layer can display pixel clusters at specified locations. The transparency of these pixel clusters is controlled to be <100%, while the transparency of pixels outside the pixel clusters is controlled to be 100%. In this way, based on different grayscale values ​​and different transparency, the gaseous particle layer can present several particles with different brightness.

[0203] Optionally, the gaseous particle layer is located on top of the control. This allows for particle animation effects on the control's surface to be achieved by varying the opacity of the pixels in the gaseous particle layer.

[0204] For example, such as Figure 23 As shown, the control also includes a gaseous particle layer. This gaseous particle layer is positioned above the other layers included in the control. For example, the layers in control 1, from top to bottom, may include a gaseous particle layer, an icon layer, and a glass layer.

[0205] Optionally, the electronic device can use a random algorithm to determine the location of the particle from multiple random pixels on the gaseous particle layer, and control the transparency of the pixel at that location to be less than 100%, while the transparency of other locations is 100%. In this case, the pixel can be considered a particle that the user can observe. Alternatively, since a single pixel is difficult for a user to visually observe, the electronic device can group multiple pixels in close proximity into a pixel cluster and adjust their transparency together. Thus, by adjusting the transparency of the pixel cluster at the particle's location to less than 100%, the electronic device can present a particle that the user can observe at that location.

[0206] Optionally, in response to a user's instruction to delete or hide a control, the electronic device controls the pixels in the gaseous particle layer through a distortion noise map, for example, adjusting the blur value of the pixels in the gaseous particle layer based on the grayscale value of the distortion noise map. Since the blur value is primarily controlled by the user to determine the number of physical pixels covered by the image pixels, therefore, as... Figure 22 (a) Figure 22 As shown in (d), as the blur value of the pixels within the pixel cluster changes (e.g., continuously increases), the display area occupied by multiple particles with different transparency continuously increases. Thus, by placing the gaseous particle layer above the icon layer, it can occlude the icon layer, and the occluded part appears to dissipate visually, thereby visually accelerating the vaporization time of the control.

[0207] For example, such as Figure 24 (a) Figure 24As shown in (d), the electronic device acquires a time-varying distorted noise map and a gaseous particle interaction layer, and adjusts the blur value of the corresponding pixel in the gaseous particle interaction layer based on the grayscale value of the pixel in the distorted noise map. Optionally, as... Figure 24 (e) Figure 24 As shown in (h), the electronic device can move and blur pixels in controls at corresponding time points according to a time correspondence by distorting the noise map. Furthermore, according to the time correspondence, the electronic device can display a layer of gaseous particle interactions with adjusted blur values ​​on top of the controls. Thus, as... Figure 24 in(i)- Figure 24 As shown in (l), the control can display a gradually distorting and dissipating animation effect over time.

[0208] In some embodiments, in response to a user-instructed interaction to delete or hide a control, the electronic device displays a gaseous particle layer; after the interaction ends, the electronic device no longer displays the gaseous particle layer. Optionally, the electronic device may also continuously display the gaseous particle layer. If no interaction is detected, the electronic device adjusts the transparency of all pixels in the gaseous particle layer to 100%; after the electronic device detects an interaction, it adjusts the transparency of the corresponding pixels and / or pixel clusters according to the distortion noise map to achieve particle display.

[0209] In some embodiments, the interactive particle layer and the gaseous particle layer described above can be the same layer. The electronic device can adjust the particle display effect according to the type of user interaction, using a corresponding algorithm, so that the layer is implemented as either an interactive particle layer or a gaseous particle layer. Optionally, the type of interaction is used, for example, to distinguish whether it is an operation to indicate the deletion or hiding of a control.

[0210] For example, the electronic device detects a user's interaction indicating the deletion of an icon or card control displayed on the desktop, and determines to control the gaseous effect of pixels in the particle layer using a preset algorithm, thus making the particle layer a gaseous particle layer. Furthermore, the electronic device generates a distorted noise map using a noise map algorithm. Then, the electronic device adjusts the gaseous particle layer and the icon or card control to be deleted using the distorted noise map, causing the icon or card control to be blurred, enlarged, and superimposed with a vaporized mist effect to disappear.

[0211] For example, such as Figures 12A-12C In the lock screen unlocking scenario shown, in response to the user clicking the lock screen button (such as the number 0 control to the number 9 control), the electronic device can control the outline pin below the input password through the noise graph to first blur and vaporize, and then condense into a solid pin.

[0212] For example, such as Figure 25AAs shown, during the display of notification message 251 by the electronic device, an operation instructing the user to delete notification message 251 is detected. Therefore, as... Figures 25B-25D As shown, in response to this operation, the electronic device can acquire a distorted noise map and a gaseous particle layer, and use the distorted noise map and the gaseous particle layer to achieve the overall blurring and disappearance animation of notification message 251.

[0213] For example, such as Figure 26A As shown, during the process of displaying the pull-down notification message center, the electronic device detects the user's swipe operation on notification message 261, and can obtain the perturbation noise map and interactive particle layer. The refraction effect and particle diffusion effect of notification message 261 are then achieved through the perturbation noise map and interactive particle layer. Subsequently, as... Figures 26B-26E As shown, if the user continues to swipe notification message 261, and the electronic device determines that the swipe distance exceeds a preset threshold, it can confirm that the user has instructed the user to delete notification message 261. Then, the electronic device can acquire a distortion noise map and a gaseous particle layer, and use these layers to achieve a blurring and disappearing animation effect for notification message 261. Optionally, the vaporization effect of notification message 261 can be related to the swipe direction; for example, the vaporized mist might shift and drift in the direction notification message 261 is launched. For another example, if an electronic device detects a user's long-press and swipe-up action from the bottom of the device's display screen, it can display a task process management page showing at least one background application window. The electronic device detects the user's swipe-up action on one of these windows, determines that the user has instructed to delete that window, and stops the corresponding application process. Then, the electronic device can acquire a distortion noise map and a gaseous particle layer, and use these layers to achieve a blurred disappearance animation for the window, such as blurring and magnifying the entire window and overlaying a vaporizing fog effect to make it disappear. Alternatively, if the electronic device detects a user's operation to clear the control, determines that the user has instructed to delete all background application windows, and stops the corresponding application processes for all windows, the electronic device can acquire a distortion noise map and a gaseous particle layer, and use these layers to blur and magnify the entire screen and overlay a vaporizing fog effect to make the entire screen disappear.

[0214] In this way, electronic devices combine noise maps and particle layers to enrich the display effects of controls in various scenarios, thereby improving the user experience.

[0215] The above describes the implementation process of achieving the disappearance animation effect of controls by distorting the noise map (and the gaseous particle layer). It should be understood that before displaying the disappearance animation effect, the electronic device can also display the light refraction effect and / or particle interaction effect of the controls based on the above embodiments. The light refraction effect, particle interaction effect, and disappearance effect are not strongly coupled and can be implemented independently. Figure 27 This is a schematic flowchart illustrating a display method provided in an embodiment of this application. It should be noted that this method does not rely on... Figure 27 The specific order described below is a limitation. It should be understood that in other embodiments, the order of some steps in the method can be interchanged according to actual needs, or some steps can be omitted or deleted. The method includes the following steps: S2701, The electronic device receives the first operation.

[0216] The first operation can be, for example, triggering the display of a first control. For instance, the first operation could be creating a new first control. Or, the first operation could be opening the first screen of the application, etc.

[0217] S2702. In response to the first operation, the electronic device displays a first interface; wherein the first interface includes a background image and a first control located on the background image; wherein the background image covered by the first control is a target background image, and the first control includes a glass layer; the color parameters of multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image, and the positions of the multiple pixels in the glass layer are different from the positions of the corresponding pixels in the target background image.

[0218] In some examples, compared to the pixels in the target background image, the positions of multiple corresponding pixels in the glass layer are offset in a preset direction, with at least two pixels having different offsets.

[0219] Optionally, the preset direction includes: a predefined direction and / or the direction of the line connecting the pixel to the geometric center point. The predefined direction includes, for example, a 45° straight line direction, a -45° straight line direction, etc. The center of the pixel set is, for example, the pixel at the geometric center of the image to be processed, and the movement direction of each pixel in the image to be processed is the direction of the line connecting it to the pixel at the geometric center.

[0220] For example, the electronic device takes a screenshot of the background image in the first interface to obtain a screenshot image. In some examples, the electronic device crops the screenshot image according to the relative position of the first control and the background image to obtain an image to be processed, which is the same as the target background image. The electronic device then processes the image to be processed and sets the processed image as a glass layer of the first control. In other examples, the electronic device may directly use the screenshot image as the image to be processed. The electronic device then processes the image to be processed. After processing, the electronic device also needs to crop the processed image. The cropping position can be determined according to the display position of the first control on the background image, and the cropping area can be determined according to the area of ​​the first control. The electronic device then sets the cropped image as a glass layer of the first control.

[0221] For example, such as Figure 5 As shown in (a), the electronic device acquires a frame of still perturbation noise map. Then, the electronic device takes a screenshot of the background image to obtain a screenshot image. Next, the electronic device crops the screenshot image to obtain the image to be processed. Then, based on the still noise map, the electronic device can move the pixels in the image to be processed to generate a glass layer. Thus, as... Figure 5 As shown in (c), the pixels in the glass layer of control 51 (such as the first control) are misaligned, giving control 51 a corresponding refraction effect, thereby enriching the light and shadow effects of control 51 and enhancing the user's visual experience. For example, if a pixel in control 51 has the same color parameter as a pixel in the target background image, and this pixel in control 51 is moved to another position within the control, then visually, this pixel in control 51 appears to deviate from the corresponding pixel in the target background image in terms of position. This allows the user to perceive a light refraction effect at this position, simulating the light and shadow effects of control 51.

[0222] In this way, electronic devices simulate the refraction effect of the first control by using the misalignment between the pixels in the glass layer and the corresponding pixels in the target background image, and by having the glass layer visually positioned above the background image, thereby providing users with a better visual and immersive experience.

[0223] In some embodiments, the electronic device receives a second operation for controlling a first control. During the process of controlling the first control in response to the second operation, multiple pixels in a glass layer continuously change, thereby altering the display effect of the first control. Specifically, while the first control is being controlled, the color parameters of the multiple pixels in the glass layer correspond to the color parameters of multiple pixels in a target background image that is currently covered by the first control, and the positions of the multiple pixels in the glass layer differ from the positions of the corresponding pixels in the target background image.

[0224] The second operation for controlling the first control includes, for example, a touch operation on the first control, an operation to change the size (or area) of the first control, and an operation to move the display position of the first control.

[0225] In some examples, the positions of multiple pixels in the glass layer may be offset compared to pixels in the target background image. The specific offset calculation can be referred to the aforementioned embodiments, and for example, it can be determined by a first perturbation noise map. The first perturbation noise map includes multiple pixels, and these pixels correspond to multiple pixels in the glass layer. The positional offset of the multiple pixels in the glass layer is determined by the parameters of the corresponding multiple pixels in the first perturbation noise map.

[0226] The first noise map is, for example, the perturbation noise map described above. For instance, during user interaction with the first control, the electronic device displays the first control in a liquid state based on the perturbation noise map.

[0227] Optionally, the parameters of the corresponding pixels in the first perturbation noise image include grayscale values. Specifically, the larger the grayscale value of a pixel in the first perturbation noise image, the smaller the positional offset of the corresponding pixel in the glass layer; conversely, the smaller the grayscale value of a pixel in the first perturbation noise image, the larger the positional offset of the corresponding pixel in the glass layer. Alternatively, the larger the grayscale value of a pixel in the first perturbation noise image, the larger the positional offset of the corresponding pixel in the glass layer; and the smaller the grayscale value of a pixel in the first perturbation noise image, the smaller the positional offset of the corresponding pixel in the glass layer. In this way, based on the grayscale values ​​of the pixels in the first perturbation noise image, the position in the glass layer can be flexibly moved to present the corresponding lighting and shadow effects of the first control.

[0228] The position offset includes both the length and direction of the movement. For example, the position offset indicates the displacement of a pixel.

[0229] For example, such as Figure 6 (a) Figure 6 As shown in (c), the disturbance noise graph is a dynamic graph that changes over time. Therefore, as... Figure 6 (d) Figure 6 As shown in (f), the electronic device can move pixels in the glass layer at corresponding time points according to a time correspondence, using a perturbation noise map. For example, the position of the corresponding pixel in the glass layer can be moved based on the grayscale value of the pixel in the perturbation noise map. Thus, as... Figure 6 (g) Figure 6 As shown in (i), the first control can present a dynamic light refraction effect as time changes.

[0230] In this way, the liquid effect of the glass layer can be achieved through the dynamic changes of the first noise map. Furthermore, in response to user interaction, the first control begins to change from a solid state to a liquid state, enhancing the user's interactive experience.

[0231] In some embodiments, the color values ​​of multiple pixels offset in the glass layer are preset color values.

[0232] In this way, by moving and keeping pixels with different color values, color effects can be achieved, thereby simulating the distortion effect of refracted light and further improving the effect of simulated refraction.

[0233] In some embodiments, the positional offset of multiple pixels in the glass layer compared to pixels in the target background image is determined by a first perturbation noise map and a collision force black-and-white map. The color parameters of the multiple pixels in the collision force black-and-white map are related to the movement trajectory and / or force of the second operation on the first control. The multiple pixels in the first perturbation noise map and the multiple pixels in the collision force black-and-white map correspond to the multiple pixels in the glass layer. The positional offset of the multiple pixels in the glass layer is determined by the parameters of the corresponding multiple pixels in the first perturbation noise map and the parameters of the corresponding multiple pixels in the collision force black-and-white map.

[0234] For example, as time changes, such as Figure 8 (d) Figure 8 As shown in (f), the electronic device can move pixels in the glass layer at corresponding time points according to the time correspondence, using the collision force black-and-white image and the first disturbance noise image. Thus, as... Figure 8 (g) Figure 8 As shown in (i), the first control can present a dynamic light refraction effect as time changes, and this light refraction effect can also respond to the user's interactive operation to achieve a responsive effect.

[0235] Optionally, the electronic device can first overlay a first noise map and a collision force black-and-white map to generate an interactive black-and-white map. Then, the electronic device moves the corresponding pixels in the glass layer using the interactive black-and-white map, thereby achieving the light refraction effect of the first control. Optionally, during the movement, the electronic device moves the corresponding pixels in the glass layer based on the grayscale values ​​of the pixels in the interactive black-and-white map. The grayscale values ​​of the pixels in the interactive black-and-white map can be determined based on the grayscale values ​​of the corresponding pixels in the first noise map and the corresponding pixels in the collision force black-and-white map.

[0236] In this way, by superimposing the first noise map and the collision force black and white map on the pixels in the glass layer, it is possible to simulate the visual effect of touching a liquid medium, thereby enhancing the spatial sense and immersion of the control.

[0237] In some embodiments, the first control further includes a first particle layer located above the glass layer. During the process of controlling the first control in response to a second operation, the electronic device also displays the first particle layer. The positions of multiple particles in the first particle layer continuously change. Furthermore, the trend of these position changes can be correlated with the touch location of the second operation; for example, touches at different locations will result in different particle changes, and the effect of these changes can simulate the impact of multiple particles at the touch location.

[0238] The first particle layer is, for example, the interactive particle layer described above.

[0239] For example, such as Figure 9 (a) Figure 9 As shown in (c), the first particle layer can display multiple discrete areas of white pixels by adjusting the transparency of the pixels, thus visually presenting a particle effect. Optionally, the multiple discrete pixels in the particle layer can also be other colors, or they can match the color of the control.

[0240] Optionally, the electronic device does not display the first particle layer until the second operation is detected. Alternatively, the electronic device displays a transparent first particle layer.

[0241] Optionally, the positions of multiple particles in the first particle layer are determined by a collision force black-and-white graph. For example, the first particle layer is a dynamic graph that changes with the user's second action.

[0242] For example, the electronic device detects a user's action (such as a second action, the location of which can be referenced). Figure 11 (g)), such as Figure 11 (a) Figure 11As shown in (c), the electronic device acquires a black-and-white image of the collision force corresponding to the operation. The user's operation can be clicking or long-pressing a control, or dragging other controls into that control, such as dragging an application icon into a large folder. When dragging other controls into the control, Figure 11 The operation location in (g) can be a touch point or the location of another dragged control. For example... Figure 11 (d) Figure 11 As shown in (f), the electronic device adjusts the transparency of corresponding pixels or clusters of pixels in the first particle layer according to the collision force black-and-white image in chronological order. Thus, as... Figure 11 (g) Figure 11 As shown in (i), in chronological order, the first control surface presented by the electronic device can display the dynamic effect of particle movement changes based on the operation position (such as displaying the dynamic effect of particles spreading outward from the operation position, or displaying the dynamic effect of particles spreading outward from the operation position to cover the entire control surface), thereby improving the user's interactive experience.

[0243] For example, such as Figure 17 (a) Figure 17 As shown in (c), during the display of a folder control (such as the first control), the electronic device detects a second operation where the user long-presses and moves the folder control. In response to this second operation, the electronic device can adjust the displacement of pixels in the glass layer during the movement of the folder control, thereby achieving a refraction effect on the folder control.

[0244] For example, such as Figure 18 (a) Figure 18 As shown in (c), during the display of a folder control (such as the first control), the electronic device detects a second operation where the user long-presses and adjusts the size of the folder control. In response to this second operation, the electronic device can adjust the displacement of pixels in the glass layer as the size of the folder control changes, thereby achieving a refraction effect in the folder control.

[0245] In this way, the first particle layer enables the interaction between the particles on the surface of the first control and the user's second operation, thus enhancing the user's interactive experience.

[0246] In some embodiments, the icon layer is located above or below the first particle layer; or, the first control further includes an element layer, both the icon layer and the element layer are located above or below the first particle layer, and the display of the element layer changes based on a second operation.

[0247] The element layer is used to display the UI elements within the first control. The element layer can also be described as an element layer, UI element layer, etc. For example, if the first control is a volume control, the element layer is used to display the volume bar within the volume control, whose length changes with the volume level.

[0248] Optionally, embodiments of this application do not limit the positional relationship between the first particle layer and the icon layer and element layer. Optionally, the first particle layer may also be displayed between the icon layer and the element layer.

[0249] Optionally, the display of the element layer changes based on the second operation, thereby enabling interaction with the user. For example, as the user slides on the volume control, the length of the volume bar displayed in the element layer increases or decreases accordingly.

[0250] In this way, by displaying element layers, the display of the first control is enriched, and the user's interactive experience is enhanced.

[0251] For example, such as Figure 16A As shown, during the process of displaying the drop-down control center on the electronic device, multiple controls such as volume adjustment control 161, brightness adjustment control 162, etc., can display light and shadow effects. The electronic device can display specific light and shadow effects when it detects user actions on the controls. For example, if the electronic device detects a second sliding action on volume adjustment control 161, it determines that the user has instructed to increase the volume. Therefore, if... Figures 16B-16C As shown, in response to the second operation, the electronic device can adjust the corresponding pixels in the glass layer based on the perturbation noise map and the collision force black-and-white map, and adjust the pixels in the first particle layer based on the collision force black-and-white map. This achieves a continuous interactive highlight effect and continuous collision force at the interaction location, causing the volume control 161 to generate directional liquid-like perturbation ripples due to the force. The particles that were originally hidden in the volume control 161 will continue to be displayed with the long press and slide event, resulting in particle displacement and diffusion. For example, the particles will move their display position accordingly as the second operation on the surface of the volume control 161 changes, thus achieving a responsive effect. Furthermore, with the user's second operation on the volume control 161, the volume bar displayed in the element layer increases accordingly, and the device volume also increases. Similarly, similar effects can occur when the user operates other controls (such as the brightness control).

[0252] In some embodiments, the electronic device receives a third operation to delete a first control. During the deletion of the first control in response to the third operation, the position of the pixels of the first control continuously changes. Thus, during the deletion of the first control, the continuous change in the position of the pixels of the first control can also present a motion effect of the first control disappearing, thereby enhancing the user's visual experience. For example, the motion effect of the control disappearing could be a fogging and gradually fading motion.

[0253] In some examples, the positional offsets of multiple pixels in the first control are determined by a second perturbation noise map. The second perturbation noise map includes multiple pixels that correspond to multiple pixels in the first control. The positional offsets of the multiple pixels in the first control are determined by the parameters of the corresponding pixels in the second perturbation noise map. In other examples, the positional offsets of the multiple pixels in the first control may also be randomly generated in other ways.

[0254] The second perturbation noise map is, for example, the distorted perturbation noise map described above.

[0255] Optionally, the parameters of the corresponding pixels in the second perturbation noise image include grayscale values. Specifically, the larger the grayscale value of a pixel in the second perturbation noise image, the smaller the positional offset of the corresponding pixel in the first control; conversely, the smaller the grayscale value of a pixel in the second perturbation noise image, the larger the positional offset of the corresponding pixel in the first control. Alternatively, the larger the grayscale value of a pixel in the second perturbation noise image, the larger the positional offset of the corresponding pixel in the first control; and the smaller the grayscale value of a pixel in the second perturbation noise image, the smaller the positional offset of the corresponding pixel in the first control. In this way, based on the grayscale values ​​of the pixels in the second perturbation noise image, the display positions of the pixels in the first control are adjusted in an orderly manner.

[0256] For example, such as Figure 21 (a) Figure 21 As shown in (d), the second noise map is a dynamic graph that changes over time, and eventually the second noise map will transform into a pure white image. Therefore, as... Figure 21 (e) Figure 21 As shown in (h), the electronic device can adjust the pixel positions of the first control (such as a calculator control) at corresponding time points according to the time correspondence, using the second noise map. Thus, as... Figure 21 in(i)- Figure 21 As shown in (l), the control can gradually disappear over time.

[0257] Thus, after the calculation of the second noise map, the pixels in the first control are scrambled, simulating the dynamic effect of the first control distorting and disappearing.

[0258] In some embodiments, the blur values ​​of multiple pixels in the first control are determined by a second perturbation noise map. For example, the blur values ​​of multiple pixels in the first control are determined by the parameters of the corresponding multiple pixels in the second perturbation noise map.

[0259] For example, such as Figure 21 (e) Figure 21 As shown in (h), while the electronic device adjusts the pixel values ​​of the first control (such as a calculator control) at corresponding time points according to the time correspondence and through the second noise map, it can also adjust the blur values ​​of the pixels in the first control. Thus, as shown in (h), Figure 21 in(i)- Figure 21 As shown in (l), the control can display a blurring and gradually disappearing animation effect over time.

[0260] Thus, color interference based on blur values ​​can further enhance the simulated visual effects, such as visually accelerating the disappearance of controls through blurring, thereby enhancing the user's visual perception.

[0261] In some embodiments, the first control further includes a second particle layer located at the top. Then, in response to the third operation, the electronic device displays the second particle layer. The blur values ​​of multiple pixels in the second particle layer are determined by a second perturbation noise map.

[0262] The second particle layer is, for example, the gaseous particle layer described above.

[0263] Optionally, the electronic device does not display the second particle layer until a third operation is detected. Alternatively, the electronic device displays a transparent second particle layer.

[0264] For example, such as Figure 24 (a) Figure 24 As shown in (d), the electronic device acquires a second noise map and a second particle interaction layer that change over time, and adjusts the blur value of the corresponding pixel in the second particle interaction layer based on the grayscale value of the pixel in the second noise map. Optionally, as... Figure 24 (e) Figure 24 As shown in (h), the electronic device can move and blur pixels in the control at corresponding time points according to the time correspondence, using the second noise map. Furthermore, according to the time correspondence, the electronic device can display a second particle interaction layer with adjusted blur values ​​on top of the control. Thus, as... Figure 24 in(i)- Figure 24 As shown in (l), the control can display a gradually distorting and dissipating animation effect over time.

[0265] In this way, by displaying the second particle layer at the top of the first control, the icon layer in the first control is obscured, and the obscured part appears to dissipate visually, thereby visually accelerating the vaporization time of the first control.

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

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

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

[0269] This application provides an electronic device. The electronic device includes a processor, a memory, and a display screen. The memory and display screen are coupled to the processor. The memory stores computer program code, which includes computer instructions. When the processor reads the computer instructions from the memory, it causes the electronic device to execute the above-described instructions. Figures 1-27 The method described in any one of the embodiments.

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

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

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

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

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

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

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

[0277] In addition, this application also provides an apparatus. Specifically, the apparatus may be a component or module, and may include one or more processors and a memory connected together. The memory is used to store a computer program. When the computer program is executed by one or more processors, the apparatus causes it to perform the display methods described in the above-described method embodiments.

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

[0279] The steps of the methods or algorithms described in conjunction with the embodiments of this application can be implemented in hardware or by a processor executing software instructions. The software instructions can consist of corresponding software modules, which can be stored in random access memory (RAM), flash memory, read-only memory (ROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), registers, hard disks, portable hard disks, CD-ROMs, or any other form of storage medium well known in the art. An exemplary storage medium is coupled to a processor, enabling the processor to read information from and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can reside in an application-specific integrated circuit (ASIC).

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

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

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

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

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

Claims

1. A display method, characterized in that, The method is applied to an electronic device, and the method includes: Receive the first operation; In response to the first operation, a first interface is displayed; wherein the first interface includes a background image and a first control located on the background image; wherein the background image covered by the first control is a target background image, and the first control includes a glass layer; the color parameters of multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image, and the positions of the multiple pixels in the glass layer are different from the positions of the corresponding pixels in the target background image.

2. The method according to claim 1, characterized in that, The method further includes: Receive a second operation for controlling the first control; During the process of responding to the second operation to control the first control, multiple pixels in the glass layer continuously change, so as to change the display effect of the first control; wherein, during the process of the first control being controlled, the color parameters of multiple pixels in the glass layer correspond to the color parameters of multiple pixels in the target background image that is covered by the first control in real time, and the position of multiple pixels in the glass layer is different from the position of the corresponding pixel in the target background image in real time.

3. The method according to claim 2, characterized in that, The first control further includes a first particle layer located above the glass layer, and the method further includes: In response to the second operation controlling the first control, the first particle layer is also displayed; wherein the positions of multiple particles in the first particle layer continuously change.

4. The method according to claim 3, characterized in that, The first control also includes an icon layer located above the glass layer. The icon layer is located above or below the first particle layer; or... The first control also includes an element layer, both the icon layer and the element layer are located above or below the first particle layer, and the display of the element layer changes based on the second operation.

5. The method according to any one of claims 1-4, characterized in that, The method further includes: Receive a third operation for deleting the first control; During the process of deleting the first control in response to the third operation, the position of the pixels of the first control continues to change.

6. The method according to any one of claims 1-5, characterized in that, Compared to the pixels in the target background image, the positions of the corresponding pixels in the glass layer are offset in a preset direction, and at least two pixels have different offsets.

7. The method according to claim 6, characterized in that, The preset direction includes: a predefined direction and / or the direction of the line connecting the pixel point and the geometric center point.

8. The method according to any one of claims 1-7, characterized in that: Compared to the pixels in the target background image, the positional offset of the corresponding pixels in the glass layer is determined by the first perturbation noise map; The first perturbation noise map includes multiple pixels, and the multiple pixels in the first perturbation noise map correspond to the multiple pixels in the glass layer; The positional offset of multiple pixels in the glass layer is determined by the parameters of the corresponding multiple pixels in the first perturbation noise map.

9. The method according to claim 8, characterized in that, The parameters of the multiple pixels corresponding to the first perturbation noise image include grayscale values; Wherein, the larger the gray value of the pixel in the first perturbation noise map, the smaller the position offset of the corresponding pixel in the glass layer; the smaller the gray value of the pixel in the first perturbation noise map, the larger the position offset of the corresponding pixel in the glass layer. Alternatively, the larger the gray value of a pixel in the first perturbation noise map, the larger the positional offset of the corresponding pixel in the glass layer; the smaller the gray value of a pixel in the first perturbation noise map, the smaller the positional offset of the corresponding pixel in the glass layer.

10. The method according to claim 2, characterized in that: Compared to the pixels in the target background image, the positional offset of the corresponding pixels in the glass layer is determined by the first perturbation noise map and the collision force black and white map; wherein, the color parameters of the multiple pixels in the collision force black and white map are related to the movement trajectory and / or force of the second operation on the first control; Multiple pixels in the first disturbance noise map and multiple pixels in the collision force black and white map correspond to multiple pixels in the glass layer; The positional offset of multiple pixels in the glass layer is determined by the parameters of multiple pixels corresponding to the first disturbance noise image and the parameters of multiple pixels corresponding to the collision force black and white image.

11. The method according to claim 10, characterized in that, The first control further includes a first particle layer located above the glass layer, and the method further includes: The positions of multiple particles in the first particle layer are determined by the collision force black-and-white image.

12. The method according to claim 5, characterized in that: The positional offsets of multiple pixels in the first control are determined by the second perturbation noise map; The second disturbance noise map includes multiple pixels, and the multiple pixels in the second disturbance noise map correspond to the multiple pixels in the first control; The positional offset of multiple pixels in the first control is determined by the parameters of the corresponding multiple pixels in the second perturbation noise map.

13. The method according to claim 12, characterized in that, The parameters of the corresponding pixels in the second disturbance noise image include grayscale values; Wherein, the larger the gray value of the pixel in the second perturbation noise map, the smaller the position offset of the corresponding pixel in the first control; the smaller the gray value of the pixel in the second perturbation noise map, the larger the position offset of the corresponding pixel in the first control. Alternatively, the larger the gray value of a pixel in the second perturbation noise map, the larger the position offset of the corresponding pixel in the first control; the smaller the gray value of a pixel in the second perturbation noise map, the smaller the position offset of the corresponding pixel in the first control.

14. The method according to claim 12 or 13, characterized in that: The blur values ​​of multiple pixels in the first control are determined by the parameters of the corresponding multiple pixels in the second perturbation noise map.

15. The method according to any one of claims 12-14, characterized in that, The first control also includes a second particle layer located at the top, and the method further includes: In response to the third operation, the second particle layer is displayed; wherein the blur values ​​of a plurality of pixels in the second particle layer are determined by the second perturbation noise map.

16. The method according to claim 2, characterized in that, The first control is a folder control, and the second operation is used to adjust the size of the folder control or move its display position; or, The first control is a notification message control, and the second operation is used to move the notification message control; or, The first control is a volume adjustment control or a brightness adjustment control, and the second operation is the operation of adjusting the volume or brightness of the electronic device using the volume adjustment control or the brightness adjustment control; or... The first control is a folder control, and the second operation is used to add an icon control to the folder control; or, The first control is a dial pad control, and the second operation is a click operation on the numeric controls in the dial pad control.

17. An electronic device, characterized in that, include: The electronic device includes a processor, a memory, and a display screen, wherein the memory and the display screen are coupled to the processor, the memory being used to store computer program code, the computer program code including computer instructions, and the electronic device performing the method as described in any one of claims 1-16 when the processor reads the computer instructions from the memory.

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

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

Images