WO2024017185A1 - Procédé d'affichage d'interface et dispositif électronique - Google Patents

Procédé d'affichage d'interface et dispositif électronique Download PDF

Info

Publication number
WO2024017185A1
WO2024017185A1 PCT/CN2023/107682 CN2023107682W WO2024017185A1 WO 2024017185 A1 WO2024017185 A1 WO 2024017185A1 CN 2023107682 W CN2023107682 W CN 2023107682W WO 2024017185 A1 WO2024017185 A1 WO 2024017185A1
Authority
WO
WIPO (PCT)
Prior art keywords
interface element
interface
application icon
gravity
electronic device
Prior art date
Application number
PCT/CN2023/107682
Other languages
English (en)
Chinese (zh)
Inventor
卞超
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Publication of WO2024017185A1 publication Critical patent/WO2024017185A1/fr

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • the present application relates to the field of electronic equipment, and more specifically, to an interface display method and electronic equipment.
  • Embodiments of the present application provide an interface display method and an electronic device, so that there is a correlation between interface elements, strengthening the connection between interface elements, and the linkage between interface elements conforms to physical laws, so that users can have a more realistic experience. Feel and improve the user experience.
  • an interface display method includes: displaying a first interface, the first interface including M interface elements, M>1 and being an integer; detecting a user's operation, and determining the first interface element; According to the type of the first interface element, N interface elements affected by the first interface element are determined, and the N interface elements affected by the first interface element include second interface elements, where 1 ⁇ N ⁇ M-1 , and is an integer; determine the first animation effect of the second interface element according to the first linkage parameter, wherein the first linkage parameter includes at least one of the following: the size of the first interface element, the size of the second interface element The size of the element, the distance between the first interface element and the second interface element, the restriction parameters of the second interface element, the animation effect of the first interface element; moving the second interface element according to the first animation effect .
  • an interface element When an interface element is operated or determined to be an interface element that exerts a gravitational influence, it can be correlated with other interface elements, causing other interface elements to be linked, strengthening the relationship between the interface elements.
  • the connection between interface elements, and the linkage between interface elements conforms to physical laws, allowing users to have a more realistic feeling and improving the user experience.
  • detecting the user's operation and determining the first interface element includes: detecting the user's operation on any one of the M interface elements, and The any interface element is determined as the first interface element.
  • detecting the user's operation and determining the first interface element includes: detecting the user's gesture operation, and determining the first interface element according to the user's gesture operation. The type determines the first interface element.
  • determining N interface elements affected by the first interface element according to the type of the first interface element includes: according to the type of the first interface element , determine N interface elements of the same type as the first interface element as interface elements affected by the first interface element.
  • N interface elements that are of the same type as the first interface element are determined to be interfaces affected by the first interface element.
  • the element includes: according to the level of the first interface element, determining N interface elements with the same level as the first interface element as interface elements affected by the first interface element.
  • the method further includes: determining a third interface element according to the level of the first interface element, wherein the level of the third interface element is consistent with the level of the first interface element. The levels are different; determine the second animation effect of the third interface element according to the second linkage parameter, wherein the second linkage parameter includes at least one of the following: the size of the first interface element, the size of the third interface element The size of the element, the distance between the first interface element and the third interface element, the restriction parameters of the third interface element, the animation effect of the first interface element; and moving the third interface element according to the second animation effect.
  • N interface elements having the same type as the first interface element are determined to be interfaces affected by the first interface element according to the type of the first interface element.
  • the element includes: according to the color of the first interface element, determining N interface elements with the same color as the first interface element as interface elements affected by the first interface element.
  • N interface elements that are of the same type as the first interface element are determined to be interfaces affected by the first interface element.
  • the element includes: according to the size of the first interface element, determining N interface elements with the same size as the first interface element as interface elements affected by the first interface element.
  • N interface elements that are of the same type as the first interface element are determined to be interfaces affected by the first interface element. elements, including: determining the distance between the first interface element and the M-1 interface elements, and determining N elements with the first interface based on the distance between the first interface element and the M-1 interface elements. Interface elements of the same element type.
  • N interface elements that are of the same type as the first interface element are determined to be interfaces affected by the first interface element. Elements, including: determining the occurrence center point of the first interface element, determining the first geometric area based on the occurrence center point, and N interface elements that cover the first geometric area and/or intersect with the boundary of the first geometric area The interface element determined to be affected by the first interface element.
  • N interface elements that are of the same type as the first interface element are determined to be interfaces affected by the first interface element.
  • N interface elements that are of the same type as the first interface element are determined to be affected by the first interface element according to the type of the first interface element.
  • the interface elements affected by the first interface element include: determining the first direction of movement of the first interface element; determining N interface elements in the first direction of the first interface element as affected by the first direction according to the first direction. Interface elements affected by the interface element; or determine N interface elements in the second direction of the first interface element as interface elements affected by the first interface element according to the second direction, where the second direction is the first direction the opposite direction.
  • N interface elements that are of the same type as the first interface element are determined to be interfaces affected by the first interface element. element, including: determining the occurrence center point of the first interface element; determining the first geometric area based on the occurrence center point, and determining the interface element that the first geometric area covers or intersects with the boundary of the first geometric area as N interface elements of the same type as the first interface element.
  • the method further includes: changing the size of the first interface element in response to the operation.
  • the first linkage parameter also includes the pressure of the user to perform the operation.
  • the method before moving the second interface element according to the effect, further includes: determining a first delay time; and moving the third interface element according to the first animation effect.
  • the second interface element includes: after the first delay time, moving the second interface element according to the first animation effect.
  • determining the first delay time includes: determining the first delay time according to a distance between the first interface element and the second interface element.
  • the first delay time is preconfigured.
  • the method further includes:
  • the displacement time curve of the second interface element is a Bezier curve or an elastic force curve, where the elastic force curve includes a critical damping elastic force curve, an over-damped elastic force curve, and an under-damping elastic force curve.
  • the method further includes:
  • the first animation effect is switched to a third animation effect; the third animation effect is moved according to the first animation effect.
  • the second interface element includes: moving the second interface element according to the third animation effect.
  • the second aspect is an electronic device according to an embodiment of the present application.
  • the electronic device includes modules/units that perform the above aspect or any possible design method of the above aspect; these modules/units can be implemented by hardware, or A corresponding software implementation can be executed via hardware.
  • the third aspect is a chip according to an embodiment of the present application.
  • the chip is coupled to a memory in an electronic device and is used to call a computer program stored in the memory and execute the above aspects of the embodiment of the present application and any possible design of the above aspects.
  • Technical solution; "coupling" in the embodiment of this application means that two components are directly or indirectly combined with each other.
  • the fourth aspect is a computer-readable storage medium according to an embodiment of the present application.
  • the computer-readable storage medium includes a computer program.
  • the computer program When the computer program is run on an electronic device, the electronic device causes the electronic device to perform the above aspects and the above. Any technical solution that may be designed in the above aspects.
  • the fifth aspect is a computer program according to an embodiment of the present application.
  • the computer program includes instructions. When the instructions are run on a computer, the computer is caused to perform the above aspect and any of the techniques that may be designed in the above aspect. plan.
  • the sixth aspect is a graphical user interface on an electronic device according to an embodiment of the present application.
  • the electronic device has a display screen, one or more memories, and one or more processors.
  • the one or more processors use When executing one or more computer programs stored in the one or more memories, the graphical user interface includes a graphical user interface displayed when the electronic device executes the above aspect and any possible designed technical solution of the above aspect. .
  • the seventh aspect is an electronic device according to an embodiment of the present application.
  • the electronic device includes one or more processors; one or more memories; the one or more memories store one or more computer programs, and the one or more A plurality of computer programs include instructions that, when executed by the one or more processors, cause the electronic device to perform the technical solutions of the above aspects and any possible design of the above aspects.
  • FIG. 1 is a schematic structural diagram of an electronic device provided by an embodiment of the present application.
  • FIG. 2 is a software structure block diagram of an example of an electronic device provided by an embodiment of the present application.
  • FIG. 3 is a schematic diagram of the direction of “gravity” when the interface element according to the embodiment of the present application is affected by “gravity”.
  • Figure 4 is a set of GUIs provided by an embodiment of the present application.
  • FIG. 5 is a detailed schematic diagram of the animation effect in which the interface elements provided by the embodiment of the present application move under the influence of the "gravity" of the operated interface element.
  • Figure 6 is a set of GUIs provided by an embodiment of the present application.
  • FIG. 7 is a schematic diagram of several ways of determining the “gravity” range of interface elements that generate “gravity” provided in the embodiments of the present application.
  • Figure 8 is a schematic diagram of the impact of friction on the linkage animation effect provided by the embodiment of the present application.
  • Figure 9 is a schematic diagram of the impact of pressure on the linkage animation effect provided by the embodiment of the present application.
  • Figure 10 is a schematic diagram illustrating the impact of the movement direction on the linkage animation effect provided by the embodiment of the present application.
  • Figure 11 is a schematic diagram of the impact of different influencing factors on the linkage animation effect provided by the embodiment of the present application.
  • Figure 12 is a schematic diagram of the animation process and related control logic of the linkage animation effect according to the embodiment of the present application.
  • Figure 13 is a schematic diagram of the displacement time curve according to the embodiment of the present application.
  • Figure 14 is a set of GUI provided by the embodiment of the present application.
  • Figure 15 is a set of GUI provided by the embodiment of the present application.
  • Figure 16 is a set of GUI provided by the embodiment of the present application.
  • Figure 17 is a set of GUI provided by the embodiment of the present application.
  • Figure 18 is a set of GUI provided by the embodiment of the present application.
  • Figure 19 is a set of GUI provided by the embodiment of the present application.
  • Figure 20 is a set of GUIs provided by an embodiment of the present application.
  • Figure 21 is a set of GUI provided by the embodiment of the present application.
  • Figure 22 is a schematic diagram of the relationship between the linkage framework and the interface associated with the linkage animation effect according to the embodiment of the present application.
  • Figure 23 is a schematic diagram of a system framework for realizing animation effect capabilities or functions according to an embodiment of the present application.
  • Figure 24 is a schematic diagram illustrating three ways of realizing the linkage animation effect capability or function according to the embodiment of the present application.
  • Figure 25 is a schematic flow chart of the interface display method provided by the embodiment of the present application.
  • the electronic device may be a portable electronic device that also includes other functions such as a personal digital assistant and/or a music player function, such as a mobile phone, a tablet computer, a wearable electronic device with wireless communication functions (such as a smart watch) wait.
  • portable electronic devices include, but are not limited to, carrying Or portable electronic devices with other operating systems.
  • the above-mentioned portable electronic device may also be other portable electronic devices, such as a laptop computer (Laptop). It should also be understood that in some other embodiments, the above-mentioned electronic device may not be a portable electronic device, but a desktop computer.
  • FIG. 1 shows a schematic structural diagram of an electronic device 100 .
  • the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2 , mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone interface 170D, sensor module 180, compass 190, motor 191, indicator 192, camera 193, display screen 194, and Subscriber identification module (SIM) card interface 195, etc.
  • SIM Subscriber identification module
  • the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100 .
  • the electronic device 100 may include more or fewer components than shown in the figures, or some components may be combined, some components may be separated, or some components may be arranged differently.
  • the components illustrated may be implemented in hardware, software, or a combination of software and hardware.
  • the processor 110 may include one or more processing units.
  • the processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processing unit (GPU), and an image signal processor. (image signal processor, ISP), controller, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural network processor (neural-network processing unit, NPU), etc.
  • image signal processor, ISP image signal processor
  • controller video codec
  • digital signal processor digital signal processor
  • DSP digital signal processor
  • baseband processor baseband processor
  • neural network processor neural-network processing unit
  • NPU neural-network processing unit
  • different processing units can be independent components or integrated in one or more processors.
  • electronic device 100 may also include one or more processors 110 .
  • the controller can generate operation control signals based on the instruction operation code and timing signals to complete the control of fetching and executing instructions.
  • the processor 110 may also be provided with a memory for storing instructions and data.
  • the memory in processor 110 may be a cache memory. This memory may hold instructions or data that have been recently used or recycled by processor 110 . If the processor 110 needs to use the instructions or data again, it can be called directly from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thereby improving the efficiency of the electronic device 100 in processing data or executing instructions.
  • processor 110 may include one or more interfaces. Interfaces may include inter-integrated circuit (I2C) interface, inter-integrated circuit sound (I2S) interface, pulse code modulation (PCM) interface, universal asynchronous receiver and transmitter (universal asynchronous receiver/transmitter (UART) interface, mobile industry processor interface (MIPI), general-purpose input/output (GPIO) interface, SIM card interface, and/or USB interface, etc.
  • I2C inter-integrated circuit
  • I2S inter-integrated circuit sound
  • PCM pulse code modulation
  • UART universal asynchronous receiver and transmitter
  • MIPI mobile industry processor interface
  • GPIO general-purpose input/output
  • SIM card interface SIM card interface
  • USB interface 130 is an interface that complies with USB standard specifications, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc.
  • the USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transmit data between the electronic device 100 and peripheral devices.
  • the interface connection relationships between the modules illustrated in the embodiments of the present application are only schematic illustrations and do not constitute a structural limitation of the electronic device 100 .
  • the electronic device 100 may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.
  • the charging management module 140 is used to receive charging input from the charger.
  • the charger can be a wireless charger or a wired charger.
  • the charging management module 140 may receive charging input from the wired charger through the USB interface 130 .
  • the charging management module 140 may receive wireless charging input through the wireless charging coil of the electronic device 100 . While the charging management module 140 charges the battery 142, it can also provide power to the electronic device through the power management module 141.
  • the power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110.
  • the power management module 141 receives input from the battery 142 and/or the charging management module 140, and supplies power to the processor 110, internal memory 121, external memory, display screen 194, camera 193, wireless communication module 160, etc.
  • the power management module 141 can also be used to monitor battery capacity, battery cycle times, battery health status (leakage, impedance) and other parameters.
  • the power management module 141 may also be provided in the processor 110 .
  • the power management module 141 and the charging management module 140 may also be provided in the same device.
  • the wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.
  • Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Each antenna in electronic device 100 may be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example: Antenna 1 can be reused as a diversity antenna for a wireless LAN. In other embodiments, antennas may be used in conjunction with tuning switches.
  • the mobile communication module 150 can provide solutions for wireless communication including 2G/3G/4G/5G applied on the electronic device 100 .
  • the mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.
  • the mobile communication module 150 can receive electromagnetic waves through the antenna 1, perform filtering, amplification and other processing on the received electromagnetic waves, and transmit them to the modem processor for demodulation.
  • the mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves through the antenna 1 for radiation.
  • at least part of the functional modules of the mobile communication module 150 may be disposed in the processor 110 .
  • at least part of the functional modules of the mobile communication module 150 and at least part of the modules of the processor 110 may be provided in the same device.
  • the wireless communication module 160 can provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (WiFi) network), Bluetooth (bluetooth, BT), global navigation satellite system ( Global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared technology (infrared, IR) and other wireless communication solutions.
  • WLAN wireless local area networks
  • Bluetooth blue, BT
  • GNSS Global navigation satellite system
  • FM frequency modulation
  • NFC near field communication
  • IR infrared technology
  • the wireless communication module 160 may be one or more devices integrating at least one communication processing module.
  • the wireless communication module 160 receives electromagnetic waves via the antenna 2 , frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110 .
  • the wireless communication module 160 can also receive the signal to be sent from the processor 110, frequency modulate it, amplify it, and convert it into electromagnetic waves through the antenna 2 for radiation.
  • the electronic device 100 implements display functions through a GPU, a display screen 194, an application processor, and the like.
  • the GPU is an image processing microprocessor and is connected to the display screen 194 and the application processor. GPUs are used to perform mathematical and geometric calculations for graphics rendering.
  • Processor 110 may include one or more GPUs that execute program instructions to generate or alter display information.
  • the display screen 194 is used to display images, videos, etc.
  • Display 194 includes a display panel.
  • the display panel can use a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active matrix organic light emitting diode or an active matrix organic light emitting diode (active-matrix organic light emitting diode).
  • LCD liquid crystal display
  • OLED organic light-emitting diode
  • AMOLED organic light-emitting diode
  • FLED flexible light-emitting diode
  • Miniled MicroLed, Micro-oLed, quantum dot light emitting diode (QLED), etc.
  • electronic device 100 may include one or more display screens 194.
  • the display screen 194 in FIG. 1 can be bent.
  • the above-mentioned display screen 194 can be bent means that the display screen 194 can be bent at any position to any angle and can be maintained at this angle.
  • the display screen 194 can be folded in half from the middle to the left and right. You can also fold it in half from the middle up and down.
  • the display screen 194 of the electronic device 100 may be a flexible screen.
  • flexible screens have attracted much attention due to their unique characteristics and huge potential.
  • flexible screens are more flexible and bendable. They can provide users with new interaction methods based on bendable characteristics and can meet more users' needs for electronic devices.
  • the foldable display screen on the electronic device can be switched between a small screen in a folded form and a large screen in an unfolded form at any time. Therefore, users are using the split-screen function more and more frequently on electronic devices equipped with foldable displays.
  • the electronic device 100 can implement the shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, and the like.
  • the ISP is used to process the data fed back by the camera 193. For example, when taking a photo, the shutter is opened, the light is transmitted to the camera sensor through the lens, the optical signal is converted into an electrical signal, and the camera sensor passes the electrical signal to the ISP for processing, and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on image noise, brightness, and skin color. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, the ISP may be provided in the camera 193.
  • Camera 193 is used to capture still images or video.
  • the object passes through the lens to produce an optical image that is projected onto the photosensitive element.
  • the photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CCD). semiconductor, CMOS) phototransistor.
  • CCD charge coupled device
  • CMOS complementary metal-oxide-semiconductor
  • the photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to convert it into a digital image signal.
  • ISP outputs digital image signals to DSP for processing.
  • DSP converts digital image signals into standard RGB, YUV and other format image signals.
  • electronic device 100 may include one or more cameras 193 .
  • Digital signal processors are used to process digital signals. In addition to digital image signals, they can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.
  • Video codecs are used to compress or decompress digital video.
  • Electronic device 100 may support one or more video codecs. In this way, the electronic device 100 can play or record videos in multiple encoding formats, such as moving picture experts group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.
  • MPEG moving picture experts group
  • MPEG2 MPEG2, MPEG3, MPEG4, etc.
  • NPU is a neural network (NN) computing processor.
  • NN neural network
  • the NPU can realize intelligent cognitive applications of the electronic device 100, such as image recognition, face recognition, speech recognition, text understanding, etc.
  • the external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100.
  • the external memory card communicates with the processor 110 through the external memory interface 120 to implement the data storage function. Such as saving music, videos, etc. files in external memory card.
  • Internal memory 121 may be used to store one or more computer programs including instructions.
  • the processor 110 can execute the above instructions stored in the internal memory 121 to cause the electronic device 100 to execute the methods provided in some embodiments of the present application, as well as various applications and data processing.
  • the internal memory 121 may include a program storage area and a data storage area. Among them, the stored program area can store the operating system; the stored program area can also store one or more applications (such as photo galleries, contacts, etc.). The storage data area may store data created during use of the electronic device 100 (such as photos, contacts, etc.).
  • the internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as one or more disk storage components, flash memory components, universal flash storage (UFS), etc.
  • the processor 110 can cause the electronic device 100 to execute the instructions provided in the embodiments of the present application by executing instructions stored in the internal memory 121 and/or instructions stored in a memory provided in the processor 110 . methods, and other applications and data processing.
  • the electronic device 100 can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone interface 170D, and the application processor. For example, music playback, recording, etc.
  • the sensor module 180 may include a pressure sensor 180A, a gyro sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, and an ambient light sensor. 180L, bone conduction sensor 180M, etc.
  • the pressure sensor 180A is used to sense the pressure signal and convert the pressure signal into an electrical signal.
  • pressure sensor 180A may be disposed on display screen 194 .
  • pressure sensors 180A such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc.
  • a capacitive pressure sensor may include at least two parallel plates of conductive material.
  • the electronic device 100 may also calculate the touched position based on the detection signal of the pressure sensor 180A.
  • touch operations acting on the same touch location but with different touch operation intensities may correspond to different operation instructions. For example: when a touch operation with a touch operation intensity less than the first pressure threshold is applied to the short message application icon, an instruction to view the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold is applied to the short message application icon, an instruction to create a new short message is executed.
  • the gyro sensor 180B may be used to determine the motion posture of the electronic device 100 .
  • the angular velocity of electronic device 100 about three axes ie, X, Y, and Z axes
  • the gyro sensor 180B can be used for image stabilization. For example, when the shutter is pressed, the gyro sensor 180B detects the angle at which the electronic device 100 shakes, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to offset the shake of the electronic device 100 through reverse movement to achieve anti-shake.
  • the gyro sensor 180B can also be used for navigation and somatosensory game scenes.
  • the acceleration sensor 180E can detect the acceleration of the electronic device 100 in various directions (generally three axes). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of electronic devices and be used in horizontal and vertical screen switching, pedometer and other applications.
  • the ambient light sensor 180L is used to sense ambient light brightness.
  • the electronic device 100 can adaptively adjust the brightness of the display screen 194 according to the perceived ambient light brightness.
  • the ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures.
  • the ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device 100 is in the pocket to prevent accidental touching.
  • Fingerprint sensor 180H is used to collect fingerprints.
  • the electronic device 100 can use the collected fingerprint characteristics to achieve fingerprint unlocking, access to application locks, fingerprint photography, fingerprint answering of incoming calls, etc.
  • Temperature sensor 180J is used to detect temperature.
  • the electronic device 100 utilizes the temperature detected by the temperature sensor 180J to execute the temperature processing strategy. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold, the electronic device 100 reduces the performance of a processor located near the temperature sensor 180J in order to reduce power consumption and implement thermal protection. In other embodiments, when the temperature is lower than another threshold, the electronic device 100 heats the battery 142 to prevent the low temperature from causing the electronic device 100 to shut down abnormally. In some other embodiments, when the temperature is lower than another threshold, the electronic device 100 performs boosting on the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperature.
  • Touch sensor 180K also called “touch panel”.
  • the touch sensor 180K can be disposed on the display screen 194.
  • the touch sensor 180K and the display screen 194 form a touch screen, which is also called a "touch screen”.
  • the touch sensor 180K is used to detect a touch operation on or near the touch sensor 180K.
  • the touch sensor can pass the detected touch operation to the application processor to determine the touch event type.
  • Visual output related to the touch operation may be provided through display screen 194 .
  • the touch sensor 180K may also be disposed on the surface of the electronic device 100 at a location different from that of the display screen 194 .
  • FIG. 2 is a software structure block diagram of the electronic device 100 according to the embodiment of the present application.
  • the layered architecture divides the software into several layers, and each layer has clear roles and division of labor.
  • the layers communicate through software interfaces.
  • the Android system is divided into four layers, from top to bottom: application layer, application framework layer, Android runtime and system libraries, and kernel layer.
  • the application layer can include a series of application packages.
  • the application package can include camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, advertising module, management module, etc.
  • the advertising module is used for advertising interaction with users.
  • the advertising module may be a module preset by the operating system, and the advertising module and the electronic device may be provided by the same manufacturer.
  • the management module is used to generate the OPENID based on the advertiser ID and the device ID.
  • the management module can be a module preset by the operating system.
  • the management module and the electronic device can be provided by the same manufacturer.
  • the application framework layer provides an application programming interface (API) and programming framework for applications in the application layer.
  • API application programming interface
  • the application framework layer includes some predefined functions.
  • the application framework layer can include a window manager, content provider, view system, phone manager, resource manager, notification manager, etc.
  • the window manager is used to manage window programs.
  • the window manager can obtain the display size, determine whether there is a status bar, lock the screen, capture the screen, etc.
  • Content providers are used to store and retrieve data and make this data accessible to applications.
  • the data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.
  • the view system includes visual controls, such as controls that display text, controls that display pictures, etc.
  • a view system can be used to build applications.
  • the display interface can be composed of one or more views.
  • a display interface including a text message notification icon may include a view for displaying text and a view for displaying pictures.
  • the phone manager is used to provide communication functions of the electronic device 100 .
  • call status management including connected, hung up, etc.
  • the resource manager provides various resources to applications, such as localized strings, icons, pictures, layout files, video files, etc.
  • the notification manager allows applications to display notification information in the status bar, which can be used to convey notification-type messages and can automatically disappear after a short stay without user interaction.
  • the notification manager is used to notify download completion, message reminders, etc.
  • the notification manager can also be notifications that appear in the status bar at the top of the system in the form of charts or scroll bar text, such as notifications for applications running in the background, or notifications that appear on the screen in the form of conversation windows. For example, text messages are prompted in the status bar, beeps are emitted, electronic devices vibrate, lights flash, etc.
  • System libraries can include multiple functional modules. For example: surface manager (surface manager), media libraries (media libraries), 3D graphics processing libraries (for example: OpenGL ES), 2D graphics engines (for example: SGL), etc.
  • the surface manager is used to manage the display subsystem and provides the fusion of 2D and 3D layers for multiple applications.
  • the media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc.
  • the media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG and PNG, etc.
  • the 3D graphics processing library is used to implement 3D graphics drawing, image rendering, composition and layer processing.
  • 2D Graphics Engine is a drawing engine for 2D drawing.
  • the kernel layer is the layer between hardware and software.
  • the kernel layer includes at least display driver, camera driver, audio driver, and sensor driver.
  • Interface elements can be linked in animation effects, and operated interface elements can affect unoperated interface elements, thus strengthening the relationship between interface elements.
  • the connection makes the animation effect more consistent with the laws of physics, and takes into account the real usage scenarios and the user's system, thereby improving the user experience.
  • FIG. 3 shows a schematic diagram of the direction of “gravity” when the interface element in the embodiment of the present application is affected by “gravity”.
  • (a) in FIG. 3 shows an example scenario in which the "gravity" of the operated interface element acts as “attraction”.
  • the cross pattern in the lower right schematically represents the enlarged "gravity” center point of the operated interface element.
  • the interface element is an application icon
  • when the application icon is deleted When events such as drag and release, merging folders, and card expansion occur, a point in the interface element can be the center point of "attraction” or "repulsion".
  • FIG. 3 shows a schematic diagram of the direction of “gravity” when the interface element in the embodiment of the present application is affected by “gravity”.
  • the cross pattern in the upper left schematically represents an enlarged point of another interface element affected by the "gravity” of the operated interface element.
  • the "Gravity” animation effect is set to “Attraction”
  • the direction of movement of the interface elements is that the element center point of each affected interface element points to the operated interface element.
  • the vector direction of the occurrence center point (b) in FIG. 3 shows an example scenario in which the "attractive force" of the operated interface element acts as a "repulsive force”.
  • the cross pattern on the lower right schematically represents the occurrence center point
  • the cross pattern on the upper left schematically represents the element center point.
  • the direction of movement of the interface elements is that the center point of the operated interface element points to the center point of each affected interface element.
  • the vector direction of the center point there is no limit on the selection of the occurrence center point and the element center point.
  • the occurrence center point and the element center point can be the geometric center of the interface element, or they can be any point in the interface element.
  • Figure 4 shows a set of graphical user interfaces (graphical user interface, GUI) provided by the embodiment of the present application.
  • the electronic device displays an interface 401
  • the interface 401 displays application icons 402 , 403 , 404 , 405 , 406 , 407 , and 408 , application icon 409, application icon 410, application icon 411, application icon 412, application icon 413, application icon 414.
  • the above application icon can remain still.
  • the application icons of the interface 401 are in a balanced state.
  • an interface element in the interface is operated, for example, the interface element is moved, the interface element is clicked, and the balance state of the interface element is broken, other interface elements in the interface will be linked.
  • the electronic device when the electronic device detects that the user is pressing and holding the application icon 408 and moving downward, due to the "gravitational" effect of the application icon 408 on other application icons, the electronic device can cause the application icon 402, application icon 408 to move downward.
  • One or more of the icon 403, the application icon 404, the application icon 405, the application icon 406, the application icon 407, the application icon 409, the application icon 410, the application icon 411, the application icon 412, the application icon 413, and the application icon 414 are related to the application Icon 408 linkage.
  • the linkage between one or more application icons 408 can be understood to mean that because the application icon 408 is moved and the original equilibrium state is broken, the above-mentioned application icons need to move according to the movement of the application icon 408 to establish a new equilibrium state.
  • the application icon 408 can To create an "attractive force” on the application icon 404 to attract the application icon 404 to move toward it, the application icon 408 can create an "attractive force” on the application icon 405 to attract the application icon 405 to move toward it, and the application icon 408 can create an "attractive force” on the application icon 406 "Attraction” to attract application icon 406 to move toward it.
  • Application icon 408 can exert “attraction” to application icon 407 to attract application icon 407 to move toward it.
  • Application icon 408 can exert "attraction” to application icon 409 to attract The application icon 409 moves towards it.
  • the application icon 408 moves downward, due to the existence of "gravity” between the application icon 402 and the application icon 410, and the "gravity” of the application icon 408 acts as “attraction” on the application icon 410, the application icon 408 can A "repulsive force” is generated on the application icon 410 to repel the application icon 410 from moving away from it. Similarly, the application icon 408 can generate a "repulsive force” on the application icon 411 to repel the application icon 411 from moving away from it. The application icon 408 can generate a "repulsive force” on the application icon 412 to repel the application icon 412 from moving away from it.
  • the application icon 408 The application icon 414 may generate a "repulsive force" to repel the application icon 414 from moving away from it, and the application icon 408 may generate a "repulsive force" to the application icon 414 to repel the application icon 414 from moving away from it.
  • the application icon 408 moves downward, its “gravitational force” can act as a "repulsive force" on the application icon 402, application icon 403, application icon 404, application icon 405, application icon 406, application icon 407, and application icon 409.
  • the application icon 410 , the application icon 411 , the application icon 412 , the application icon 414 , and the application icon 414 act as “attraction”.
  • the electronic device when the electronic device detects that the user clicks on the application icon 408, the electronic device can make the application icon 402, the application icon 403, the application icon 404, the application icon 405, the application icon 406, and the application icon 408.
  • One or more of the icon 407, the application icon 409, the application icon 410, the application icon 411, the application icon 412, the application icon 413, and the application icon 414 are linked with the application icon 408.
  • the application icon 408 can exert an "attractive force" on the application icon 404 to attract the application icon 404 to move toward it.
  • the application icon 408 The application icon 405 can be “attracted” to attract the application icon 405 to move thereto.
  • the application icon 408 can be "attractive” to the application icon 406 to attract the application icon 406 to move thereto.
  • the application icon 408 can be exerted to the application icon 407 "Attraction” to attract the application icon 407 to move toward it.
  • the application icon 408 can exert "attraction” to the application icon 409 to attract the application icon 409 to move toward it.
  • the application icon 408 can exert "attraction” to the application icon 410 to attract The application icon 410 moves toward it, the application icon 408 can exert "attraction” on the application icon 411 to attract the application icon 411 to move toward it, and the application icon 408 can exert "attraction” on the application icon 412 to attract the application icon 412 to move toward it.
  • the application icon 408 can exert an "attractive force” on the application icon 413 to attract the application icon 413 to move toward it
  • the application icon 408 can exert an "attractive force” on the application icon 414 to attract the application icon 414 to move toward it.
  • the application icon 408 when the application icon 408 is clicked, the application icon 402, the application icon 403, the application icon 404, the application icon 405, the application icon 406, the application icon 407, the application icon 409, the application icon 410, the application icon 411, the application icon 412, The application icon 414 and the application icon 414 generate a "repulsive force".
  • the above-mentioned application icons affected by "gravity” can be moved with a delay, that is, after a certain period of time has elapsed after the user clicks or moves the application icon 408, other application icons will start to move.
  • the delay time of application icons affected by "gravity” may be related to the distance between the application icons. For example, such as As shown in (a) and (b) in Figure 4, the user moves the application icon 408 downward. Since the distance between the application icon 404 and the application icon 408 is smaller than the distance between the application icon 402 and the application icon 408, the application icon 404 can be moved with the application icon 402 first.
  • Figure 5 shows a schematic diagram of the positions of interface elements affected by "attraction” in the "gravity” animation effect at different times and the corresponding schematic curve diagram according to an embodiment of the present application.
  • the application icon 408 is the interface element that is moved
  • the application icon 404 is the interface element that is “attracted” by the application icon 408 .
  • the distance between the application icon 408 and the application icon 404 is d1.
  • the application icon 404 is "attracted” by the application icon 408 and can move toward the application icon 408 .
  • the moving speed of the application icon 404 may be slower than the moving speed of the application icon 408. Therefore, at time t1, the distance between the application icon 408 and the application icon 404 is d2, d2>d1. If the application icon 408 stops moving at time t1 (for example, the user no longer drags the application icon 408), the application icon 408 can continue to "attract" the application icon 404 to move. When the distance between the two returns to d1, the two can resume movement. When the original gravity is restored, the application icon 404 will no longer move.
  • the process of moving the application icon 404 and the application icon 408 can be represented by the curve diagram shown in (c) in Figure 5.
  • Curve #1 in (c) in Figure 5 is the distance-time curve of the application icon 408,
  • curve # 2 is the distance-time curve of the application icon 404. It can be seen from the figure that in the t0-t1 time period, the distance that the application icon 408 moves is greater than the distance that the application icon 404 moves in the same time period. Then the application icon 408 and the application The distance between the icons 404 increases from d1 to d2. When the time t1 is reached, the application icon 408 stops moving and the application icon 404 continues to move. Then the distance between the application icon 408 and the application icon 404 can be reduced from d2 to d1. .
  • the electronic device can cause the application icon 404 to move faster than the application icon 408, so that the distance between the application icon 404 and the application icon 408 can be reduced, When the distance between the application icon 404 and the application icon 408 returns to d1, the electronic device can cause the application icon 404 and the application icon 408 to keep moving at the same speed.
  • the process of moving the application icon 404 and the application icon 408 can be represented by the curve diagram shown in (d) in Figure 5.
  • Curve #1 in (d) in Figure 5 is the speed-time curve of the application icon 408,
  • curve # 2 is the speed time curve of the application icon 404. It can be seen from the figure that in the t0-t1 time period, the moving speed of the application icon 408 is faster than the moving speed of the application icon 404, then the distance between the application icon 408 and the application icon 404 is The distance increases from d1 to d2. When the time t1 is reached, the application icon 408 moves slower than the application icon 404, and the distance between the application icon 408 and the application icon 404 continues to shrink until it shrinks to d1 at time t2.
  • the distance between the application icon 404 and the application icon 408 may first increase and then decrease to the original distance.
  • the change in the distance between the application icon 404 and the application icon 408 can be represented by the gap time diagram shown in (e) in Figure 5. It can be seen from the figure that the distance between the application icon 404 and the application icon 408 from t0 to t1 is: d1 increases to d2, and then decreases from t1-t2 to d1.
  • the application icon 408 may move before the application icon 404, and the distance between the two may increase.
  • its moving speed may be faster than the speed of the application icon 408. Then the distance between the two begins to decrease until the original distance d1 is restored.
  • the process of moving the application icon 404 and the application icon 408 can be represented by the curve diagram shown in (f) in Figure 5.
  • Curve #1 in (f) in Figure 5 is the speed time curve of the application icon 408,
  • curve # 2 is the speed time curve of the application icon 404. It can be seen from the figure that in the t0-t1 time period, the application icon 408 starts to move and the application icon 404 does not move. Then the distance between the application icon 408 and the application icon 404 is given by d1 increases to d2. When it reaches time t1, application icon 404 starts to move faster than the moving speed of application icon 408. Then the distance between application icon 408 and application icon 404 continues to shrink until it shrinks to d1 at time t2. .
  • the application icon 408 moves at the same speed as the application icon 404 . It can be understood that if the application icon 408 and the application icon 404 move at the same speed, the distance between the application icon 408 and the application icon 404 will not change when they move. When the application icon 408 stops moving (for example, the user no longer drags the application icon 408), the application icon 404 may also stop moving.
  • the application icon 408 moves at the same speed as the application icon 404 . It can be understood that if the application icon 408 and the application icon 404 move at the same speed, the distance between the application icon 408 and the application icon 404 will not change when they move. When the application icon 408 stops moving (for example, the user no longer drags the application icon 408), the application icon 404 can continue to move until it matches the application icon 408. Icon 408 merge. The description of the merging between application icons can be found below and will not be described here.
  • the application icon 408 moves at the same speed as the application icon 404 . It can be understood that if the application icon 408 and the application icon 404 move at the same speed, the distance between the application icon 408 and the application icon 404 will not change when they move. When the application icon 408 stops moving (for example, the user no longer drags the application icon 408), the application icon 404 can continue to move a certain distance toward the application icon 408, and then the application icon 404 moves in a direction away from the application icon 408 until the application icon 404 is in contact with the application icon 408. The distance of 408 reverts to d1.
  • the distance between the application icon 408 and the application icon 404 may be continuously reduced.
  • the electronic device can make the moving speed of the application icon 404 be the same as the moving speed of the application icon 408, then the application icon 404 The application icon 408 can move together while maintaining the fixed value distance, where the fixed value can be 0.
  • the application icon 404 stops moving, the application icon 404 can stop moving, or the application icon 404 can move in a direction away from the application icon 408 until The distance between the application icon 404 and the application icon 408 returns to d1, or the application icon can continue to move a certain distance in the direction of the application icon 408 or until it merges with the application icon 408.
  • the "gravity” of the application icon 408 acts as an "attraction" on the application icon 404
  • the application icon 408 returns to the original position after being thrown by the user.
  • the "gravitational force" of the application icon 408 can change into a "repulsive force" on the application icon 404, so that the application icon 404 can also return to its original position.
  • the distance between them may first become smaller and then return to d1.
  • the electronic device can return the application icon 408 to its original position.
  • the application icon 404 can also return to its original position due to the "repulsive force" of the application icon 408.
  • the application icon 408 and The distance between application icons 404 may first become smaller and then return to d1.
  • the distance between the application icon 404 and the application icon 408 may remain unchanged, that is, the distance between the application icon 404 and the application icon 408 may remain unchanged.
  • the distance is always d1.
  • the distance between the application icon 404 and the application icon 408 may first increase and then decrease.
  • the movement speed of the application icon 404 may be faster than the movement speed of the application icon 408. Then the distance between the application icon 404 and the application icon 408 becomes larger, and the application icon 404 may move faster than the application icon 408.
  • the icon 404 can first reach the original position, and the application icon 408 continues to move, and the distance between the application icon 404 and the application icon 408 becomes smaller again. When the application icon 408 reaches the original position, the distance between the application icon 404 and the application icon 408 is restored. is d1.
  • the initial movement speed of application icon 404 may be faster than the initial movement speed of application icon 408, and the distance between application icon 404 and application icon 408 becomes then the application icon 408 can continue to accelerate so that the moving speed exceeds the moving speed of the application icon 404, then the distance between the application icon 404 and the application icon 408 becomes smaller again, and when the distance between the application icon 404 and the application icon 408 is restored When it is d1, the application icon 404 and the application icon 408 reach the original position at the same time.
  • the initial movement speed of the application icon 404 may be faster than the initial movement speed of the application icon 408, and the application icon 408 may continue to accelerate so that the movement speed
  • the graph is similar to the graph shown in (d) in FIG. 5, which will not be described again for the sake of simplicity.
  • the distance between the application icon 404 and the application icon 408 may change in a process of increasing - decreasing - increasing.
  • the initial movement speed of application icon 404 may be faster than the initial movement speed of application icon 408, and the distance between application icon 404 and application icon 408 becomes larger.
  • the application icon 408 can continue to accelerate so that the moving speed exceeds the moving speed of the application icon 404, then the distance between the application icon 404 and the application icon 408 becomes smaller, and then the application icon 408 can reach before the application icon 404 and stop moving.
  • the application icon 404 can continue to move to the original position, and the distance between the application icon 404 and the application icon 408 becomes larger again.
  • the moving speed of the application icon 404 continues to decrease, and the moving speed of the application icon 408 continues to increase, then The distance between application icon 408 and application icon 404 begins to decrease. Since the application icon 408 reaches the original position before the application icon 404, the moving speed of the application icon 408 becomes 0, and while the application icon 404 continues to move, the distance between the application icon 408 and the application icon 404 begins to increase.
  • the application icon 408 is an interface element that is clicked or pressed
  • the application icon 404 is an interface element affected by the “attraction” effect of the application icon 408 .
  • the distance between the application icon 408 and the application icon 404 is d1.
  • the application icon 404 is "attracted" by the application icon 408 and can move closer to the application icon 408 .
  • the application icon 408 is clicked, it can be understood that the user clicks the application icon 408 and then raises his hand.
  • the application icon 408 is pressed, it can be understood that the user clicks the application icon 408 without raising his hand.
  • the size of the application icon 408 may change. For example, the user presses the application icon 408, and the electronic device can cause the size of the application icon 408 to become smaller. For another example, if the user presses the application icon 408, the electronic device may increase the size of the application icon 408.
  • the distance between the application icon 404 and the application icon 408 may first decrease and then return to the original distance during the movement.
  • the distance between the application icon 404 and the application icon 408 at time t1 The distance between the application icons 408 is d2, d2 ⁇ d1, the distance between the application icon 404 and the application icon 408 at time t2 is d3, d3 ⁇ d2 ⁇ d1, d3 can be the distance between the application icon 408 and the application icon 404 The minimum distance.
  • the application icon 404 can move in a direction away from the application icon 408.
  • the distance between the application icon 404 and the application icon 408 at time t3 is d2.
  • the distance between the application icon 404 and the application icon 408 at time t5 is d2.
  • the distance between 408 is restored to d.
  • the application icon 404 can move closer to the application icon 408 due to the "attraction" of the application icon 408. Since the application icon 408 does not move, the distance between the two will change. Zoom out. The reduction in distance between application icon 404 and application icon 408 can be divided into two possible situations:
  • One possible situation is that the distance between the application icon 404 and the application icon 408 continues to decrease until the two application icons merge.
  • One possible situation is that after the distance between the application icon 404 and the application icon 408 is reduced to a certain distance, the application icon 404 no longer continues to move.
  • the electronic device can use any appropriate method to determine the distance moved by the application icon 404 affected by the "gravity" effect and the motion state when moving. That is, the electronic device can use any appropriate functional relationship to determine the application icon 404 Movement distance and state of motion when moving.
  • the motion state when moving can be understood as the speed change of the interface element during the movement.
  • the electronic device can set the moving distance of the interface elements affected by "gravity” to the same distance, and the motion state is to move at a constant speed.
  • the processing of electronic devices for achieving "gravity" animation effects can be simplified, for example.
  • application icon 402, application icon 403, application icon 404, application icon 405, application icon 406, application icon 407, application icon 409, application icon 410, application icon 411, application icon 412, the application icon 413, and the application icon 414 have the same moving distance and the same moving speed.
  • the electronic device can determine the movement distance and motion state of the interface element that is subject to the "gravity” effect based on a variety of factors, including but not limited to: the size of the interface element that produces the “gravity” effect, The “gravity” range of the interface element that produces “gravity”, the “gravity” direction of the interface element that produces “gravity”, the level of the interface element that produces “gravity”, the color of the interface element that produces “gravity”, The size of the interface element that is affected by “gravity”, the force of the interface element that is affected by “gravity” (for example, the friction of the interface element, the pressure of the interface element, the gravity of the interface element), the interface that is affected by “gravity” The level of elements, the color of interface elements affected by “gravity”, the distance between two interface elements, etc.
  • the moving distance and moving speed of different interface elements affected by "gravity” can be different.
  • the moving distances of the application icon 402 and the application icon 404 may be different, and the moving speeds may also be different.
  • the influence of different factors on the "gravity” animation effect will be introduced in detail below, and the curve of the distance changing with time when the interface element affected by "gravity” moves is introduced as an example with reference to Figure 13.
  • the interface elements in the embodiments of this application are related through "gravity". By operating one interface element, the user can cause other interface elements to change, producing a linked animation effect, showing a dynamic effect that conforms to the laws of nature, and is more in line with the user's life experience. Consistent, improving human-computer interaction.
  • the "gravity" range of the interface element that generates the “gravity” effect may be limited.
  • the interface elements that produce “gravity” only affect the interface factors within the range of their “gravitation”. That is, the interface elements within the “gravity” range are the interface elements that are affected by the "gravity”.
  • Figures 6 to 7 introduce the "gravity" range of interface elements that produce “gravity” effects.
  • the interface elements within the "gravity” range and the interface elements that generate the “gravity” effect may be the same type of interface elements, so that "gravity” may exist between interface elements of the same type.
  • the interface elements within the "gravity” range and the interface elements that generate the “gravity” effect may not be the same type of interface elements.
  • Figure 6 shows a set of GUIs provided by the embodiment of the present application.
  • the electronic device displays an interface 401 , and the interface 401 displays an application icon 402 , an application icon 403 , an application icon 404 , an application icon 405 , an application icon 406 , an application icon 407 , and Icons 408, application icons 409, application icons 410, application icons 411, application icons 412, application icons 413, and application icons 414.
  • the application icons may remain static.
  • the electronic device can make the application icon 403, application icon 404, application Icons 405, application icons 407, and application icons 409 move toward application icon 408, while application icons 402, application icons 406, application icons 410, application icons 411, application icons 412, application icons 413, and application icons 414 do not move, that is, Application icons 403, 404, 405, 407, and 409 are within the "gravity" range of the application icon 408.
  • the “gravitational force range” is related to the distance, but the embodiment of the present application is not limited thereto.
  • the “gravitational force” range can also be related to the moving direction of the interface element. For example, as shown in (a) and (c) in Figure 6, if the application icon 408 moves downward, the application icon 402, the application icon 403, the application icon 404, the application icon 405, and the application icon 408 have a vertical relationship.
  • the application icons 410, 411, 412, 413, and 414 can move in the same direction as the application icon 408 due to the "gravitational force" of the application icon 408.
  • the application icon 408 moves downward, the application icon 402, the application icon 403, the application icon 404, the application icon 405, and the application icon 408 have a vertical relationship.
  • the application icons 410, 411, 412, 413, and 414 can move due to the "gravity" of the application icon 408.
  • the center points of the respective elements in the moving direction are the same as the center point of the application icon 408. vector direction.
  • the "gravity range” may also be related to the level of the interface element.
  • the electronic device When the electronic device displays the interface elements and the layout of the interface elements is determined, the electronic device can determine the canvas to which the interface element belongs and the control tree to which the interface element belongs. In the embodiment of the present application, the same canvas and/or Interface elements on the same control tree are determined to be interface elements at the same level.
  • One possible implementation method is that the electronic device can determine the "gravity” range of the interface elements that generate “gravity” by calculating the distance between the interface elements.
  • FIG. 7 shows a schematic diagram for determining the “gravity” range of interface elements that generate “gravity” provided by an embodiment of the present application.
  • the same interface includes interface element 701, interface element 702, interface element 703, interface element 704, interface element 705, interface element 706, interface element 707, interface element 708, interface element 709, where the interface element 705 can be an operated interface element.
  • the distance between the interface element 705 and the interface element 704 and the interface element 706 is d1.
  • the distance between the interface element 705 and the interface element 702 and the interface element 708 is d2.
  • the distance between the interface element 705 and the interface element 702 and 708 is d2.
  • the distance between interface element 701, interface element 703, interface element 707, and interface element 709 is d3, d1 ⁇ d2 ⁇ d3.
  • the electronic device can select the interface element whose distance from interface element 705 is less than the first threshold to be subject to "gravity" Influenced interface elements. For example, d1 ⁇ d2 ⁇ first threshold ⁇ d3, then the electronic device can regard interface element 702, interface element 704, interface element 706, and interface element 708 as interface elements affected by "gravity”, and interface element 701, interface Element 703, interface element 707, and interface element 709 will not be affected by "gravity”.
  • the electronic device determines the distance between two interface elements
  • the center point of the two interface elements is used as the reference point for calculation.
  • this application The embodiment is not limited to this.
  • any point in the two interface elements can be selected as the reference point.
  • an electronic device calculates the distance between two interface elements, it can select the two points with the shortest distance between the two interface elements as the reference points. Taking the interface element 705 and the interface element 702 as an example, the midpoint of the upper boundary of the interface element 705 and the midpoint of the lower boundary of the interface element 702 can be selected as the reference point.
  • an electronic device when it calculates the distance between two interface elements, it can select the two points with the longest distance between the two interface elements as the reference points.
  • the interface element 705 and the interface element 701 as an example, the intersection point of the right boundary and the lower boundary of the interface element 705 and the intersection point of the upper boundary and the left boundary of the interface element 701 can be selected as the reference point.
  • the electronic device may separately calculate the horizontal distance and the vertical distance between the two interface elements, and then calculate the distance between the two interface elements based on at least one of the horizontal distance and the vertical distance and the distance between the interface elements.
  • the direction of movement determines the distance between two interface elements.
  • the lateral distance between interface element 705 and interface element 706 is d4, and interface element 706 is affected by the "gravity" of interface element 705 and can move toward interface element 705, and the movement direction is horizontal, then The distance between interface element 705 and interface element 706 may be the lateral distance therebetween.
  • the distance between interface element 705 and interface element 702 may be the longitudinal distance between the two.
  • the horizontal distance between interface element 705 and interface element 701 is d4, the vertical distance between interface element 7-5 and interface element 701 is d5, and the moving direction of interface element 701 is neither horizontal nor horizontal. If it is not vertical, the distance between the interface element 701 and the interface element 705 can be determined by the horizontal distance d4 and the vertical distance d5 and based on the movement direction of the interface element 701. As an example, as shown in (d) of Figure 7 , based on the size of the lateral distance d4 and the longitudinal distance d5, the electronic device can determine a right-angled triangle with the lateral distance d4 and the longitudinal distance d5 as two right-angled sides. A triangle has a hypotenuse.
  • the electronic device can determine a line segment within the right triangle, and the direction of the line segment is the same as the moving direction of the interface element 701. Then the electronic device can determine the length of the line segment as d6 based on the principle of trigonometric functions, That is, the distance d6 between interface element 701 and interface element 705.
  • the electronic device can determine the angle between the moving direction of the interface element 701 and the horizontal direction, and the angle between the moving direction of the interface element 701 and the vertical direction. If the angle between the moving direction of the interface element 701 and the horizontal direction is greater than the angle between the moving direction of the interface element 701 and the horizontal direction. If the angle between the movement direction of 701 and the longitudinal direction is determined, the electronic device can determine that the longitudinal distance between interface element 701 and interface element 705 is the distance between interface element 701 and interface element 705 .
  • the electronic device can determine that the lateral distance between the interface element 701 and the interface element 705 is The distance between 705. If the angle between the movement direction of the interface element 701 and the horizontal direction is equal to the angle between the movement direction of the interface element 701 and the vertical direction, then the electronic device can randomly select the horizontal distance or the vertical distance between the interface element 701 and the interface element 705 to be the distance between the interface element 701 and the interface The distance between elements 705.
  • the first threshold may be factory-preset in the operating system, may be set by the user, or may be set by a third-party developer.
  • the first threshold may be related to factors such as size, level, color, etc. of the interface element. For example, the larger the size of the interface element, the larger the corresponding first threshold. In other words, the larger the size of the interface element, the larger its "gravity" range. For another example, interface elements of different levels or colors may correspond to different first thresholds.
  • One possible implementation method is that the electronic device can select a geometric area centered on the center point of the interface element that produces the "gravity” effect as the “gravity” range of the interface element.
  • the electronic device can be The center point of occurrence of element 705 is the center of the circle, and r1 is the radius to make a circle.
  • the circle can be understood as the "gravity" range of interface element 705, then the interface element 702, interface element 704, and interface element 706 covered by the "gravity” range , the interface element 708 can be an interface element affected by "gravity”, and the occurrence center point can be any point in the interface element 705.
  • the electronic device can take the occurrence center point of interface element 705 as the geometric center, and select a rectangle as the "gravity" of interface element 705. range, the length of the rectangle is 2b and the width is 2a, then the interface elements 704 and 706 covered by the "gravity" range can be interface elements affected by "gravity”, and the occurrence center point can be in the interface element 705 Any point.
  • r1, a, and b can be fixed values, they can be factory-preset by the operating system, or they can be set by the user, or Can be set by third-party developers.
  • r1, a, and b may be related to the size, level, color, and other factors of the interface element.
  • the larger the size of the interface element the larger r1, a, and b can be.
  • interface elements of different levels or colors can correspond to different r1, a, and b.
  • the electronic device may treat interface elements that intersect the boundaries of the geometric region as interface elements that are subject to "gravitational" influence.
  • the electronic device can make a circle with the center point of interface element 705 as the center point, and the circle covers interface element 701, interface element 705, etc. 702, interface element 703, interface element 704, interface element 706, interface element 707, interface element 708, interface element 709, among which interface element 701, interface element 703, interface element 707, and interface element 709 intersect with the boundary of the circle, then The electronic device can regard interface element 701, interface element 703, interface element 707, and interface element 709 as interface elements affected by "gravity", while interface element 702, interface element 704, interface element 706, and interface element 708 are not related to the circle. If the boundaries intersect, interface element 702, interface element 704, interface element 706, and interface element 708 are not interface elements affected by "gravity".
  • One possible implementation method is that the electronic device can determine the "gravity” range of the interface element based on the movement direction of the interface element that generates the "gravity” effect.
  • interface element being operated is interface element 705, where interface element 701 is located at the upper left of interface element 705, interface element 702 is located above interface element 705, and interface element 703 is located at The upper right of interface element 705, interface element 704 is located on the left of interface element 705, interface element 706 is located on the right of interface element 705, interface element 707 is located on the lower left of interface element 705, and interface element 708 is located below interface element 705. Interface element 709 is located on the upper right side of interface element 705.
  • the electronic device can determine the interface element affected by the "gravity" of the interface element 705 according to the movement direction of the interface element 705.
  • the interface element 704 located on the left of the interface element 705 and the interface element 706 located on the right of the interface element 705 can be affected by the "gravity" of the interface element 705 and move. , while other interface elements do not move.
  • the moving directions of the interface element 704 and the interface element 706 can be the same as or opposite to the interface element 705.
  • the interface element 703 at the upper right of the interface element 705, the interface element 707 at the lower left of the interface element 705, and the interface element 709 at the lower right of the interface element 705 can be moved by the "gravity" of the interface element 705, while other interface elements does not move, where the moving direction of interface element 704, interface element 706, interface element 701, interface element 703, interface element 707 and interface element 709 can be the same or opposite to that of interface element 705, or it can be the movement direction of interface element 704, interface element 706,
  • the element center points of interface element 701, interface element 703, interface element 707 and interface element 709 point to the vector direction of the occurrence center point of interface element 705.
  • interface element 702 located above the interface element 705 and the interface element 708 located below the interface element 705 can move under the influence of the "gravity" of the interface element 705, and Other interface elements do not move.
  • the movement direction of interface element 702 and interface element 708 can be the same as or opposite to that of interface element 705. It can also be that the element center points of interface element 702 and interface element 708 point to the occurrence center point of interface element 705. vector direction.
  • the interface element 702 located above the interface element 705, the interface element 708 located below the interface element 705, the interface element 701 located above the left of the interface element 705, the interface element 701 located above the interface element 705, Interface element 703 at the upper right of interface element 705, interface element 707 at the lower left of interface element 705, and interface element 709 at the lower right of interface element 705 can move under the influence of the "gravity" of interface element 705, while other interface elements do not move.
  • the moving direction of interface element 701, interface element 702, interface element 703, interface element 707, interface element 708 and interface element 709 can be consistent with the interface element 705. Same or opposite, it can also be a vector direction in which the element center points of interface element 701, interface element 702, interface element 703, interface element 707, interface element 708 and interface element 709 point to the occurrence center point of interface element 705.
  • the interface element 702 located above the interface element 705 and the interface element 708 located below the interface element 705 can move under the influence of the "gravity" of the interface element 705, while other interfaces The elements do not move, and the moving direction of the interface element 702 and the interface element 708 can be the same as or opposite to the interface element 705.
  • the interface element 705 moves up or down, the interface element 702 located above the interface element 705, the interface element 708 located below the interface element 705, the interface element 701 located at the upper left side of the interface element 705, the interface element 705 located above the interface element 705.
  • the interface element 703 at the upper right, the interface element 707 at the lower left of the interface element 705, and the interface element 709 at the lower right of the interface element 705 can move under the influence of the "gravity" of the interface element 705, while other interface elements do not move.
  • the movement direction of interface element 701, interface element 702, interface element 703, interface element 707, interface element 708 and interface element 709 can be the same as or opposite to that of interface element 705, or it can also be the movement direction of interface element 701, interface element 702 and interface element 703.
  • the element center points of interface element 707, interface element 708 and interface element 709 point to the vector direction of the occurrence center point of interface element 705.
  • the interface element 704 located on the left of the interface element 705 and the interface element 706 located on the right of the interface element 705 can be affected by the "gravity" of the interface element 705 and move. While other interface elements do not move, the moving direction of interface element 704 and interface element 706 can be the same as or opposite to that of interface element 705, or the element center points of interface element 704 and interface element 706 point to the occurrence center point of interface element 705 vector direction.
  • the interface element 703 at the upper right of element 705, the interface element 707 at the lower left of interface element 705, and the interface element 709 at the lower right of interface element 705 can be moved by the "gravity" of interface element 705, while other interface elements cannot
  • the movement direction of interface element 701, interface element 703, interface element 704, interface element 706, interface element 707 and interface element 709 can be the same or opposite to that of interface element 705, or it can be the movement direction of interface element 701, interface element 703, interface
  • the element center points of element 704, interface element 706, interface element 707 and interface element 709 point to the vector direction of the occurrence center point of interface element 705.
  • the interface element 701 located at the upper left of the interface element 705 and the interface element 709 located at the lower right of the interface element 705 can be affected by the "gravity" of the interface element 705. Move, while other interface elements do not move.
  • the moving direction of interface element 701 and interface element 709 can be the same as or opposite to that of interface element 705. It can also be that the element center points of interface element 701 and interface element 709 point to the occurrence center of interface element 705. The vector direction of the point.
  • the interface element 706 on the right side of the interface element 705, the interface element 708 below the interface element 705, and the interface element 709 on the lower right side of the interface element 705 can be moved by the "gravity" of the interface element 705, while other interface elements cannot
  • the movement direction of interface element 701, interface element 702, interface element 704, interface element 706, interface element 708 and interface element 709 can be the same or opposite to that of interface element 705, or it can be the movement direction of interface element 701, interface element 705, interface
  • the element center points of element 704, interface element 706, interface element 708 and interface element 709 point to the vector direction of the occurrence center point of interface element 705.
  • the interface element 703 located at the upper right of the interface element 705 and the interface element 707 located at the lower left of the interface element 705 can be affected by the "gravity" of the interface element 705. Move, while other interface elements do not move.
  • the moving direction of interface element 703 and interface element 707 can be the same as or opposite to that of interface element 705. It can also be that the element center points of interface element 703 and interface element 707 point to the occurrence center of interface element 705. The vector direction of the point.
  • the interface element 702 above the interface element 705, the interface element 703 located on the upper right side of the interface element 705, and the interface element 706 located on the right side of the interface element 705 can be moved by the "gravity" of the interface element 705, while other interface elements cannot
  • the moving direction of interface element 702, interface element 703, interface element 704, interface element 706, interface element 707 and interface element 708 can be the same as or opposite to that of interface element 705, or it can be the direction of movement of interface element 702, interface element 703, interface
  • the element center points of element 704, interface element 706, interface element 707 and interface element 708 point to the vector direction of the occurrence center point of interface element 705.
  • the interface element 703 located at the upper right of the interface element 705 and the interface element 707 located at the lower left of the interface element 705 can be affected by the "gravity" of the interface element 705 and move. , while other interface elements do not move.
  • the moving direction of interface element 703 and interface element 707 can be the same or opposite to that of interface element 705, or the interface
  • the element center points of element 703 and interface element 707 point to the vector direction of the occurrence center point of interface element 705.
  • the interface element 703 located at the upper right of the interface element 705, the interface element 707 located at the lower left of the interface element 705, the interface element 702 located above the interface element 705, the interface element 702 located above the interface element 705, the interface element 706 located above the interface element 705, and the interface element 704 on the left of the interface element 705 can move under the influence of the "gravity" of the interface element 705, while other interface elements do not move.
  • the movement direction of interface element 702, interface element 703, interface element 704, interface element 706, interface element 707 and interface element 708 can be the same or opposite to that of interface element 705, or it can also be the movement direction of interface element 702, interface element 703 and interface element 704.
  • the element center points of interface element 706, interface element 707 and interface element 708 point to the vector direction of the occurrence center point of interface element 705.
  • the interface element 701 located at the upper left of the interface element 705 and the interface element 709 located at the lower right of the interface element 705 can be affected by the "gravity" of the interface element 705 and move. , while other interface elements do not move.
  • the moving direction of interface element 701 and interface element 709 can be the same as or opposite to that of interface element 705. It can also be that the element center points of interface element 701 and interface element 709 point to the occurrence center point of interface element 705. vector direction.
  • the interface element 705 moves to the upper right or lower left
  • the interface element 708 below 705, the interface element 706 located to the right of interface element 705, and the interface element 709 located at the lower right of interface element 705 can be moved by the influence of interface element 705, while other interface elements do not move, among which interface element 701 , the moving direction of interface element 702, interface element 704, interface element 706, interface element 708 and interface element 709 can be the same or opposite to that of interface element 705, or it can be interface element 701, interface element 702, interface element 704, interface element 706.
  • the element center points of interface element 708 and interface element 709 point to the vector direction of the occurrence center point of interface element 705.
  • One possible implementation method is that the electronic device determines the "gravity" range of the interface element based on the level of the interface element.
  • interface element 705, interface element 702, and interface element 706 may move due to the "gravitational pull" of interface element 705.
  • the interface element 705, the interface element 702, and the interface element 706 can be understood as the same type of interface element, that is, the electronic device can determine the Interface elements of the same type as the interface elements that generate "gravity" are interface elements affected by "gravity”.
  • the interface element 705 , the interface element 702 , and the interface element 706 are interface elements with a parent-child hierarchical relationship
  • the interface element 705 , the interface element 702 , and the interface element 706 can be subject to the "gravity" of the interface element 705 Move due to influence.
  • the electronic device can determine The interface element 701 , the interface element 703 , the interface element 704 , the interface element 707 , the interface element 708 , and the interface element 709 are determined to be interface elements affected by the “gravity” of the interface element 705 .
  • the electronic device may determine that an interface element that is not the same type as the interface element that generates the "gravity” is an interface element that is affected by the "gravity.”
  • One possible implementation method is that the electronic device determines the "gravity" range of the interface element based on the size of the interface element.
  • the electronic device can select an interface element with the same size as interface element 705, that is, interface element 702, interface element 707, interface element 708 as an interface element affected by "gravity".
  • the electronic device can not only select an interface element with the same size as the interface element 705, but also select an interface element whose size difference with the interface element 705 is less than the second threshold as the interface element affected by "gravity". For example, if the size of the interface element 706 is larger than the size of the interface element 705, but the size difference between the two is less than the second threshold, the electronic device can also regard the interface element 706 as an interface element affected by "gravity”.
  • interface element being operated is interface element 705 , in which interface element 701 , interface element 703 , interface element 704 , and interface element 709 have the same size, and interface element 702 , the interface element 705, the interface element 707, and the interface element 708 have the same size, and the size of the interface element 706 is larger than the size of the interface element 705, then the electronic device can select an interface element that is the same size as the interface element 705 or smaller than the size of the interface element 705, That is, interface element 701, interface element 702, interface element 703, interface element 704, interface element 707, interface element 708, and interface element 709 are interface elements affected by "gravity".
  • the electronic device may determine interface elements of the same size or similar sizes as interface elements of the same type.
  • the electronic device can determine that the interface element that is the same or similar in size to the interface element that generates "gravity” is determined to be an interface element affected by "gravity.” That is, the electronic device can determine that the interface element that has the same size as the interface element that generates "gravity” Interface elements of the same type are interface elements affected by "gravity”.
  • the electronic device may determine that the interface element whose size difference exceeds the second threshold with the interface element that generates "gravity” is determined to be an interface element affected by "gravity.” That is, the electronic device may determine that the interface element that generates "gravity” is the interface element that generates "gravity.” "Interface elements with different types are interface elements affected by "gravity”.
  • the factors that affect the "gravity” range in the embodiments of the present application are not limited to the factors shown above.
  • the interface display method provided by the embodiments of the present application also supports customizing the factors that affect the "gravity” range.
  • the electronic device can also use the same color or a different color of the interface element that generates "gravity” as the interface element affected by "gravity” according to the color of the interface element, where the color of the interface element can be background color.
  • Interface elements of the same color can be understood as interface elements of the same color system.
  • the electronic device determines the "gravity range”
  • it can determine the interface elements of the same color system as interface elements affected by the "gravity”.
  • interface elements of the same color can be understood as having the same RGB color of the interface elements.
  • interface elements of the same color can be understood as having the same R component in the RGB colors of the interface elements.
  • interface elements of the same color can be understood as having the same G component in the RGB color of the interface elements.
  • interface elements of the same color can be understood as having the same B component in the RGB color of the interface elements.
  • the electronic device can determine the "gravity" range of the interface element by combining multiple factors. For example, it can combine two factors among the multiple factors, for example, the distance factor and the level factor. Combination, combination of geometric area factors and level factors, combination of movement direction factors and level, combination of size factors and level factors, combination of distance factors and direction factors, combination of distance factors and size factors, combination of distance factors and geometric area factors Combination, combination of geometric area factors and direction factors, combination of geometric area factors and size factors, combination of direction factors and size factors.
  • electronic devices can also combine more than two of multiple factors to determine the "gravity" range of interface elements.
  • the electronic device can determine the "gravity" range of the interface factors that generate “gravity” through the distance between interface elements and the hierarchical relationship of the interface elements.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the distance between the interface elements, and then finally determine the "gravity"-generating interface factors from the set based on the hierarchical relationship of the interface elements. Gravity" range.
  • interface element 705 is the operated interface element
  • the distance between interface element 705 and interface element 704 and interface element 706 is d1
  • the distance between interface element 705 and interface element 702 and interface element 708 is d1.
  • the distance is d2.
  • the distance between interface element 705 and interface element 701, interface element 703, interface element 707, and interface element 709 is d3.
  • Interface element 702, interface element 703, interface element 705, and interface element 706 are For interface elements at the same level, the electronic device can select interface elements whose distance from the interface element 705 is less than the first threshold and which belong to the same level as the interface element as interface elements affected by "gravity". For example, d1 ⁇ d2 ⁇ first threshold ⁇ d3, then the electronic device can regard interface element 702 and interface element 706 as interface elements affected by "gravity", while other interface elements will not be affected by "gravity”.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the hierarchical relationship of the interface elements, and then finally determine the "gravity"-generating interface factors from the set based on the distance between the interface elements. Gravity" range.
  • the electronic device can select a geometric area centered on the center point of the interface element that generates the "gravity” effect, and determine the “gravity” range based on the interface elements in the geometric area at the same level as the interface element that generates the "gravity” effect. .
  • the electronic device can select a geometric area to determine the set of interface elements affected by "gravity”, and then finally determine the "gravity” range of the interface factors that generate “gravity” from the set based on the hierarchical relationship of the interface elements.
  • the electronic device can be interfaced
  • the occurrence center point of element 705 is the center of the circle, and a circle is drawn with r1 as the radius.
  • the interface element 702 and interface element 706 covered by the circle and at the same level as interface element 705 can be interface elements affected by "gravity".
  • the occurrence center The point can be any point in interface element 705.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the hierarchical relationship of the interface elements, and then finally determine the "gravity” of the interface factors that generate “gravity” from the set based on the selected geometric area. scope.
  • the electronic device determines the interface factors based on the selected geometric area, it can select interface elements that intersect with the boundary of the geometric area.
  • the electronic device can first The first set of interface elements affected by "gravity" is determined according to the level of the interface element 705.
  • the first set includes the interface element 702, the interface element 703, and the interface element 706.
  • the electronic device can also make a circle with the center point of the interface element 705 as the center point, and determine a second set of interface elements that intersect with the boundary of the circle.
  • the second set includes the interface element 701, the interface element 703, the interface element 707, and the interface element 707. 709.
  • the electronic device can finally regard the interface elements 703 common in the first set and the second set as interface elements affected by "gravity", and other interface elements are not regarded as interface elements affected by "gravity”.
  • the electronic device can determine the "gravity” range of the interface factor that generates “gravity” based on the movement direction of the interface element that generates the "gravity” effect and the level of the interface element.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the movement direction of the interface element that produces the “gravity” effect, and then select from the set the same level as the interface element that produces the “gravity” effect. Interface elements.
  • the electronic device can first determine the set of interface elements affected by "gravitation” based on the level of interface elements that produce “gravity” effects, and then determine the final set of interface elements from the set based on the movement direction of the interface elements that produce “gravity” effects.
  • the electronic device can determine the "gravity" range of the interface factors that generate the “gravity” through the distance between the interface elements and the size of the interface elements.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the distance between the interface elements, and then finally determine the "gravity” of the interface factors that generate “gravity” from the set based on the size of the interface elements. "scope.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the size of the interface elements, and then finally determine the “gravity” of the interface factors that generate “gravity” from the set based on the distance between the interface elements. "scope.
  • the electronic device can determine the "gravity” range of the interface factors that generate “gravity” through the level of the interface element and the size of the interface element.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the level of the interface elements, and then finally determine the "gravity” range of the interface factors that generate “gravity” from the set based on the size of the interface elements. .
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the size of the interface elements, and then finally determine the "gravity” range of the interface factors that generate “gravity” from the set based on the hierarchy of the interface elements. .
  • the electronic device can determine the "gravity” range of the interface factors that generate “gravity” through the level of the interface element and the size of the interface element.
  • the electronic device can determine the "gravity" range of the interface factor that generates the “gravity” through the distance between the interface elements and the movement direction of the interface element that generates the "gravity”.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the distance between the interface elements, and then finally determine the "gravity” generated from the set based on the movement direction of the interface element that generates “gravity”
  • the "gravity" range of interface factors can be first determined.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the movement direction of the interface element that generates “gravity”, and then finally determine the "gravity” generated from the set based on the distance between the interface elements.
  • the "gravity” range of interface factors.
  • the electronic device can select a geometric area centered on the center point of the interface element that generates the "gravity” effect, and determine the “gravity” of the interface element that generates the “gravity” effect based on the distance between the geometric area and the interface element. scope.
  • the electronic device can determine the set of interface elements affected by "gravity” based on the selected geometric area, and then finally determine the "gravity” of the interface factors that generate “gravity” from the set based on the distance between the interface elements. scope.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the distance between the interface elements, and then finally determine the "gravity” of the interface factors that generate “gravity” from the set based on the selected geometric area. "scope.
  • the electronic device can select a geometric area centered on the center point of the interface element that generates the "gravity” effect, and determine the interface that generates the "gravity” effect based on the geometric area and the movement direction of the interface element that generates the “gravity” effect.
  • the electronic device can determine the set of interface elements affected by "gravity” based on the selected geometric area, and then finally determine the interface that generates "gravity” based on the movement direction of the interface elements that generate “gravity” from the set.
  • the "gravity” range of factors.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the movement direction of the interface elements that generate “gravity”, and then finally determine the interface elements that generate “gravity” from the set based on the selected geometric area.
  • the "gravity” range of interface factors.
  • the electronic device can select a geometric area centered on the center point of the interface element that generates the "gravity” effect, and determine the "gravity” range of the interface element that generates the “gravity” effect based on the geometric area and the size of the interface element.
  • the electronic device can determine the set of interface elements affected by "gravity” based on the selected geometric area, and then finally determine the "gravity” range of the interface factors that generate “gravity” from the set based on the size of the interface elements.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the size of the interface elements, and then finally determine the "gravity” range of the interface factors that generate “gravity” from the set based on the selected geometric area. .
  • the electronic device can determine the "gravitational force” range of the interface element that produces the “gravitational force” based on the movement direction of the interface element that produces the “gravitational force” and the size of the interface element.
  • the electronic device can determine the set of interface elements affected by "gravity” based on the movement direction of the interface element that generates "gravity”, and then finally determine the interface factor that generates "gravity” from the set based on the size of the interface element. range.
  • the electronic device can first determine the set of interface elements affected by "gravity” based on the size of the interface elements, and then finally determine the interface that generates “gravity” from the set based on the movement direction of the interface element that generates “gravity” The “gravity” range of factors.
  • the electronic device can also determine the "gravity" range based on two or more factors. For specific descriptions, please refer to the above. The description of determining the range of "gravity” based on two factors will not be described here.
  • the size of the interface elements in the embodiment of the present application can affect the moving distance and moving speed of the interface elements affected by "gravity".
  • the moving distance of the application icon 402 may also increase accordingly.
  • the "mass" of the application icon 402 and/or the application icon 408 increases. According to the universal gravitation formula, the "gravity" experienced by the application icon 402 increases. , then the moving distance of the application icon 402 can be increased.
  • the movement of the application icon 402 in (c) in Figure 4 may be that the application icon first moves in a direction closer to the application icon 408, and then moves in a direction away from the application icon 408 to return to the original position, then the application icon
  • the moving distance of 402 includes the distance moved in the direction of the application icon 408 and the distance moved away from the application icon 408.
  • the increase in the moving distance of the application icon 402 can be understood as the increase in the "gravitational force" received by the application icon 402.
  • the distance it moves in the direction closer to the application icon 408 increases, so the distance it moves when returning to the original position also increases.
  • the moving distance of the application icon 402 can increase as the size of the application icon increases.
  • the moving speed of the application icon 402 may also increase accordingly.
  • the "mass" of the application icon 402 and/or the application icon 408 increases. According to the universal gravitation formula, the "gravity" experienced by the application icon 402 increases. , then the moving speed of the application icon 402 can be increased.
  • the interface element 705 is an operated interface element
  • the interface element 702 and the interface element 706 are interface elements affected by "gravity”
  • the distance between 705 is the same as the distance between interface element 706 and interface element 705. Since the size of interface element 706 is larger than the size of interface element 702, the electronic device can make the movement distance of interface element 706 larger than the movement distance of interface element 702.
  • the interface element 705 is an operated interface element
  • the interface element 702 and the interface element 706 are interface elements affected by "gravity”
  • the distance between 705 is the same as the distance between interface element 706 and interface element 705.
  • the size of interface element 706 is larger than the size of interface element 702.
  • the size of the interface element can be equated to the mass. According to the formula of universal gravitation, the interface element The "gravitational force" experienced by interface element 706 is greater than the "gravitational force" experienced by interface element 702.
  • the electronic device can make the moving speed of interface element 706 faster than the moving speed of interface element 702. .
  • the electronic device can still make the moving speed of the interface element 706 equal to the moving speed of the interface element 702, or make the moving speed of the interface element 706 smaller than the interface element. 702 movement speed.
  • the interface element 705 is an operated interface element
  • the interface element 702 and the interface element 706 are interface elements affected by "gravity”
  • the distance between 705 is the same as the distance between interface element 706 and interface element 705.
  • the size of interface element 706 is larger than the size of interface element 702.
  • the interface element can be The size of the element is equivalent to the mass. According to the formula of universal gravitation, the "gravity" experienced by the interface element 706 is greater than the "gravity" experienced by the interface element 702.
  • the electrons The device may cause the acceleration of interface element 706 to be greater than the acceleration of interface element 702, or the electronic device may cause the acceleration of interface element 706 to be equal to the "gravitational force" of interface element 702 even though the "gravitational force” experienced by interface element 706 is greater than the "gravitational force” experienced by interface element 702. acceleration, or causing the acceleration of interface element 706 to be less than the acceleration of interface element 702 .
  • the size of the interface elements that generate "gravity” and the size of the interface elements that are subject to “gravity” can affect the linkage animation effect.
  • the impact of the size of the interface elements mentioned above on the linkage animation effect is only an example.
  • the linkage animation effect can be determined based on any functional relationship including the size of the interface element that generates "gravity” and/or the size of the interface element that is subject to "gravity”, that is, the moving distance and movement of the interface element that is subject to "gravity” time speed changes.
  • the distance between interface elements can affect the moving distance and moving speed of the interface elements affected by "gravity".
  • the moving distance of the interface element 402 will decrease. As the distance between the application icon 402 and the application icon 408 increases, according to the universal gravitation formula, the "gravity" on the application icon 402 weakens, and the moving distance of the application icon 402 can be reduced.
  • the moving distance of the interface element 402 will decrease. As the distance between the application icon 402 and the application icon 408 increases, according to the universal gravitation formula, the "gravitational force" on the application icon 402 weakens, and the moving speed of the application icon 402 can be reduced.
  • the distance between the application icon 402 and the application icon 408 is greater than the distance between the application icon 404 and the application icon 408 , and the distance between the application icon 402 and the application icon 404 The sizes are the same. According to the formula of universal gravitation, the "gravity" experienced by the application icon 404 is greater than the "gravity” experienced by the application icon 402, so the moving distance of the application icon 402 can be smaller than the moving distance of the application icon 404.
  • the distance between the application icon 402 and the application icon 408 is greater than the distance between the application icon 404 and the application icon 408
  • the distance between the application icon 402 and the application icon 404 The sizes are the same.
  • the "gravitational force" experienced by the application icon 404 is greater than the "gravitational force” experienced by the application icon 402. If the moving speeds of the application icon 402 and the application icon 404 are both uniform, the electronic device can make the application icon 404 The moving speed is faster than the moving speed of the application icon 402.
  • the electronic device can still make the moving speed of the application icon 404 equal to the moving speed of the application icon 402, or make the moving speed of the application icon 404 smaller than that of the application icon. 402 movement speed.
  • the electronic device can cause the application icon to The acceleration of 402 may be less than the acceleration of interface element 404, or although the "gravitational force" experienced by application icon 404 is greater than the "gravitational force” experienced by application icon 402, the electronic device may still cause the acceleration of application icon 404 to be equal to the acceleration of application icon 402, or The acceleration of the application icon 402 is greater than the acceleration of the interface element 404 .
  • the linkage animation effect can be determined based on any functional relationship including the distance between interface elements, that is, the moving distance of the interface element that is subject to "gravity” and the change in speed during movement.
  • k is a constant parameter
  • M is the "mass" of the interface element
  • R is the size of the interface element
  • r is the distance between two interface elements.
  • formula (1) can be simplified into formula (4),
  • the "gravity" between interface elements is directly proportional to the size of the interface elements and inversely proportional to the distance between the interface elements.
  • the distance moved by the interface element affected by "gravity” can be determined through formula (5).
  • a is a constant coefficient
  • r is the distance between two interface elements
  • R is the size of the interface element affected by "gravity”
  • s is the distance moved by the interface element affected by "gravity”
  • 0.1 and 0.8 are fixed Constant, this fixed constant can be changed.
  • the area, perimeter, etc. of the interface element can be used to characterize the size of the interface element. From formula (5), it can be obtained that s is inversely proportional to r and directly proportional to R. This distance can be the final distance traveled by the interface element affected by Gravity.
  • the distance is the one-way distance of the interface element affected by "gravity”.
  • the distance of movement if the interface element affected by "gravity” moves in both directions, for example, the interface element affected by "gravity” first moves in the direction of the interface element that generates “gravity”, and then moves away from the interface element that generates "gravity” direction, the distance is the distance that the interface element affected by "gravity” moves in both directions.
  • the embodiments of this application support customizing the density of interface elements. If the density of interface elements is defined, the "gravity" of the interface elements can be determined based on the density and size of the interface elements, and then the "gravity" of the interface elements can be transformed according to formula (5) Obtain formula (6):
  • M is the mass of the interface element affected by "gravity”.
  • the friction force in nature is introduced into the interface elements, so that the animation effect is closer to the natural effect.
  • Figure 8 shows a schematic diagram of the impact of friction force on the linkage animation effect provided by the embodiment of the present application.
  • the interface element 801, the interface element 802, and the interface element 803 are displayed on the same interface.
  • the electronic device can define the "maximum static friction force” and “sliding friction force” of the interface elements, the “maximum static friction force” and “Sliding friction” can be collectively referred to as “friction”.
  • the “maximum static friction” can be understood as the maximum force that interface elements need to overcome when moving.
  • “Sliding friction” can be understood as the “friction” that interface elements receive during their movement. force”.
  • the “gravitational force” needs to be greater than or equal to the "maximum static friction force” before the interface element starts to move.
  • the "gravitational force” between interface element 801 and interface element 802 and the “gravitational force” between interface element 801 and interface element 803 are equal, both are f1
  • the "maximum static friction force” of interface element 802 is f2
  • the “maximum static friction force” of interface element 803 is f3, where f3 ⁇ f1 ⁇ f2, because the "maximum static friction force” of interface element 803 is less than or equal to that of interface element 801 and If the "gravity” between the interface elements 803 is greater than the "gravity” between the interface element 801 and the interface element 803, the interface element 803 will not move. move.
  • the electronic device when f3 is greater than f1, can increase f1 to make f1 greater than f3, so that the interface element 802 will also move, but the time when the interface element 802 moves may be later than when the interface element 803 moves. time, so that there is a delay in the movement of interface element 802. In other words, when the user operates the interface element 801 and reaches the preset time, the interface element 802 starts to move.
  • the moving speed of the interface element 803 may be uniform. It can be understood that In order to prevent the interface element 803 from being affected by "gravity” and “sliding friction" when moving, the electronic device can stop the movement of the interface element 803 after the interface element 803 moves a certain distance.
  • the electronic device can determine the movement effect of the interface element 803 based on the "sliding friction" of the interface element 803 and the “gravity” it experiences.
  • the electronic device can cause the interface element 803 to start moving toward the interface element 801 at an initial speed.
  • the "gravitational force” received by the interface element 803 continues to increase, so the movement speed of the interface element 803 can be accelerated.
  • the interface element 803 may move to a certain position and then no longer move. In other examples, interface element 803 may eventually coincide with interface element 801.
  • the electronic device can cause the interface element 803 to start moving toward the interface element 801 at an initial speed. Or the initial velocity of the interface element 803 can be 0. Since the "sliding friction" of the interface element 803 is less than the "gravity” it receives, the interface element 803 can move at an accelerated speed, and the moving speed continues to increase. In some examples, the interface element 803 may move to a certain position and then no longer move. In other examples, interface element 803 may eventually be merged with interface element 801.
  • the electronic device can cause the interface element 803 to start moving toward the interface element 801 at an initial speed.
  • the "gravitational force” received by the interface element 803 continues to increase, so the movement speed of the interface element 803 can be accelerated.
  • the interface element 803 can move to a certain position and stop moving.
  • the electronic device can change the "sliding friction" of the interface element 803 so that the "sliding friction” is greater than the "gravity", then the interface element 803 Movement speed can be slowed down until it stops moving.
  • the electronic device can cause the interface element 803 to start moving toward the interface element 801 at an initial speed. Or the initial velocity of the interface element 803 can be 0. Since the "sliding friction" of the interface element 803 is less than the "gravity” it receives, the moving speed of the interface element 803 can be accelerated.
  • the electronic device can change the "sliding friction" of the interface element 803 so that the "sliding friction” is greater than the "gravity”, and then the moving speed of the interface element 803 can be slowed down until Stop moving.
  • the "friction force" of the interface element when determining the "friction force" of the interface element, can be determined in a variety of ways.
  • the "maximum static friction force" of interface element #1 is defined as f#1
  • the "maximum static friction force” of interface element #2 is defined as f#2.
  • the electronic device randomly determines the "friction force" of the interface element, then the electronic device can determine the interface element into different “friction forces" for the same interface element in different times of "gravity” linkage. , in other words, in this possible implementation, the "friction" of the interface elements may not be fixed.
  • the electronic device can define the "friction force" of the interface element according to the level of the interface element.
  • the interface elements of the same interface may have different levels, and the electronic device can determine the "friction" of the interface elements based on the levels of the interface elements.
  • the electronic device can determine the "friction force" of the interface element based on the color of the interface element.
  • the color of the interface element can be an RGB color
  • the electronic device can calculate the "friction force" of the interface element based on the RGB component of the color of the interface element.
  • interface element #1 includes color #1, and the R component of color #1 is 131, the G component is 134, and the B component is 13.
  • the electronic device can determine the sum 278 of the above three components as the " "maximum static friction force”.
  • the electronic device can determine the "friction force" of the interface element according to preset rules based on the dispersion of the RGB component of the color of the interface element.
  • the dispersion of the RGB component of the color of the interface element is higher, its “friction”
  • the greater the “friction force” for example, if the dispersion of the RGB components of the color of the interface element is higher, the greater the “dynamic friction factor” of the interface element is, the greater the “friction force” is.
  • the "friction force" corresponding to each color can be calculated separately, and then the “friction force” of the interface element can be obtained by summing up the corresponding "friction force" of each color.
  • the electronic device can determine the "friction force" of the interface element based on the size of the interface element. For example, different The size can correspond to different "friction forces". The larger the interface element, the greater the "friction force" it can have.
  • the gravity in nature is introduced into the interface elements, making the animation effect closer to the natural effect.
  • the "gravity" of the interface element can be determined in the following ways.
  • the electronic device can randomly determine the "gravity" of interface elements. For example, define the "gravity" of interface element #1 as G#1, and the "gravity" of interface element #2 as G#2.
  • the electronic device randomly determines the "gravity” of the interface element, then the electronic device can determine the interface element to have different “gravity” for the same interface element in different times of "gravity” linkage.
  • the "gravity" of the interface elements may not be fixed.
  • the electronic device can define the "gravity" of the interface element according to the level of the interface element.
  • the interface elements of the same interface may have different levels, and the electronic device can determine the "gravity" of the interface elements based on the levels of the interface elements.
  • the electronic device can determine the "gravity" of the interface element based on the color of the interface element.
  • the color of the interface element can be an RGB color
  • the electronic device can calculate the "gravity” of the interface element based on the RGB component of the color of the interface element.
  • interface element #1 includes color #1, and the R component of color #1 is 131, the G component is 134, and the B component is 13.
  • the electronic device can determine the sum 278 of the above three components as the " "maximum static friction force”.
  • the electronic device can determine the "gravity" of the interface element according to preset rules based on the dispersion of the RGB component of the color of the interface element. For example, if the dispersion of the RGB component of the color of the interface element is higher, its “gravity" "The bigger.
  • the "gravity” corresponding to each color can be calculated separately, and then the “gravity” of the interface element can be obtained by summing up the corresponding "gravity” of each color.
  • the electronic device can determine the "gravity" of the interface element based on the size of the interface element. For example, different sizes can correspond to different "gravities”. The larger the interface element, the greater its "gravity”.
  • the "gravity" of the folder can be obtained by adding the "gravity" of the multiple interface elements.
  • the pressure in nature is introduced into the interface elements, making the animation effect closer to the natural effect.
  • Figure 9 shows a schematic diagram of the impact of pressure on the linkage animation effect provided by the embodiment of the present application.
  • an interface element 901 , an interface element 902 , and an interface element 903 are displayed on the same interface.
  • the interface element 901 , the interface element 903 , and the interface element 904 are displayed on the same interface.
  • the electronic device when the user presses the interface element, can cause the size of the pressed interface element to increase, and the change in size of the pressed interface element can be proportional to the pressure with which the user presses the interface element. For example, as shown in (c) and (d) in Figure 9, since f1 ⁇ f2, when the pressure of the user pressing the interface element 901 changes from f1 to f2, the size of the interface element 901 can become larger.
  • the moving animation effect of the interface elements that generates "gravity” can also affect the linkage animation effect, thereby strengthening the connection between the interface elements that generate "gravity” and the interface elements affected by "gravity”.
  • the direction in which the interface elements move in the implementation of this application not only includes the plane direction, but also includes the depth direction.
  • the depth direction refers to the direction perpendicular to the screen of the electronic device.
  • Figure 10 shows a schematic diagram of the impact of the movement direction on the linkage animation effect provided by the embodiment of the present application.
  • interface element 1001, interface element 1002, and interface element 1003 are displayed on the same interface.
  • the user presses interface element 1001. If the movement direction of the interface element includes the depth direction, the size of interface element 1001 can be reduced.
  • the interface The reduction in the size of element 1001 can be understood as the interface element 1001 moving closer to the screen of the electronic device. Since the interface element 1002 and the interface element 1003 are affected by the "gravity" of the interface element 1001, the size of the interface element 1002 and the interface element 1003 can also be reduced.
  • the size reduction ratio of interface element 1001 is greater than the size reduction ratio of interface element 1002 and interface element 1003 .
  • the above describes the "gravity” range, the size of interface elements, the distance between interface elements, friction, gravity, pressure, the moving animation effect of the interface elements that generate “gravity”, and the impact of the moving direction on the linkage animation effect, similar to Due to the influence of various factors on the "gravity” range, the above factors can also be combined with each other to affect the linkage animation effect. The following will describe the impact on the linkage animation effect based on different influencing factors.
  • electronic devices can determine linkage animation effects based on the size and "friction" of interface elements.
  • the electronic device needs to be based on the "gravitational force” and “Friction” determines whether the interface element can move, the distance it moves when it can move, and the motion state of the movement.
  • Figure 11 shows the impact of different influencing factors provided by the embodiment of the present application on the linkage animation effect.
  • the electronic device displays interface elements 1101, 1102, 1103, and 1104, where the interface element 1101 is the operated interface element, and the interface element 1101 and the interface element 1102 , the distances between interface elements 1103 and 1104 are equal, and the size of interface element 1102 is larger than the sizes of interface element 1103 and interface element 1104, then the "gravitation" experienced by interface element 1102 is greater than the "gravitation” experienced by interface element 1103 and the “gravity” exerted by the interface element 1104. If friction is not considered, the moving distance of the interface element 1102 can be greater than the moving distance of the interface element 1103 and the interface element 1104.
  • the interface element 1102 since the size of the interface element 1102 is larger, its “maximum static friction force" is also larger. When the “maximum static friction force" of the interface element 1102 is greater than the "gravity” experienced by the interface element 1102, the interface element 1102 1102 may not move. Correspondingly, the size of interface element 1103 and interface element 1104 is smaller, and their “maximum static friction force” is also smaller, so interface element 1103 and interface element 1104 can still move. In some cases, although the interface element 1103 and the interface element 1104 can still move, the distance that the interface element 1103 and the interface element 1104 move can be reduced because the interface element 1103 and the interface element 1104 are affected by "friction".
  • the size and "friction" of interface elements can not only affect whether interface elements move and how far interface elements move, but also affect the moving speed of interface elements. Continuing to refer to (a) in FIG. 11 , due to the influence of "friction force", the moving speed of the interface element 1103 and the interface element 1104 can be reduced.
  • electronic devices can determine linkage animation effects based on the distance and "friction" between interface elements.
  • the greater the distance between interface elements the smaller the “gravitational force” they experience. If the “friction” of the interface elements is taken into account, the electronic device needs to be based on the “gravitational force” and “Friction” determines whether the interface element can move, the distance it moves when it can move, and the motion state of the movement.
  • the electronic device displays interface elements 1101, 1102, 1103, and 1104.
  • the interface element 1101 is an operated interface element, and the interface element 1101
  • the distance between interface element 1103 and interface element 1104 is equal and smaller than the distance between interface element 1102, and the sizes of interface element 1102, interface element 1103 and interface element 1104 are equal, then the "gravity" exerted by interface element 1102 Less than the "gravitational force” experienced by interface element 1103 and the "gravitational force” experienced by interface element 1104. If friction is not considered, the moving distance of interface element 1102 can be smaller than the moving distance of interface element 1103 and interface element 1104.
  • the "gravitational force” it receives is smaller.
  • the "maximum static friction force” of interface element 1102 is greater than the “maximum static friction force” of interface element 1102
  • the interface element 1102 may not move when the “gravity” is exerted.
  • the distance between the interface element 1103 and the interface element 1104 and the interface element 1101 is larger, and the "gravity” they receive is larger, so that even if the interface element 1103 There is “friction” with the interface element 1104, and the interface element 1103 and the interface element 1104 can still move. In some cases, although the interface element 1103 and the interface element 1104 can still move, the distance that the interface element 1103 and the interface element 1104 move can be reduced because the interface element 1103 and the interface element 1104 are affected by "friction".
  • the distance and "friction" between interface elements can not only affect whether the interface elements move and how far the interface elements move, but also affect the moving speed of the interface elements. Continuing to refer to (b) in FIG. 11 , due to the influence of "friction force", the moving speed of the interface element 1103 and the interface element 1104 can be reduced.
  • electronic devices can determine linkage animation effects based on the size and "gravity" of interface elements.
  • electronic devices can determine linkage animation effects based on the distance and "gravity" between interface elements.
  • the linkage animation effect is determined according to the size and “gravity” of the interface element and the linkage is determined according to the distance between the interface elements and "gravity”
  • animation effects please refer to the description of determining the linkage animation effect based on the size and “friction” of interface elements and determining the linkage animation effect based on the distance and "friction” between interface elements.
  • the electronic device can determine the linkage animation effect based on "pressure” and "friction".
  • the electronic device displays interface elements 1101, 1102, 1103, and 1104, where the interface element 1101 is the operated interface element.
  • the interface element 1101 is the operated interface element.
  • the pressure of 1101 is f1, interface element 1102, interface element 1103, and interface element 1104 do not move.
  • the pressure of the user operating interface element 1101 increases from f1 to f2, interface element 1102, interface element 1103, and interface element 1104 move.
  • electronic devices can determine linkage animation effects based on "gravity” and “friction.”
  • electronic devices can determine linkage animation effects based on "pressure” and "movement direction.”
  • the electronic device displays interface elements 1101, 1102, 1103, and 1104.
  • the interface element 1101 is the operated interface element.
  • the pressure of 1101 is f1 if the movement direction includes the depth direction, the sizes of interface element 1101, interface element 1102, interface element 1103, and interface element 1104 can be reduced.
  • the pressure of the user pressing interface element 1101 increases from f1 to f2, The size reduction range of the interface element 1101, the interface element 1102, the interface element 1103, and the interface element 1104 increases.
  • the electronic device can also determine the linkage animation effect based on two or more factors.
  • the concepts of multiple forces in nature are introduced into the interface elements, so that the interface elements can be linked, and the linked animation effects symbolize the natural laws, which improves the user experience and user perception, making the user's operations more efficient. Close to real world feeling.
  • Figure 12 shows a schematic diagram of the animation process and related control logic of the linked animation effect according to an embodiment of the present application.
  • animation essentially displays the current interface or control in real time based on the refresh rate, using the principle of human visual persistence to make the user feel that the displayed picture is in motion. Therefore, as shown in FIG. 12 , the electronic device may first determine the initial state 1210 of the animation and the final state 1220 of the animation. In addition, the electronic device may determine the animation time 1205 of the process of transforming from the initial state 1210 of the linkage animation to the final state 1220 of the linkage animation. Furthermore, the electronic device can also determine the animation type 1230 and the animation transformation form 1240.
  • the animation type 4430 may include the displacement animation 1232 of the interface element, the scaling animation 1234, the rotation animation 1236, the transparency animation 1238, etc., and the "animation transformation form 1240" may be controlled by the interpolator 1242 and the estimator 1244, for example, in a fixed In the animation time 1205, the relevant transformation speed is controlled, etc.
  • the transformation speed may be the moving speed of the interface element.
  • the displacement animation effect generated by the linkage animation effect in the embodiment of the present application can be that the interface element first moves in a certain direction and then resets in the opposite direction, or it can also be that the interface element moves a certain distance in a certain direction. then stop.
  • the duration and interpolator of the two animations can be defined respectively, and the application side can adjust them as needed.
  • the electronic device may employ any suitable displacement time curve known or discovered in the future to control the movement details of the interface elements.
  • the electronic device may choose to use a Bezier curve or an elastic force curve as the movement curve of the interface element.
  • electronic devices can use second-order Bezier curves to control interface elements to move in a certain direction first, and use elastic force curves to control the reset of interface elements, or vice versa.
  • the electronic device can also use one of Bezier curves or elastic force curves to control movement in a certain direction and control the reset of interface elements.
  • electronic devices can conveniently control the movement of interface elements based on Bezier curves or elastic force curves, making the linkage animation effect more in line with users' habitual perceptions of "attraction” and "repulsion” in life. This further improves the user experience.
  • the following will describe an example in which the electronic device controls the interface element to move in a certain direction based on the second-order Bezier curve, and an example in which the electronic device controls the reset of the interface element based on the elastic force curve.
  • FIG. 13 shows a schematic diagram in which the displacement of an interface element changes with time according to an embodiment of the present application and is a Bezier curve.
  • the abscissa represents time and the ordinate represents distance.
  • the interpolator used to control the movement of interface elements may use a common curve interpolator. Referring to FIG. 4, FIG. 5 and (a) in FIG. 13, the electronic device can control the application icon 404 to move according to the displacement time curve shown in (a) in FIG. 13 during the t0-t2 time period.
  • the electronic device can achieve different movement effects of interface elements by selecting two second-order points of the second-order Bezier curve. In this way, the interaction of the displacement time curve with time will produce a sense of rhythm in motion. Electronics adjusting the displacement-time curve can cause interface elements to accelerate and decelerate rather than move at a constant rate.
  • any curve form can be equally implemented as the displacement time curve. Movement of interface elements.
  • curve forms include, but are not limited to, first-order Bezier curves, third-order or higher-order Bezier curves, other curve forms known or discovered in the future, or straight lines.
  • (b) in FIG. 13 shows a schematic diagram of the displacement of the interface element changing with time according to an embodiment of the present application.
  • the curve is a critical damping elastic force curve.
  • the displacement time curve of the application icon 404 depicted in FIG. 5 at time t2-t4 is an elastic force curve, for example, a critical damping elastic force curve.
  • the elastic force curve can use different states in different operating scenarios, that is, critical damping, under-damping and over-damping. Under different damping states, the elastic force curves of displacement time can be different.
  • the three cases are as follows: The square of the damping is equal to 4 times the mass times the stiffness, which is critical damping.
  • the embodiment of the present application exemplarily depicts the displacement time curve of the interface element reset according to the embodiment of the present application as a critical damping elastic force curve
  • the embodiment of the present application is not limited thereto, but is equally applicable to Any other curve, for example, can also be an under-damped elastic force curve or an over-damped elastic force curve.
  • the displacement time curve of the application icon 404 at t2-t4 is an under-damped elastic force curve
  • the displacement time curve of the application icon 404 at t2-t4 The displacement time curve at the moment is the over-damping elastic force curve.
  • the relevant settings of the elastic engine difference are as follows:
  • Figure 13 (a) and (b) show the displacement time curves of interface elements that move under the influence of "gravity".
  • the interface elements that generate "gravity” can continue to move after the user lets go. For example, if the user slides the interface element, the interface element can continue to move forward for a certain distance after the user's finger leaves the screen, and the displacement time curve of the interface element can be as shown in (a) and (b) in Figure 12
  • the displacement time curve shown can also be determined by the friction model provided below.
  • v(t) is the final velocity of the interface element
  • V 0 is the initial velocity of the interface element
  • the initial velocity of the interface element can be related to the speed at which the user throws and slides the interface element.
  • f is the "friction force" experienced by the interface element
  • s (t) is the moving distance of the interface element
  • t is the moving time
  • the constant parts in formula (7) and formula (8) are only examples, and the embodiments of the present application are not limited thereto.
  • the "friction" of interface elements can be configured by electronic devices or users or developers. Due to the existence of "friction", v(t) is 0, then t can be calculated through formula (4), and then t is substituted into the formula (5) The moving distance of interface elements can be obtained.
  • the above friction model can also be used to determine the movement distance of interface elements affected by "gravity”. If the above friction model is used to determine the movement distance of interface elements "affected by" gravity, "subject to” gravity
  • the initial velocity of the affected interface elements can be configured by the electronic device, and the initial velocity can be related to the user's operation. For example, the greater the speed at which the user throws and slides the interface elements, the greater the initial velocity of the interface elements "affected” by gravity.
  • the interface element can be an interface element that generates "gravity” or an interface element affected by "gravity”.
  • whether there are restrictions on where interface elements can be moved can also control where interface elements stop moving.
  • the positions to which interface elements can be moved are not limited.
  • application icons 402, application icons 403, application icons 404, The application icons 405, 406, 407, 409, 410, 411, 412, 414, and 414 may always move as the application icon 408 moves.
  • the distance determined based on the friction model is the distance the above app icon will move.
  • the locations to which interface elements can be moved are limited. In other words, interface elements can only be moved to predetermined positions. In other words, the distance that interface elements can move is limited.
  • the distance the interface element will move can be determined based on the friction model
  • the distance the interface element will move needs to be adjusted so that the interface Elements can be moved to predetermined positions. For example, if the interface element is moved to the closest distance to the stop position determined based on the friction model and is not at the predetermined position, then the distance to which the interface element is to be moved needs to be adjusted so that the interface element can be moved to the predetermined position. For example, the interface element can be moved to a predetermined position closest to the stopping position determined based on the friction model. From this, the distance the interface element will move can be determined based on both the friction model and the predetermined position.
  • the application icon on the desktop is used as an example.
  • the embodiment of the present application is not limited thereto.
  • the interface display provided by the embodiment of the present application will be introduced below with reference to Figures 14-21. Scenario diagram of the method.
  • Figure 14 shows a set of GUIs provided by the embodiment of the present application.
  • the electronic device displays an interface 1401.
  • the interface 1401 may be a negative screen.
  • the electronic device displays cards 1402, 1403, 1404, and 1405 on the interface 1401.
  • the above-mentioned adjacent cards The distance between them can be equal.
  • the electronic device may display a GUI as shown in (b) of FIG. 14 in response to detecting the user's sliding operation on the card 1403.
  • the electronic device can cause the card 1403 to move upward in response to the user's operation of sliding the card 1403 upward.
  • the card 1402 is subject to the "repulsive force" of the card 1403
  • the card 1402 can also move upward.
  • 1404 and card The piece 1405 is "attracted" by the card 1403 and can move upward.
  • the distance between card 1403 and card 1402 can be reduced first and then restored to the original distance, the distance between card 1403 and card 1404 and the distance between card 1403 and card 1405 The distance between them can be increased first and then restored to the original distance. If the user's upward sliding operation is to press the card 1403 and slide upward, the distance between the card 1403 and the card 1402 can be reduced to a certain distance and then no longer change. Similarly, the distance between the card 1403 and the card 1404 and the distance between the card 1403 and the card 1403 The distance between 1405 can be increased to a certain distance and then no longer changes. When the user lets go, the distance between the above cards can be restored to the original distance.
  • cards 1402, 1404, and 1405 can have different animation effects, that is, the displacement time curves of cards 1402, 1403, 1404, and 1405 can be different. And ⁇ d1, ⁇ d2, and ⁇ d3 may be different.
  • the electronic device can be made greater than the moving speed of card 1405.
  • card 1404 and card 1405 will not be linked with card 1403, that is, they will not move upward.
  • the card when the electronic device moves the card, the card can be determined based on the "friction force” and “gravity” of the card using any functional relationship that includes “friction force” and “gravity”. The speed and distance of movement.
  • the minimum distance d1 between card 1402 and card 1403 can be reduced, the maximum distance d2 between card 1403 and card 1404 can be increased, and the maximum distance d2 between card 1403 and card 1405 can be increased.
  • the distance d3 can be increased.
  • the impact of the above influencing factors on the animation effect is only an example.
  • the animation effects of the card 1402, the card 1404 and the card 1405 can be determined based on any one or more of the influencing factors introduced above.
  • the influencing factors A detailed description of the impact of animation effects can be found above.
  • the card 1406 is not displayed in the interface 1401 in (c) of Figure 14, the card 1406 already exists during the screen layout, that is, it can be understood that there is “gravity” between the card 1403 and the card 1406. , then when the card 1403 is slid, the card 1406 can move in the sliding direction of the card 1403 due to the "gravity” effect, that is, move upward.
  • the distance between the card 1403 and the card 1404, the distance between the card 1403 and the card 1405, and the distance between the card 1403 and the card 1406 may first increase and then decrease.
  • the above-mentioned card can maintain the distance shown in (d) in Figure 14.
  • the distance-time curve of the above-mentioned card during movement can refer to the distance-time curve shown in Figure 5. For the sake of simplicity, it will not be described again here.
  • card 1403 and card 1406 can first increase and then decrease, since card 1406 has been affected by "gravity” and started to move when it is not displayed in interface 1401, then card 1403 and card 1406 The distance between cards 1406 becomes too large The process may occur before the card 1406 is displayed on the interface 1401, so in some cases, for the user, what the user may see is the process of the distance between the card 1403 and the card 1406 becoming smaller.
  • the time distance curve of card 1403 and card 1406 can be shown as (e) in Figure 14.
  • Curve #1 in (e) in Figure 14 is the distance time curve of card 1403, and curve #2 is the distance time curve of card 1403.
  • the distance-time curve of 1406 can be seen from the figure. In the t0-t1 time period, the distance moved by card 1403 is greater than the distance moved by card 1406 in the same time, so the distance between card 1403 and card 1406 becomes larger. , when reaching time t1, card 1406 appears in interface 1401, and card 1403 no longer moves, and card 1406 continues to move, then the distance between card 1403 and card 1406 can become smaller.
  • the distance between card 1403 and card 1406 can be represented by the spacing time diagram shown in (f) in Figure 14. It can be seen from the figure that in the t0-t1 time period, the distance between card 1403 and card 1406 The distance between card 1403 and card 1406 increases from d1 to d2, and within the time period t1-t2, the distance between card 1403 and card 1406 decreases from d2 to d1.
  • interface elements there is a correlation between interface elements.
  • one interface element When one interface element is operated, it can be correlated with other interface elements, which strengthens the connection between interface elements, and the linkage between interface elements conforms to physical laws, allowing users to It can have a more realistic feeling and improve the user experience.
  • Figure 15 shows a set of GUIs provided by the embodiment of the present application.
  • the electronic device displays an interface 1501, which is a message notification interface.
  • the interface 1501 displays messages 1502, 1503, 1504, 1505, text elements 1506, and a search bar 1507.
  • the electronic device detects the user's sliding downward operation. For example, the user can slide down the message 1503, or the user can press and hold the message 1503 and slide downward, and the electronic device can In response to the user's operation, the message 1502, the message 1504, and the message 1505 move due to the influence of "gravity", but the text element 1506 and the search bar 1507 do not move.
  • the message 1508 above the message 1502 is also affected by the "gravity" of the message 1503. As the message 1503 moves downward, the message 1508 is affected by the "gravity" and can be gradually displayed in the interface 1501.
  • the reason why the text element 1506 and the search bar 1507 do not move may be that when the electronic device generates the layout, the level of the text element 1506 and the level of the search bar 1507 are different from the level of the message 1503, then the message 1503 generates " "Gravity" cannot affect text element 1506 and search bar 1507.
  • the reason why the text element 1506 and the search bar 1507 do not move may be the level of the text element 1506 and the "friction force" on the search bar 1507. Then the "gravity" generated by the message 1503 cannot affect the text elements 1506 and 1507. Search bar 1507
  • the distances between message 1502 and message 1503 and message 1503 and message 1508 may first become larger and then smaller. and the distance between them can first become smaller and then become larger. Similar to the above description for Figure 13, a maximum distance may exist between message 1502 and message 1503, a minimum distance may exist between message 1503 and message 1504, a minimum distance may exist between message 1503 and message 1505, and a minimum distance may exist between message 1503 and message 1503. There can be a minimum distance between 1508.
  • the distance between the messages may remain unchanged.
  • message 1502, message 1504, message 1505, and message 1508 can have different animation effects. It should be understood that reference can be made to the above description for specific descriptions, and for the sake of brevity, they will not be described again here.
  • the electronic device can make the text Element 1506 and search bar 1507 move as the user swipes down.
  • the electronic device can reset the message 1502, the message 1503, the message 1504, the message 1505, the text element 1506, and the search bar 1507, as shown in (c in Figure 15 ).
  • the electronic device determines that there is no interface element at the same level as the message 1503 in the interface 1501, it can set other interface elements at different levels as interface elements affected by "gravity".
  • the electronic device can change the "friction force" of the text element 1506 and the search bar 1507, so that the "gravitational force” experienced by the text element 1506 and the search bar 1507 is greater than the "friction force” so that the text element 1506 and the search bar 1507 can move downward. move.
  • the electronic device can change the hierarchical mapping relationship between the text element 1506 and the search bar 1507 so that the level of the text element 1506 and the search bar 1507 is the same as the level of the message 1503, so that the text element 1506 and the search bar 1507 can move downward.
  • the electronic device can determine the animation effects of the text element 1506 and the search bar 1507 according to the above influencing factors.
  • the faster message 1503 moves downward
  • the faster text element 1506 and search bar 1507 may move downward.
  • the text element 1506 and the search bar 1507 may move downward or increase.
  • the size of message 1503 is R1
  • the downward movement distance of message 1503 is d1
  • the downward movement distance of text element 1506 and search bar 1507 can be d2
  • message 1503 The downward movement distance is d1
  • the downward movement distance of the text element 1506 and the search bar 1507 may be d3, then d3>d2.
  • the text element 1506 and the search bar 1507 can move downward or increase.
  • the size of a text element can be characterized by the font size of the text.
  • the electronic device can make the moving speed and moving distance of the text element 1506 and the search bar 1507 satisfy any "friction force" and "gravity” Functional relationship.
  • the impact of the above influencing factors on the animation effect is only an example.
  • the animation effect of the text element 1506 and the search bar 1507 can be determined based on any one or more of the influencing factors introduced above.
  • the electronic device in order to reflect the linkage between the text element 1506 and the search bar 1507 and the message 1503, can not only make the text element 1506 and the search bar 1507 move with the movement of the message 1503, but also make the text element 1506
  • the size of the search bar 1507 increases as the message 1503 moves, so that the GUI as described in (e) of FIG. 15 can be displayed.
  • Figures 14 and 15 show the linkage of interface elements in the notification interface and negative one-screen interface. The embodiments of the present application do not limit the application scenarios.
  • Figure 16 shows a set of GUIs provided by the embodiment of the present application.
  • FIG. 16 shows a note interface.
  • the note interface can display multiple notes.
  • its animation effect can be similar to the animation effects shown in Figures 13 and 14.
  • FIG. 16 shows a gallery interface.
  • the gallery interface can display multiple pictures.
  • the animation effect can be similar to the animation effects shown in Figures 13 and 14. .
  • FIG. 16 shows the service center interface.
  • the service center interface can display multiple application cards.
  • the animation effect can be similar to Figure 13 and Figure 13.
  • FIG. 16 shows a setting interface.
  • the setting interface can display multiple setting options.
  • the animation effect can be similar to the animations shown in Figures 13 and 14 Effect.
  • Figure 17 shows a set of GUIs provided by embodiments of the present application.
  • the electronic device displays an interface 1701 , which is a message notification interface.
  • the interface 1701 displays messages 1702 , 1703 , 1704 , 1705 , and 1706 .
  • the electronic device can detect the user's operation of sliding down the message 1704. In response to the operation, the electronic device can move the message 1702, the message 1703, the message 1705, and the message 1706.
  • the electronic device may respond to the user's downward sliding operation. Since the message 1702 is already the top message, the electronic device may display the interface element 1708 for identifying the refresh.
  • the electronic device can determine the animation effect of the interface element 1708 based on the above-mentioned influencing factors.
  • the electronic device can speed up the refresh because the interface element 1708 is an interface element used to identify refresh.
  • the electronic device can make the moving distance and moving speed of the interface element 1708 satisfy any functional relationship including "friction force" and "gravity".
  • Figure 18 shows a set of GUIs provided by embodiments of the present application.
  • the electronic device displays an interface 1801 , which may be a message notification interface.
  • the interface 1801 displays messages 1802 , 1803 , 1804 , and 1805 .
  • the user can not only slide the messages in the interface 1801 up and down, but also slide the messages in the interface 1801 left and right.
  • the electronic device detects the user's operation of sliding message 1803 to the left, and in response to the operation, the electronic device can cause messages 1802, 1804, and 1805 to move.
  • the moving directions of messages 1802, 1804, and 1805 may be in the same direction as the moving direction of message 1803.
  • the electronic device can determine the animation effects of message 1802, message 1804, and message 1805 based on the above-mentioned influencing factors.
  • the moving direction of message 1802, message 1804, and message 1805 may be in the same direction as the moving direction of message 1803, and due to the distance between message 1802, message 1804, and message 1803 If the distance between message 1805 and message 1803 is less than the distance between message 1805 and message 1803, then within the same time, the electronic device can cause the movement distance of message 1802 and message 1804 to be greater than the movement distance of message 1805.
  • message 1802 and message 1804 can be moved, but message 1805 will not be moved.
  • the electronic device can speed up the movement of message 1802, message 1804, and message 1805.
  • the influence of the above influencing factors on the animation effect is only an example.
  • the animation effects of the message 1802, the message 1804 and the message 1805 can be determined based on any one or more of the influencing factors introduced above.
  • message 1802, message 1804, and message 1805 may no longer move with the movement of message 1803. As the user continues to slide to the left, the message 1803 can gradually disappear in the interface 1801.
  • the electronic device may display the control 1806 on the interface 1801 as the control 1806 moves under the influence of "gravity”.
  • the distance between the message 1803 and the control 1806 may first increase and then decrease during the movement until it stops.
  • the distance between message 1803 and control 1806 may remain constant during movement until it stops.
  • the electronic device can determine the animation effect of the control 1806 based on the above-mentioned influencing factors.
  • the electronic device can make the movement distance and movement speed of the control 1806 satisfy any functional relationship including "friction force” and "gravity”.
  • the electronic device may display the control 1807 on the interface 1801 as the control 1807 moves under the influence of "gravity”.
  • control 1807 is the rightmost control, as the user continues to slide message 1803 to the left, control 1806 and control 1807 may no longer move, but because the control 1806 and control 1807 are affected by "gravity", and the size of control 1806 and control 1807 can become larger.
  • control 1807 is the rightmost control, as the user continues to slide message 1803 to the left, control 1806 and control 1807 can continue to move, and the distance between message 1803 and control 1806 and the distance between message 1803 and control The distance between 1807 can become larger, and the distance between control 1806 and control 1807 can also become larger.
  • control 1806 may no longer increase, and the size of control 1807 may continue to increase, And the electronic device selects control 1807 to perform the function corresponding to the control.
  • the display content of interface elements affected by "gravity” is related to "gravity”.
  • the content displayed by the control 1807 can also change, that is, the opening and closing angle of the "trash can” shown in the figure increases.
  • Figure 18 shows the linkage of interface elements in the message notification interface.
  • the embodiment of the present application does not limit the application scenarios.
  • Figure 19 shows a set of GUIs provided by the embodiment of the present application.
  • the electronic device can display a message on the lock screen interface.
  • the animation effect can be similar to the animation effect shown in Figure 18.
  • the electronic device displays a recorder interface.
  • the recorder interface can display multiple recordings.
  • the animation effect can be similar to the animation effect shown in Figure 18 .
  • the electronic device displays a recently used interface.
  • the recently used interface can display cards corresponding to multiple applications.
  • the user can slide the cards displayed on the interface left and right, and the animation effect can be similar to that shown in the figure.
  • the electronic device displays a call interface.
  • the call interface can display call records.
  • the user can slide the call records displayed on the interface left and right.
  • the animation effect can be similar to the animation effect shown in Figure 18. .
  • the electronic device displays a weather interface.
  • the weather interface can display the weather of multiple cities.
  • the user can slide the weather displayed on the interface left and right, and the animation effect can be similar to the animation shown in Figure 18 Effect.
  • the electronic device displays a to-do item interface.
  • the to-do item interface can display multiple to-do items.
  • the user can slide the to-do items displayed on the interface left and right, and the animation effect can be similar to The animation effect shown in Figure 18.
  • Figure 20 shows a set of GUIs provided by the embodiment of the present application.
  • the electronic device displays an interface 2001.
  • the electronic device can display application icons 2002, 2003, 2004, 2005, folders 2006, Application icon 2007, when the user clicks on folder 2006, the electronic device can expand the folder 2006. Since the size of the folder becomes larger, for application icon 2002, application icon 2003, application icon 2004, application icon 2005, application icon 2007 If the "gravity" increases, the application icons 2002, 2003, 2004, 2005, and 2007 can move toward the folder 2006 for a certain distance and then return to their original positions.
  • the application icon 2002, the application icon 2003, the application icon 2004, the application icon 2005, and the application icon 2007 may first move a certain distance away from the folder 2006 and then return to the original position.
  • Figure 21 shows a set of GUIs provided by the embodiment of the present application.
  • the electronic device displays an interface 2101 , and the interface 2101 displays application icons 2102 , 2103 , 2104 , 2105 , 2106 , 2107 , and 2108 , application icon 2109, application icon 2110, application icon 2111, application icon 2112, application icon 1213, application icon 2114.
  • the electronic device when the electronic device detects that the user presses the application icon 2108, the electronic device can cause the application icon affected by the "gravity" of the application icon 2108 to move, that is, the application icon 2102, The application icon 2103, the application icon 2104, and the application icon 2105 move.
  • the application icon 2102, the application icon 2103, the application icon 2104, and the application icon 2105 can be moved to the application icon 2108 and merged, and the application icon 2108 can be changed.
  • the above detailed description of the process of moving the application icon 2102, the application icon 2103, the application icon 2104, and the application icon 2105 and the determination of the application icon affected by the "gravity" of the application icon 2108 can be found above. Examples , since the application icon 2104 is the closest to the application icon 2108, the application icon 2104 can be merged with the application icon 2108 first. Similarly, the application icon 2103 and the application icon 2105 can be merged with the application icon 2108 at the same time, and the application icon 2102 can be merged with the application icon 2108 at the end. Icon 2108 merge.
  • Figure 22 shows a schematic diagram of the relationship between the linkage framework and the interface associated with the linkage animation effect according to the embodiment of the present application.
  • the interface may be a system interface or an interface of a third-party application.
  • the linkage framework 2202 can provide animation effect capabilities 2204.
  • Animation effect capability 2204 may be in AAR format 2206, JAR format 2208 and system interface 2210.
  • the interface 2214 can implement various operations on interface elements, such as move operations 2216, merge operations 2218, expand operations 2220, delete operations 2222, and other operations 2224.
  • the interface 2214 can use the gravity dynamic effect capability 2204 provided by the linkage frame dynamic effect 2202 by integrating 2212.
  • the interface 2214 can also use the animation effect capability 2204 provided by the linkage framework 2202 by calling (for example, the system interface 2210).
  • the linkage framework can provide animation effects in the form of AAR, JAR, and system interfaces. After integration, the interface 2214 can be applied to various scenarios required in the field.
  • Figure 23 shows a schematic diagram of a system framework for implementing animation effect capabilities or functions according to an embodiment of the present application.
  • the dynamic effect capability of the linkage framework is implemented based on the overall architecture of the operating system of the electronic device (for example, Android or Hongmeng), which can include mainstream 4-layer logic processing.
  • the data processing process starts from the bottom layer. presented to the user. Users can mainly use and experience the functions of motion effects at the application layer.
  • the interactive relationship between the capabilities of the interface and the linkage framework is depicted in Figure 23.
  • the system framework may include an application layer 2310, an application framework layer 2330, a hardware abstraction layer 2350, and a kernel layer 2370.
  • Application layer 2310 may include interface 2312.
  • Interface element operations 2314 can be implemented on the interface 2312.
  • Linkage 2314 may include, for example, start linkage, linkage movement, and linkage completion.
  • Application framework layer 2330 may include system services 2332 and extension services 2334.
  • System services 2332 may include various system services, such as Service 2333.
  • the extension service 2334 may include various extension services, such as HwSDK 2335.
  • the hardware abstraction layer (HAL) 2350 may include HAL3.0 2352 and an algorithm 2354. The embodiment of this application does not limit the algorithm.
  • Kernel layer 2370 may include drivers 2372 and physical devices 2374.
  • the physical device 2374 can provide a stream of raw parameters to the driver 2372
  • the driver 2372 can provide a stream of function processing parameters to the physical device 2374 .
  • the linkage framework 2321 used to implement the animation effect capability 2325 may be implemented between the application layer 2310 and the application framework layer 2330 .
  • the linkage framework 2321 may include platform capabilities 2322 and system capabilities 2324, both of which may be used to provide animation effects 2325.
  • the painting effect 2325 may in turn be provided to the interface element operation 2314 of the application layer 2310.
  • Figure 24 shows a schematic diagram illustrating three ways of realizing the linkage animation effect capability or function according to the embodiment of the present application.
  • the relationship 2402 between the AAR format 2401 and the system of the electronic device is: the AAR format 2401 is packaged in binary mode, providing the ability to be integrated on the application side of the system, and the version rhythm can be freely controlled.
  • the system follows the system.
  • the relationship 2404 between the JAR format 2403 and the system of the electronic device is: the JAR format 2403 is packaged with binary capabilities, providing the capability to all components in the system to freely control the version rhythm without following the system.
  • the relationship 2406 between the system interface 2405 and the system of the electronic device is: the system interface 2405 is an interface of the framework layer in the system version, providing capabilities to all components in the system and following system upgrades.
  • the integration method may refer to the AAR and JAR package method
  • the calling method may refer to the system interface method. Therefore, the application scenarios of the embodiments of the present application are not limited to any specific scenarios, but the ability to link animation effects may be displayed in different ways. That is to say, the functions of various methods described previously in this application can be implemented through AAR format files, JAR format files and/or system interfaces of electronic devices. In this way, the ability or function of linked animation effects can be simply and conveniently implemented and provided to applications of electronic devices.
  • Table 1 is a linkage scenario table provided by the embodiment of this application.
  • the up-down linkage scenario can be understood as the user sliding up and down when operating interface elements. For example, consider the GUI shown in Figure 15-17.
  • the left-right linkage scenario can be understood as the user's left-right sliding operation method when operating interface elements. For example, consider the GUI shown in Figure 18-19.
  • the drag-and-drop linkage scenario can be understood as the user using drag and drop when operating interface elements, and there is no limit on the drag direction. For example, take the GUI shown in Figure 4.
  • the addition and deletion linkage scenario can be understood as the user can delete or add interface elements through sliding operations when operating interface elements.
  • the multi-directional linkage scenario can be understood as the direction of the "gravity" generated by the interface elements not only includes the plane direction, but also the depth direction.
  • the depth direction refers to the direction perpendicular to the screen of the electronic device.
  • the user can slide the messages left and right on the interface, or slide left and right to delete the messages in the interface. That is, the GU shown in Figure 18 includes both left and right linkage scenarios, as well as addition and deletion linkage. Scenes.
  • Table 2 is a linkage model table provided by the embodiment of this application.
  • the linkage framework in the embodiment of the present application may include multiple models, wherein the custom model may be customized by the developer, and the developer may affect the movement of interface elements through the custom model.
  • the linkage framework includes a gravity model and a friction model
  • the electronic device determines the animation effect of the interface element, it can determine the animation effect of the interface element based on the "gravity” and "friction” experienced by the interface element.
  • Table 3 shows the animation effect parameters provided by the embodiment of this application.
  • the implementation details of the animation effect can be adjusted by changing the animation parameters. For example, if the screen of the electronic device is large, the change range of the animation effect can also be increased to ensure that the user can clearly see the details of the animation effect.
  • animation parameter table is only an example.
  • the animation parameters in the embodiment of the present application may include some or all of the above parameters, and may also include other parameters, such as screen material.
  • the linkage scenario table shown in Table 1 and the linkage model table shown in Table 2 are for some or all of the linkage scenarios in Table 1 and some or all of the linkage models in Table 2.
  • the embodiments of this application are also aimed at different linkage scenarios and Different linkage models provide different parameter settings.
  • Table 4 shows the parameter configuration of the up-down linkage scenario.
  • the linkage range can be understood as the range in which linkage occurs in up-down linkage.
  • the linkage range parameter can be used to determine the interface elements that occur in the up-down linkage scenario.
  • the linkage amplitude can be understood as the amplitude when the interface element moves in the up-down linkage.
  • the linkage amplitude parameter can be used to determine the distance the interface element moves in the up-down linkage scenario.
  • the linkage time can be understood as the movement time of the interface element.
  • the linkage time parameter can be used to determine the movement time of the interface element in the up-down linkage scenario.
  • the linkage delay can be understood as the delayed movement time of the interface elements.
  • the linkage delay parameter can be used to determine the time when each interface element starts to move.
  • the moving speed is the moving speed of the interface element during the movement.
  • the moving speed may be a fixed value or a functional relationship expression, which is not limited in the embodiments of the present application.
  • the acceleration is the acceleration of the interface element during movement.
  • the movement speed may be a fixed value or a functional relationship, which is not limited in the embodiments of the present application.
  • upper and lower linkage parameter table is only an example.
  • the upper and lower linkage parameters in the embodiment of the present application may include some or all of the above parameters, and may also include other parameters.
  • the up-down linkage parameter table can also include one or more model parameters.
  • the "gravity" model is introduced in the up-down linkage scenario.
  • the up-down linkage parameter table may also include the parameters shown in Table 5.
  • Table 5 shows the parameter configuration of the gravity model.
  • the time parameter can indicate the time when "gravity” is generated.
  • the range parameter indicates the range of Gravity. Influence factors can affect the size of "gravity", range parameters, time parameters, etc.
  • other linkage models can be quantified as influence factors, so that the electronic device can change the parameters in the gravity model through the influence factors, thereby determining the animation effect of the interface element.
  • the electronic device When the electronic device starts the linkage, it can determine the relevant settings of the above-mentioned linkage framework, and then analyze the relevant settings in the above-mentioned linkage framework to determine the animation effect of the interface element during the linkage movement, so that the linkage can be completed.
  • Figure 25 shows a schematic flow chart of the interface display method provided by the embodiment of the present application. As shown in Figure 25, the method includes:
  • the electronic device can display a first interface, which includes M interface elements, M>1 and is an integer.
  • the electronic device may have an interface 401, and the interface 401 displays multiple application icons.
  • the electronic device displays a negative screen 1401, and the negative screen 1401 displays multiple cards.
  • the user's operation is detected and the first interface element is determined, including:
  • the electronic device detects the user's operation on any one of the M interface elements, and determines any one of the interface elements as the first interface element.
  • the user clicks on the interface element as shown in (b) of Figure 4 .
  • the user's gesture operation is detected, and the first interface element is determined according to the type of each of the M interface elements.
  • the user operates an interface element and determines the interface element as the first interface element.
  • the embodiment of the present application is not limited to this.
  • the user can slide in the blank space of the first interface through gesture operation. to refresh the first interface, that is, use
  • the electronic device can use the type of each interface element in the first interface, for example, the highest-level interface element in the first interface as the interface element that generates "gravity", then Other interface elements can be affected by "gravity" and move together.
  • S2503 Determine N interface elements affected by the first interface element according to the type of the first interface element.
  • N interface elements affected by the first interface element are determined according to the type of the first interface element, including:
  • N interface elements having the same type as the first interface element are determined as interface elements affected by the first interface element.
  • the electronic device determines the type of the first interface element, it can determine N interface elements of the same type as the first interface element as interface elements affected by the first interface element, 1 ⁇ N ⁇ M-1, where The N interface elements affected by the first interface element include the second interface element.
  • N interface elements are determined according to the type of the first interface element, including:
  • N interface elements that are of different types from the first interface element are determined to be interface elements affected by the first interface element.
  • the electronic device may determine N interface elements that are of different types from the first interface element as interface elements affected by the first interface element.
  • Different types can be understood as different levels, different colors, different sizes, etc.
  • N interface elements of the same type as the first interface element are determined, including:
  • the electronic device may determine that all interface elements in the first interface element except the first interface element are interface elements affected by the first interface element, that is, all interface elements in the first interface are interface elements of the same type.
  • N interface elements of the same type as the first interface element are determined to be interface elements affected by the first interface element, including:
  • the electronic device can determine, based on the level of the first interface element, that N interface elements with the same level as the first interface element are interface elements affected by the first interface element, that is, the interface elements with the same level in the first interface are of the same type. interface elements.
  • the electronic device may determine an interface element at the same level as the first interface element as an interface element affected by the first interface element.
  • N interface elements of the same type as the first interface element are determined to be interface elements affected by the first interface element, including:
  • the electronic device can determine, based on the size of the first interface element, that N interface elements with the same size as the first interface element are interface elements affected by the first interface element, that is, the interface elements with the same size in the first interface are of the same type. interface elements.
  • the electronic device may determine an interface element that has the same size as the first interface element as the interface element affected by the first interface element.
  • the electronic device may determine an interface element that is the same size as the first interface element, or has a size difference less than a threshold with the first interface element, as an interface element affected by the first interface element.
  • N interface elements of the same type as the first interface element are affected by the first interface element.
  • Affected interface elements include:
  • the electronic device determines a first direction of movement of the first interface element
  • the electronic device determines, based on the first direction, that N interface elements in the first direction of the first interface element are interface elements affected by the first interface element; or
  • the electronic device determines, according to the second direction, that N interface elements in the second direction of the first interface element are interface elements affected by the first interface element, where the second direction is the opposite direction to the first direction.
  • the electronic device can determine the interface element on the left side of the first interface element to be the same interface element as the first interface element.
  • the interface elements to the left of the first interface element may include interface elements directly to the left of the first interface element, and may also include interface elements to the upper left and/or lower left of the first interface element.
  • N interface elements of the same type as the first interface element are determined to be interface elements affected by the first interface element, including:
  • the electronic device determines, based on the color of the first interface element, N interface elements that have the same color as the first interface element as interface elements affected by the first interface element.
  • N interface elements of the same type as the first interface element are determined to be interface elements affected by the first interface element, including:
  • the electronic device may determine the distance between the first interface element and the M-1 interface elements, and determine N based on the distance between the first interface element and the M-1 interface elements that are of the same type as the first interface element.
  • the interface element is an interface element affected by the first interface element, that is, the interface elements within a preset distance are interface elements of the same type as the first interface element.
  • the electronic device may determine the distance between the first interface element and M-1 interface elements, and then determine the interface element whose distance from the first interface element is smaller than the first threshold as the interface affected by the first interface element. element.
  • N interface elements of the same type as the first interface element are determined to be interface elements affected by the first interface element, including:
  • the electronic device may determine the occurrence center point of the first interface element, and then determine the first geometric region based on the occurrence center point, and determine N interface elements that are covered by the first geometric region and/or intersect with the boundary of the first geometric region as being affected by Interface elements affected by the first interface element.
  • the electronic device can use the geometric center point of the interface element as the center point, select the geometric area, and wrap the geometric area and/or intersect with the boundary of the geometric area.
  • Interface elements are identified as interface elements that are affected by the interface element.
  • Geometric area coverage can be understood as interface elements completely within the geometric area.
  • S2504 Determine the first animation effect of the second interface element according to the first linkage parameter.
  • the electronic device can determine the first animation effect of the second interface element based on the first linkage parameter, where the animation effect includes the movement distance of the second interface element and the state during movement.
  • the linkage parameters in the embodiment of the present application include at least one of the following: the size of the first interface element, the size of the second interface element, the distance between the first interface element and the second interface element, and the restrictions of the second interface element. Parameters and animation effects of the first interface element.
  • the restriction parameter of the second interface element may be a parameter set by the electronic device to restrict the movement of the second interface element.
  • the limit of the second interface element may be the "friction" and/or "gravity" of the second interface element.
  • the electronic device can move the second interface element according to the animation effect.
  • the method before S2505, the method further includes:
  • the electronic device may determine a delay time, which is a time difference between the first interface being operated and the second interface element starting to move. For example, 1 second after the first interface element is clicked, the second interface element starts to move.
  • the first delay time may be preconfigured.
  • the first delay time may be determined based on the distance between the first interface element and the second interface element. For example, when the distance between the first interface element and the second interface element is D1, the first delay time may be T1, and when the distance between the first interface element and the second interface element is D2, the first delay time may be T2.
  • moving the second interface element according to the first animation effect includes:
  • the second interface element is moved according to the first animation effect.
  • the curve of the displacement time change of the animation effect of the second interface element may be a Bezier curve or an elastic force curve
  • the method further includes:
  • the method further includes:
  • the size of the first interface element is changed.
  • the method further includes:
  • the first linkage parameter also includes the pressure with which the user performs the operation.
  • the method further includes:
  • an interface element When an interface element is operated or determined to be an interface element that exerts a gravitational influence, it can be correlated with other interface elements, causing other interface elements to be linked, strengthening the relationship between the interface elements.
  • the connection between interface elements, and the linkage between interface elements conforms to the laws of physics, allowing users to have a more realistic feeling and improving the user experience.
  • An embodiment of the present application also provides an electronic device, including a functional module for implementing each step involved in the above method embodiment. It should be noted that all relevant content of each step involved in the above method embodiment can be quoted from the functional description of the corresponding functional module, and will not be described again here.
  • the electronic device provided by the embodiment of the present application is used to perform the above interface display method, and therefore can achieve the same effect as above.
  • An embodiment of the present application also provides an electronic device, including: a processor, a memory, an application program, and a computer program.
  • a processor a memory
  • an application program a computer program
  • Each of the above devices can be connected through one or more communication buses.
  • the one or more computer programs are stored in the above-mentioned memory and configured to be executed by the one or more processors.
  • the one or more computer programs include instructions, and the above-mentioned instructions can be used to cause the electronic device to execute each of the above-mentioned tasks.
  • Various steps of the electronic device in the embodiment are examples of the electronic device, including: a processor, a memory, an application program, and a computer program.
  • the processor may be the processor 110 shown in FIG. 1
  • the memory may be the internal memory 120 shown in FIG. 1 and/or an external memory connected to the electronic device.
  • An embodiment of the present application also provides a chip.
  • the chip includes a processor and a communication interface.
  • the communication interface is used to receive signals and transmit the signals to the processor.
  • the processor processes the signals.
  • the method for displaying the interface as described in any of the previous possible implementations is executed.
  • This embodiment also provides a computer-readable storage medium.
  • Computer instructions are stored in the computer-readable storage medium.
  • the electronic device causes the electronic device to execute the above-mentioned related method steps to implement the above-mentioned embodiments.
  • the method of interface display is not limited to, but not limited to, but not limited to, but not limited to,
  • This embodiment also provides a computer program product.
  • the computer program product When the computer program product is run on a computer, it causes the computer to perform the above related steps to implement the interface display method in the above embodiment.
  • the terms “when” or “after” may be interpreted to mean “if" or “after” or “in response to determining" or “in response to detecting ...”.
  • the phrase “when determining" or “if (stated condition or event) is detected” may be interpreted to mean “if it is determined" or “in response to determining" or “on detecting (stated condition or event)” or “in response to detecting (stated condition or event)”.
  • the disclosed systems, devices and methods can be implemented in other ways.
  • the device embodiments described above are only illustrative.
  • the division of the units is only a logical function division. In actual implementation, there may be other division methods.
  • multiple units or components may be combined or can be integrated into another system, or some features can be ignored, or not implemented.
  • the coupling or direct coupling or communication connection between each other shown or discussed may be through some interfaces, and the indirect coupling or communication connection of the devices or units may be in electrical, mechanical or other forms.
  • the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or they may be distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.
  • each functional unit in each embodiment of the present application can be integrated into one processing unit, each unit can exist physically alone, or two or more units can be integrated into one unit.
  • the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium.
  • the technical solution of the present application is essentially or the part that contributes to the existing technology or the part of the technical solution can be embodied in the form of a software product.
  • the computer software product is stored in a storage medium, including Several instructions are used to cause a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of this application.
  • the aforementioned storage media include: U disk, mobile hard disk, read-only memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), magnetic disk or optical disk, etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

La présente demande concerne un procédé d'affichage d'interface et un dispositif électronique. Le procédé consiste : à afficher une première interface, la première interface comprenant M éléments d'interface, M > 1, et M étant un nombre entier ; lorsqu'une opération d'un utilisateur est détectée, à déterminer un premier élément d'interface ; en fonction du type du premier élément d'interface, à déterminer N éléments d'interface qui sont affectés par le premier élément d'interface, les N éléments d'interface qui sont affectés par le premier élément d'interface comprenant un second élément d'interface, et 1 ≤ N ≤ M-1, et N étant un nombre entier ; à déterminer un premier effet d'animation du second élément d'interface selon un premier paramètre de liaison ; et à déplacer le second élément d'interface selon le premier effet d'animation. Au moyen de la présente demande, une association entre des éléments d'interface est obtenue, la connexion entre les éléments d'interface est améliorée, et la liaison entre les éléments d'interface satisfait une règle physique, de telle sorte qu'un utilisateur peut ressentir plus de réel, et ainsi l'expérience d'utilisation de l'utilisateur est améliorée.
PCT/CN2023/107682 2022-07-22 2023-07-17 Procédé d'affichage d'interface et dispositif électronique WO2024017185A1 (fr)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210871034.2 2022-07-22
CN202210871034.2A CN117472485A (zh) 2022-07-22 2022-07-22 一种界面显示的方法以及电子设备

Publications (1)

Publication Number Publication Date
WO2024017185A1 true WO2024017185A1 (fr) 2024-01-25

Family

ID=89617150

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/107682 WO2024017185A1 (fr) 2022-07-22 2023-07-17 Procédé d'affichage d'interface et dispositif électronique

Country Status (2)

Country Link
CN (1) CN117472485A (fr)
WO (1) WO2024017185A1 (fr)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104461256A (zh) * 2014-12-30 2015-03-25 广州视源电子科技股份有限公司 界面元素显示方法和***
CN110876067A (zh) * 2018-08-31 2020-03-10 广州虎牙信息科技有限公司 界面元素的显示方法、装置、设备及存储介质
CN113552987A (zh) * 2021-04-20 2021-10-26 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN113568549A (zh) * 2021-04-20 2021-10-29 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104461256A (zh) * 2014-12-30 2015-03-25 广州视源电子科技股份有限公司 界面元素显示方法和***
CN110876067A (zh) * 2018-08-31 2020-03-10 广州虎牙信息科技有限公司 界面元素的显示方法、装置、设备及存储介质
CN113552987A (zh) * 2021-04-20 2021-10-26 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN113568549A (zh) * 2021-04-20 2021-10-29 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品

Also Published As

Publication number Publication date
CN117472485A (zh) 2024-01-30

Similar Documents

Publication Publication Date Title
WO2020187157A1 (fr) Procédé de commande et dispositif électronique
WO2021027725A1 (fr) Procédé d'affichage d'élément de page et dispositif électronique
WO2021000841A1 (fr) Procédé de génération de photo de profil d'utilisateur, et dispositif électronique
CN115469781A (zh) 图形界面显示方法、电子设备、介质以及程序产品
WO2021057203A1 (fr) Procédé d'opération et dispositif électronique
WO2022228042A1 (fr) Procédé d'affichage, dispositif électronique, support de stockage et produit-programme
CN110442277A (zh) 显示预览窗口信息的方法及电子设备
CN110865765A (zh) 终端及地图控制方法
WO2024017185A1 (fr) Procédé d'affichage d'interface et dispositif électronique
WO2023083184A1 (fr) Procédé de gestion de bureau, interface utilisateur graphique et dispositif électronique
WO2024017183A1 (fr) Procédé d'affichage pour une commutation d'interface, et dispositif électronique
CN115480629A (zh) 一种多界面显示的方法和电子设备
RU2809207C2 (ru) Способ обеспечения эффекта обратной связи для пользовательской операции и электронное устройство
WO2023130977A1 (fr) Procédé d'affichage d'interface utilisateur, dispositif électronique, support et produit programme
WO2022143335A1 (fr) Procédé de traitement d'effet dynamique et appareil associé
WO2024099206A1 (fr) Procédé et appareil de traitement d'interface graphique
WO2024139115A1 (fr) Procédé d'affichage et dispositif électronique
WO2024001770A1 (fr) Système, procédé et appareil d'attribution de publicité
WO2023280021A1 (fr) Procédé de génération de papier peint thématique, et dispositif électronique
WO2024012354A1 (fr) Procédé d'affichage et dispositif électronique
WO2024088253A1 (fr) Procédé d'affichage pour écran pliable et dispositif électronique
WO2024149089A1 (fr) Procédé d'affichage, appareil d'affichage et dispositif électronique
WO2024109198A1 (fr) Procédé de réglage de fenêtre et appareil associé
WO2024139934A1 (fr) Procédé de présentation multi-fenêtre pour programmes d'application, et dispositif électronique
WO2023231696A1 (fr) Procédé pour photographier et dispositif associé

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 23842248

Country of ref document: EP

Kind code of ref document: A1