WO2024017185A1 - 一种界面显示的方法以及电子设备 - Google Patents

一种界面显示的方法以及电子设备 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)
French (fr)
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/zh

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

本申请提供了一种界面显示的方法以及电子设备，该方法包括：显示第一界面，所述第一界面包括M个界面元素，M＞1且为整数；检测到用户的操作，确定第一界面元素；根据所述第一界面元素的类型，确定N个受到第一界面元素影响的界面元素，所述N个受到第一界面元素影响的界面元素包括第二界面元素，其中1≤N≤M-1，且为整数；根据第一联动参数，确定所述第二界面元素的第一动画效果；根据所述第一动画效果移动所述第二界面元素，通过本申请，使得界面元素之间存在关联，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。

Description

一种界面显示的方法以及电子设备
本申请要求于2022年7月22日提交中国专利局、申请号为202210871034.2、申请名称为“一种界面显示的方法以及电子设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及电子设备领域，并且更具体地，涉及一种界面显示的方法以及电子设备。
背景技术
随着技术的进步，各种类型的电子设备配置有各种类型的屏幕，其中界面中各种界面元素的显示效果是影响用户体验的重要因素。目前动画的显示效果十分单一，用户缺乏真实的感受。
发明内容
本申请实施例提供一种界面显示的方法以及电子设备，使得界面元素之间存在关联，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。
第一方面，提供了一种界面显示方法，该方法包括：显示第一界面，该第一界面包括M个界面元素，M＞1且为整数；检测到用户的操作，确定第一界面元素；根据该第一界面元素的类型，确定N个受到该第一界面元素影响的界面元素，该N个受到该第一界面元素影响的界面元素包括第二界面元素，其中1≤N≤M-1，且为整数；根据第一联动参数，确定该第二界面元素的第一动画效果，其中该第一联动参数包括该以下中的至少一项：该第一界面元素的尺寸、该第二界面元素的尺寸、该第一界面元素与该第二界面元素之间的距离、该第二界面元素的限制参数，该第一界面元素的动画效果；根据该第一动画效果移动该第二界面元素。
本申请实施例中，界面元素之间存在关联，当一个界面元素***作时或确定为产生引力影响的界面元素时，可以与其他界面元素关联，使得其他界面元素发生联动，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。
结合第一方面，在第一方面的某些实现方式中，该检测到用户的操作，确定第一界面元素，包括：检测到用户针对该M个界面元素中的任意一个界面元素的操作，将该任意一个界面元素确定为该第一界面元素。
结合第一方面，在第一方面的某些实现方式中，该检测到用户的操作，确定第一界面元素，包括：检测到用户的手势操作，根据该M个界面元素的每一个界面元素的类型确定第一界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个受到该第一界面元素影响的界面元素，包括：根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：根据该第一界面元素的层级，确定N个与该第一界面元素层级相同的界面元素为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该方法还包括：根据该第一界面元素的层级确定第三界面元素，其中，该第三界面元素的层级与该第一界面元素的层级不相同；根据第二联动参数，确定该第三界面元素的第二动画效果，其中该第二联动参数包括该以下中的至少一项：该第一界面元素的尺寸、该第三界面元素的尺寸、该第一界面元素与该第三界面元素之间的距离、第三界面元素的限制参数、该第一界面元素的动画效果；根据该第二动画效果移动该第三界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：根据该第一界面元素的颜色，确定N个与该第一界面元素颜色相同的界面元素为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：根据该第一界面元素的尺寸，确定N个与该第一界面元素尺寸相同的界面元素为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：确定该第一界面元素与M-1个界面元素之间的距离，并根据该第一界面元素与该M-1个界面元素之间的距离确定N个与所述第一界面元素类型相同的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：确定该第一界面元素的发生中心点，并根据发生中心点确定第一几何区域，将该第一几何区域包覆和/或与第一几何区域的边界相交的N个界面元素确定为受到该第一界面元素影响的界面元素。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：将该第一界面中除该第一界面元素以外的N个界面元素确定为受到该第一界面元素影响的界面元素，N＝m-1。
结合第一方面，在第一方面的某些实现方式中，若该操作为移动操作，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：确定该第一界面元素的移动的第一方向；根据该第一方向确定N个在该第一界面元素的第一方向的界面元素为受到该第一界面元素影响的界面元素；或根据第二方向确定N个在该第一界面元素的第二方向的界面元素为受到该第一界面元素影响的界面元素，其中该第二方向为该第一方向的相反方向。
结合第一方面，在第一方面的某些实现方式中，该根据该第一界面元素的类型，确定N个与该第一界面元素类型相同的界面元素为受到该第一界面元素影响的界面元素，包括：确定该第一界面元素的发生中心点；根据该发生中心点，确定第一几何区域，将该第一几何区域覆盖或与该第一几何区域的边界相交的界面元素确定为该N个与该第一界面元素类型相同的界面元素。
结合第一方面，在第一方面的某些实现方式中，若该操作为按压操作或点击操作，该方法还包括：响应于该操作，改变该第一界面元素的尺寸。
结合第一方面，在第一方面的某些实现方式中，该第一联动参数还包括该用户执行该操作的压力。
结合第一方面，在第一方面的某些实现方式中，在该根据该效果移动该第二界面元素之前，该方法还包括：确定第一延迟时间；该根据该第一动画效果移动该第二界面元素，包括：在经过该第一延迟时间后，根据该第一动画效果移动该第二界面元素。
结合第一方面，在第一方面的某些实现方式中，该确定第一延迟时间，包括：根据该第一界面元素和该第二界面元素之间的距离确定该第一延迟时间。
结合第一方面，在第一方面的某些实现方式中，该第一延迟时间是预配置的。
结合第一方面，在第一方面的某些实现方式中，该方法还包括：
该第二界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线，其中，该弹性力曲线包括临界阻尼弹性力曲线、过阻尼弹性力曲线、欠阻尼弹性力曲线。
结合第一方面，在第一方面的某些实现方式中，该方法还包括：
若检测到该电子设备的类型由第一类型变为第二类型或该电子设备的屏幕参数发生变化，将该第一动画效果切换为第三动画效果；该根据该第一动画效果移动该第二界面元素，包括：根据该第三动画效果移动该第二界面元素。
第二方面，为本申请实施例的一种电子设备，所述电子设备包括执行上述方面或者上述方面的任意一种可能的设计的方法的模块/单元；这些模块/单元可以通过硬件实现，也可以通过硬件执行相应的软件实现。
第三方面，为本申请实施例的一种芯片，所述芯片与电子设备中的存储器耦合，用于调用存储器中存储的计算机程序并执行本申请实施例上述方面及其上述方面任一可能设计的技术方案；本申请实施例中“耦合”是指两个部件彼此直接或间接地结合。
第四方面，为本申请实施例的一种计算机可读存储介质，所述计算机可读存储介质包括计算机程序，当计算机程序在电子设备上运行时，使得所述电子设备执行如上述方面及其上述方面任一可能设计的技术方案。
第五方面，为本申请实施例的一种计算机程序，所述计算机程序包括指令，当所述指令在计算机上运行时，使得所述计算机执行如上述方面及其上述方面任一可能设计的技术方案。
第六方面，为本申请实施例的一种电子设备上的图形用户界面，所述电子设备具有显示屏、一个或多个存储器、以及一个或多个处理器，所述一个或多个处理器用于执行存储在所述一个或多个存储器中的一个或多个计算机程序，所述图形用户界面包括所述电子设备执行上述方面及其上述方面任一可能设计的技术方案时显示的图形用户界面。
第七方面，为本申请实施例的一种电子设备，该电子设备包括一个或多个处理器；一个或多个存储器；该一个或多个存储器存储有一个或多个计算机程序，该一个或多个计算机程序包括指令，当该指令被该一个或多个处理器执行时，使得电子设备执行如上述方面及其上述方面任一可能设计的技术方案。
其中，第二方面至第七方面的有益效果，请参见上述方面的有益效果，不重复赘述。
附图说明
图1是本申请实施例提供的一种电子设备的结构示意图。
图2是本申请实施例提供的一例电子设备的软件结构框图。
图3是本申请实施例的界面元素受到“引力”影响时“引力”方向的示意图。
图4是本申请实施例提供的一组GUI。
图5是本申请实施例提供的界面元素受到***作的界面元素的“引力”影响而移动的动画效果细节示意图。
图6是本申请实施例提供的一组GUI。
图7是本申请实施例中提供的几种确定受到产生“引力”的界面元素的“引力”范围的方式的示意图。
图8是本申请实施例提供的摩擦力对于联动动画效果的影响的示意图。
图9是本申请实施例提供的压力对于联动动画效果的影响的示意图。
图10是本申请实施例提供的移动方向对于联动动画效果的影响的示意图。
图11是本申请实施例提供的不同影响因素对于联动动画效果的影响的示意图。
图12是本申请实施例的联动动画效果的动画过程和相关控制逻辑的示意图。
图13是本申请实施例的位移时间曲线的示意图。
图14是本申请实施例提供的一组GUI。
图15是本申请实施例提供的一组GUI。
图16是本申请实施例提供的一组GUI。
图17是本申请实施例提供的一组GUI。
图18是本申请实施例提供的一组GUI。
图19是本申请实施例提供的一组GUI。
图20是本申请实施例提供的一组GUI。
图21是本申请实施例提供的一组GUI。
图22是本申请实施例的联动动画效果相关联的联动框架与界面之间的关系的示意图。
图23是本申请实施例的用于实现动画效果能力或功能的***框架的示意图。
图24是本申请实施例的联动动画效果能力或功能实现的三种方式的具体说明的示意图。
图25是本申请实施例提供的界面显示方法的示意性流程图。
具体实施方式
以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个、两个或两个以上。术语“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系；例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A、B可以是单数或者复数。字符“/”一般表示前 后关联对象是一种“或”的关系。
在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。
以下介绍电子设备、用于这样的电子设备的用户界面、和用于使用这样的电子设备的实施例。在一些实施例中，电子设备可以是还包含其它功能诸如个人数字助理和/或音乐播放器功能的便携式电子设备，诸如手机、平板电脑、具备无线通讯功能的可穿戴电子设备(如智能手表)等。便携式电子设备的示例性实施例包括但不限于搭载或者其它操作***的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备，诸如膝上型计算机(Laptop)等。还应当理解的是，在其他一些实施例中，上述电子设备也可以不是便携式电子设备，而是台式计算机。
示例性的，图1示出了电子设备100的结构示意图。电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，指南针190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。
可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processing unit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的部件，也可以集成在一个或多个处理器中。在一些实施例中，电子设备100也可以包括一个或多个处理器110。其中，控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。在其他一些实施例中，处理器110中还可以设置存储器，用于存储指令和数据。示例性地，处理器110中的存储器可以为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。这样就避免了重复存取，减少了处理器110的等待时间，因而提高了电子设备100处理数据或执行指令的效率。
在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路间(inter-integrated circuit，I2C)接口，集成电路间音频(nter-integrated circuit sound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purpose input/output，GPIO)接口，SIM卡接口，和/或USB接口等。其中，USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与***设备之间传输数据。该USB接口130也可以用于连接耳机，通过耳机播放音频。
可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。
电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，WiFi)网络)，蓝牙(bluetooth，BT)，全球导航卫星***(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像、视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)、有机发光二极管(organic light-emitting diode，OLED)、有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode，AMOLED)、柔性发光二极管(flex light-emitting diode，FLED)、Miniled、MicroLed、Micro-oLed、量子点发光二极管(quantum dot light emitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或多个显示屏194。
在本申请的一些实施例中，当显示面板采用OLED、AMOLED、FLED等材料时，上述图1中的显示屏194可以被弯折。这里，上述显示屏194可以被弯折是指显示屏可以在任意部位被弯折到任意角度，并可以在该角度保持，例如，显示屏194可以从中部左右对折。也可以从中部上下对折。
电子设备100的显示屏194可以是一种柔性屏，目前，柔性屏以其独特的特性和巨大的潜力而备受关注。柔性屏相对于传统屏幕而言，具有柔韧性强和可弯曲的特点，可以给用户提供基于可弯折特性的新交互方式，可以满足用户对于电子设备的更多需求。对于配置有可折叠显示屏的电子设备而言，电子设备上的可折叠显示屏可以随时在折叠形态下的小屏和展开形态下大屏之间切换。因此，用户在配置有可折叠显示屏的电子设备上使用分屏功能，也越来越频繁。
电子设备100可以通过ISP、摄像头193、视频编解码器、GPU、显示屏194以及应用处理器等实现拍摄功能。
ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点、亮度、肤色进行算法优化。ISP还可以对拍摄场景的曝光、色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide- semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或多个摄像头193。
数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1、MPEG2、MPEG3、MPEG4等。
NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别、人脸识别、语音识别、文本理解等。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。
内部存储器121可以用于存储一个或多个计算机程序，该一个或多个计算机程序包括指令。处理器110可以通过运行存储在内部存储器121的上述指令，从而使得电子设备100执行本申请一些实施例中所提供的方法，以及各种应用以及数据处理等。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作***；该存储程序区还可以存储一个或多个应用(比如图库、联系人等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如照片，联系人等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如一个或多个磁盘存储部件，闪存部件，通用闪存存储器(universal flash storage，UFS)等。在一些实施例中，处理器110可以通过运行存储在内部存储器121的指令，和/或存储在设置于处理器110中的存储器的指令，来使得电子设备100执行本申请实施例中所提供的方法，以及其他应用及数据处理。电子设备100可以通过音频模块170、扬声器170A、受话器170B、麦克风170C、耳机接口170D、以及应用处理器等实现音频功能。例如音乐播放、录音等。
传感器模块180可以包括压力传感器180A、陀螺仪传感器180B、气压传感器180C、磁传感器180D、加速度传感器180E、距离传感器180F、接近光传感器180G、指纹传感器180H、温度传感器180J、触摸传感器180K、环境光传感器180L、骨传导传感器180M等。
其中，压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。
陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即X、Y和Z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。
加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。
环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合，检测电子设备100是否在口袋里，以防误触。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。例如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。
触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。
图2是本申请实施例的电子设备100的软件结构框图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android***分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和***库，以及内核层。应用程序层可以包括一系列应用程序包。
如图2所示，应用程序包可以包括相机、图库、日历、通话、地图、导航、WLAN、蓝牙、音乐、视频、短信息、广告模块和管理模块等。
其中，广告模块，用于与用户进行广告交互。该广告模块可以是操作***预置的模块，该广告模块和电子设备可以由同一生产商提供。
管理模块，用于根据广告主ID和设备ID生成OPENID，该管理模块可以是操作***预置的模块，该管理模块和电子设备可以由同一生产商提供。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface，API)和编程框架，应用程序框架层包括一些预先定义的函数。
如图2所示，应用程序框架层可以包括窗口管理器、内容提供器、视图***、电话管理器、资源管理器、通知管理器等。
窗口管理器用于管理窗口程序，窗口管理器可以获取显示屏大小，判断是否有状态栏、锁定屏幕、截取屏幕等。
内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频、图像、音频、拨打和接听的电话、浏览历史和书签、电话簿等。
视图***包括可视控件，例如显示文字的控件，显示图片的控件等。视图***可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串、图标、图片、布局文件、视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在***顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息、发出提示音、电子设备振动、指示灯闪烁等。
***库可以包括多个功能模块。例如：表面管理器(surface manager)、媒体库(media libraries)、三维图形处理库(例如：OpenGL ES)、2D图形引擎(例如：SGL)等。
表面管理器用于对显示子***进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频、视频格式回放和录制以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4、H.264、MP3、AAC、AMR、JPG和PNG等。
三维图形处理库用于实现三维图形绘图、图像渲染、合成和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动、摄像头驱动、音频驱动、传感器驱动。
在移动操作***中(例如Android、鸿蒙、iOS等)，动画的本质是基于刷新率实时显示界面或界面元素。由于人类的视觉暂留原理，使得用户感觉画面是运动的。但是目前的动画仅仅是简单的动画效果的组合，动画效果单一，不符合物理规律，没有考虑真实使用场景和用户使用习惯。界面元素包括但不限于窗口、滚动条、表格视图、应用图标、卡片等。换句话说，界面元素可以是界面显示的任何元素。
基于此，本申请实施例提供了一种界面显示的方法以及装置，界面元素可以在动画效果上实现联动，***作的界面元素可以影响到未***作的界面元素，从而加强了界面元素之间的联系，使得动画效果更加符合物理规律，并且考虑到了真实的使用场景和用户的***，从而可以提高用户的体验。
下面将首先介绍本申请实施例涉及的几个概念。
“引力”：本申请实施例中将自然界的引力概念引入到了界面元素中。本申请实施例中的界面元素之间可以存在“引力”，由于“引力”的存在，当界面中的一个界面元素***作时(例如点击、移动、删除等)，则该界面中的其他界面元素中的一个或多个由于受到“引力”的影响可以发生移动。下面将结合图3-图5介绍本申请实施例中的“引力”的动画效果。
图3示出了本申请实施例的界面元素受到“引力”影响时“引力”方向的示意图。图3中的(a)示出了***作的界面元素的“引力”作用为“吸引力”的示例场景。图3中的(a)所示，右下方的十字图形示意性地表示***作的界面元素的放大的“引力”中心点，在界面元素是应用图标的场景中，当针对应用图标的删除、拖拽释放、合并文件夹、卡片展开等事件发生时，该界面元素中的一点可以是“吸引力”或者“排斥力”的发生中心点。另外，在图3中的(a)中，左上方的十字图形示意性地表示受到***作的界面元素的“引力”影响的另一界面元素的放大的一点。在“引力”动画效果被设置为“吸引力”的情况下，在“吸引力”的作用下，界面元素的移动的方向为每个受到影响的界面元素的元素中心点指向***作的界面元素的发生中心点的矢量方向。类似地，图3中的(b)示出了***作的界面元素的“引力”作用为“排斥力”的示例场景。如图3中的(b)所示，右下方的十字图形示意性地表示发生中心点，而左上方的十字图形示意性地表示元素中心点。在“引力”动画效果被设置为“排斥力”的情况下，在“排斥力”的作用下，界面元素的移动的方向为***作的界面元素的中心点指向每个受到影响的界面元素的中心点的矢量方向。本申请实施例中对于发生中心点和元素中心点的选取不作限定，例如发生中心点和元素中心点可以是界面元素的几何中心，也可以是界面元素中的任意一点。
图4示出了本申请实施例提供的一组图形用户界面(graphical user interface，GUI)。
如图4中的(a)所示，电子设备显示有界面401，该界面401显示有应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标408、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414，在上述应用图标未***作前，上述应用图标可以保持静止。本申请实施中，界面元素之间具有“引力”，界面元素之间的“引力”平衡时，界面元素可以处于静止，本申请实施例中将界面元素的静止状态称为界面元素的平衡状态，例如，如图4中的(a)所示，界面401的应用图标处于平衡状态。当界面中的一个界面元素***作时，例如界面元素被移动，界面元素被点击，界面元素的平衡状态被打破，界面中的其他界面元素会发生联动。
再如图4中的(a)所示，当电子设备检测到用户按住应用图标408向下移动，由于应用图标408对于其他应用图标的“引力”作用，电子设备可以使得应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414中的一个或多个与应用图标408联动。应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414中的一个或多个与应用图标408联动可以理解为，由于应用图标408被移动，原有的平衡状态被打破，则上述应用图标需要根据应用图标408的移动而移动以建立新的平衡状态。
如图4中的(b)所示，应用图标402与应用图标408存在“引力”，当应用图标408向下移动时，应用图标402与应用图标408之间由于“引力”的存在，且应用图标408的“引力”对应用图标402作用为“吸引力”时，应用图标408可以对应用图标402产生“吸引力”以吸引应用图标402向其移动。类似的，应用图标408可以对应用图标403产生“吸引力”以吸引应用图标403向其移动，应用图标408可 以对应用图标404产生“吸引力”以吸引应用图标404向其移动，应用图标408可以对应用图标405产生“吸引力”以吸引应用图标405向其移动，应用图标408可以对应用图标406产生“吸引力”以吸引应用图标406向其移动，应用图标408可以对应用图标407产生“吸引力”以吸引应用图标407向其移动，应用图标408可以对应用图标409产生“吸引力”以吸引应用图标409向其移动。
当应用图标408向下移动时，应用图标402与应用图标410之间由于“引力”的存在，且应用图标408的“引力”对应用图标410作用为“吸引力”时，则应用图标408可以对应用图标410产生“排斥力”以排斥应用图标410远离其移动。类似的，应用图标408可以对应用图标411产生“排斥力”以排斥应用图标411远离其移动，应用图标408可以对应用图标412产生“排斥力”以排斥应用图标412远离其移动，应用图标408可以对应用图标414产生“排斥力”以排斥应用图标414远离其移动，应用图标408可以对应用图标414产生“排斥力”以排斥应用图标414远离其移动。
需要说明的是，上述示例中，仅以应用图标408向下移动时，其“引力”对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409作用为“吸引力”，对应用图标410、应用图标411、应用图标412、应用图标414、应用图标414作用为“排斥力”为例，但本申请实施例并不限定于此。
例如，应用图标408向下移动时，其“引力”可以对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409作用为“排斥力”，对应用图标410、应用图标411、应用图标412、应用图标414、应用图标414作用为“吸引力”。
再例如，应用图标408向下移动时，其“引力”可以对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409应用图标410、应用图标411、应用图标412、应用图标414、应用图标414作用为“吸引力”。
再例如，应用图标408向下移动时，其“引力”可以对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409应用图标410、应用图标411、应用图标412、应用图标414、应用图标414作用为“排斥力”。
如图4中的(c)所示，当电子设备检测到用户点击应用图标408，电子设备在电子设备可以使得应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414中的一个或多个与应用图标408联动。
如图4中的(d)所示，应用图标402与应用图标408之间存在“引力”，当应用图标408被点击时，可以认为应用图标402与应用图标408之间的“引力”平衡被打破，若应用图标408的“引力”对应用图标402作用为“吸引力”，则应用图标408可以对应用图标402产生“吸引力”以吸引应用图标402向其移动。类似的，应用图标408可以对应用图标403产生“吸引力”以吸引应用图标403向其移动，应用图标408可以对应用图标404产生“吸引力”以吸引应用图标404向其移动，应用图标408可以对应用图标405产生“吸引力”以吸引应用图标405向其移动，应用图标408可以对应用图标406产生“吸引力”以吸引应用图标406向其移动，应用图标408可以对应用图标407产生“吸引力”以吸引应用图标407向其移动，应用图标408可以对应用图标409产生“吸引力”以吸引应用图标409向其移动，应用图标408可以对应用图标410产生“吸引力”以吸引应用图标410向其移动，应用图标408可以对应用图标411产生“吸引力”以吸引应用图标411向其移动，应用图标408可以对应用图标412产生“吸引力”以吸引应用图标412向其移动，应用图标408可以对应用图标413产生“吸引力”以吸引应用图标413向其移动，应用图标408可以对应用图标414产生“吸引力”以吸引应用图标414向其移动。
需要说明的是，上述图4中的(c)和(d)所示的示例中，仅以应用图标408被点击时，对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标414、应用图标414产生“吸引力”为例，但本申请实施例并不限定于此。例如，应用图标408被点击时，对应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标414、应用图标414产生“排斥力”。
在一些实施例中，上述受到“引力”影响的应用图标可以延时移动，即当用户点击或移动应用图标408后达到一定时间后，其他应用图标才会开始移动。
可以理解的是，受到“引力”影响的应用图标的延时时间可以与应用图标之间的距离有关。例如，如 图4中的(a)和(b)所示，用户向下移动应用图标408，由于应用图标404与应用图标408之间的距离小于应用图标402与应用图标408之间的距离，则应用图标404可以先与应用图标402移动。
上文介绍了由于界面元素之间存在“引力”，当用户操作一个界面元素时，可以对其他界面元素产生影响，下面将结合图5示例性的描述一个界面元素受到***作的界面元素的“引力”影响而移动的动画效果细节。
图5示出了根据本申请的实施例的“引力”动画效果中的受到“吸引力”影响的界面元素在不同时刻的位置的示意图以及对应的曲线示意图。如图5中的(a)所示，假设应用图标408为被移动的界面元素，并且应用图标404是受到应用图标408的“吸引力”的界面元素。在应用图标408未被移动前，即t0时刻，应用图标408与应用图标404之间的距离为d1。当应用图标408移动时，应用图标404受到应用图标408的“吸引力”可以向应用图标408移动。
在一些实施例中，如图5中的(a)所示，应用图标404的移动速度可以慢于应用图标408的移动速度，因此在t1时刻，应用图标408与应用图标404之间的距离为d2，d2＞d1。若应用图标408在t1时刻停止移动(例如用户不再拖动应用图标408)，应用图标408可以继续“吸引”应用图标404移动，当两者之间的距离恢复至d1时，两者可以重新恢复原有的引力，则应用图标404不再继续移动。
针对上述应用图标404和应用图标408移动的过程可以使用图5中的(c)所示的曲线示意图表示，图5中的(c)的曲线#1为应用图标408的距离时间曲线，曲线#2为应用图标404的距离时间曲线，由图可以看出，在t0-t1时间段内，应用图标408在相同时间内，移动的距离大于应用图标404的移动的距离，则应用图标408和应用图标404之间的距离由d1变大至d2，当达到t1时刻，应用图标408不再移动，应用图标404继续移动，则应用图标408和应用图标404之间的距离可以再由d2缩小至d1。
在另一些实施例中，即使应用图标408不停止移动，电子设备也可以使得应用图标404的移动速度快于应用图标408的移动速度，从而应用图标404和应用图标408之间的距离可以缩小，当应用图标404和应用图标408之间的距离恢复至d1时，电子设备可以使得应用图标404和应用图标408保持相同的速度移动。
针对上述应用图标404和应用图标408移动的过程可以使用图5中的(d)所示的曲线示意图表示，图5中的(d)的曲线#1为应用图标408的速度时间曲线，曲线#2为应用图标404的速度时间曲线，由图可以看出，在t0-t1时间段内，应用图标408的移动速度快于应用图标404的移动速度，则应用图标408和应用图标404之间的距离由d1变大至d2，当达到t1时刻，应用图标408速度慢于应用图标404的移动速度，则应用图标408和应用图标404之间的距离不断缩小，直至在t2时刻缩小至d1。
在上述应用图标404和应用图标408移动的过程或移动直至停止的过程中，应用图标404和应用图标408之间的距离可以先变大再变小至原距离。针对应用图标404和应用图标408之间的距离变化可以由图5中的(e)所示的间距时间图表示，由图可知，应用图标404和应用图标408之间的距离从t0-t1由d1增加为d2，再从t1-t2减小为d1。
在另一些实施例中，应用图标408可以先于应用图标404的移动，则两者之间的距离可以增大，当应用图标404开始移动时，其移动速度可以快于应用图标408的速度，则两者之间的距离开始减小直至恢复原距离d1。
针对上述应用图标404和应用图标408移动的过程可以使用图5中的(f)所示的曲线示意图表示，图5中的(f)的曲线#1为应用图标408的速度时间曲线，曲线#2为应用图标404的速度时间曲线，由图可以看出，在t0-t1时间段内，应用图标408的开始移动，应用图标404未移动，则应用图标408和应用图标404之间的距离由d1变大至d2，当达到t1时刻，应用图标404开始移动，且速度快于应用图标408的移动速度，则应用图标408和应用图标404之间的距离不断缩小，直至在t2时刻缩小至d1。
在另一些实施例中，应用图标408与应用图标404的移动速度相同。可以理解的是，若应用图标408与应用图标404移动速度相同，则应用图标408和应用图标404在移动时，两者之间的距离不变。当应用图标408停止移动(例如用户不再拖动应用图标408)，应用图标404也可以停止移动。
在另一些实施例中，应用图标408与应用图标404的移动速度相同。可以理解的是，若应用图标408与应用图标404移动速度相同，则应用图标408和应用图标404在移动时，两者之间的距离不变。当应用图标408停止移动(例如用户不再拖动应用图标408)，应用图标404可以继续移动直至与应用 图标408合并。针对应用图标之间的合并的描述，可以参见下文，在此不展开叙述。
在另一些实施例中，应用图标408与应用图标404的移动速度相同。可以理解的是，若应用图标408与应用图标404移动速度相同，则应用图标408和应用图标404在移动时，两者之间的距离不变。当应用图标408停止移动(例如用户不再拖动应用图标408)，应用图标404可以继续向应用图标408移动一定距离，然后应用图标404向远离应用图标408的方向移动直至应用图标404与应用图标408的距离恢复为d1。
在另一些实施例中，应用图标408的移动速度慢于应用图标404的移动速度，则应用图标408与应用图标404之间的距离可以不断缩小。
一种可能的实现方式，应用图标408和应用图标404之间的距离不断缩小至某一个定值后，电子设备可以使得应用图标404的移动速度与应用图标408的移动速度相同，则应用图标404和应用图标408可以保持该定值距离一起移动，其中该定值可以是0，当应用图标408停止移动时，应用图标404可以停止移动，或应用图标404可以向远离应用图标408的方向移动直至应用图标404和应用图标408之间的距离恢复为d1，或应用图标可以继续向应用图标408的方向移动一定的距离或直至与应用图标408合并。
可以理解的是，若应用图标408的“引力”对应用图标404作用为“吸引力”，当应用图标408返回原位置时，例如由于边界的限制，应用图标在被用户抛滑后返回原位置，应用图标408的“引力”对应用图标404作用可以变为“排斥力”，使得应用图标404也可以返回原位置。应用图标408与应用图标404在返回原位置的过程中，两者之间的距离可以先变小然后再恢复至d1。例如，用户拖动应用图标408移动了一段距离后松手，电子设备可以使应用图标408返回原位置，则应用图标404受到应用图标408“排斥力”的作用也可以返回原位置，应用图标408和应用图标404之间的距离可以先变小然后再恢复至d1。
在另一些实施例中，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404和应用图标408之间的距离可以保持不变，即应用图标404和应用图标408之间的距离一直为d1。
在另一些实施例中，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404和应用图标408之间的距离可以先变大再变小。
例如，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404的移动速度可以快于应用图标408的移动速度，则应用图标404和应用图标408之间的距离变大，应用图标404可以先达到原位置，应用图标408继续移动，则应用图标404和应用图标408之间的距离再变小，当应用图标408达到原位置，应用图标404和应用图标408之间的距离恢复为d1。
可以理解的是，针对上述应用图标404和应用图标408在返回原位置的移动的过程中应用图标404先于应用图标408达到原位置的示例，其曲线图类似于图5中的(c)所示的曲线图，为了简洁，在此不再赘述。
再例如，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404的初始移动速度可以快于应用图标408的初始移动速度，则应用图标404和应用图标408之间的距离变大，然后应用图标408可以不断加速使得移动速度超过应用图标404的移动速度，则应用图标404和应用图标408之间的距离再变小，且当应用图标404和应用图标408之间的距离恢复为d1时，应用图标404和应用图标408的同时达到原位置。
可以理解的是，针对上述应用图标404和应用图标408在返回原位置的移动的过程中应用图标404初始移动速度可以快于应用图标408的初始移动速度，且应用图标408可以不断加速使得移动速度超过应用图标404的移动速度的示例，其曲线图类似于图5中的(d)所示的曲线图，为了简洁，在此不再赘述。
在另一些实施例中，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404和应用图标408之间的距离变化过程可以是变大-变小-变大。
例如，应用图标404和应用图标408在返回原位置的移动过程中，应用图标404的初始移动速度可以快于应用图标408的初始移动速度，则应用图标404和应用图标408之间的距离变大，然后应用图标408可以不断加速使得移动速度超过应用图标404的移动速度，则应用图标404和应用图标408之间的距离再变小，然后应用图标408可以先于应用图标404达到并不再移动，而应用图标404可以继续移动至原位置，则应用图标404和应用图标408之间的距离再变大。
针对上述应用图标404和应用图标408在返回原位置的移动过程中，应用图标404和应用图标408之间的距离变化过程为变大-变小-变大可以使用图5中的(g)所示的曲线示意图表示，图5中的(g)的曲线#1为应用图标408的速度时间曲线，曲线#2为应用图标404的速度时间曲线，由图可以看出，应用图标404的初始移动速度快于应用图标408的移动速度，则应用图标408和应用图标404之间的距离变大，在移动过程中，应用图标404的移动速度不断减小，应用图标408的移动速度不断增加，则应用图标408和应用图标404之间的距离开始缩小。由于应用图标408先于应用图标404达到原位置，则应用图标408的移动速度变为0，而应用图标404继续移动，则应用图标408和应用图标404之间的距离开始增大。
如图5中的(b)所示，假设应用图标408为被点击或被按压的界面元素，并且应用图标404是受到应用图标408的“吸引力”作用影响的界面元素。在应用图标408未被点击或被按压前，应用图标408与应用图标404之间的距离为d1。当应用图标408被点击或被按压时，应用图标404受到应用图标408的“吸引力”可以向应用图标408靠近。应用图标408被点击可以理解为用户点击应用图标408后抬手，应用图标408被按压可以理解为用户点击应用图标408且不抬手。
需要说明的是，在一些实施例中，若应用图标408被按压，应用图标408的尺寸可以发生变化。例如，用户按压应用图标408，电子设备可以使得应用图标408的尺寸变小。再例如，用户按压应用图标408，电子设备可以使得应用图标408的尺寸变大。
在一些实施例中，若应用图标408被点击，则应用图标404在移动过程中，与应用图标408之间的距离可以先变小再恢复至原来的距离，例如，应用图标404在t1时刻与应用图标408之间的距离为d2，d2＜d1，应用图标404在t2时刻与应用图标408之间的距离为d3，d3＜d2＜d1，d3可以是应用图标408与应用图标404之间的最小的距离，当达到该最小距离时，应用图标404可以向远离应用图标408的方向移动，应用图标404在t3时刻与应用图标408之间的距离为d2，应用图标404在t5时刻与应用图标408之间的距离恢复为d。
在另一些实施例中，若应用图标408被按压，则应用图标404受到应用图标408的“吸引力”可以向应用图标408靠近，由于应用图标408并不移动，则两者之间的距离会缩小。应用图标404和应用图标408之间的距离缩小可以分为两种可能的情况：
一种可能的情况是，应用图标404和应用图标408之间的距离不断缩小，直至两个应用图标合并。
一种可能的情况是，应用图标404和应用图标408之间的距离缩小至一定距离后，应用图标404不再继续移动。
需要说明的是，电子设备可以采用任何适当的方式来确定受到“引力”作用影响的应用图标404移动的距离以及移动时的运动状态，即电子设备可以采用任何适当的函数关系式确定应用图标404移动距离以及移动时的运动状态。移动时的运动状态可以理解为界面元素在移动过程中的速度变化。
在一些实施例中，电子设备可以将受到“引力”作用影响的界面元素的移动距离设置为相同的距离，运动状态为匀速移动。以此方式，电子设备用于实现“引力”动画效果的处理可以被简化，例如。如图4中(b)和(d)，应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414的移动距离相同，且移动速度相同。
在另一些实施例中，电子设备可以基于多种因素确定受到“引力”作用的界面元素的移动距离以及运动状态，该多种因素包括但不限于：产生“引力”作用的界面元素的尺寸、产生“引力”作用的界面元素的“引力”范围、产生“引力”作用的界面元素的“引力”方向、产生“引力”作用的界面元素的层级、产生“引力”作用的界面元素的颜色、受到“引力”作用的界面元素的尺寸、受到“引力”作用的界面元素的受力情况(例如，界面元素的摩擦力、界面元素的压力、界面元素的重力)、受到“引力”作用的界面元素的层级、受到“引力”作用的界面元素的颜色、两个界面元素之间的距离等。由于受到多种因素的影响，不同受到“引力”作用的界面元素的移动距离、移动速度可以不同。例如，如图4中的(b)和(d)所示，应用图标402和应用图标404的移动距离可以不同，移动速度也可以不同。下文详细介绍不同因素对于“引力”动画效果的影响以及结合图13示例性的介绍受到“引力”影响的界面元素移动时的距离随时间变化的曲线。
还需要说明的是，***作的界面元素对其他界面元素的“引力”作用表现为“吸引力”还是“排斥力”可以是预定的，也可以是设置的。
本申请实施例中的界面元素通过“引力”关联起来，用户通过操作一个界面元素可以使得其他界面元素发生变化，产生具有联动的动画效果，展现出符合自然规律的动态效果，与用户生活体验更加一致，提高了人机交互性。
上文主要介绍了界面元素之间由于存在“引力”，使得当一个界面元素***作时，由于“引力”的存在，可以影响其他界面因素，而使其他界面因素发生移动，即发生联动移动，受到“引力”影响的界面元素的移动动画效果受到多种因素的影响。下面将介绍不同因素对于“引力”动画效果的影响，由于“引力”动画效果与多种影响因素相关，本申请实施例中的“引力”动画效果也可以称为联动动画效果。
(1)产生“引力”作用的界面元素的“引力”范围：
本申请实施例中，产生“引力”作用的界面元素的“引力”范围可以是有限的。换句话说，产生“引力”作用的界面元素只对在其“引力”范围内的界面因素产生作用，即“引力”范围内的界面元素为受到产生“引力”影响的界面元素，下面将结合图6-图7介绍产生“引力”作用的界面元素的“引力”范围。
在一些实施例中，“引力”范围内的界面元素与产生“引力”作用的界面元素可以是同一个类型的界面元素，从而同一个类型的界面元素之间可以存在“引力”。
在另一些实施例中，“引力”范围内的界面元素与产生“引力”作用的界面元素可以不是同一个类型的界面元素。
图6示出了本申请实施例提供的一组GUI。
例如，如图6中的(a)所示，电子设备显示有界面401，该界面401显示有应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标408、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414，在上述应用图标未***作前，上述应用图标可以保持静止。
如图6中的(a)和(b)所示，当电子设备检测到用户按住应用图标408向下移动，由于应用图标408对于其他应用图标的“引力”作用，与图4中的(b)所示的GUI不同，由于应用图标403、应用图标404、应用图标405、应用图标407、应用图标409与应用图标408的距离较近，电子设备可以使得应用图标403、应用图标404、应用图标405、应用图标407、应用图标409向应用图标408移动，而应用图标402、应用图标406、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414不会发生移动，即应用图标403、应用图标404、应用图标405、应用图标407、应用图标409在应用图标408的“引力”范围内。
在图6中的(a)和(b)所示的示例中，“引力范围”与距离相关，但本申请实施例并不限定于此，“引力”范围还可以与界面元素的移动方向相关，例如，如图6中的(a)和(c)所示，应用图标408向下移动，则与应用图标408存在上下关系的应用图标402、应用图标403、应用图标404、应用图标405、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414由于受到应用图标408的“引力”作用，可以发生移动，移动方向与应用图标408相同。再例如，如图6中的(a)和(d)所示，应用图标408向下移动，则与应用图标408存在上下关系的应用图标402、应用图标403、应用图标404、应用图标405、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414由于受到应用图标408的“引力”作用，可以发生移动，移动方向各自的元素中心点与应用图标408的发生中心点的矢量方向。
本申请实施例中的，“引力范围”还可以与界面元素的层级相关。
电子设备在显示界面元素时，界面元素的布局是确定的，则电子设备可以确定该界面元素所属的画布以及该界面元素所属的控件树，本申请实施例中，可以将同一个画布和/或同一个控件树上的界面元素确定为同一个层级的界面元素。
例如，如图6中的(a)和(e)所示，假设应用图标404、应用图标405、应用图标408、应用图标409是同一个层级，则当应用图标408向下移动时，应用图标404、应用图标405和应用图标409由于受到应用图标408的“引力”作用，可以发生移动。
上文结合图6介绍了几种影响“引力”范围的因素，下面将结合图7详细介绍本申请实施例中提供的几种确定受到产生“引力”的界面元素的“引力”范围的方式，确定受到产生“引力”的界面元素的“引力”范围的方式也可以理解为确定与产生“引力”的界面元素相同类型的界面元素。
一种可能的实现方式，电子设备可以通过计算界面元素之间的距离确定产生“引力”的界面元素的“引力”范围。
图7示出了本申请实施例提供的确定产生“引力”的界面元素的“引力”范围的示意图。例如，如图7中的(a)所示，同一界面包括界面元素701、界面元素702、界面元素703、界面元素704、界面元素705、界面元素706、界面元素707、界面元素708、界面元素709，其中界面元素705可以是***作的界面元素，界面元素705与界面元素704、界面元素706的距离为d1，界面元素705与界面元素702、界面元素708的距离为d2，界面元素705与界面元素701、界面元素703、界面元素707、界面元素709的距离为d3，d1＜d2＜d3，电子设备可以选取与界面元素705之间的距离小于第一阈值的界面元素为受到“引力”影响的界面元素。示例性的，d1＜d2＜第一阈值＜d3，则电子设备可以将界面元素702、界面元素704、界面元素706、界面元素708作为受到“引力”影响的界面元素，而界面元素701、界面元素703、界面元素707、界面元素709不会受到“引力”的影响。
需要说明的是，图7中的(a)所示的示例中，电子设备在确定两个界面元素之间的距离时，以该两个界面元素的中心点为计算的基准点，但本申请实施例并不限定于此，本申请实施例中在计算两个界面元素之间的距离时，可以选取该两个界面元素中的任意一点作为基准点。例如，电子设备在计算两个界面元素之间的距离时，可以选取两个界面元素中距离最短的两个点作为基准点。以界面元素705和界面元素702为例，可以选取界面元素705上边界的中点和界面元素702下边界的中点作为基准点。
再例如，电子设备在计算两个界面元素之间的距离时，可以选取两个界面元素中距离最长的两个点作为基准点。以界面元素705和界面元素701为例，可以选取界面元素705的右边界与下边界的交点，以及界面元素701的上边界和左边界的交点作为基准点。
再例如，电子设备可以在计算两个界面元素之间的距离时，可以分别计算两个界面元素之间的横向距离、纵向距离，然后根据横向距离和纵向距离中的至少一者和界面元素的移动方向确定两个界面元素之间的距离。
如图7中的(b)所示，界面元素705和界面元素706的横向距离为d4，且界面元素706受到界面元素705的“引力”影响可以朝向界面元素705移动，移动方向为横向，则界面元素705和界面元素706之间的距离可以是两者之间的横向距离。
类似的，界面元素705和界面元素702之间的距离可以是两种之间的纵向距离。
如图7中的(c)所示，界面元素705和界面元素701的横向距离为d4，界面元素7-5和界面元素701的纵向距离为d5，且界面元素701的移动方向既不是横向也不是纵向，则界面元素701和界面元素705的距离可以通过横向距离d4和纵向距离d5并基于界面元素701的移动方向来确定。作为一种示例，如图7的(d)所示，基于横向距离d4和纵向距离d5的大小，电子设备可以确定出以横向距离d4和纵向距离d5为两条直角边的直角三角形，该直角三角形具有斜边。然后，基于界面元素701的移动方向，电子设备可以在直角三角形内确定一条线段，该线段的方向与界面元素701的移动方向相同，则电子设备可以根据三角函数原理确定该线段的长度为d6，即界面元素701和界面元素705之间的距离d6。
作为另一种示例，电子设备可以确定界面元素701的移动方向与横向的夹角，以及界面元素701的移动方向与纵向的夹角，若界面元素701的移动方向与横向的夹角大于界面元素701的移动方向与纵向的夹角，则电子设备可以确定界面元素701与界面元素705的纵向距离为界面元素701与界面元素705之间的距离。相反的，若界面元素701的移动方向与横向的夹角小于界面元素701的移动方向与纵向的夹角，则电子设备可以确定界面元素701与界面元素705的横向距离为界面元素701与界面元素705之间的距离。若界面元素701的移动方向与横向的夹角等于界面元素701的移动方向与纵向的夹角，则电子设备可以随机选取界面元素701与界面元素705的横向距离或纵向距离为界面元素701与界面元素705的之间的距离。
还需要说明的是，第一阈值可以是操作***出厂预置的，也可以由用户设定，也可以由第三方开发者设定。
在一些实施例中，第一阈值可以与界面元素的尺寸、层级、颜色等因素相关。例如，界面元素的尺寸越大，对应的第一阈值可以越大，换句话说，界面元素的尺寸越大，其“引力”范围越大。再例如，不同层级或颜色的界面元素可以对应不同的第一阈值。
一种可能的实现方式，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域作为该界面元素的“引力”范围。
例如，如图7中的(e)所示，假设***作的界面元素为界面元素705，则电子设备可以以界面元 素705的发生中心点为圆心，以r1为半径做圆，该圆可以理解为界面元素705的“引力”范围，则被该“引力”范围覆盖的界面元素702、界面元素704、界面元素706、界面元素708可以是受到“引力”影响的界面元素，该发生中心点可以是界面元素705中的任意一点。
再例如，如图7中的(f)所示，假设***作的界面元素为界面元素705，电子设备可以以界面元素705的发生中心点为几何中心，选取矩形为界面元素705的“引力”范围，该矩形长为2b，宽为2a，则被该“引力”范围覆盖的界面元素704、界面元素706可以是受到“引力”影响的界面元素，该发生中心点可以是界面元素705中的任意一点。
需要说明的是，在图7中的(e)和(f)所示的示例中，r1、a、b可以是定值，可以是操作***出厂预置的，也可以由用户设定，也可以由第三方开发者设定。
在一些实施例中，r1、a、b可以与界面元素的尺寸、层级、颜色等因素相关。例如，界面元素的尺寸越大，r1、a、b也可以越大。再例如，不同层级或颜色的界面元素可以对应不同的r1、a、b。
还需要说明的是，在图7中的(e)和(f)所示的示例中，仅以选取的几何图形是圆形和矩形为了，但本申请并不限定于此，例如几何图形还可以是三角形、菱形等。
替代性的，在一些实施例中，电子设备可以将与几何区域的边界相交的界面元素作为受到“引力”影响的界面元素。
例如，如图7中的(g)所示，假设***作的界面元素为界面元素705，则电子设备可以以界面元素705的中心点为圆心做圆，该圆覆盖的界面元素701、界面元素702、界面元素703、界面元素704、界面元素706、界面元素707、界面元素708、界面元素709，其中界面元素701、界面元素703、界面元素707、界面元素709与该圆的边界相交，则电子设备可以将界面元素701、界面元素703、界面元素707、界面元素709作为受到“引力”影响的界面元素，而界面元素702、界面元素704、界面元素706、界面元素708未与该圆的边界相交，则界面元素702、界面元素704、界面元素706、界面元素708不作为受到“引力”影响的界面元素。
一种可能的实现方式，电子设备可以根据产生“引力”作用的界面元素的移动方向确定该界面元素的“引力”范围。
例如，如图7中的(h)所示，假设***作的界面元素为界面元素705，其中界面元素701位于界面元素705的左上方，界面元素702位于界面元素705的上方，界面元素703位于界面元素705的右上方，界面元素704位于界面元素705的左方，界面元素706位于界面元素705的右方，界面元素707位于界面元素705的左下方，界面元素708位于界面元素705的下方，界面元素709位于界面元素705的右上方。电子设备可以根据界面元素705的移动方向确定受界面元素705的“引力”影响的界面元素。
示例性的，当界面元素705向右或向左移动时，位于界面元素705左方的界面元素704，位于界面元素705右方的界面元素706可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素704和界面元素706的移动方向可以与界面元素705相同或相反。
示例性的，当界面元素705向右或向左移动时，位于界面元素705左方的界面元素704，位于界面元素705右方的界面元素706，位于界面元素705左上方的界面元素701，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素704、界面元素706、界面元素701、界面元素703、界面元素707和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素704、界面元素706、界面元素701、界面元素703、界面元素707和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右或向左移动时，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素702和界面元素708的移动方向可以与界面元素705相同或相反，也可以是界面元素的702和界面元素708的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右或向左移动时，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708，位于界面元素705左上方的界面元素701，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701、界面元素702、界面元素703、界面元素707、界面元素708和界面元素709的移动方向可以与界面元素705相 同或相反，也可以是界面元素701、界面元素702、界面元素703、界面元素707、界面元素708和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向上或向下移动时，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708可以受到界面元素705“引力”的影响而移动，而其他界面元素不动，其中界面元素702和界面元素708的移动方向可以与界面元素705相同或相反。
示例性的，当界面元素705向上或向下移动时，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708，位于界面元素705左上方的界面元素701，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701、界面元素702、界面元素703、界面元素707、界面元素708和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701、界面元素702、界面元素703、界面元素707、界面元素708和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向上或向下移动时，位于界面元素705左方的界面元素704，位于界面元素705右方的界面元素706可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素704和界面元素706的移动方向可以与界面元素705相同或相反，也可以是界面元素的704和界面元素706的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向上或向下移动时，位于界面元素705左方的界面元素704，位于界面元素705右方的界面元素706，位于界面元素705左上方的界面元素701，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701、界面元素703、界面元素704、界面元素706、界面元素707和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701、界面元素703、界面元素704、界面元素706、界面元素707和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向左上或右下移动时，位于界面元素705左上方的界面元素701，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向左上或向右下移动时，位于界面元素705左方的界面元素704，位于界面元素705上方的界面元素702，位于界面元素705左上方的界面元素701，位于界面元素705右方的界面元素706，位于界面元素705下方的界面元素708，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701、界面元素702、界面元素704、界面元素706、界面元素708和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701、界面元素705、界面元素704、界面元素706、界面元素708和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向左上或右下移动时，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素703和界面元素707的移动方向可以与界面元素705相同或相反，也可以是界面元素703和界面元素707的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向左上或向右下移动时，位于界面元素705左方的界面元素704，位于界面元素705左下方的界面元素707，位于界面元素705下方的界面元素708，位于界面元素705上方的界面元素702，位于界面元素705右上方的界面元素703，位于界面元素705右方的界面元素706，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素702、界面元素703、界面元素704、界面元素706、界面元素707和界面元素708的移动方向可以与界面元素705相同或相反，也可以是界面元素702、界面元素703、界面元素704、界面元素706、界面元素707和界面元素708的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右上或左下移动时，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素703和界面元素707的移动方向可以与界面元素705相同或相反，也可以是界面 元素703和界面元素707的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右上或左下移动时，位于界面元素705右上方的界面元素703，位于界面元素705左下方的界面元素707，位于界面元素705上方的界面元素702，位于界面元素705右方的界面元素706，位于界面元素705下方的界面元素708，位于界面元素705左方的界面元素704，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素702、界面元素703、界面元素704、界面元素706、界面元素707和界面元素708的移动方向可以与界面元素705相同或相反，也可以是界面元素702、界面元素703、界面元素704、界面元素706、界面元素707和界面元素708的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右上或左下移动时，位于界面元素705左上方的界面元素701，位于界面元素705右下方的界面元素709，可以受到界面元素705的“引力”的影响而移动，而其他界面元素不动，其中界面元素701和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
示例性的，当界面元素705向右上或左下移动时，位于界面元素705左方的界面元素704，位于界面元素705左上方的界面元素701，位于界面元素705上方的界面元素702，位于界面元素705下方的界面元素708，位于界面元素705右方的界面元素706，位于界面元素705右下方的界面元素709，可以受到界面元素705的影响而移动，而其他界面元素不动，其中界面元素701、界面元素702、界面元素704、界面元素706、界面元素708和界面元素709的移动方向可以与界面元素705相同或相反，也可以是界面元素701、界面元素702、界面元素704、界面元素706、界面元素708和界面元素709的元素中心点指向界面元素705的发生中心点的矢量方向。
一种可能的实现方式，电子设备根据界面元素的层级确定界面元素的“引力”范围。
例如，如图7中的(i)所示，假设***作的界面元素为界面元素705，且界面元素705、界面元素702、界面元素706的层级相同，则界面元素705、界面元素702、界面元素706可以受到界面元素705的“引力”的影响而移动。在该示例中，由于界面元素705、界面元素702、界面元素706的层级相同，则可以将界面元素705、界面元素702、界面元素706理解为同一个类型的界面元素，即电子设备可以确定与产生“引力”的界面元素的类型相同的界面元素为受到“引力”影响的界面元素。
在另一些实施例中，假设界面元素705、界面元素702、界面元素706是具有父子层级关系的界面因素，则界面元素705、界面元素702、界面元素706可以受到界面元素705的“引力”的影响而移动。
在另一些实施例中，如图7中的(i)所示，假设***作的界面元素为界面元素705，且界面元素705、界面元素702、界面元素706的层级相同，则电子设备可以确定界面原701、界面元素703、界面元素704、界面元素707、界面元素708、界面元素709确定为受到界面元素705的“引力”的影响的界面元素。在该示例中，可以根据产生“引力”的界面元素的层级，确定与该界面元素的层级不相同的界面元素为受到“引力”影响的界面元素。换句话说，电子设备可以确定与产生“引力”的界面元素的类型不相同的界面元素为受到“引力”影响的界面元素。
一种可能的实现方式，电子设备根据界面元素的尺寸确定界面元素的“引力”范围。
例如，如图7中的(j)所示，假设***作的界面元素为界面元素705，其中界面元素701、界面元素703、界面元素704、界面元素709的尺寸相同，界面元素702、界面元素705、界面元素707、界面元素708尺寸相同，界面元素706的尺寸大于界面元素705的尺寸，则电子设备可以选取与界面元素705尺寸相同的界面元素，即界面元素702、界面元素707、界面元素708作为受到“引力”影响的界面元素。
替代性的，电子设备不仅可以选取与界面元素705尺寸相同的界面元素，还可以选取与界面元素705的尺寸差值小于第二阈值的界面元素作为受到“引力”影响的界面元素。例如，界面元素706的尺寸大于界面元素705的尺寸，但两者的尺寸差值小于第二阈值，则电子设备也可以将界面元素706作为受到“引力”影响的界面元素。
再例如，例如，如图7中的(j)所示，假设***作的界面元素为界面元素705，其中界面元素701、界面元素703、界面元素704、界面元素709的尺寸相同，界面元素702、界面元素705、界面元素707、界面元素708尺寸相同，界面元素706的尺寸大于界面元素705的尺寸，则电子设备可以选取与界面元素705的尺寸相同或小于界面元素705的尺寸的界面元素，即界面元素701、界面元素702、界面元素703、界面元素704、界面元素707、界面元素708、界面元素709作为受到“引力”影响的界面元素。
类似于针对层级的描述，电子设备可以将相同尺寸或相近尺寸的界面元素确定为同一个类型的界面元素。
在一些实施例中，电子设备可以确定与产生“引力”的界面元素的尺寸相同或相近的界面元素确定为受到“引力”影响的界面元素，即电子设备可以确定与产生“引力”的界面元素的类型相同的界面元素为受到“引力”影响的界面元素。
在另一些实施例中，电子设备可以确定与产生“引力”的界面元素的尺寸差值超过第二阈值的界面元素确定为受到“引力”影响的界面元素，即电子设备可以确定与产生“引力”的界面元素的类型不相同的界面元素为受到“引力”影响的界面元素。
需要说明的是，本申请实施例中影响“引力”范围的并不局限于上文示出的因素，本申请实施例提供的界面显示方法还支持自定义影响“引力”范围的因素。例如，电子设备还可以根据界面元素的颜色，将与产生“引力”的界面元素的相同颜色或不同颜色的界面元素作为受到“引力”影响的界面元素，其中界面元素的颜色可以是界面元素的底色。
相同颜色的界面元素可以理解为相同的色系的界面元素。电子设备在确定“引力范围”时，可以将相同的色系的界面元素确定为受到“引力”影响的界面元素。
在另一些实施例中，相同颜色的界面元素可以理解为界面元素的RGB颜色相同。
在另一些实施例中，相同颜色的界面元素可以理解为界面元素的RGB颜色中的R分量相同。
在另一些实施例中，相同颜色的界面元素可以理解为界面元素的RGB颜色中的G分量相同。
在另一些实施例中，相同颜色的界面元素可以理解为界面元素的RGB颜色中的B分量相同。
上文介绍了产生“引力”作用的界面元素的“引力”范围以及如何根据距离、几何区域、移动方向、层级、尺寸等因素确定界面元素的“引力”范围。需要说明的是，本申请实施例中，电子设备可以结合多个因素确定界面元素的“引力”范围，例如，可以结合多个因素中的两个因素，示例性的，距离因素和层级因素的结合，几何区域因素和层级因素的结合，移动方向因素和层级的结合，尺寸因素和层级因素的结合，距离因素和方向因素的结合，距离因素和尺寸因素的结合，距离因素和几何区域因素的结合，几何区域因素和方向因素的结合，几何区域因素和尺寸因素的结合，方向因素和尺寸因素的结合。
类似的，电子设备还可以结合多个因素中的两个以上因素确定界面元素的“引力”范围。
例如，电子设备可以通过界面元素之间的距离以及界面元素的层级关系确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素之间的距离确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的层级关系最终确定产生“引力”的界面因素的“引力”范围。
如图7中的(k)所示，假设界面元素705是***作的界面元素，界面元素705与界面元素704、界面元素706的距离为d1，界面元素705与界面元素702、界面元素708的距离为d2，界面元素705与界面元素701、界面元素703、界面元素707、界面元素709的距离为d3，d1＜d2＜d3，界面元素702、界面元素703、界面元素705、界面元素706是同一层级的界面元素，电子设备可以选取与界面元素705之间的距离小于第一阈值且与界面元素属于同一层级的界面元素为受到“引力”影响的界面元素。示例性的，d1＜d2＜第一阈值＜d3，则电子设备可以将界面元素702和界面元素706作为受到“引力”影响的界面元素，而其他界面元素不会受到“引力”的影响。
示例性的，电子设备可以先根据界面元素的层级关系确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素之间的距离最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域，并根据该几何区域中与产生“引力”作用的界面元素相同层级的界面元素确定“引力”范围。
示例性的，电子设备可以选取的几何区域确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的层级关系最终确定产生“引力”的界面因素的“引力”范围。
如图7中的(l)所示，假设***作的界面元素为界面元素705，界面元素702、界面元素703、界面元素705、界面元素706是同一层级的界面元素，则电子设备可以以界面元素705的发生中心点为圆心，以r1为半径做圆，则被该圆覆盖且与界面元素705同一层级的界面元素702和界面元素706可以是受到“引力”影响的界面元素，该发生中心点可以是界面元素705中的任意一点。
示例性的，电子设备可以先根据界面元素的层级关系确定受到“引力”影响的界面元素的集合，然后再从该集合中基于选取的几何区域最终确定产生“引力”的界面因素的“引力”范围。
需要说明的是，电子设备在根据选取的几何区域确定界面因素时，可以选取与该几何区域边界相交的界面元素。
如图7中的(g)所示，假设***作的界面元素为界面元素705，且界面元素702、界面元素703、界面元素705、界面元素706是同一个层级的界面元素，电子设备可以先根据界面元素705的层级确定受到“引力”影响的界面元素的第一集合，该第一集合中包括界面元素702、界面元素703、界面元素706。电子设备还可以以界面元素705的中心点为圆心做圆，确定与该圆的边界相交的界面元素的第二集合，该第二集合包括界面元素701、界面元素703、界面元素707、界面元素709，电子设备最终可以将第一集合和第二集合中共有的界面元素703作为受到“引力”影响的界面元素，其他界面元素不作为受到“引力”影响的界面元素。
例如，电子设备可以根据产生“引力”作用的界面元素的移动方向和界面元素的层级确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据产生“引力”作用的界面元素的移动方向确定受到“引力”影响的界面元素的集合，然后从该集合中选择与产生“引力”作用的界面元素相同层级的界面元素。
示例性的，电子设备可以先根据产生“引力”作用的界面元素层级确定受到“引力”影响的界面元素的集合，然后再从该集合中基于产生“引力”作用的界面元素的移动方向确定最终的受到“引力”影响的界面元素的集合。
例如，电子设备可以通过界面元素之间的距离以及界面元素的尺寸确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素之间的距离确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的尺寸最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素的尺寸确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素之间的距离最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以通过界面元素的层级以及界面元素的尺寸确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素的层级确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的尺寸最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素的尺寸确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的层级最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以通过界面元素的层级以及界面元素的尺寸确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以通过界面元素之间的距离以及产生“引力”的界面元素的移动方向确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素之间的距离确定受到“引力”影响的界面元素的集合，然后再从该集合中基于产生“引力”的界面元素的移动方向最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据产生“引力”的界面元素的移动方向确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素之间的距离最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域，并根据该几何区域与界面元素之间的距离确定产生“引力”作用的界面元素的“引力”范围。
示例性的，电子设备可以根据选取的几何区域确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素之间的距离最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素之间的距离确定受到“引力”影响的界面元素的集合，然后再从该集合中基于选取的几何区域最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域，并根据该几何区域与产生“引力”作用的界面元素的移动方向确定产生“引力”作用的界面元素的“引力”范围。
示例性的，电子设备可以根据选取的几何区域确定受到“引力”影响的界面元素的集合，然后再从该集合中基于产生“引力”作用的界面元素的移动方向最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据产生“引力”作用的界面元素的移动方向确定受到“引力”影响的界面元素的集合，然后再从该集合中基于选取的几何区域最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以以产生“引力”作用的界面元素的发生中心点为中心选取一个几何区域，并根据该几何区域与界面元素的尺寸确定产生“引力”作用的界面元素的“引力”范围。
示例性的，电子设备可以根据选取的几何区域确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的尺寸最终确定产生“引力”的界面因素的“引力”范围。
示例性的，电子设备可以先根据界面元素的尺寸确定受到“引力”影响的界面元素的集合，然后再从该集合中基于选取的几何区域最终确定产生“引力”的界面因素的“引力”范围。
例如，电子设备可以根据产生“引力”的界面元素的移动方向以及界面元素的尺寸确定产生“引力”作用的界面元素的“引力”范围。
示例性的，电子设备可以根据产生“引力”的界面元素的移动方向确定受到“引力”影响的界面元素的集合，然后再从该集合中基于界面元素的尺寸最终确定产生“引力”的界面因素的范围。
示例性的，电子设备可以先根据界面元素的尺寸确定受到“引力”影响的界面元素的集合，然后再从该集合中基于产生“引力”的界面元素的移动方向最终确定产生“引力”的界面因素的“引力”范围。
需要说明的是，上述示例以两个因素结合为例，但本申请实施例并不限定于此，电子设备还可以根据两个以上的因素确定“引力”范围，具体描述可以参考上文所述的根据两个因素确定“引力”范围的描述，在此不再展开叙述。
(2)界面元素的尺寸
在上文中介绍了界面元素的尺寸对于产生“引力”的界面元素的“引力”范围的影响，下面将介绍界面元素的尺寸对于联动动画效果产生的影响。
本申请实施例中界面元素的尺寸可以影响受到“引力”影响的界面元素的移动距离，移动速度。
在一种实施例中，参考图4中的(c)，若应用图标402和/或应用图标408的尺寸增大，则应用图标402的移动距离也可以随之增大。随着应用图标402和/或应用图标408的尺寸增大，可以理解为应用图标402和/或应用图标408的“质量”增大，根据万有引力公式可得，应用图标402受到的“引力”增强，则应用图标402的移动距离可以增加。
需要说明的是，图4中的(c)应用图标402的移动情况可以是应用图标先向靠近应用图标408的方向移动，然后再向远离应用图标408的方向移动以返回原位置，则应用图标402的移动距离包括了向应用图标408的方向移动的距离以及向远离应用图标408的方向移动的距离，则应用图标402的移动距离增加可以理解为，由于应用图标402受到的“引力”增强，其向靠近应用图标408的方向移动的距离增加了，从而在返回原位置时移动的距离也增加了，进而应用图标402的移动距离可以随着应用图标尺寸的增大而增加。
在一种实施例中，继续参考图4中的(c)，若应用图标402和/或应用图标408的尺寸增大，则应用图标402的移动速度也可以随之增大。随着应用图标402和/或应用图标408的尺寸增大，可以理解为应用图标402和/或应用图标408的“质量”增大，根据万有引力公式可得，应用图标402受到的“引力”增强，则应用图标402的移动速度可以增加。
在一些实施例中，参考图7中的(j)，假设界面元素705为***作的界面元素，界面元素702和界面元素706为受到“引力”影响的界面元素，且界面元素702与界面元素705之间的距离与界面元素706与界面元素705之间的距离相同，由于界面元素706的尺寸大于界面元素702的尺寸，电子设备可以使得界面元素706的移动距离大于界面元素702的移动距离。
在一些实施例中，参考图7中的(j)，假设界面元素705为***作的界面元素，界面元素702和界面元素706为受到“引力”影响的界面元素，且界面元素702与界面元素705之间的距离与界面元素706与界面元素705之间的距离相同，界面元素706的尺寸大于界面元素702的尺寸，可以将界面元素的尺寸等价于质量，根据万有引力公式可得，界面元素706受到的“引力”大于界面元素702受到的“引力”，若界面元素706和界面元素702的移动速度都是匀速的，电子设备可以使得界面元素706的移动速度快于界面元素702的移动速度。或虽然界面元素706受到的“引力”大于界面元素702受到的“引力”，电子设备仍可以使得界面元素706的移动速度等于界面元素702的移动速度，或使得界面元素706的移动速度小于界面元素702的移动速度。
在一些实施例中，参考图7中的(j)，假设界面元素705为***作的界面元素，界面元素702和界面元素706为受到“引力”影响的界面元素，且界面元素702与界面元素705之间的距离与界面元素706与界面元素705之间的距离相同，界面元素706的尺寸大于界面元素702的尺寸，可以将界面元 素的尺寸等价于质量，根据万有引力公式可得，界面元素706受到的“引力”大于界面元素702受到的“引力”，若界面元素706和界面元素702做变加速移动或匀加速移动，电子设备可以使得界面元素706的加速度大于界面元素702的加速度，或虽然界面元素706受到的“引力”大于界面元素702受到的“引力”，电子设备仍可以使得界面元素706的加速度等于界面元素702的加速度，或使得界面元素706的加速度小于界面元素702的加速度。
综上所述，产生“引力”的界面元素的尺寸和受到“引力”的界面元素尺寸都可以影响联动动画效果，上文所述的界面元素的尺寸对于联动动画效果的影响仅为示例，本申请实施例中可以根据任何包含产生“引力”的界面元素的尺寸和/或受到“引力”的界面元素尺寸的函数关系式确定联动动画效果，即受到“引力”的界面元素的移动距离以及移动时的速度变化。
(3)界面元素之间的距离。
在上文中介绍了界面元素之间的距离对于产生“引力”的界面元素的“引力”范围的影响，下面将介绍界面元素之间的距离对于“引力”动画效果产生的影响。
本申请实施例中界面元素之间的距离可以影响受到“引力”影响的界面元素的移动距离，移动速度。
应理解，针对确定界面元素之间的距离的描述可以参见上文，为了简洁，在此不再赘述。
在一种实施例中，继续参考图4中的(d)，若应用图标402和应用图标408之间的距离增大，则界面元素402的移动距离会减少。随着应用图标402和应用图标408之间的距离增大，根据万有引力公式可得，应用图标402受到的“引力”减弱，则应用图标402的移动距离可以减少。
在一种实施例中，继续参考图4中的(d)，若应用图标402和应用图标408之间的距离增大，则界面元素402的移动距离会减少。随着应用图标402和应用图标408之间的距离增大，根据万有引力公式可得，应用图标402受到的“引力”减弱，则应用图标402的移动速度可以降低。
在一些实施例中，继续参考图4中的(d)，由于应用图标402与应用图标408之间的距离大于应用图标404与应用图标408之间的距离，且应用图标402与应用图标404的尺寸相同，根据万有引力公式可得，应用图标404受到的“引力”大于应用图标402受到的“引力”，则应用图标402的移动距离可以小于应用图标404的移动距离。
在一些实施例中，继续参考图4中的(d)，由于应用图标402与应用图标408之间的距离大于应用图标404与应用图标408之间的距离，且应用图标402与应用图标404的尺寸相同，根据万有引力公式可得，应用图标404受到的“引力”大于应用图标402受到的“引力”，若应用图标402和应用图标404的移动速度都是匀速的，电子设备可以使得应用图标404的移动速度快于应用图标402的移动速度。或虽然应用图标404受到的“引力”大于应用图标402受到的“引力”，电子设备仍可以使得应用图标404的移动速度等于应用图标402的移动速度，或使得应用图标404的移动速度小于应用图标402的移动速度。
在一些实施例中，继续参考图4中的(d)，由于应用图标402与应用图标408之间的距离大于应用图标404与应用图标408之间的距离，且应用图标402与应用图标404的尺寸相同，根据万有引力公式可得，应用图标404受到的“引力”大于应用图标402受到的“引力”，若应用图标402和应用图标404做匀加速移动或变加速移动，电子设备可以使得应用图标的402的加速度可以小于界面元素404的加速度，或虽然应用图标404受到的“引力”大于应用图标402受到的“引力”，电子设备仍可以使得应用图标404的加速度等于应用图标402的加速度，或使得应用图标的402的加速度大于界面元素404的加速度。
综上所述，产生“引力”的界面元素与受到“引力”的界面元素之间的距离可以影响“引力”动画效果，上文所述的界面元素之间的距离对于联动动画效果的影响仅为示例，本申请实施例中可以根据任何包含界面元素之间的距离的函数关系式确定联动动画效果，即受到“引力”的界面元素的移动距离以及移动时的速度变化。
在针对(2)和(3)的介绍中，引入了万有引力模型，万有引力模型可以通过公式1表达：
由公式(1)可得，两个界面元素之间的“引力”与两个界面元素的“质量”和距离有关。由于本申请实施例针对的是界面元素，因此可以使用公式(2)或公式(3)以界面元素的尺寸替代界面元素的“质量”。
M＝K×R          (2)
M＝K×r         (3)
其中，k为常量参数，M为界面元素的“质量”，R为界面元素的尺寸，r为两个界面元素之间的距离。
结合公式(1)-公式(3)，可以将公式(1)可以简化为公式(4)，
由公式(4)可得，界面元素之间的“引力”与界面元素的尺寸成正比，与界面元素之间的距离成反比。
示例性的，本申请实施例中，可以通过公式(5)确定受到“引力”影响的界面元素移动的距离。
其中a为常量系数，r为两个界面元素之间的距离，R为受到“引力”影响的界面元素的尺寸，s为受到“引力”影响的界面元素移动的距离，0.1和0.8是固定的常量，该固定常量可以改变。本申请实施例中，可以使用界面元素的面积、周长等表征界面元素的尺寸，由公式(5)可得，s与r成反比，与R成正比。该距离可以是受到“引力”影响的界面元素移动的最终距离。若受到“引力”影响的界面元素做单向移动，例如受到“引力””影响的界面元素向产生“引力”的界面元素的方向移动，则该距离是受到“引力”影响的界面元素单向移动的距离；若受到“引力”影响的界面元素做双向移动，例如受到“引力”影响的界面元素先向产生“引力”的界面元素的方向移动，然后再向远离产生“引力”的界面元素的方向移动，则该距离是受到“引力”影响的界面元素双向移动的距离。
需要说明的是，本申请实施例支持自定义界面元素的密度，若定义了界面元素的密度，则可以根据界面元素的密度和尺寸确定界面元素的“引力”，则可以根据公式(5)变换得到公式(6)：
其中，M为受到“引力”影响的界面元素的质量。
还需要说明的是，上述公式(5)和(6)仅为示例，电子设备也可以使受到“引力”影响的界面元素的移动距离随着受到“引力”影响的界面元素的尺寸增大而减小，随着两个界面元素之间的距离增大而增大，或者具有任何其他的函数变化关系。
(4)摩擦力
本申请实施例中，将自然界中的摩擦力引入到了界面元素中，使得动画效果更加贴近自然效果。
图8示出了本申请实施例提供的摩擦力对于联动动画效果的影响的示意图。
如图8中的所示，在同一界面显示有界面元素801、界面元素802、界面元素803，电子设备可以定义界面元素的“最大静摩擦力”和“滑动摩擦力”，“最大静摩擦力”和“滑动摩擦力”可以统称为“摩擦力”，该“最大静摩擦力”可以理解为界面元素移动时需要克服的最大力，“滑动摩擦力”可以理解为界面元素在移动过程中受到的“摩擦力”。在一些实施例中，在界面元素的受到“引力”和“最大静摩擦力”的情况下，“引力”需要大于或等于“最大静摩擦力”，界面元素才会开始移动。如图8所示，假设界面元素801为***作的界面元素，界面元素801与界面元素802之间的“引力”以及界面元素801与界面元素803之间的“引力”相等，均为f1，界面元素802的“最大静摩擦力”为f2，界面元素803的“最大静摩擦力”为f3，其中，f3≤f1＜f2，由于，界面元素803的“最大静摩擦力”小于或等于界面元素801与界面元素803之间的“引力”，则界面元素803可以发生移动，而界面元素802的“最大静摩擦力”大于界面元素801与界面元素803之间的“引力”，则界面元素802不会发生移动。
在一些实施例中，当f3大于f1时，则电子设备可以增加f1以使f1大于f3，从而界面元素802也会发生移动，但界面元素802发生移动的时间可以晚于界面元素803发生移动的时间，从而使得界面元素802的移动存在时延。换句话说，当用户操作界面元素801后达到预设时间后，界面元素802开始移动。
在一些实施例中，界面元素803发生移动时，界面元素803的移动速度可以是匀速的，可以理解 为界面元素803在移动时不再受到“引力”和“滑动摩擦力”的影响，当界面元素803移动一定距离后，电子设备可以停止界面元素803的移动。
在另一些实施例中，界面元素803发生移动时，电子设备可以根据界面元素803的“滑动摩擦力”和其受到的“引力”确定界面元素803的移动效果。
示例性的，若界面元素803的“滑动摩擦力”与其受到的“引力”相等，假设界面元素803向界面元素801移动，电子设备可以使界面元素803以一个初速度开始向界面元素801移动，由于界面元素801和界面元素803之间的距离不断缩小，使得界面元素803受到的“引力”不断增大，从而界面元素803的移动速度可以加快。在一些示例中，界面元素803可以移动到一定位置后，不再继续移动。在另一些示例中，界面元素803最终可以与界面元素801重合。
示例性的，若界面元素803的“滑动摩擦力”小于其受到的“引力”相等，假设界面元素803向界面元素801移动，电子设备可以使界面元素803以一个初速度开始向界面元素801移动或界面元素803的初速度可以为0，由于界面元素803的“滑动摩擦力”小于其受到的“引力”，则界面元素803可以做加速移动，移动速度不断加快。在一些示例中，界面元素803可以移动到一定位置后，不再继续移动。在另一些示例中，界面元素803最终可以与界面元素801合并。
示例性的，若界面元素803的“滑动摩擦力”与其受到的“引力”相等，假设界面元素803向界面元素801移动，电子设备可以使界面元素803以一个初速度开始向界面元素801移动，由于界面元素801和界面元素803之间的距离不断缩小，使得界面元素803受到的“引力”不断增大，从而界面元素803的移动速度可以加快。在一些示例中，界面元素803可以移动到一定位置后，不再继续移动，电子设备可以改变界面元素803的“滑动摩擦力”以使“滑动摩擦力”大于“引力”，则界面元素803的移动速度可以减缓直至停止移动。
示例性的，若界面元素803的“滑动摩擦力”小于其受到的“引力”相等，假设界面元素803向界面元素801移动，电子设备可以使界面元素803以一个初速度开始向界面元素801移动或界面元素803的初速度可以为0，由于界面元素803的“滑动摩擦力”小于其受到的“引力”，则界面元素803移动速度可以加快。在一些示例中，界面元素803可以移动到一定位置后，电子设备可以改变界面元素803的“滑动摩擦力”以使“滑动摩擦力”大于“引力”，则界面元素803的移动速度可以减缓直至停止移动。
需要说明的是，上述针对根据界面因素的“滑动摩擦力”和“引力”确定移动的动画效果的描述仅为示例，电子设备还可以根据界面因素的“滑动摩擦力”和“引力”确定任何其他的函数变化关系，从而可以确定界面因素在移动过程中的速度变化、以及移动距离。
本申请实施例中，在确定界面元素的“摩擦力”时，可以通过多种几种方式确定界面元素的“摩擦力”。
一种可能的实现方式，电子设备可以随机确定界面元素的“摩擦力”。例如，将界面元素#1的“最大静摩擦力”定义为f#1，界面元素#2的“最大静摩擦力”定义为f#2。
可以理解的是，若电子设备随机确定界面元素的“摩擦力”，则电子设备针对同一个界面元素，在不同次的“引力”联动中，可以将该界面元素确定成不同的“摩擦力”，换句话说，在该种可能的实现方式中，界面元素的“摩擦力”可以不是固定的。
一种可能的实现方式，电子设备可以根据界面元素的层级定义界面元素的“摩擦力”。同一个界面的界面元素的层级可能不同，则电子设备可以根据界面元素的层级确定界面元素的“摩擦力”。
一种可能的实现方式，电子设备可以根据界面元素的颜色确定界面元素的“摩擦力”。界面元素的颜色可以是RGB颜色，电子设备可以根据界面元素的颜色的RGB分量计算界面元素的“摩擦力”。例如，界面元素#1包括颜色#1，颜色#1的R分量为131，G分量为134，B分量为13，则电子设备可以将上述3个分量的和278确定为界面元素#1的“最大静摩擦力”的大小。再例如，电子设备可以根据界面元素的颜色的RGB分量的离散度按照预设规则确定界面元素的“摩擦力”，示例性的，若界面元素的颜色的RGB分量的离散度越高，其“摩擦力”越大；示例性的，若界面元素的颜色的RGB分量的离散度越高，其界面元素的“动摩擦因数”越大，则其“摩擦力”越大。
应理解，若界面元素包括多个颜色时，可以先分别计算每一个颜色对应的“摩擦力”，然后根据每一个对应的“摩擦力”求和得到界面元素的“摩擦力”。
还应理解，上述根据界面元素的颜色确定界面元素的“摩擦力”的方式仅为示例，本申请实施中可以通过任何合适的函数关系表征界面元素的颜色与界面元素的“摩擦力”的对应关系。
一种可能的实现方式，电子设备可以根据界面元素的尺寸确定界面元素的“摩擦力”。例如，不同的 尺寸可以对应有不同的“摩擦力”，越大的界面元素，其“摩擦力”也可以越大。
(5)重力
本申请实施例中，将自然界中的重力引入到了界面元素中，使得动画效果更加贴近自然效果。
在针对(4)的介绍中，电子设备定义了界面元素的“最大静摩擦力”。为了更加符合物理规律，本申请实施例中，除了定义界面元素的“最大静摩擦力”，还可以定义界面元素的“重力”以及动摩擦因数，从而可以根据界面元素的“重力”以及动摩擦因数确定界面因素的“最大静摩擦力”。在确定界面元素的“最大静摩擦力”后，电子设备可以根据界面元素的“最大静摩擦力”以及其受到的“引力”确定界面元素是否会发生移动以及移动时的移动距离和运动状态，具体描述可以参见上文，在此不再赘述。
本申请实施例中，在确定界面元素的“摩擦力”时，可以通过以下几种方式确定界面元素的“重力”。
一种可能的实现方式，电子设备可以随机确定界面元素的“重力”。例如，将界面元素#1的“重力”定义为G#1，界面元素#2的“重力”定义为G#2。
可以理解的是，若电子设备随机确定界面元素的“重力”，则电子设备针对同一个界面元素，在不同次的“引力”联动中，可以将该界面元素确定成不同的“引力”，换句话说，在该种可能的实现方式中，界面元素的“重力”可以不是固定的。
一种可能的实现方式，电子设备可以根据界面元素的层级定义界面元素的“重力”。同一个界面的界面元素的层级可能不同，则电子设备可以根据界面元素的层级确定界面元素的“重力”。
一种可能的实现方式，电子设备可以根据界面元素的颜色确定界面元素的“重力”。界面元素的颜色可以是RGB颜色，电子设备可以根据界面元素的颜色的RGB分量计算界面元素的“重力”。例如，界面元素#1包括颜色#1，颜色#1的R分量为131，G分量为134，B分量为13，则电子设备可以将上述3个分量的和278确定为界面元素#1的“最大静摩擦力”的大小。再例如，电子设备可以根据界面元素的颜色的RGB分量的离散度按照预设规则确定界面元素的“重力”，示例性的，若界面元素的颜色的RGB分量的离散度越高，其“重力”越大。
应理解，若界面元素包括多个颜色时，可以先分别计算每一个颜色对应的“重力”，然后根据每一个对应的“重力”求和得到界面元素的“重力”。
还应理解，上述根据界面元素的颜色确定界面元素的“重力”的方式仅为示例，本申请实施中可以通过任何合适的函数关系表征界面元素的颜色与界面元素的“重力”的对应关系。
一种可能的实现方式，电子设备可以根据界面元素的尺寸确定界面元素的“重力”。例如，不同的尺寸可以对应有不同的“重力”，越大的界面元素，其“重力”也可以越大。
需要说明的是，若界面元素是文件夹，该文件夹包括多个界面元素时，该文件夹的“重力”可以是通过该多个界面元素的“重力”相加得到。
(6)压力
本申请实施中，将自然界中的压力引入到了界面元素中，使得动画效果更加贴近自然效果。
图9示出了本申请实施例提供的压力对于联动动画效果的影响的示意图。
如图9中的(a)所示，在同一界面显示有界面元素901、界面元素902、界面元素903，其中用户按压界面元素901，电子设备可以通过压力传感器检测到用户对界面元素901的压力为f1，如图9中的(a)所示，界面元素902和界面元素903受到“引力”的影响可以向界面元素901移动。若用户按压界面元素901的力由f1增加为f2时，如图9中的(b)所示，界面元素902和界面元素903的移动距离增大。在一些实施例中，界面元素902和界面元素903的移动速度也可以加快。
如图9中的(c)所示，在同一界面显示有界面元素901、界面元素903、界面元素904，其中用户按压界面元素901，电子设备可以通过压力传感器检测到用户对界面元素901的压力为f1，如图9中的(c)所示，界面元素903受到“引力”的影响可以向界面元素901移动，但界面元素904未发生移动。若用户按压界面元素901的力由f1增加为f2时，如图9中的(d)所示，界面元素904和界面元素903可以向界面元素901移动，且界面元素903的移动距离增大。在一些实施例中，界面元素903的移动速度也可以加快。
在一些实施例中，当用户按压界面元素时，电子设备可以使得被按压的界面元素的尺寸变大，被按压的界面元素的尺寸变化可以与用户按压界面元素的压力成正比。例如，如图9中的(c)和(d)所示，由于f1＜f2，当用户按压界面元素901的压力由f1变为f2时，界面元素901的尺寸可以变大。
(7)产生“引力”的界面元素的移动动画效果。
产生“引力”的界面元素的移动动画效果也可以影响联动动画效果，从而可以加强产生“引力”的界面元素与受到“引力”影响的界面元素之间的联系。
示例性的，参考图4中的(a)和(b)，若用户移动应用图标408的速度加快，则受到“引力”影响的应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标413、应用图标414的移动速度也会加快。
(8)移动方向。
本申请实施中的界面元素移动的方向不仅包括平面方向，还可以包括深度方向，深度方向是指与电子设备屏幕垂直的方向。
图10示出了本申请实施例提供的移动方向对于联动动画效果的影响的示意图。
如图10所示，在同一界面显示有界面元素1001、界面元素1002、界面元素1003，其中用户按压界面元素1001，若界面元素的移动方向包括深度方向，则界面元素1001的尺寸可以缩小，界面元素1001尺寸缩小可以理解为界面元素1001向靠近电子设备屏幕的方向移动，界面元素1002和界面元素1003由于受到界面元素1001的“引力”影响，界面元素1002和界面元素1003的尺寸也可以缩小。
在一些实施例中，界面元素1001的尺寸缩小的比例大于界面元素1002和界面元素1003的尺寸缩小的比例。上文描述了“引力”范围、界面元素的尺寸、界面元素之间的距离、摩擦力、重力、压力、产生“引力”的界面元素的移动动画效果、移动方向对于联动动画效果的影响，类似于多种因素对于“引力”范围的影响，上述因素也可以互相结合以影响联动动画效果。下面将结合不同影响因素描述对于联动动画效果的影响。
例如，电子设备可以根据界面元素的尺寸和“摩擦力”确定联动动画效果。
在一些实施例中，根据上文的描述，界面元素的尺寸越大，其受到的“引力”越大，但其受到的“摩擦力”也可以越大，则电子设备需要根据“引力”和“摩擦力”确定界面元素是否能够移动以及能够移动时的移动距离和移动的运动状态。
示例性的，图11示出了本申请实施例提供的不同影响因素对于联动动画效果的影响。如图11中的(a)所示，电子设备显示有界面元素1101，界面元素1102，界面元素1103，界面元素1104，其中界面元素1101是***作的界面元素，其中界面元素1101与界面元素1102、界面元素1103、界面元素1104之间的距离都相等，且界面元素1102的尺寸大于界面元素1103和界面元素1104的尺寸，则界面元素1102受到的“引力”大于界面元素1103受到的“引力”和界面元素1104受到的“引力”，若不考虑摩擦力的情况下，界面元素1102的移动距离可以大于界面元素1103和界面元素1104的移动距离。若考虑摩擦力的情况下，由于界面元素1102的尺寸较大，其“最大静摩擦力”也较大，当界面元素1102的“最大静摩擦力”大于界面元素1102受到的“引力”时，界面元素1102可以不发生移动，对应的，界面元素1103和界面元素1104的尺寸较小，其“最大静摩擦力”也较小，从而界面元素1103和界面元素1104仍还可以发生移动。在一些情况下，虽然界面元素1103和界面元素1104仍可以移动，但由于界面元素1103和界面元素1104受到“摩擦力”的影响，界面元素1103和界面元素1104移动的距离可以减小。
界面元素的尺寸和“摩擦力”不仅可以影响界面元素是否移动以及界面元素的移动距离，还可以影响界面元素的移动速度。继续参考图11中的(a)，由于受到“摩擦力”的影响，界面元素1103和界面元素1104的移动速度可以减小。
例如，电子设备可以根据界面元素之间的距离和“摩擦力”确定联动动画效果。
在一些实施例中，根据上文的描述，界面元素之间的距离越大，其受到的“引力”越小，若考虑到界面元素的“摩擦力”，则电子设备需要根据“引力”和“摩擦力”确定界面元素是否能够移动以及能够移动时的移动距离和移动的运动状态。
示例性的，如图11中的(b)所示，电子设备显示有界面元素1101，界面元素1102，界面元素1103，界面元素1104，其中界面元素1101是***作的界面元素，其中界面元素1101与界面元素1103、界面元素1104之间的距离相等，且小于与界面元素1102之间的距离，且界面元素1102、界面元素1103、界面元素1104的尺寸相等，则界面元素1102受到的“引力”小于界面元素1103受到的“引力”和界面元素1104受到的“引力”，若不考虑摩擦力的情况下，界面元素1102的移动距离可以小于界面元素1103和界面元素1104的移动距离。若考虑摩擦力的情况下，由于界面元素1102与界面元素1101之间的距离较大，其受到的“引力”较小，当界面元素1102的“最大静摩擦力”大于界面元素1102受到 的“引力”时，界面元素1102可以不发生移动，对应的，界面元素1103和界面元素1104的与界面元素1101之间的距离较大，其受到的“引力”较大，从而即使界面元素1103和界面元素1104存在“摩擦力”，界面元素1103和界面元素1104仍还可以发生移动。在一些情况下，虽然界面元素1103和界面元素1104仍可以移动，但由于界面元素1103和界面元素1104受到“摩擦力”的影响，界面元素1103和界面元素1104移动的距离可以减小。
界面元素之间的距离和“摩擦力”不仅可以影响界面元素是否移动以及界面元素的移动距离，还可以影响界面元素的移动速度。继续参考图11中的(b)，由于受到“摩擦力”的影响，界面元素1103和界面元素1104的移动速度可以减小。
例如，电子设备可以根据界面元素的尺寸和“重力”确定联动动画效果。
例如，电子设备可以根据界面元素之间的距离和“重力”确定联动动画效果。
应理解，由于可以根据“重力”以及动摩擦因数确定界面元素的“摩擦力”，因此针对根据界面元素的尺寸和“重力”确定联动动画效果以及根据界面元素之间的距离和“重力”确定联动动画效果的描述，可以参考针对根据界面元素的尺寸和“摩擦力”确定联动动画效果以及根据界面元素之间的距离和“摩擦力”确定联动动画效果的描述。
例如，电子设备可以根据“压力”和“摩擦力”确定联动动画效果。
示例性的，如图11中的(c)所示，电子设备显示有界面元素1101，界面元素1102，界面元素1103，界面元素1104，其中界面元素1101是***作的界面元素，当用户操作界面1101的压力为f1时，界面元素1102、界面元素1103、界面元素1104不发生移动，当用户操作界面元素1101的压力由f1增加至f2时，界面元素1102、界面元素1103、界面元素1104发生移动。
例如，电子设备可以根据“重力”和“摩擦力”确定联动动画效果。
应理解，由于可以根据“重力”以及动摩擦因数确定界面元素的“摩擦力”，因此针对根据“重力”和“摩擦力”确定联动动画效果的描述，可以参考针对根据“压力”和“摩擦力”确定联动动画效果的描述。
例如，电子设备可以根据“压力”和“移动方向确定联动动画效果。
示例性的，如图11中的(d)所示，电子设备显示有界面元素1101，界面元素1102，界面元素1103，界面元素1104，其中界面元素1101是***作的界面元素，当用户按压界面1101的压力为f1时，若移动方向包括深度方向时，界面元素1101、界面元素1102、界面元素1103、界面元素1104的尺寸可以缩小，当用户按压界面元素1101的压力由f1增加至f2时，界面元素1101、界面元素1102、界面元素1103、界面元素1104的尺寸缩小的幅度增加。
需要说明的是，上述示例以两个因素结合为例，但本申请实施例并不限定于此，电子设备还可以根据两个以上的因素确定联动动画效果。
本申请实施例中将自然界中多个力的概念引入到了界面元素中，使得界面元素之间可以联动，且联动的动画效果符号自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。
上文结合图5中介绍了受到“引力”影响的界面元素，下面将介绍受到“引力”影响的界面元素移动时的位移时间变化的曲线以及产生“引力”影响的界面元素移动时的位移时间变化的曲线和速度随时间变化的曲线。
图12示出了根据本申请实施例的联动动画效果的动画过程和相关控制逻辑的示意图。在电子设备的操作***中，动画本质上就是根据刷新率实时显示当前的界面或者控件，利用人类的视觉暂留原理，使得用户感觉所显示的画面就是运动的。因此，如图12所示，电子设备可以首先确定动画的初态1210和动画的终态1220。另外，电子设备可以确定从联动动画的初态1210变换到联动动画的终态1220的过程持续的动画时间1205。再者，电子设备还可以确定动画类型1230和动画变换形式1240。例如，动画类型4430可以包括界面元素的位移动画1232、缩放动画1234、旋转动画1236、透明动画1238等，而“动画变换形式1240可以通过插值器1242和估值器1244来控制，例如在固定的动画时间1205里进行相关变换速度的控制等，对于本申请实施例而言，变换速度可以是界面元素的移动速度。
在本申请实施例中，为了实现“引力”的动画效果，主要是涉及到动画类型1230中的位移动画1232，但是应当理解，其他的联动动画类型也可以可能的。如上文描述的，本申请实施例中的联动动画效果产生的位移动画效果可以是界面元素先朝向某一个方向移动，然后再以相反的方向复位，也可以是界面元素朝向某一个方向移动一定距离后停止。
针对界面元素先朝向某一个方向移动，然后再以相反的方向复位这一情况，两段动画可以分别定义时长和插值器，应用侧可以按需进行调节。应理解，电子设备可以采用已知的或未来发现的任何适当的位移时间曲线来控制界面元素的移动细节。在一些实施例中，电子设备可以选择使用贝塞尔曲线或弹性力曲线作为界面元素的移动曲线。例如，电子设备可以使用二阶贝塞尔曲线来控制界面元素先朝向某一个方向移动，并且使用弹性力曲线来控制界面元素的复位，或者反之亦然。当然，在其他实施例中，电子设备也可以使用贝塞尔曲线或弹性力曲线之一来控制向某一个方向移动以及控制界面元素的复位。以此方式，电子设备可以基于贝塞尔曲线或弹性力曲线来方便地控制界面元素的移动，使得联动动画效果更加符合用户在生活中对于“吸引力”和“排斥力”的习惯认知，从而进一步改进用户体验。下文将结合图13来描述电子设备基于二阶贝塞尔曲线来控制界面元素朝向某一个方向移动的示例，以及描述电子设备基于弹性力曲线来控制界面元素复位的示例。
图13中的(a)示出了根据本申请实施例的界面元素的位移随时间变化曲线为贝塞尔曲线的示意图。在图13中的(a)示出的位移时间曲线图中，横坐标表示时间，纵坐标表示距离。在一些实施例中，用于控制界面元素移动的插值器可以使用常见的曲线插值器。参考图4、图5和图13中的(a)，电子设备可以控制应用图标404在t0-t2时间段按照图13中的(a)所示的位移时间曲线进行移动。
具体地，电子设备可以通过选择二阶贝塞尔曲线的两个二阶的点，从而达到界面元素的不同移动效果。以此方式，位移时间曲线与时间的相互配合将会产生运动的韵律感。电子设备调整位移时间曲线可以使界面元素实现加速和减速，而不是以恒定的速率移动。
需要说明的是，本申请实施例仅以二阶贝塞尔曲线作为位移时间曲线描述了一些示例，但是本申请实施例不限于此，而是可以等同地将任何曲线形式作为位移时间曲线来实现界面元素的移动。例如，这样的曲线形式包括但不限于一阶贝塞尔曲线、三阶或更高阶贝塞尔曲线、其他已知的或未来发现的其他曲线形式、或者直线。
图13中的(b)示出了根据本申请实施例的界面元素的位移随时间变化义曲线为临界阻尼弹性力曲线的示意图。在图13中的(b)的示例中，图5中描绘的应用图标404在t2-t4时刻的位移时间曲线为弹性力曲线，例如，临界阻尼的弹性力曲线。一般地，弹性力曲线在不同的操作场景可以使用不同的状态，也即，临界阻尼、欠阻尼和过阻尼。在不同的阻尼状态下，位移时间的弹性力曲线可以是不一样的。具体地，三种情况如下：阻尼的平方等于4倍的质量乘以刚性，这是临界阻尼。进一步地，如果阻尼大就是过阻尼，刚性大就是欠阻尼。特别地，阻尼的平方小于4倍质量乘以刚性为欠阻尼，而阻尼的平方大于4倍的质量乘以刚性为过阻尼。在图13中的(b)示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移。应当理解，尽管图13中的(b)将本申请实施例的界面元素复位的位移时间曲线示例性地描绘为临界阻尼弹性力曲线，但是本申请实施例不限于此，而是等同地适用于任何其他的曲线，例如还可以是欠阻尼弹性力曲线或过阻尼弹性力曲线。例如，如图13中的(c)所示为应用图标404在t2-t4时刻的位移时间曲线为欠阻尼弹性力曲线，如图13中的(d)所示为应用图标404在t2-t4时刻的位移时间曲线为过阻尼弹性力曲线。
在一些实施例中，弹性引擎差值其的相关设置如下：
代码类的实现：
1.SpringInterpolator(float stiffness,float damping)
2.SpringInterpolator(float stiffness,float damping,float endPos)
3.SpringInterpolator(float stiffness,float damping,float endPos,float velocity)
4.SpringInterpolator(float stiffness,float damping,float endPos,float velocity,float valueThreshold)
调用距离：
1.PhysicalInterpolatorBase interpolator＝new SpringInterpolator(400F,40F,200F,2600F,1F)；
2.ObjectAnimator animator＝ObjectAnimator.ofFloat(listView,“translationY”,0,346)
3.animator.setDuration(interpolator.getDuration())；
4.animator.setInterpolator(interpolator)；
5.animator.start()；
弹簧引擎动画类：
动画类实例:
1.HWSpringAnimation(K object,FloatPropertyCompat<K>property,float stiffness,float damping, float startValue,float endValue,float velocity)
2.HWSpringAnimation(K object,FloatPropertyCompat<K>property,float stiffness,float damping,float endValue,float velocity)
动画类调用实例：
1.HWSpringAnimation animation＝HWSpringAnimation(listView,DynamicAnimation.TRANSLATION_Y,400F,40F,0,1000F)；
2.animation.start()；
图13中的(a)和(b)示出的是受到“引力”影响而移动的界面元素的位移时间曲线，在一些实施例中，产生“引力”的界面元素可以在用户松手后继续移动，例如用户抛滑界面元素，则用户的手指在离开屏幕后，界面元素仍可以继续向前移动一定距离，则该界面元素的位移时间曲线可以是图12中的(a)和(b)所示的位移时间曲线，也可以通过下文提供的摩擦力模型确定。
示例性的，本申请实施例中的摩擦力模型可以满足公式(4)和公式(5)
v(t)＝V0×e-4.2×f×t           (7)
其中，v(t)为界面元素的最终速度，V0为界面元素的初速度，界面元素的初速度可以与用户抛滑界面元素的速度相关，f为界面元素受到的“摩擦力”，s(t)为界面元素的移动距离，t为移动时间，公式(7)和公式(8)中的常数部分仅为示例，本申请实施例并不限定于此
界面元素的“摩擦力”可以是电子设备或用户或开发者配置的，由于“摩擦力”的存在，v(t)为0，则通过公式(4)可以计算得到t，然后将t代入公式(5)可以得到界面元素的移动距离。
应理解，针对界面元素的“摩擦力”的详细描述可以参见上文。
还应理解，上述摩擦力模型还可以用于确定受到“引力”影响的界面元素的移动距离，若上述摩擦力模型用于确定“受到”引力影响的界面元素的移动距离时，“受到”引力影响的界面元素的初速度可以是电子设备配置的，该初速度可以与用户的操作相关，例如用户抛滑界面元素的速度越大，则“受到”引力影响的界面元素的初速度越大。
在上文中，描述了“摩擦力”因素如何控制界面元素停止移动，该界面元素可以是产生“引力”的界面元素，也可以是受到“引力”影响的界面元素。此外，界面元素能够被移动的位置是否受到限制也可以控制界面元素在何处停止移动。
具体地，在一些实施例中，界面元素能够被移动到的位置是不受限制的，例如，参考图4中的(a)和(b)，应用图标402、应用图标403、应用图标404、应用图标405、应用图标406、应用图标407、应用图标409、应用图标410、应用图标411、应用图标412、应用图标414、应用图标414可以一直随着应用图标408移动而移动。在这种情况下，基于摩擦力模型确定的距离即为上述应用图标将要移动的距离。然而，在另一些实施例中，界面元素能够被移动到的位置是受限制的。换句话说，界面元素只能被移动到的预定位置。换句话说，界面元素的移动距离是有限的。在这种情况下，虽然可以基于摩擦力模型确定界面元素将要移动的距离，但是如果界面元素在移动了该距离之后，并不位于预定位置处，则需要调整界面元素将要移动的距离，使得界面元素能够被移动到预定位置处。例如，可以将界面元素移动到与基于摩擦力模型确定的停止位置最近该距离之后，并不位于预定位置处，则需要调整界面元素将要移动的距离，使得界面元素能够被移动到预定位置处。例如，可以将界面元素移动到与基于摩擦力模型确定的停止位置最近的预定位置处。由此，界面元素将要移动的距离可以基于摩擦力模型和预定位置两者共同确定。
上文在介绍本申请实施时提供的界面显示方法时，以桌面的应用图标作为示例，但本申请实施例并不限定于此，下文将结合图14-21介绍本申请实施例提供的界面显示方法的场景示意图。
图14示出了本申请实施例提供的一组GUI。
如图14中的(a)所示，电子设备显示有界面1401，界面1401可以是负一屏，电子设备在界面1401上显示有卡片1402、卡片1403、卡片1404、卡片1405，上述相邻卡片之间的距离可以是相等的。电子设备可以响应于检测到用户针对卡片1403的滑动操作，显示如图14中的(b)所示的GUI。
如图14中的(b)，电子设备响应于用户针对卡片1403向上滑动的操作，可以使得卡片1403向上移动，同时由于卡片1402受到卡片1403的“排斥力”，卡片1402也可以向上移动，卡片1404和卡 片1405受到卡片1403的“吸引力”可以向上移动。
在一些实施例中，若用户向上滑动的操作是抛滑，卡片1403与卡片1402之间的距离可以先减小再恢复至原距离，卡片1403与卡片1404之间的距离以及卡片1403与卡片1405之间的距离可以先变大再恢复至原距离。若用户向上滑动的操作是按压卡片1403向上滑动，卡片1403与卡片1402之间的距离可以减小至一定距离后不再改变，类似的，卡片1403与卡片1404之间的距离以及卡片1403与卡片1405之间的距离可以变大至一定距离后不再改变，当用户松手后，上述卡片之间的距离可以恢复至原距离。
从上文叙述中可知，上述卡片在移动过程直至停止的过程中，卡片1402与卡片1403之间存在最小距离d1，卡片1403与卡片1404之间存在最大距离d2，卡片1403与卡片1405之间存在最大距离d3，假设卡片1402与卡片1403之间的原距离为d11，卡片1402与卡片1404之间的原距离为d22，卡片1402与卡片1405之间的原距离为d33，则卡片1402与卡片1403之间的距离变化幅度为△d1＝d11-d1，卡片1403与卡片1404之间的距离变化幅度为△d2＝d2-d22，卡片1403与卡片1405之间的距离变化幅度为△d3＝d3-d33，在一些实施例中，△d1＝△d2＝△d3。
在另一些实施例中，上述卡片在移动过程中，卡片之间的距离可以保持不变，则△d1＝△d2＝△d3＝0。
进一步的，根据上文所述的影响联动动画效果的因素，卡片1402、卡片1404、卡片1405可以有不同的动画效果，即卡片1402、卡片1403、卡片1404、卡片1405的位移时间曲线可以不同，以及△d1、△d2、△d3可以不同。
示例性的，由于卡片1402和卡片1403之间的距离与卡片1403和卡片1404之间的距离相等，而卡片1403与卡片1405之间的距离大于卡片1402和卡片1403之间的距离，则电子设备可以使得卡片1402和卡片1404的移动速度大于卡片1405的移动速度。类似的，卡片1402和卡片1404的移动距离大于卡片1405的移动距离，使得△d1＝△d2＞△d3。
示例性的，假设卡片1402和卡片1403是一个层级，卡片1403和卡片1034、卡片1405不是一个层级，则卡片1404和卡片1405不会与卡片1403发生联动，即不会向上移动。
示例性的，若定义了卡片的“摩擦力”，假设卡片1402和卡片1405的“摩擦力”大于其受到的“引力”，卡片1404的“摩擦力”小于其受到的“引力”，则卡片1402和卡片1405不会与卡片1403发生联动。
示例性的，若定义了卡片的“摩擦力”，电子设备在移动卡片时，可以根据卡片的“摩擦力”和“引力”以任何包含“摩擦力”和“引力”的函数关系式确定卡片移动时的速度以及距离。
示例性的，若用户向上滑动的速度增加，卡片1402、卡片1404、卡片1405的移动速度也随着增加。
示例性的，若用户向上滑动的速度增加，卡片1402与卡片1403之间的最小距离d1可以缩小，卡片1403与卡片1404之间的最大距离d2可以增大，卡片1403与卡片1405之间的最大距离d3可以增大。
需要说明的是，上述影响因素对于动画效果的影响仅为示例，本申请实施例中可以基于上文介绍的任意一个或多个影响因素确定卡片1402、卡片1404、卡片1405动画效果，针对影响因素对于动画效果的影响的具体描述可以参见上文。
如图14中的(c)和(d)所示，若卡片1405下方还有卡片，随着用户滑动卡片1403，电子设备可以使得卡片1402继续向上移动直至界面1401不再显示卡片1402，且在卡片1405下方的卡片1406由于“引力”的影响，可以向上移动。
需要说明的是，虽然图14中的(c)中界面1401中未显示卡片1406，但是在画面布局时，卡片1406已经是存在的，即可以理解为卡片1403与卡片1406之间存在“引力”，则当卡片1403被滑动时，卡片1406由于“引力”作用，可以向着卡片1403滑动的方向移动，即向上移动。
在一些实施例中，上述卡片在移动过程中，卡片1403与卡片1404之间的距离、卡片1403与卡片1405之间的距离、卡片1403与卡片1406之间的距离可以先变大再变小，当停止移动时，上述卡片可以保持如图14中的(d)所示的距离。
需要说明的是，上述卡片在移动过程中的距离时间曲线可以参考图5所示的距离时间曲线，为了简洁，在此不再赘述。
还需要说明的是，虽然卡片1403与卡片1406之间的距离可以先变大再变小，但由于卡片1406在未显示在界面1401中时已受到“引力”的影响开始移动，则卡片1403与卡片1406之间的距离变大的过 程可能发生在卡片1406显示在界面1401之前，因此在一些情况下，对于用户而言，用户可能看到的是卡片1403与卡片1406之间的距离变小的过程。
针对该种情况，卡片1403和卡片1406的时间距离曲线可以如图14中的(e)所示，图14中的(e)的曲线#1为卡片1403的距离时间曲线，曲线#2为卡片1406的距离时间曲线，由图可以看出，在t0-t1时间段内，卡片1403在相同时间内，移动的距离大于卡片1406的移动的距离，则卡片1403和卡片1406之间的距离变大，当达到t1时刻，卡片1406出现在界面1401中，且卡片1403不再移动，卡片1406继续移动，则卡片1403和卡片1406之间的距离可以变小。
针对该种情况，卡片1403和卡片1406的之间的距离可以使用图14中的(f)示出的间距时间图表示，由图可知，在t0-t1时间段内，卡片1403和卡片1406之间的距离由d1增加至d2，在t1-t2时间段内，卡片1403和卡片1406之间的距离再由d2减小至d1。
本申请实施例中，界面元素之间存在关联，当一个界面元素***作时，可以与其他界面元素关联，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。
图15示出了本申请实施例提供的一组GUI。
如图15中的(a)所示，电子设备显示有界面1501，该界面1501为消息通知界面，界面1501显示有消息1502、消息1503、消息1504、消息1505、文本元素1506、搜索栏1507。
如图15中的(a)和(b)所示，电子设备检测到用户向下滑动的操作，例如用户可以在消息1503处抛滑，或用户可以按住消息1503向下滑动，电子设备可以响应于用户的操作，使得消息1502、消息1504、消息1505由于受到“引力”的影响而发生移动，而文本元素1506、搜索栏1507不会发生移动。此外，在消息1502上方的消息1508由于也受到消息1503的“引力”的影响，随着消息1503的向下移动，消息1508受到“引力”的影响，可以逐渐显示在界面1501中。
在一些实施例中，文本元素1506和搜索栏1507不移动的原因可以是电子设备在生成布局时，文本元素1506的层级以及搜索栏1507的层级与消息1503的层级不同，则消息1503产生的“引力”无法影响到文本元素1506和搜索栏1507。
在一些实施例中，文本元素1506和搜索栏1507不移动的原因可以是文本元素1506的层级以及搜索栏1507受到的“摩擦力”，则消息1503产生的“引力”无法影响到文本元素1506和搜索栏1507
在一些实施例中，上述消息在移动直至停止的过程中，消息1502与消息1503以及消息1503与消息1508之间的距离可以先变大再变小，消息1503与消息1504、消息1503与消息1505以及之间的距离可以先变小再变大。类似于上文针对图13的描述，消息1502与消息1503之间可以存在最大距离，消息1503与消息1504之间可以存在最小距离，消息1503与消息1505之间可以存在最小距离，消息1503与消息1508之间可以存在最小距离。
在另一些实施例中，上述消息在移动过程中，消息之间的距离可以保持不变。
类似的，根据上文所述的影响联动动画效果的因素，消息1502、消息1504、消息1505、消息1508可以有不同的动画效果。应理解，具体描述可以参见上文描述，为了简洁，在此不再赘述。
如图15中的(c)所示，上述消息不再移动时，上述每相邻的两个消息之间的距离可以相等。若消息1506为最上方的消息，且电子设备检测到用户继续向下滑动的操作，可以显示如图15中的(d)所示的GUI。
如图15中的(d)所示，由于消息1506为最上方的消息，随着用户继续向下滑动，由于已不会再显示新的消息，为了提升人机交互体验，电子设备可以使得文本元素1506和搜索栏1507随着用户向下滑动的操作而移动。当用户松手或产生“引力”的消息1503停止向下移动时，电子设备可以将消息1502、消息1503、消息1504、消息1505、文本元素1506、搜索栏1507复位，显示如图15中的(c)所示的GUI。
示例性的，电子设备可以在确定界面1501中无与消息1503相同层级的界面元素时，将其他不同层级的界面元素设置为受到“引力”影响的界面元素。
示例性的，电子设备可以改变文本元素1506和搜索栏1507的“摩擦力”，使得文本元素1506和搜索栏1507受到的“引力”大于“摩擦力”从而文本元素1506和搜索栏1507可以向下移动。
示例性的，电子设备可以改变文本元素1506和搜索栏1507的层级映射关系，使得文本元素1506和搜索栏1507的层级与消息1503的层级相同，从而文本元素1506和搜索栏1507可以向下移动。
类似的，当文本元素1506和搜索栏1507可以向下移动时，电子设备可以根据上述的影响因素确定文本元素1506和搜索栏1507的动画效果。
示例性的，消息1503向下移动的速度越快，文本元素1506和搜索栏1507可以向下移动也可以越快。
示例性的，消息1503向下移动的距离越远，文本元素1506和搜索栏1507可以向下移动的距离也可以越远。
示例性的，消息1503的尺寸越大，文本元素1506和搜索栏1507可以向下移动也可以随着增加。例如，消息1503的尺寸为R1，消息1503向下移动的距离为d1，文本元素1506和搜索栏1507向下移动的距离可以是d2，若消息1503的尺寸变为R2，R2＞R1，消息1503向下移动的距离为d1，文本元素1506和搜索栏1507向下移动的距离可以是d3，则d3＞d2。
示例性的，文本元素1506和搜索栏1507尺寸越大，文本元素1506和搜索栏1507可以向下移动也可以随着增加。文本元素的尺寸可以文本的字号表征。
示例性的，若定义了文本元素1506和搜索栏1507的“摩擦力”，则电子设备可以使得文本元素1506和搜索栏1507的移动速度、移动距离满足任何包含“摩擦力”和“引力”的函数关系式。
需要说明的是，上述影响因素对于动画效果的影响仅为示例，本申请实施例中可以基于上文介绍的任意一个或多个影响因素确定文本元素1506和搜索栏1507的动画效果。
在一些实施例中，为了体现文本元素1506和搜索栏1507与消息1503之间的联动，电子设备不仅可以使得文本元素1506和搜索栏1507随着消息1503的移动而移动，还可以使得文本元素1506和搜索栏1507的尺寸随着消息1503的移动而变大，从而可以显示如图15中的(e)所述的GUI。
可以理解的是，当文本元素1506和搜索栏1507复位时，其尺寸也可以恢复至原尺寸。
图14和图15示出了界面元素在通知界面、负一屏界面中的界面元素联动，本申请实施例对于应用场景不作限定。
图16示出了本申请实施例提供的一组GUI。
如图16中的(a)示出的是笔记界面，该笔记界面可以显示有多个笔记，当用户操作其中一个笔记时，其动画效果可以类似于图13和图14所示的动画效果。
如图16中的(b)示出的是图库界面，该图库界面可以显示有多张图片，当用户操作其中一张图片时，其动画效果可以类似于图13和图14所示的动画效果。
如图16中的(c)示出的是服务中心界面，该服务中心界面可以显示有多张应用程序卡片，当用户操作其中一张应用程序卡片时，其动画效果可以类似于图13和图14所示的动画效果。
如图16中的(d)示出的是设置界面，该设置界面可以显示有多个设置选项，当用户操作其中一个设备选项时，其动画效果可以类似于图13和图14所示的动画效果。
图17示出了本申请实施例提供的一组GUI。
如图17中的(a)和(b)所示，电子设备显示有界面1701，该界面1701为消息通知界面，界面1701显示有消息1702、消息1703、消息1704、消息1705、消息1706。电子设备可以检测到用户向下滑动消息1704的操作，响应于该操作，电子设备可以使得消息1702、消息1703、消息1705、消息1706发生移动，具体描述可以参见上文，为了简洁，在此不再赘述。此外，电子设备可以响应于用户向下滑动的操作，由于消息1702已是最上方的消息，电子设备可以显示用于标识刷新的界面元素1708。
类似的，电子设备可以根据上文所述的影响因素确定界面元素1708的动画效果。
示例性的，如图17中的(b)和(c)所示，消息1704向下移动的距离越远，界面元素1708向下移动的距离也可以越远。
示例性的，如图17中的(b)和(c)所示，消息1704向下移动的距离越远，界面元素1708的尺寸可以越大。
示例性的，消息1704向下移动的速度越快，界面元素1708向下移动的速度也可以越快。
示例性的，消息1704向下移动的距离越远，由于界面元素1708是用于标识刷新的界面元素，则电子设备可以加快刷新速度。
示例性的，若界面元素1708可以转动，消息1704向下移动的速度越快，界面元素1708转动的速度可以越快。示例性的，若定义了界面元素1708的“摩擦力”，电子设备可以使得界面元素1708的移动距离、移动速度满足任何包含“摩擦力”和“引力”的函数关系式。
在上文针对图13至-图17的描述中，用户操作界面元素的方式是上下滑动，但本申请实施例并不限定于此，下面将结合图18介绍本申请实施例提供的界面显示的方法。
图18示出了本申请实施例提供的一组GUI。
如图18中的(a)所示，电子设备显示有界面1801，该界面1801可以是消息通知界面，该界面1801显示有消息1802、消息1803、消息1804、消息1805。针对界面1801，用户不仅可以上下滑动界面1801中的消息，还可以左右滑动界面1801中的消息。电子设备检测到用户向左滑动消息1803的操作，响应于该操作，电子设备可以使得消息1802、消息1804、消息1805发生移动。
在一些实施例中，消息1802、消息1804、消息1805的移动方向可以与消息1803的移动方向同向。
类似的，电子设备可以根据上文所述的影响因素确定消息1802、消息1804、消息1805的动画效果。
示例性的，如图18中的(b)所示，消息1802、消息1804、消息1805的移动方向可以与消息1803的移动方向同向，且由于消息1802、消息1804与消息1803之间的距离小于消息1805与消息1803之间的距离，则在相同时间内，电子设备可以使得消息1802和消息1804的移动距离大于消息1805的移动距离。
示例性的，若定义了消息1802、消息1804、消息1805的“摩擦力”，且上述3个消息的“摩擦力”不同，则上述3个消息的移动距离和/或移动速度可以不同。
示例性的，若消息1802、消息1803、消息1804的层级相同，消息1803与消息1804的层级不同，则消息1802和消息1804可以移动，而消息1805不会发生移动。
示例性的，若用户移动消息1803的速度加快，则电子设备可以使得消息1802、消息1804、消息1805的移动速度加快。
需要说明的是，上述影响因素对于动画效果的影响仅为示例，本申请实施例中可以基于上文介绍的任意一个或多个影响因素确定消息1802、消息1804、消息1805的动画效果。
在一些实施例中，如图18中的(c)所示，随着用户继续向左滑动，由于边界的存在，消息1802、消息1804、消息1805可以不再随着消息1803的移动而移动，而消息1803随着用户继续向左滑动，可以逐渐消失在界面1801中。
在一些实施例中，如图18中的(c)所示，随着用户继续向左滑动消息1803，由于控件1806受到“引力”的影响移动，电子设备可以在界面1801上显示控件1806。
在一些实施例中，如图18中的(c)和(d)所示，消息1803和控件1806之间的距离在移动直至停止的过程中可以先变大再变小。
在另一些实施例中，消息1803和控件1806之间的距离在移动直至停止的过程中可以保持不变
类似的，电子设备可以根据上文所述的影响因素确定控件1806的动画效果。
示例性的，消息1803向左移动的速度越快，控件1808向左移动的速度也可以越快。
示例性的，若定义了控件1806的“摩擦力”，电子设备可以使得控件1806的移动距离、移动速度满足任何包含“摩擦力”和“引力”的函数关系式。
如图18中的(d)所示，随着用户继续向左滑动消息1803，由于控件1807受到“引力”的影响移动，电子设备可以在界面1801上显示控件1807。
应理解，针对控件1807的动画效果的描述，可以参见针对控件1806的描述，为了简洁，在此不再赘述。
在一些实施例中，如图18中的(e)所示，若控件1807是最右方的控件，随着用户继续向左滑动消息1803，控件1806和控件1807可以不再移动，但由于控件1806和控件1807受到“引力”的影响，控件1806和控件1807的尺寸可以变大。
在另一些实施中，若控件1807是最右方的控件，随着用户继续向左滑动消息1803，控件1806和控件1807可以继续移动，且消息1803与控件1806之间的距离以及消息1803与控件1807之间的距离可以变大，且控件1806和控件1807之间的距离也可以变大。
在一些实施例中，如图18中的(e)和(f)所示，随着用户继续向左滑动消息1803，控件1806的尺寸可以不再变大，控件1807的尺寸可以继续变大，且电子设备选中控件1807以执行该控件对应的功能。
在一些实施例中，受到“引力”影响的界面元素的显示内容与“引力”相关。例如，如图18中的(e)、 (g)和(h)所示，随着用户继续向左滑动消息1803，控件1807显示的内容也可以发生变化，即图中所示的“垃圾箱”的开合角度增大。
在一些实施例中，如图18中的(f)、(i)和(j)所示，当电子设备执行控件1907对应的功能后，消息1803被删除，消息1804和消息1805仍可以受到“引力”的影响向上移动，由于消息1803被删除，可以将消息1802作为产生“引力”的界面元素，消息1804和消息1805的移动动画效果受到上文所述的因素的影响，示例性的，由于消息1804与消息1802之间的距离小于消息1805与消息1802之间的距离，则消息1804的移动速度可以快于消息1805的移动速度，则消息1804可以先于消息1805到达目的位置。
针对上述过程的位移时间曲线和间距时间曲线类似于图14中的(e)和(f)，为了简洁，在此不再赘述。
图18示出了界面元素在消息通知界面的界面元素联动，本申请实施例对于应用场景不作限定。
图19示出了本申请实施例提供的一组GUI。
如图19中的(a)所示，电子设备可以在锁屏界面显示有消息，当用户可以左右滑动该锁屏界面的消息，其动画效果可以类似于图18所示的动画效果。
如图19中的(b)所示，电子设备显示有录音机界面，该录音机界面可以显示多个录音，当用户左右滑动该界面显示的录音，其动画效果可以类似于图18所示的动画效果。
如图19中的(c)所示，电子设备显示有最近使用界面，该最近使用界面可以显示多个应用程序对应的卡片，用户可以左右滑动该界面显示的卡片，其动画效果可以类似于图18所示的动画效果。
如图19中的(d)所示，电子设备显示有通话界面，该通话界面可以显示通话记录，用户可以左右滑动该界面显示的通话记录，其动画效果可以类似于图18所示的动画效果。
如图19中的(e)所示，电子设备显示有天气界面，该天气界面可以显示多个城市天气，用户可以左右滑动该界面显示的天气，其动画效果可以类似于图18所示的动画效果。
如图19中的(f)所示，电子设备显示有待办事项界面，该待办事项界面可以显示多个待办事项，用户可以左右滑动该界面显示的待办事项，其动画效果可以类似于图18所示的动画效果。
图20示出了本申请实施例提供的一组GUI。
如图20中的(a)-(b)所示，电子设备显示有界面2001，电子设备可以在界面2001上显示应用图标2002、应用图标2003、应用图标2004、应用图标2005、文件夹2006、应用图标2007，当用户点击文件夹2006时，电子设备可以展开该文件夹2006，由于该文件夹的尺寸变大，对于应用图标2002、应用图标2003、应用图标2004、应用图标2005、应用图标2007的“引力”增强，则应用图标2002、应用图标2003、应用图标2004、应用图标2005、应用图标2007可以向着文件夹2006的方向移动一段距离后返回原位置。
在另一些实施例中，应用图标2002、应用图标2003、应用图标2004、应用图标2005、应用图标2007可以先向着文件夹2006远离的方向移动一段距离后返回原位置。
图21示出了本申请实施例提供的一组GUI。
如图21中的(a)所示，电子设备显示有界面2101，该界面2101显示有应用图标2102、应用图标2103、应用图标2104、应用图标2105、应用图标2106、应用图标2107、应用图标2108、应用图标2109、应用图标2110、应用图标2111、应用图标2112、应用图标1213、应用图标2114。
如图21中的(a)和(b)所示，电子设备检测到用户按压应用图标2108，则电子设备可以使得受到应用图标2108的“引力”影响的应用图标发生移动，即应用图标2102、应用图标2103、应用图标2104、应用图标2105发生移动。
在一些实施例中，如图21中的(b)和(c)所示，应用图标2102、应用图标2103、应用图标2104、应用图标2105可以移动至于应用图标2108合并，且将应用图标2108变更为文件夹2115，该文件夹2115中包括应用图标2102、应用图标2103、应用图标2104、应用图标2105、应用图标2108。
需要说明的是，上述针对应用图标2102、应用图标2103、应用图标2104、应用图标2105移动的过程以及确定受到应用图标2108的“引力”影响的应用图标的详细描述可以参见上文，示例性的，由于应用图标2104距离应用图标2108的距离最近，则应用图标2104可以最先与应用图标2108合并，类似地，应用图标2103和应用图标2105可以同时与应用图标2108合并，应用图标2102最后与应用图标2108合并。
图22示出了根据本申请实施例的联动动画效果相关联的联动框架与界面之间的关系的示意图，该界面可以是***界面，也可以是第三方应用程序的界面。如图22所示，联动框架2202可以提供动画效果能力2204。动画效果能力2204可以采用AAR形式2206、JAR形式2208和***接口2210。界面2214可以对界面元素实现各种操作，例如移动操作2216、合并操作2218、展开操作2220、删除操作2222和其他操作2224。界面2214可以通过集成2212的方式来使用联动框架动效2202提供的引力动效能力2204。尽管图22中未示出，但是界面2214也可以通过调用(例如，***接口2210)的方式来使用联动框架2202提供的动画效果能力2204。也就是说，联动框架可以采用AAR、JAR、***接口的形式来提供动画效果的能力，界面2214集成之后可以应用在领域内需要的各种场景。
图23示出了根据本申请实施例的用于实现动画效果能力或功能的***框架的示意图。在一些实施例中，联动框架的动效能力的是基于电子设备的操作***(例如，安卓或者鸿蒙)的整体架构来实现的，可以包含主流的4层的逻辑处理，数据处理的流程从底层往上呈现给用户。用户可以主要在应用程序层使用和体验动效的功能。在本申请实施例中，界面和联动框架的能力交互关系如图23所描绘。具体地，如图23所示，该***框架可以包括应用程序层2310、应用程序框架层2330、硬件抽象层2350、以及内核层2370。应用程序层2310可以包括界面2312。界面2312上可以实现界面元素操作2314。联动2314例如可以包括启动联动、联动运动、联动完成。应用程序框架层2330可以包括***服务2332和扩展服务2334。***服务2332可以包括各种***服务，例如Service 2333。扩展服务2334可以包括各种扩展服务，例如HwSDK 2335。硬件抽象层(HAL)2350可以包括HAL3.0 2352和算法2354，本申请实施例对于算法不作限定。内核层2370可以包括驱动2372和物理设备2374。物理设备2374可以向驱动2372提供原始参数流，而驱动2372可以向物理设备2374提供功能处理参数流。如图23进一步示出的，用于实现动画效果能力2325的联动框架2321可以实现在应用程序层2310与应用程序框架层2330之间。联动框架2321可以包括平台能力2322和***能力2324，两者可以用于提供动画效果2325。画效果2325进而可以提供给应用程序层2310的界面元素操作2314。
图24示出了根据本申请实施例的联动动画效果能力或功能实现的三种方式的具体说明的示意图。如图24所示，AAR格式2401与电子设备的***之间的关系2402为：AAR格式2401是以二进制方式的能力打包的，提供给***中应用侧集成的能力，可以自由控制版本节奏，不跟随***。JAR格式2403与电子设备的***之间的关系2404为：JAR格式2403是以二进制方式的能力打包的，提供给***中所有部件的能力，可以自由控制版本节奏，不跟随***。***接口2405与电子设备的***之间的关系2406为：***接口2405是***版本中的框架层的接口，提供给***中所有部件的能力，跟随***升级。更具体地，集成方式可以是指AAR和JAR包的方式，调用方式可以是指***接口的方式。因此，本申请实施例应用的场景是不限于任何特定场景的，只是联动动画效果的能力的展现方式可能不一致。也就是说，本申请前文描述的各种方法的功能可以通过AAR格式文件、JAR格式文件和/或电子设备的***接口来实现。以此方式，联动动画效果的能力或功能可以简单和方便地被实现并提供给电子设备的应用程序。
下面将介绍本申请实施例联动框架的相关设置。
表1为本申请实施例提供的联动场景表。
表1联动场景表
上下联动场景可以理解为用户在操作界面元素时会采用上下滑动的操作方式。例如，如图15-17所示的GUI。
左右联动场景可以理解为用户在操作界面元素时会采用左右滑动的操作方式。例如，如图18-19所示的GUI。
拖拽联动场景可以理解为用户在操作界面元素时会采用拖拽的操作方式，对于拖拽方向不作限定。 例如，如图4所示的GUI。
增删联动场景可以理解为用户在操作界面元素时可以通过滑动操作删除或增加界面元素。例如，如图18中的所示的GUI。
多向联动场景可以理解为界面元素产生的“引力”的方向不仅包括平面方向，还包括深度方向，深度方向是指与电子设备屏幕垂直的方向。
需要说明的是，对于同一个界面，可以同时存在多个联动场景。例如，如图18所示的GUI，用户既可以左右滑动界面中的消息，也可以左右滑动直至删除界面中的消息，即图18所示的GU既包括了左右联动场景，还包括了增删联动场景。
表2为本申请实施例提供的联动模型表。
表2联动模型表
本申请实施例中的联动框架可以包括多个模型，其中自定义模型可以是由开发者自定义的，开发者可以通过自定义模型影响界面元素的移动。
例如，联动框架包括引力模型和摩擦力模型，则电子设备在确定界面元素的动画效果时，可以基于界面元素的受到的“引力”和“摩擦力”确定界面元素的动画效果。
表3为本申请实施例提供的动画效果参数。
表3动画参数表
本申请实施例中可以通过改变动画参数以调整动画效果的实现细节，例如，电子设备的屏幕大，动画效果的变化幅度也可以增大，以保证用户可以看清动画效果的细节。
需要说明的是，上述动画参数表仅为示例，本申请实施例中的动画参数可以包括上述部分或全部的参数，还可以包括其他参数，例如屏幕材质。
表1所示的联动场景表以及表2所示的联动模型表，针对表1中的部分或全部联动场景，表2中的部分或全部联动模型，本申请实施例还针对不同的联动场景和不同的联动模型提供了不同的参数设置。
例如，表4所示为上下联动场景的参数配置。
表4上下联动参数表
其中，联动范围可以理解为上下联动中产生联动的范围，本申请实施中可以通过联动范围参数确定在上下联动场景中发生联动的界面元素。
联动幅度可以理解为上下联动中界面元素移动时的幅度，本申请实施中可以通过联动幅度参数确定在上下联动场景中界面元素移动的距离。
联动时间可以理解为界面元素的移动时间，本申请实施中可以通过联动时间参数确定在上下联动场景中界面元素移动的时间。
联动时延可以理解为界面元素延时移动的时间，本申请实施中可以通过联动时延参数确定每一个界面元素开始移动的时间。
移动速度为界面元素在移动过程中的移动速度，移动速度可以是固定的值，也可以是函数关系式，本申请实施例对此不作限定。
加速度为界面元素在移动过程中的加速度，移动速度可以是固定的值，也可以是函数关系式，本申请实施例对此不作限定。
需要说明的是，上述上下联动参数表仅为示例，本申请实施例中的上下联动参数可以包括上述部分或全部的参数，还可以包括其他参数。
还需要说明的是，上下联动场景中可以引入表2中的一个或多个模型，从而上下联动参数表还可以包括一个或多个模型参数，例如，上下联动场景中引入了“引力”模型，则上下联动参数表中还可以包括表5所示的参数。
再例如，表5所示为引力模型的参数配置。
表5引力模型参数表
其中，时间参数可以指示产生“引力”的时间。范围参数可以指示“引力”的范围。影响因子可以影响“引力”的大小，范围参数、时间参数等。
在一些实施例中，本申请实施例中，可以将其他联动模型量化为影响因子，从而电子设备可以通过影响因子改变引力模型中的参数，进而确定界面元素的动画效果。
电子设备在启动联动时，可以确定上述的联动框架的相关设置，然后联动运动时解析上述联动框架中的相关设置以确定界面元素的动画效果，从而可以完成联动。
上文介绍了界面元素的动画效果，联动场景、联动框架设置等，下面将介绍本申请实施例提供的界面显示方法的示意性流程图。
图25示出了本申请实施例提供的界面显示方法的示意性流程图，如图25所示，该方法包括：
S2501，显示第一界面。
示例性的，电子设备可以显示第一界面，该界面包括M个界面元素，M＞1且为整数。
例如，如图4所示，电子设备可以界面401，界面401显示有多个应用图标。
再例如，如图14所示，电子设备显示有负一屏1401，负一屏1401显示有多个卡片。
S2502，检测到用户的操作，确定第一界面元素。
在一些实施例中，检测到用户的操作，确定第一界面元素，包括：
电子设备检测到用户针对M个界面元素中的任意一个界面元素的操作，将该任意一个界面元素确定为所述第一界面元素
例如，如图4中的(a)所示的用户向下拖动界面元素。
再例如，如图4中的(b)所示的用户点击界面元素。
在另一些实施例中，检测到用户的手势操作，根据M个界面元素的每一个界面元素的类型确定第一界面元素。
在上述示例中，用户操作一个界面元素，将该界面元素确定为第一界面元素，但本申请实施例并不限定于此，示例性的，用户可以通过手势操作在第一界面的空白处滑动以刷新第一界面，即此时用 户并没有针对某个界面元素进行操作，则电子设备可以根据第一界面中的每一个界面元素的类型，例如将第一界面中的层级最高的界面元素作为产生“引力”的界面元素，则其他界面元素可以受到“引力”的影响而发生联动。
S2503，根据第一界面元素的类型，确定N个受到第一界面元素影响的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个受到第一界面元素影响的界面元素，包括：
根据第一界面元素的类型，确定N个与第一界面元素的类型相同的的界面元素为受到第一界面元素影响的界面元素。
示例性的，电子设备确定第一界面元素的类型后，可以将N个与第一界面元素类型相同的界面元素确定为受到第一界面元素影响的界面元素，1≤N≤M-1，该N个受到第一界面元素影响的界面元素包括第二界面元素。
在另一些实施例中，根据第一界面元素的类型，确定N个界面元素，包括：
根据第一界面元素的类型，确定N个与第一界面元素的类型不相同的界面元素为受到第一界面元素影响的界面元素。
示例性的，电子设备确定第一界面元素的类型后，可以将N个与第一界面元素类型不相同的界面元素确定为受到第一界面元素影响的界面元素。
类型不相同可以理解为层级不相同、颜色不相同、尺寸不相同等。
在一些实施例中，根据第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素，包括：
电子设备可以确定第一界面元素中的除第一界面元素以外的所有界面元素为受到第一界面元素影响的界面元素，即第一界面中的所有界面元素为同一个类型的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备可以根据第一界面元素的层级，确定N个与第一界面元素层级相同的界面元素为受到第一界面元素影响的界面元素，即第一界面中的层级相同的界面元素为同一个类型的界面元素。
例如，电子设备可以将与第一界面元素的层级相同的界面元素确定为受到第一界面元素影响的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备可以根据第一界面元素的尺寸，确定N个与第一界面元素尺寸相同的界面元素为受到第一界面元素影响的界面元素，即第一界面中的尺寸相同的界面元素为同一个类型的界面元素。
例如，电子设备可以将与第一界面元素的尺寸相同的界面元素确定为受到第一界面元素影响的界面元素。
再例如，电子设备可以将与第一界面元素的尺寸相同，或与第一界面元素的尺寸差值小于阈值的界面元素确定为受到第一界面元素影响的界面元素。
在一些实施例中，若用户针对第一界面元素的操作是移动界面元素的操作，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备确定第一界面元素的移动的第一方向；
电子设备根据第一方向确定N个在第一界面元素的第一方向的界面元素为受到第一界面元素影响的界面元素；或
电子设备根据第二方向确定N个在第一界面元素的第二方向的界面元素为受到第一界面元素影响的界面元素，其中第二方向为第一方向的相反方向。
例如，第一界面元素的移动方向为向左移动，则电子设备可以将第一界面元素的左侧的界面元素确定与第一界面元素类型相同的界面元素。第一界面元素的左侧的界面元素可以包括第一界面元素正左侧的界面元素，还可以包括第一界面元素左上方和/或左下方的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备根据第一界面元素的颜色，确定N个与第一界面元素颜色相同的界面元素为受到第一界面元素影响的界面元素。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备可以确定第一界面元素与M-1个界面元素之间的距离，并根据第一界面元素与M-1个界面元素之间的距离确定N个与所述第一界面元素类型相同的界面元素为受到第一界面元素影响的界面元素，即在预设距离内的界面元素为第一界面元素的相同类型的界面元素。
例如，电子设备可以确定第一界面元素与M-1个界面元素之间的距离，然后将与第一界面元素之间的距离小于第一阈值的界面元素确定为受到第一界面元素影响的界面元素。
需要说明的是，本申请实施例对于距离的测量方式不作限定，具体描述可以参见上文针对图7的描述。
在一些实施例中，根据第一界面元素的类型，确定N个与第一界面元素的类型相同的界面元素为受到第一界面元素影响的界面元素，包括：
电子设备可以确定第一界面元素的发生中心点，然后根据发生中心点确定第一几何区域，将第一几何区域包覆和/或与第一几何区域的边界相交的N个界面元素确定为受到第一界面元素影响的界面元素。
例如，如图7中的(e)-(g)所示，电子设备可以以界面元素的几何中心点为中心点，选取几何区域，将几何区域包覆和/或与几何区域的边界相交的界面元素确定为受到界面元素影响的界面元素。几何区域包覆可以理解为界面元素完全在几何区域内。
S2504，根据第一联动参数，确定第二界面元素的第一动画效果。
示例性的，电子设备可以根据第一联动参数，确定第二界面元素的第一动画效果，该动画效果包括第二界面元素的移动距离以及移动时的状态。本申请实施例中的联动参数包括以下中的至少一项：第一界面元素的尺寸、第二界面元素的尺寸、第一界面元素与第二界面元素之间的距离、第二界面元素的限制参数、第一界面元素的动画效果。第二界面元素的限制参数可以是电子设备设定的限制第二界面元素移动的参数。例如，第二界面元素的限制可以是第二界面元素的“摩擦力”和/或“重力”。
S2505，根据第一动画效果移动移动第二界面元素。
示例性的，电子设备在确定动画效果后，可以根据动画效果移动第二界面元素。
可以理解的是，由于动画效果是根据上述联动参数确定的，则针对同一界面的不同受到第一界面元素影响的节目元素，其动画效果可以是不同的。
在一些实施例中，在S2505之前，该方法还包括：
确定第一延迟时间；
示例性的，电子设备可以确定延迟时间，该延迟时间为第一界面***作与第二界面元素开始移动之间的时间差。例如，第一界面元素被点击经过1s后，第二界面元素开始移动。
在一些实施例中，第一延迟时间可以是预配置的。
在另一些实施例中，第一延时时间可以是根据第一界面元素与第二界面元素之间的距离确定的。例如，第一界面元素与第二界面元素之间的距离为D1时，第一延迟时间可以是T1，第一界面元素与第二界面元素之间的距离为D2时，第一延迟时间可以是T2。
在一些实施例中，根据第一动画效果移动第二界面元素，包括：
在经过第一延迟时间后，根据第一动画效果移动移动第二界面元素。
在一些实施例中，第二界面元素的动画效果的位移时间变化的曲线可以是贝塞尔曲线或弹性力曲线，
在一些实施例中，该方法还包括：
若用户针对第一界面元素的操作为按压操作或点击操作，所述方法还包括：
响应于该操作，改变第一界面元素的尺寸。
在一些实施例中，该方法还包括：
第一联动参数还包括用户执行操作的压力。
在一些实施例中，该方法还包括：
若检测到电子设备的类型由第一类型变为第二类型或电子设备的屏幕参数发生变化，将第一动画效果切换为第三动画效果；
根据第一动画效果移动第二界面元素，包括：：
根据第三动画效果移动第二界面元素。
本申请实施例中，界面元素之间存在关联，当一个界面元素***作时或确定为产生引力影响的界面元素时，可以与其他界面元素关联，使得其他界面元素发生联动，加强了界面元素之间的联系，且界面元素之间的联动符合物理规律，使得用户可以有着更加真实的感受，提高了用户的使用体验。
本申请实施例还提供了一种电子设备，包括用于实现上述方法实施例涉及的各步骤的功能模块。需要说明的是，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。本申请实施例提供的电子设备，用于执行上述界面显示的方法，因此可以达到与上述相同的效果。
本申请实施例还提供了一种电子设备，包括：处理器、存储器、应用程序以及计算机程序。上述各器件可以通过一个或多个通信总线连接。其中，该一个或多个计算机程序被存储在上述存储器中并被配置为被该一个或多个处理器执行，该一个或多个计算机程序包括指令，上述指令可以用于使电子设备执行上述各实施例中电子设备的各个步骤。
示例性的，上述处理器具体可以为图1所示的处理器110，上述存储器具体可以为图1所示的内部存储器120和/或与电子设备连接的外部存储器。
本申请实施例还提供一种芯片，所述芯片包括处理器和通信接口，所述通信接口用于接收信号，并将所述信号传输至所述处理器，所述处理器处理所述信号，使得如前文中任一种可能的实现方式中所述的界面显示的方法被执行。
本实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现上述实施例中的界面显示的方法。
本实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的界面显示的方法。
以上实施例中所用，根据上下文，术语“当…时”或“当…后”可以被解释为意思是“如果…”或“在…后”或“响应于确定…”或“响应于检测到…”。类似地，根据上下文，短语“在确定…时”或“如果检测到(所陈述的条件或事件)”可以被解释为意思是“如果确定…”或“响应于确定…”或“在检测到(所陈述的条件或事件)时”或“响应于检测到(所陈述的条件或事件)”。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的***、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可 以存储程序代码的介质。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (21)

  1. 一种界面显示的方法，其特征在于，所述方法包括：
    显示第一界面，所述第一界面包括M个界面元素，M＞1且为整数；
    检测到用户的操作，确定第一界面元素；
    根据所述第一界面元素的类型，确定N个受到所述第一界面元素影响的界面元素，所述N个受到所述第一界面元素影响的界面元素包括第二界面元素，其中1≤N≤M-1，且为整数；
    根据第一联动参数，确定所述第二界面元素的第一动画效果，其中所述第一联动参数包括所述以下中的至少一项：所述第一界面元素的尺寸、所述第二界面元素的尺寸、所述第一界面元素与所述第二界面元素之间的距离、所述第二界面元素的限制参数，所述第一界面元素的动画效果；
    根据所述第一动画效果移动所述第二界面元素。
  2. 根据权利要求1所述的方法，其特征在于，所述检测到用户的操作，确定第一界面元素，包括：
    检测到用户针对所述M个界面元素中的任意一个界面元素的操作，将所述任意一个界面元素确定为所述第一界面元素。
  3. 根据权利要求1所述的方法，其特征在于，所述检测到用户的操作，确定第一界面元素，包括：
    检测到用户的手势操作，根据所述M个界面元素的每一个界面元素的类型确定第一界面元素。
  4. 根据权利要求1至3中任一项所述的方法，其特征在于，所述根据所述第一界面元素的类型，确定N个受到所述第一界面元素影响的界面元素，包括：
    根据所述第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素为受到所述第一界面元素影响的界面元素。
  5. 根据权利要求4所述的方法，其特征在于，所述根据所述第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素为所述第一界面元素影响的界面元素，包括：
    根据所述第一界面元素的层级，确定N个与所述第一界面元素层级相同的界面元素为受到所述第一界面元素影响的界面元素。
  6. 根据权利要求5所述的方法，其特征在于，所述方法还包括：
    根据所述第一界面元素的层级确定第三界面元素，其中，所述第三界面元素的层级与所述第一界面元素的层级不相同；
    根据第二联动参数，确定所述第三界面元素的第二动画效果，其中所述第二联动参数包括所述以下中的至少一项：所述第一界面元素的尺寸、所述第三界面元素的尺寸、所述第一界面元素与所述第三界面元素之间的距离、第三界面元素的限制参数、所述第一界面元素的动画效果；
    根据所述第二动画效果移动所述第三界面元素。
  7. 根据权利要求4所述的方法，其特征在于，所述根据所述第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素为受到所述第一界面元素影响的界面元素，包括：
    根据所述第一界面元素的颜色，确定N个与所述第一界面元素颜色相同的界面元素为受到所述第一界面元素影响的界面元素。
  8. 根据权利要求2所述的方法，其特征在于，若所述操作为移动操作，所述根据所述第一界面元素的类型，确定N个受到所述第一界面元素影响的界面元素，包括：
    确定所述第一界面元素的移动的第一方向；
    根据所述第一方向确定N个在所述第一界面元素的第一方向的界面元素为受到所述第一界面元素影响的界面元素；或
    根据第二方向确定N个在所述第一界面元素的第二方向的界面元素为受到所述第一界面元素影响的界面元素，其中所述第二方向为所述第一方向的相反方向。
  9. 根据权利要求4所述的方法，其特征在于，所述根据所述第一界面元素的类型，确定N个与所述第一界面元素类型相同的界面元素为受到所述第一界面元素影响的界面元素，包括：
    确定所述第一界面元素的发生中心点；
    根据所述发生中心点，确定第一几何区域，将所述第一几何区域覆盖或与所述第一几何区域的边界相交的N个界面元素确定为受到所述第一界面元素影响的界面元素。
  10. 根据权利要求2所述的方法，其特征在于，若所述操作为按压操作或点击操作，所述方法还包括：
    响应于所述操作，改变所述第一界面元素的尺寸。
  11. 根据权利要求10所述的方法，其特征在于，所述第一联动参数还包括所述用户执行所述操作的压力。
  12. 根据权利要求1至11中任一项所述的方法，其特征在于，在所述根据所述效果移动所述第二界面元素之前，所述方法还包括：
    确定第一延迟时间；
    所述根据所述第一动画效果移动所述第二界面元素，包括：
    在经过所述第一延迟时间后，根据所述第一动画效果移动所述第二界面元素。
  13. 根据权利要求12所述的方法，其特征在于，所述确定第一延迟时间，包括：
    根据所述第一界面元素和所述第二界面元素之间的距离确定所述第一延迟时间。
  14. 根据权利要求12所述的方法，其特征在于，所述第一延迟时间是预配置的。
  15. 根据权利要求1至14中任一项所述的方法，其特征在于，所述方法还包括：
    所述第二界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线，其中，所述弹性力曲线包括临界阻尼弹性力曲线、过阻尼弹性力曲线、欠阻尼弹性力曲线。
  16. 根据权利要求1至15中任一项所述的方法，其特征在于，所述方法还包括：
    若检测到所述电子设备的类型由第一类型变为第二类型或所述电子设备的屏幕参数发生变化，将所述第一动画效果切换为第三动画效果；
    所述根据所述第一动画效果移动所述第二界面元素，包括：：
    根据所述第三动画效果移动所述第二界面元素。
  17. 一种电子设备，其特征在于，包括：用于实现如权利要求1至16中任一项所述的方法的模块。
  18. 一种电子设备，其特征在于，包括一个或多个处理器；一个或多个存储器；所述一个或多个存储器存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述一个或多个处理器执行时，使得如权利要求1至16中任一项所述的方法被执行。
  19. 一种芯片，其特征在于，所述芯片包括处理器和通信接口，所述通信接口用于接收信号，并将所述信号传输至所述处理器，所述处理器处理所述信号，使得如权利要求1至16中任一项所述的方法被执行。
  20. 一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机指令，当所述计算机指令在计算机上运行时，使得如权利要求1至16中任一项所述的方法被执行。
  21. 一种包含指令的计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1至16中任一项所述的方法。
PCT/CN2023/107682 2022-07-22 2023-07-17 一种界面显示的方法以及电子设备 WO2024017185A1 (zh)

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 (zh) 2024-01-25

Family

ID=89617150

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/107682 WO2024017185A1 (zh) 2022-07-22 2023-07-17 一种界面显示的方法以及电子设备

Country Status (2)

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

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 (zh) 一种控制方法和电子设备
WO2021027725A1 (zh) 显示页面元素的方法和电子设备
WO2022100315A1 (zh) 应用界面的生成方法及相关装置
WO2021000841A1 (zh) 一种生成用户头像的方法及电子设备
CN115469781A (zh) 图形界面显示方法、电子设备、介质以及程序产品
CN110442277B (zh) 显示预览窗口信息的方法及电子设备
WO2021057203A1 (zh) 一种操作方法和电子设备
CN110865765A (zh) 终端及地图控制方法
WO2022228042A1 (zh) 显示方法、电子设备、存储介质和程序产品
WO2024017185A1 (zh) 一种界面显示的方法以及电子设备
WO2024017183A1 (zh) 一种界面切换的显示方法以及电子设备
RU2809207C2 (ru) Способ обеспечения эффекта обратной связи для пользовательской операции и электронное устройство
WO2023130977A1 (zh) 用户界面显示方法、电子设备、介质以及程序产品
WO2022143335A1 (zh) 一种动效处理方法及相关装置
WO2024099206A1 (zh) 一种图形界面处理方法以及装置
WO2024001770A1 (zh) 一种广告归因的***、方法以及装置
WO2023280021A1 (zh) 一种生成主题壁纸的方法及电子设备
WO2024012354A1 (zh) 一种显示方法及电子设备
WO2024088253A1 (zh) 折叠屏显示方法及电子设备
WO2024109198A1 (zh) 窗口调整方法及相关装置
WO2023231696A1 (zh) 一种拍摄方法及相关设备
WO2023160455A1 (zh) 删除对象的方法及电子设备
WO2023083184A1 (zh) 桌面管理方法、图形用户界面及电子设备
WO2022237315A1 (zh) 显示方法及电子设备
WO2024067129A1 (zh) 一种***、歌单生成方法以及电子设备

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