CN117472485A

CN117472485A - Interface display method and electronic equipment

Info

Publication number: CN117472485A
Application number: CN202210871034.2A
Authority: CN
Inventors: 卞超
Original assignee: Huawei Technologies Co Ltd
Current assignee: Huawei Technologies Co Ltd
Priority date: 2022-07-22
Filing date: 2022-07-22
Publication date: 2024-01-30
Also published as: WO2024017185A1

Abstract

The application provides an interface display method and electronic equipment, wherein the method comprises the following steps: displaying a first interface, wherein the first interface comprises M interface elements, M is more than 1 and is an integer; detecting operation of a user, and determining a first interface element; determining N interface elements influenced by the first interface element according to the type of the first interface element, wherein the N interface elements influenced by the first interface element comprise second interface elements, N is more than or equal to 1 and less than or equal to M-1, and the N is an integer; determining a first animation effect of the second interface element according to the first linkage parameter; according to the method and the device for moving the second interface elements according to the first animation effect, through the method and the device, the association between the interface elements is enhanced, the association between the interface elements accords with a physical rule, a user can have more real feeling, and the use experience of the user is improved.

Description

Interface display method and electronic equipment

Technical Field

The present application relates to the field of electronic devices, and more particularly, to a method of interface display and an electronic device.

Background

As technology advances, various types of electronic devices are configured with various types of screens, wherein the display effect of various interface elements in an interface is an important factor affecting the user experience. At present, the display effect of the animation is very single, and the user lacks a real feeling.

Disclosure of Invention

The embodiment of the application provides an interface display method and electronic equipment, which enable interface elements to be associated, strengthen the association between the interface elements, enable the association between the interface elements to conform to a physical rule, enable a user to have more real experience, and improve the use experience of the user.

In a first aspect, there is provided an interface display method, the method including: displaying a first interface, wherein the first interface comprises M interface elements, M is more than 1 and is an integer; detecting operation of a user, and determining a first interface element; according to the type of the first interface element, N interface elements influenced by the first interface element are determined, wherein the N interface elements influenced by the first interface element comprise second interface elements, N is more than or equal to 1 and less than or equal to M-1, and the N is an integer; determining a first animation effect of the second interface element according to a first linkage parameter, wherein the first linkage parameter comprises 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, the limiting parameter of the second interface element, the animation effect of the first interface element; the second interface element is moved according to the first animation effect.

In the embodiment of the application, when one interface element is operated or is determined to be the interface element with gravitation influence, the interface elements can be associated with other interface elements, so that linkage occurs to other interface elements, the linkage between the interface elements is enhanced, the linkage between the interface elements accords with a physical rule, a user can have more real feeling, and the use experience of the user is improved.

With reference to the first aspect, in certain implementation manners of the first aspect, the detecting the operation of the user, determining the first interface element includes: detecting an operation of a user on any one interface element in the M interface elements, and determining the any one interface element as the first interface element.

With reference to the first aspect, in certain implementation manners of the first aspect, the detecting the operation of the user, determining the first interface element includes: and detecting gesture operation of a user, and determining a first interface element according to the type of each interface element of the M interface elements.

With reference to the first aspect, in some implementations of the first aspect, the determining N interface elements affected by the first interface element according to the type of the first interface element includes: and determining N interface elements with the same type as the first interface element as the interface elements affected by the first interface element according to the type of the first interface element.

With reference to the first aspect, in some implementations of the first aspect, the determining, according to the type of the first interface element, N interface elements that are the same as the type of the first interface element as interface elements affected by the first interface element includes: and determining N interface elements which are the same as the first interface element hierarchy as the interface elements affected by the first interface element according to the first interface element hierarchy.

With reference to the first aspect, in certain implementations of the first aspect, 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 different from the level of the first interface element; determining a second animation effect of the third interface element according to a second linkage parameter, wherein the second linkage parameter comprises at least one of: the size of the first interface element, the size of the third interface element, the distance between the first interface element and the third interface element, the limiting parameter 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.

With reference to the first aspect, in some implementations of the first aspect, the determining, according to the type of the first interface element, N interface elements that are the same as the type of the first interface element as interface elements affected by the first interface element includes: and determining N interface elements with the same color as the first interface element as the interface elements affected by the first interface element according to the color of the first interface element.

With reference to the first aspect, in some implementations of the first aspect, the determining, according to the type of the first interface element, N interface elements that are the same as the type of the first interface element as interface elements affected by the first interface element includes: and determining N interface elements with the same size as the first interface element as the interface elements affected by the first interface element according to the size of the first interface element.

With reference to the first aspect, in some implementations of the first aspect, the determining, according to the type of the first interface element, N interface elements that are the same as the type of the first interface element as interface elements affected by the first interface element includes: and determining the distance between the first interface element and M-1 interface elements, and determining N interface elements with the same type as the first interface element according to the distance between the first interface element and the M-1 interface elements.

With reference to the first aspect, in some implementations of the first aspect, the determining, according to the type of the first interface element, N interface elements that are the same as the type of the first interface element as interface elements affected by the first interface element includes: determining an occurrence center point of the first interface element, determining a first geometric area according to the occurrence center point, and determining N interface elements which are covered by the first geometric area and/or intersect with the boundary of the first geometric area as interface elements influenced by the first interface element.

With reference to the first aspect, in some implementations of the first aspect, the determining, according to the type of the first interface element, N interface elements that are the same as the type of the first interface element as interface elements affected by the first interface element includes: and determining N interface elements except the first interface element in the first interface as interface elements influenced by the first interface element, wherein N=m-1.

With reference to the first aspect, in some implementations of the first aspect, if the operation is a move operation, determining, according to a type of the first interface element, N interface elements that are the same as the type of the first interface element as interface elements affected by the first interface element includes: determining a first direction of movement of the first interface element; determining N interface elements in a first direction of the first interface element as interface elements influenced by the first interface element according to the first direction; or determining N interface elements in a second direction of the first interface element as interface elements affected by the first interface element according to a second direction, wherein the second direction is the opposite direction of the first direction.

With reference to the first aspect, in some implementations of the first aspect, the determining, according to the type of the first interface element, N interface elements that are the same as the type of the first interface element as interface elements affected by the first interface element includes: determining an occurrence center point of the first interface element; and determining a first geometric area according to the occurrence center point, and determining interface elements which are covered by the first geometric area or are intersected with the boundary of the first geometric area as N interface elements with the same type as the first interface elements.

With reference to the first aspect, in certain implementation manners of the first aspect, if the operation is a press operation or a click operation, the method further includes: in response to the operation, a size of the first interface element is changed.

With reference to the first aspect, in certain implementations of the first aspect, the first linkage parameter further includes a pressure of the user performing the operation.

With reference to the first aspect, in certain implementations of the first aspect, before the moving the second interface element according to the effect, the method further includes: determining a first delay time; the moving the second interface element according to the first animation effect includes: after the first delay time, the second interface element is moved according to the first animation effect.

With reference to the first aspect, in certain implementations of the first aspect, the determining the first delay time includes: the first delay time is determined based on a distance between the first interface element and the second interface element.

With reference to the first aspect, in certain implementations of the first aspect, the first delay time is preconfigured.

With reference to the first aspect, in certain implementations of the first aspect, the method further includes:

The displacement time curve of the second interface element is a Bezier curve or an elastic force curve, wherein the elastic force curve comprises a critical damping elastic force curve, an over damping elastic force curve and an under damping elastic force curve.

if the type of the electronic equipment is detected to be changed from the first type to the second type or the screen parameters of the electronic equipment are changed, the first animation effect is switched to a third animation effect; the moving the second interface element according to the first animation effect includes: and moving the second interface element according to the third animation effect.

A second aspect is an electronic device according to an embodiment of the present application, where the electronic device includes a module/unit that performs the method of the above aspect or any one of the possible designs of the above aspect; these modules/units may be implemented by hardware, or may be implemented by hardware executing corresponding software.

A third aspect, which is a chip of the embodiments of the present application, where the chip is coupled to a memory in an electronic device, and is configured to invoke a computer program stored in the memory and execute the foregoing aspects of the embodiments of the present application and any possible technical solutions of the foregoing aspects; "coupled" in embodiments of the present application means that the two components are directly or indirectly joined to each other.

In a fourth aspect, a computer readable storage medium according to an embodiment of the present application includes a computer program, where the computer program when executed on an electronic device causes the electronic device to perform the above aspect and any possible technical solution of the above aspect.

In a fifth aspect, the present application provides a computer program according to an embodiment of the present application, where the computer program includes instructions, where the instructions when executed on a computer cause the computer to perform the above aspect and any possible technical solutions of the above aspect.

In a sixth aspect, the present application provides a graphical user interface on an electronic device with a display, one or more memories, and one or more processors configured to execute one or more computer programs stored in the one or more memories, where the graphical user interface includes a graphical user interface displayed when the electronic device performs any of the above aspects and possible technical solutions of any of the above aspects.

In a seventh aspect, an electronic device according to an embodiment of the present application includes one or more processors; one or more memories; the one or more memories store one or more computer programs comprising instructions that, when executed by the one or more processors, cause the electronic device to perform aspects as described above and any of the possible designs of the aspects described above.

The advantages of the second to seventh aspects are referred to above, and the description thereof is not repeated.

Drawings

Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Fig. 2 is a software architecture block diagram of an example electronic device according to an embodiment of the present application.

FIG. 3 is a schematic diagram of the direction of "attraction" when an interface element of an embodiment of the present application is affected by "attraction".

FIG. 4 is a set of GUIs provided in an embodiment of the present application.

FIG. 5 is a detailed schematic diagram of an animation effect provided by an embodiment of the present application in which an interface element moves under the influence of the "attraction" of the interface element being manipulated.

FIG. 6 is a set of GUIs provided in an embodiment of the present application.

FIG. 7 is a schematic diagram of several ways of determining the "attractive force" range to be subjected to an interface element that generates "attractive force" provided in an embodiment of the present application.

FIG. 8 is a schematic illustration of the effect of friction provided by an embodiment of the present application on a linked animation effect.

FIG. 9 is a schematic diagram of the impact of pressure provided by an embodiment of the present application on a linked animation effect.

Fig. 10 is a schematic diagram of the influence of the movement direction on the linkage animation effect provided in the embodiment of the present application.

FIG. 11 is a schematic diagram of the impact of different influencing factors on the linked animation effect provided by embodiments of the present application.

FIG. 12 is a schematic diagram of an animation process and associated control logic for a linked animation effect of an embodiment of the present application.

Fig. 13 is a schematic diagram of a displacement time curve of an embodiment of the present application.

FIG. 14 is a set of GUIs provided in an embodiment of the present application.

FIG. 15 is a set of GUIs provided in an embodiment of the present application.

FIG. 16 is a set of GUIs provided in an embodiment of the present application.

FIG. 17 is a set of GUIs provided in an embodiment of the present application.

FIG. 18 is a set of GUIs provided in an embodiment of the present application.

FIG. 19 is a set of GUIs provided in an embodiment of the present application.

FIG. 20 is a set of GUIs provided in an embodiment of the present application.

FIG. 21 is a set of GUIs provided in an embodiment of the present application.

FIG. 22 is a schematic illustration of a relationship between a linkage frame and an interface associated with a linkage animation effect of an embodiment of the present application.

FIG. 23 is a schematic diagram of a system framework for implementing animation effect capabilities or functions of an embodiment of the present application.

FIG. 24 is a schematic diagram of a specific illustration of three ways of linking animation effect capability or function implementation of an embodiment of the present application.

Fig. 25 is a schematic flowchart of an interface display method provided in an embodiment of the present application.

Detailed Description

The terminology used in the following embodiments is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used in the specification and the appended claims, the singular forms "a," "an," "the," and "the" are intended to include, for example, "one or more" such forms of expression, unless the context clearly indicates to the contrary. It should also be understood that in the various embodiments herein below, "at least one", "one or more" means one, two or more than two. The term "and/or" is used to describe an association relationship of associated objects, meaning that there may be three relationships; for example, a and/or B may represent: a alone, a and B together, and B alone, wherein A, B may be singular or plural. The character "/" generally indicates that the context-dependent object is an "or" relationship.

Reference in the specification to "one embodiment" or "some embodiments" or the like means that a particular feature, structure, or characteristic described in connection with the embodiment is included in one or more embodiments of the application. Thus, appearances of the phrases "in one embodiment," "in some embodiments," "in other embodiments," and the like in the specification are not necessarily all referring to the same embodiment, but mean "one or more but not all embodiments" unless expressly specified otherwise. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless expressly specified otherwise.

Embodiments of an electronic device, a user interface for such an electronic device, and for using such an electronic device are described below. In some embodiments, the electronic device may be a portable electronic device such as a cell phone, tablet computer, wearable electronic device with wireless communication capability that also includes other functionality such as personal digital assistant and/or music player functionality (e.g., a smart watch), etc. Exemplary embodiments of portable electronic devices include, but are not limited to, piggy-back Or other operating system. The portable electronic device may also be other portable electronic devices such as a Laptop computer (Laptop) or the like. It should also be appreciated that in other embodiments, the electronic device described above may not be a portable electronic device, but rather a desktop computer.

By way of example, fig. 1 shows a schematic 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 (universal serial bus, USB) interface 130, a charge management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a compass 190, a motor 191, an indicator 192, a camera 193, a display 194, and a subscriber identity module (subscriber identification module, SIM) card interface 195, etc.

It is to be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, electronic device 100 may include more or fewer components than shown, or certain components may be combined, or certain components may be split, or different arrangements of components. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

The processor 110 may include one or more processing units, such as: the processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processor (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), a controller, a video codec, a digital signal processor (digital signal processor, DSP), a baseband processor, and/or a neural network processor (neural-network processing unit, NPU), etc. Wherein the different processing units may be separate components or may be integrated in one or more processors. In some embodiments, the electronic device 100 may also include one or more processors 110. The controller can generate operation control signals according to the instruction operation codes and the time sequence signals to finish the control of instruction fetching and instruction execution. In other embodiments, memory may also be provided in the processor 110 for storing instructions and data. Illustratively, the memory in the processor 110 may be a cache memory. The memory may hold instructions or data that the processor 110 has just used or recycled. If the processor 110 needs to reuse the instruction or data, it can be called directly from the memory. This avoids repeated accesses and reduces the latency of the processor 110, thereby improving the efficiency of the electronic device 100 in processing data or executing instructions.

In some embodiments, the processor 110 may include one or more interfaces. The interfaces may include inter-integrated circuit (inter-integrated circuit, I2C) interfaces, inter-integrated circuit audio (inter-integrated circuit sound, I2S) interfaces, pulse code modulation (pulse code modulation, PCM) interfaces, universal asynchronous receiver transmitter (universal asynchronous receiver/transmitter, UART) interfaces, mobile industry processor interfaces (mobile industry processor interface, MIPI), general-purpose input/output (GPIO) interfaces, SIM card interfaces, and/or USB interfaces, among others. The USB interface 130 is an interface conforming to the USB standard, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type C interface, or the like. The USB interface 130 may be used to connect a charger to charge the electronic device 100, and may also be used to transfer data between the electronic device 100 and a peripheral device. The USB interface 130 may also be used to connect headphones through which audio is played.

It should be understood that the interfacing relationship between the modules illustrated in the embodiments of the present application is only illustrative, and does not limit the structure of the electronic device 100. In other embodiments of the present application, the electronic device 100 may also use different interfacing manners, or a combination of multiple interfacing manners in the foregoing embodiments.

The charge management module 140 is configured to receive a charge input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charge management module 140 may receive a charging input of a wired charger through the USB interface 130. In some wireless charging embodiments, the charge management module 140 may receive wireless charging input through a wireless charging coil of the electronic device 100. The charging management module 140 may also supply power to the electronic device through the power management module 141 while charging the battery 142.

The power management module 141 is used for connecting the battery 142, and the charge management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and/or the charge management module 140 and provides power to the processor 110, the internal memory 121, the external memory, the display 194, the camera 193, the wireless communication module 160, and the like. The power management module 141 may also be configured to monitor battery capacity, battery cycle number, battery health (leakage, impedance) and other parameters. In other embodiments, the power management module 141 may also be provided in the processor 110. In other embodiments, the power management module 141 and the charge management module 140 may be disposed in the same device.

The wireless communication function of the electronic device 100 may be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, a modem processor, a baseband processor, and the like.

The antennas 1 and 2 are used for transmitting and receiving electromagnetic wave signals. Each antenna in the electronic device 100 may be used to cover a single or multiple communication bands. Different antennas may also be multiplexed to improve the utilization of the antennas. For example: the antenna 1 may be multiplexed into a diversity antenna of a wireless local area network. In other embodiments, the antenna may be used in conjunction with a tuning switch.

The mobile communication module 150 may provide a solution for wireless communication including 2G/3G/4G/5G, etc., applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (low noise amplifier, LNA), etc. The mobile communication module 150 may receive electromagnetic waves from the antenna 1, perform processes such as filtering, amplifying, and the like on the received electromagnetic waves, and transmit the processed electromagnetic waves to the modem processor for demodulation. The mobile communication module 150 can amplify the signal modulated by the modem processor, and convert the signal into electromagnetic waves through the antenna 1 to radiate. In some embodiments, at least some of the functional modules of the mobile communication module 150 may be disposed in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 may be provided in the same device as at least some of the modules of the processor 110.

The wireless communication module 160 may provide solutions for wireless communication including wireless local area network (wireless local area networks, WLAN) (e.g., wireless fidelity (wireless fidelity, wiFi) network), bluetooth (BT), global navigation satellite system (global navigation satellite system, GNSS), frequency modulation (frequency modulation, FM), near field wireless communication technology (near field communication, NFC), infrared technology (IR), etc., as applied on the electronic device 100. The wireless communication module 160 may be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the electromagnetic wave signals, filters the electromagnetic wave signals, and transmits the processed signals to the processor 110. The wireless communication module 160 may also receive a signal to be transmitted from the processor 110, frequency modulate it, amplify it, and convert it to electromagnetic waves for radiation via the antenna 2.

The electronic device 100 implements display functions through a GPU, a display screen 194, an application processor, and the like. The GPU is a microprocessor for image processing, and is connected to the display 194 and the application processor. The GPU is 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 change display information.

The display screen 194 is used to display images, videos, and the like. The display 194 includes a display panel. The display panel may employ a liquid crystal display (liquid crystal display, LCD), an organic light-emitting diode (OLED), an active-matrix organic light emitting diode (AMOLED), a flexible light-emitting diode (FLED), miniled, microLed, micro-OLED, a quantum dot light-emitting diode (quantum dot light emitting diodes, QLED), or the like. In some embodiments, the electronic device 100 may include 1 or more display screens 194.

In some embodiments of the present application, the display screen 194 in fig. 1 may be bent when the display panel is made of OLED, AMOLED, FLED or the like. Here, the display 194 may be bent, which means that the display 194 may be bent at any position to any angle and may be held at the angle, for example, the display 194 may be folded in half from the middle. Or folded up and down from the middle.

The display 194 of the electronic device 100 may be a flexible screen that is currently of great interest due to its unique characteristics and great potential. Compared with the traditional screen, the flexible screen has the characteristics of strong flexibility and bending property, can provide a new interaction mode based on the bending property for a user, and can meet more requirements of the user on electronic equipment. For electronic devices equipped with foldable display screens, the foldable display screen on the electronic device can be switched between a small screen in a folded configuration and a large screen in an unfolded configuration at any time. Accordingly, users use split screen functions on electronic devices configured with foldable display screens, as well as more and more frequently.

The electronic device 100 may implement a photographing 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 data fed back by the camera 193. For example, when photographing, the shutter is opened, light is transmitted to the camera photosensitive element through the lens, the optical signal is converted into an electric signal, and the camera photosensitive element transmits the electric signal to the ISP for processing and is converted into an image visible to naked eyes. ISP can also perform algorithm optimization on noise, brightness and skin color of the image. The ISP can also optimize parameters such as exposure, color temperature, etc. of the photographed scene. In some embodiments, the ISP may be provided in the camera 193.

The camera 193 is used to capture still images or video. The object generates an optical image through the lens and projects the optical image onto the photosensitive element. The photosensitive element may be a charge coupled device (charge coupled device, CCD) or a Complementary Metal Oxide Semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, which is then transferred to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV, or the like format. In some embodiments, electronic device 100 may include 1 or more cameras 193.

The digital signal processor is used for processing digital signals, and can process other digital signals besides digital image signals. For example, when the electronic device 100 selects a frequency bin, the digital signal processor is used to fourier transform the frequency bin energy, or the like.

Video codecs are used to compress or decompress digital video. The electronic device 100 may support one or more video codecs. In this way, the electronic device 100 may play or record video in a variety of encoding formats, such as: moving picture experts group (moving picture experts group, MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

The NPU is a neural-network (NN) computing processor, and can rapidly process input information by referencing a biological neural network structure, for example, referencing a transmission mode between human brain neurons, and can also continuously perform self-learning. Applications such as intelligent awareness of the electronic device 100 may be implemented through the NPU, for example: image recognition, face recognition, speech recognition, text understanding, etc.

The external memory interface 120 may be used to connect an external memory card, such as a Micro SD card, to enable expansion of the memory capabilities of the electronic device 100. The external memory card communicates with the processor 110 through an external memory interface 120 to implement data storage functions. For example, files such as music, video, etc. are stored in an external memory card.

The internal memory 121 may be used to store one or more computer programs, including instructions. The processor 110 may cause the electronic device 100 to perform the methods provided in some embodiments of the present application, as well as various applications, data processing, and the like, by executing the above-described instructions stored in the internal memory 121. The internal memory 121 may include a storage program area and a storage data area. The storage program area can store an operating system; the storage program area may also store one or more applications (such as gallery, contacts, etc.), etc. The storage data area may store data created during use of the electronic device 100 (e.g., photos, contacts, etc.), and so on. In addition, the internal memory 121 may include high-speed random access memory, and may also include nonvolatile memory, such as one or more disk storage units, flash memory units, universal flash memory (universal flash storage, UFS), and the like. In some embodiments, processor 110 may cause electronic device 100 to perform the methods provided in the embodiments of the present application, as well as other applications and data processing, by executing instructions stored in internal memory 121, and/or instructions stored in a memory provided in processor 110. The electronic device 100 may implement audio functions through an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, an application processor, and the like. Such as music playing, recording, etc.

The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, and the like.

The pressure sensor 180A is used for sensing a pressure signal, and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A may be disposed on the display screen 194. The pressure sensor 180A is of various types, such as a resistive pressure sensor, an inductive pressure sensor, a capacitive pressure sensor, and the like. The capacitive pressure sensor may be a capacitive pressure sensor comprising at least two parallel plates with conductive material. The capacitance between the electrodes changes when a force is applied to the pressure sensor 180A. The electronic device 100 determines the strength of the pressure from the change in capacitance. When a touch operation is applied to the display screen 194, the electronic apparatus 100 detects the touch operation intensity according to the pressure sensor 180A. The electronic device 100 may also calculate the location of the touch based on the detection signal of the pressure sensor 180A. In some embodiments, touch operations that act on the same touch location, but at different touch operation strengths, may correspond to different operation instructions. For example: and executing an instruction for checking the short message when the touch operation with the touch operation intensity smaller than the first pressure threshold acts on the short message application icon. And executing an instruction for newly creating the short message when the touch operation with the touch operation intensity being greater than or equal to the first pressure threshold acts on the short message application icon.

The gyro sensor 180B may be used to determine a motion gesture of the electronic device 100. In some embodiments, the angular velocity of electronic device 100 about three axes (i.e., X, Y and Z axis) may be determined by gyro sensor 180B. The gyro sensor 180B may be used for photographing anti-shake. For example, when the shutter is pressed, the gyro sensor 180B detects the shake angle of the electronic device 100, calculates the distance to be compensated by the lens module according to the angle, and makes the lens counteract the shake of the electronic device 100 through the reverse motion, so as to realize anti-shake. The gyro sensor 180B may also be used for navigating, somatosensory game scenes.

The acceleration sensor 180E may detect the magnitude of acceleration of the electronic device 100 in various directions (typically three axes). The magnitude and direction of gravity may be detected when the electronic device 100 is stationary. The electronic equipment gesture recognition method can also be used for recognizing the gesture of the electronic equipment, and is applied to horizontal and vertical screen switching, pedometers and other applications.

The ambient light sensor 180L is used to sense ambient light level. The electronic device 100 may adaptively adjust the brightness of the display 194 based on the perceived ambient light level. The ambient light sensor 180L may also be used to automatically adjust white balance when taking a photograph. Ambient light sensor 180L may also cooperate with proximity light sensor 180G to detect whether electronic device 100 is in a pocket to prevent false touches.

The fingerprint sensor 180H is used to collect a fingerprint. The electronic device 100 may utilize the collected fingerprint feature to unlock the fingerprint, access the application lock, photograph the fingerprint, answer the incoming call, etc.

The temperature sensor 180J is for detecting temperature. In some embodiments, the electronic device 100 performs a temperature processing strategy using the temperature detected by the temperature sensor 180J. For example, when the temperature reported by temperature sensor 180J exceeds a threshold, electronic device 100 performs a reduction in the performance of a processor located in the vicinity of temperature sensor 180J in order to reduce power consumption to implement thermal protection. In other embodiments, when the temperature is below another threshold, the electronic device 100 heats the battery 142 to avoid the low temperature causing the electronic device 100 to be abnormally shut down. In other embodiments, when the temperature is below a further threshold, the electronic device 100 performs boosting of the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperatures.

The touch sensor 180K, also referred to as a "touch panel". The touch sensor 180K may be disposed on the display screen 194, and 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 for detecting a touch operation acting thereon or thereabout. The touch sensor may communicate the detected touch operation to the application processor to determine the touch event type. Visual output related to touch operations may be provided through the display 194. In other embodiments, the touch sensor 180K may also be disposed on the surface of the electronic device 100 at a different location than the display 194.

Fig. 2 is a software configuration block diagram of the electronic device 100 according to the embodiment of the present application. The layered architecture divides the software into several layers, each with distinct roles and branches. The layers communicate with each other through a software interface. In some embodiments, the Android system is divided into four layers, from top to bottom, an application layer, an application framework layer, an Zhuoyun row (Android run) and system libraries, and a kernel layer, respectively. The application layer may include a series of application packages.

As shown in fig. 2, the application package may include a camera, gallery, calendar, phone call, map, navigation, WLAN, bluetooth, music, video, short message, advertisement module, management module, and the like.

The advertisement module is used for carrying out advertisement interaction with the user. The advertisement module may be an operating system preset module, and the advertisement module and the electronic device may be provided by the same manufacturer.

And the management module is used for generating the OPENID according to the advertiser ID and the equipment ID, can be a module preset by an operating system, and can be provided by the same manufacturer.

The application framework layer provides an application programming interface (application programming interface, API) and programming framework for the application of the application layer, which includes some predefined functions.

As shown in fig. 2, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and the like.

The window manager is used for managing window programs, and can acquire the size of a display screen and judge whether a status bar, a locking screen, an intercepting screen and the like exist.

The content provider is used to store and retrieve data and make such data accessible to applications. The data may include video, images, audio, calls made and received, browsing history and bookmarks, phonebooks, etc.

The view system includes visual controls, such as controls to display text, controls to display pictures, and the like. The view system may be used to build applications. The display interface may be composed of one or more views. For example, a display interface including a text message notification icon may include a view displaying text and a view displaying a picture.

The telephony manager is used to provide the communication functions of the electronic device 100. Such as the management of call status (including on, hung-up, etc.).

The resource manager provides various resources for the application program, such as localization strings, icons, pictures, layout files, video files, and the like.

The notification manager allows the application to display notification information in a status bar, can be used to communicate notification type messages, can automatically disappear after a short dwell, and does not require user interaction. Such as notification manager is used to inform that the download is complete, message alerts, etc. The notification manager may also be a notification in the form of a chart or scroll bar text that appears on the system top status bar, such as a notification of a background running application, or a notification that appears on the screen in the form of a dialog window. Such as prompting text messages in status bars, sounding prompts, vibrating electronic devices, flashing indicator lights, etc.

The system library may include a plurality of functional modules. For example: surface manager (surface manager), media library (media library), three-dimensional graphics processing library (e.g., openGL ES), 2D graphics engine (e.g., SGL), etc.

The surface manager is used to manage the display subsystem and provides a fusion of 2D and 3D layers for multiple applications.

Media libraries support a variety of commonly used audio, video format playback and recording, still image files, and the like. The media library may support a variety of audio and video encoding formats such as MPEG4, h.264, MP3, AAC, AMR, JPG, PNG, etc.

The three-dimensional graphic processing library is used for realizing three-dimensional graphic drawing, image rendering, synthesis, layer processing and the like.

The 2D graphics engine is a drawing engine for 2D drawing.

The kernel layer is a layer between hardware and software. The inner core layer at least comprises a display driver, a camera driver, an audio driver and a sensor driver.

In mobile operating systems (e.g., android, hong-mong, iOS, etc.), the nature of animation is to display interfaces or interface elements in real-time based on refresh rates. The user perceives the picture as moving due to the principle of human persistence of vision. However, the current animation is only a combination of simple animation effects, the animation effect is single, the physical rule is not met, and the actual use scene and the use habit of the user are not considered. Interface elements include, but are not limited to, windows, scroll bars, form views, application icons, cards, and the like. In other words, an interface element may be any element of an interface display.

Based on this, the embodiment of the application provides a method and a device for displaying an interface, the interface elements can realize linkage on the animation effect, the interface elements which are operated can influence the interface elements which are not operated, so that the connection between the interface elements is enhanced, the animation effect is more in line with the physical rule, and the real use scene and the system of the user are considered, so that the user experience can be improved.

Several concepts to which embodiments of the present application relate will first be described below.

"attraction": in the embodiment of the application, the concept of attraction in the nature is introduced into the interface element. In the embodiment of the application, an "attractive force" may exist between interface elements, and due to the existence of the "attractive force", when one interface element in the interface is operated (such as clicking, moving, deleting, etc.), one or more other interface elements in the interface may move due to the influence of the "attractive force". The animation effect of "attraction" in the embodiments of the present application will be described below in conjunction with fig. 3-5.

FIG. 3 illustrates a schematic diagram of the direction of "attractive force" when an interface element of an embodiment of the present application is affected by the force of "attractive". Fig. 3 (a) shows an example scenario in which "attractive force" of the operated interface element acts as "attractive force". As shown in (a) of fig. 3, a cross graphic at the lower right schematically represents an enlarged "attractive force" center point of an interface element being operated, and in a scene where the interface element is an application icon, when an event such as deletion, drag release, merging of folders, card expansion, or the like for the application icon occurs, one point in the interface element may be an occurrence center point of "attractive force" or "repulsive force". In addition, in (a) in fig. 3, the upper left cross schematically represents a point of enlargement of another interface element affected by the "attraction force" of the interface element being operated. In the case where the "attractive force" animation effect is set to the "attractive force", the direction of movement of the interface element is such that the element center point of each affected interface element points to the vector direction of the occurrence center point of the operated interface element under the action of the "attractive force". Similarly, (b) in fig. 3 shows an example scenario in which the "attractive force" of the operated interface element acts as a "repulsive force". As shown in (b) of fig. 3, the lower right cross schematically represents the occurrence center point, and the upper left cross schematically represents the element center point. In the case where the "attractive force" animation effect is set to the "repulsive force", the direction of movement of the interface element is the vector direction in which the center point of the operated interface element points to the center point of each affected interface element under the action of the "repulsive force". In the embodiment of the present application, the selection of the occurrence center point and the element center point is not limited, for example, the occurrence center point and the element center point may be the geometric center of the interface element, or may be any point in the interface element.

Fig. 4 shows a set of graphical user interfaces (graphical user interface, GUI) provided by embodiments of the present application.

As shown in (a) of fig. 4, 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, an application icon 408, an application icon 409, an application icon 410, an application icon 411, an application icon 412, an application icon 413, and an application icon 414, and the application icons may remain stationary until the application icons are not operated. In this application implementation, when there is an "attractive force" between the interface elements, the interface elements may be in a static state when the "attractive force" between the interface elements is balanced, and in this application embodiment, the static state of the interface elements is referred to as a balanced state of the interface elements, for example, as shown in (a) in fig. 4, an application icon of the interface 401 is in a balanced state. When one interface element in the interface is operated, for example, the interface element is moved, the interface element is clicked, the balance state of the interface element is broken, and other interface elements in the interface are linked.

As further shown in fig. 4 (a), when the electronic device detects that the user holds the application icon 408 down, the electronic device may cause one or more of 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 413, and the application icon 414 to be linked with the application icon 408 due to the "attraction" effect of the application icon 408 on other application icons. One or more of the application icons 402, 403, 404, 405, 406, 407, 409, 410, 411, 412, 413, 414 are linked with the application icon 408, which is understood to be that since the application icon 408 is moved, the original equilibrium state is broken, the application icon needs to be moved according to the movement of the application icon 408 to establish a new equilibrium state.

As shown in (b) of fig. 4, there is an "attractive force" between the application icon 402 and the application icon 408, when the application icon 408 moves downward, due to the "attractive force" between the application icon 402 and the application icon 408, and the "attractive force" of the application icon 408 acts as an "attractive force" on the application icon 402, the application icon 408 may generate an "attractive force" to the application icon 402 to attract the application icon 402 to move thereto. Similarly, application icon 408 may generate an "attractive force" to application icon 403 to attract application icon 403 to move to, application icon 408 may generate an "attractive force" to application icon 404 to attract application icon 404 to move to, application icon 408 may generate an "attractive force" to application icon 405 to attract application icon 405 to move to, application icon 408 may generate an "attractive force" to application icon 406 to attract application icon 406 to move to, application icon 408 may generate an "attractive force" to application icon 407 to attract application icon 407 to move to, and application icon 408 may generate an "attractive force" to application icon 409 to attract application icon 409 to move to.

When the application icon 408 moves downward, due to the presence of "attractive force" between the application icon 402 and the application icon 410, and the "attractive force" of the application icon 408 acts as an "attractive force" to the application icon 410, then the application icon 408 may generate a "repulsive force" to the application icon 410 to repel the application icon 410 from moving away therefrom. Similarly, application icon 408 may generate a "repulsive force" for application icon 411 to repel application icon 411 from moving away therefrom, application icon 408 may generate a "repulsive force" for application icon 412 to repel application icon 412 from moving away therefrom, application icon 408 may generate a "repulsive force" for application icon 414 to repel application icon 414 from moving away therefrom, and application icon 408 may generate a "repulsive force" for application icon 414 to repel application icon 414 from moving away therefrom.

In the above example, only when the application icon 408 moves downward, the "attractive force" acts as the "attractive force" on the application icon 402, the application icon 403, the application icon 404, the application icon 405, the application icon 406, the application icon 407, and the application icon 409, and the "repulsive force" acts as the application icon 410, the application icon 411, the application icon 412, the application icon 414, and the application icon 414, but the embodiment of the present application is not limited thereto.

For example, when the application icon 408 moves downward, its "attractive force" may act as a "repulsive force" on the application icon 402, the application icon 403, the application icon 404, the application icon 405, the application icon 406, the application icon 407, and the application icon 409, and as an "attractive force" on the application icon 410, the application icon 411, the application icon 412, the application icon 414, and the application icon 414.

As another example, when the application icon 408 moves downward, its "attraction force" may act as an "attraction force" on 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.

As another example, when the application icon 408 moves downward, its "attractive force" may act as a "repulsive force" for 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.

As shown in (c) of fig. 4, when the electronic device detects that the user clicks on the application icon 408, the electronic device may cause one or more of 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 413, and the application icon 414 to be linked with the application icon 408 at the electronic device.

As shown in (d) of fig. 4, there is an "attractive force" between the application icon 402 and the application icon 408, and when the application icon 408 is clicked, it can be considered that the "attractive force" balance between the application icon 402 and the application icon 408 is broken, and if the "attractive force" of the application icon 408 acts as an "attractive force" on the application icon 402, the application icon 408 can generate an "attractive force" to the application icon 402 to attract the application icon 402 to move thereto. Similarly, application icon 408 may generate an "attractive force" to application icon 403 to attract application icon 403 to move to, application icon 408 may generate an "attractive force" to application icon 404 to attract application icon 404 to move to, application icon 408 may generate an "attractive force" to application icon 405 to attract application icon 405 to move to, application icon 408 may generate an "attractive force" to application icon 406 to attract application icon 406 to move to, application icon 408 may generate an "attractive force" to application icon 407 to move to, application icon 408 may generate an "attractive force" to application icon 409 to attract application icon 409 to move to, application icon 408 may generate an "attractive force" to application icon 410 to attract application icon 410 to move to application icon 411, application icon 408 may generate an "attractive force" to attract application icon 412 to move to application icon 413 to application icon 414 to attract application icon 413 to move to application icon 414 to generate an "attractive force" to application icon 410 to move to application icon 410.

In the examples shown in (c) and (d) of fig. 4, only 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 "attractive force" as an example, but the embodiment of the present application is not limited thereto. For example, when application icon 408 is clicked, a "repulsive force" is generated by corresponding 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, application icon 414.

In some embodiments, the application icons that are affected by the "attraction" may be moved in a delayed manner, i.e., when the user clicks or moves the application icon 408 for a certain period of time, the other application icons will start to move.

It will be appreciated that the delay time of an application icon that is affected by "attraction" may be related to the distance between application icons. For example, as shown in fig. 4 (a) and (b), the user moves down the application icon 408, and 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 may move with the application icon 402 first.

The above describes the details of animation effects that one interface element moves under the influence of the "attraction force" of the operated interface element in conjunction with the exemplary description of fig. 5, since the "attraction force" exists between the interface elements, and when the user operates one interface element, the influence can be exerted on other interface elements.

FIG. 5 illustrates a schematic diagram of the locations of interface elements affected by "attraction forces" in an "attraction force" animation effect and corresponding graphical diagrams at different times, according to an embodiment of the present application. As shown in fig. 5 (a), it is assumed that the application icon 408 is a moved interface element, and that the application icon 404 is an interface element that is subjected to the "attraction" of the application icon 408. Before the application icon 408 is not moved, i.e., at time t0, the distance between the application icon 408 and the application icon 404 is d1. As the application icon 408 moves, the application icon 404 may move toward the application icon 408 by being "attracted" by the application icon 408.

In some embodiments, as shown in (a) of fig. 5, the movement speed of the application icon 404 may be slower than the movement speed of the application icon 408, so that 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 (e.g., the user does not drag the application icon 408 any more), the application icon 408 may continue to "attract" the movement of the application icon 404, and when the distance between the two is restored to d1, the two may restore the original attraction, and the application icon 404 may not continue to move.

For the above process of moving the application icon 404 and the application icon 408, the graph shown in (c) of fig. 5 may be used to indicate that the curve #1 in (c) of fig. 5 is a distance time curve of the application icon 408, and the curve #2 is a distance time curve of the application icon 404, and it can be seen from the graph that, in the period of t0-t1, the distance moved by the application icon 408 is greater than the distance moved by the application icon 404 in the same time, the distance between the application icon 408 and the application icon 404 is increased from d1 to d2, when the time t1 is reached, the application icon 408 is not moved any more, the distance between the application icon 408 and the application icon 404 is reduced from d2 to d1.

In other embodiments, even if the application icon 408 does not stop moving, the electronic device may 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 may be reduced, and when the distance between the application icon 404 and the application icon 408 is restored to d1, the electronic device may cause the application icon 404 and the application icon 408 to move at the same speed.

For the above process of moving the application icon 404 and the application icon 408, the graph shown in (d) of fig. 5 may be used to indicate that the curve #1 in (d) of fig. 5 is the speed time curve of the application icon 408, the curve #2 is the speed time curve of the application icon 404, and it can be seen from the graph that, in the period of t0-t1, the moving speed of the application icon 408 is faster than the moving speed of the application icon 404, the distance between the application icon 408 and the application icon 404 is increased from d1 to d2, and when the time t1 is reached, the speed of the application icon 408 is slower than the moving speed of the application icon 404, the distance between the application icon 408 and the application icon 404 is continuously reduced until the time t2 is reduced to d1.

In the above-described process of moving the application icon 404 and the application icon 408 or the process of moving until stopping, the distance between the application icon 404 and the application icon 408 may be increased and then decreased to the original distance. The distance change between application icon 404 and application icon 408 may be represented by a time-to-space plot shown in fig. 5 (e), where it is seen that the distance between application icon 404 and application icon 408 increases from t0-t1 to d2 from d1 and decreases from t1-t2 to d1.

In other embodiments, the application icon 408 may precede the movement of the application icon 404, the distance between the two may increase, when the application icon 404 starts to move faster than the application icon 408, the distance between the two starts to decrease until the original distance d1 is restored.

For the above process of moving the application icon 404 and the application icon 408, the graph shown in (f) of fig. 5 may be used to indicate that the curve #1 in (f) of fig. 5 is the speed time curve of the application icon 408, the curve #2 is the speed time curve of the application icon 404, it can be seen from the graph that, in the period of t0-t1, the application icon 408 starts to move, the distance between the application icon 408 and the application icon 404 is increased from d1 to d2, when the time t1 is reached, the application icon 404 starts to move, and the speed is faster than the moving speed of the application icon 408, and the distance between the application icon 408 and the application icon 404 is continuously reduced until the time t2 is reduced to d1.

In other embodiments, application icon 408 is moved at the same speed as application icon 404. It will be appreciated 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 is unchanged when they move. When the application icon 408 stops moving (e.g., the user is no longer dragging the application icon 408), the application icon 404 may also stop moving.

In other embodiments, application icon 408 is moved at the same speed as application icon 404. It will be appreciated 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 is unchanged when they move. When the application icon 408 stops moving (e.g., the user is no longer dragging the application icon 408), the application icon 404 may continue to move until merging with the application icon 408. For a description of the merging between application icons, see below, which is not described here.

In other embodiments, application icon 408 is moved at the same speed as application icon 404. It will be appreciated 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 is unchanged when they move. When the application icon 408 stops moving (e.g., the user is no longer dragging the application icon 408), the application icon 404 may continue to move a distance toward the application icon 408, and then the application icon 404 moves away from the application icon 408 until the distance of the application icon 404 from the application icon 408 returns to d1.

In other embodiments, the movement speed of the application icon 408 is slower than the movement speed of the application icon 404, and the distance between the application icon 408 and the application icon 404 may be continuously reduced.

In one possible implementation, after the distance between the application icon 408 and the application icon 404 is continuously reduced to a certain fixed value, the electronic device may make the moving speed of the application icon 404 be the same as the moving speed of the application icon 408, and then the application icon 404 and the application icon 408 may move together with the fixed value distance, where the fixed value may be 0, and when the application icon 408 stops moving, the application icon 404 may stop moving, or the application icon 404 may move in a direction away from the application icon 408 until the distance between the application icon 404 and the application icon 408 is restored to d1, or the application icon may continue to move in a direction of the application icon 408 or until merging with the application icon 408.

It will be appreciated that if the "attractive force" of the application icon 408 acts as an "attractive force" on the application icon 404, when the application icon 408 returns to the home position, for example, due to a boundary constraint, the "attractive force" of the application icon 408 acts as a "repulsive force" on the application icon 404 after being thrown by the user, so that the application icon 404 may also return to the home position. In the process of returning the application icon 408 and the application icon 404 to the original positions, the distance between the two may be reduced first and then restored to d1. For example, after the user drags the application icon 408 to move a distance, the electronic device may return the application icon 408 to the original position, and then the application icon 404 may also return to the original position under the action of the "repulsive force" of the application icon 408, and the distance between the application icon 408 and the application icon 404 may be reduced first and then restored to d1.

In other embodiments, the distance between the application icon 404 and the application icon 408 may remain unchanged during the movement of the application icon 404 and the application icon 408 back to the home position, i.e., the distance between the application icon 404 and the application icon 408 is always d1.

In other embodiments, the distance between the application icon 404 and the application icon 408 may be increased and decreased during the movement of the application icon 404 and the application icon 408 back to the home position.

For example, in the moving process of the application icon 404 and the application icon 408 in the returning position, the moving speed of the application icon 404 may be faster than the moving speed of the application icon 408, the distance between the application icon 404 and the application icon 408 may be increased, the application icon 404 may reach the original position first, the application icon 408 continues to move, the distance between the application icon 404 and the application icon 408 may be decreased again, and when the application icon 408 reaches the original position, the distance between the application icon 404 and the application icon 408 is restored to d1.

It will be appreciated that, for the above example in which the application icon 404 reaches the home position before the application icon 408 in the process of moving the application icon 404 and the application icon 408 back to the home position, the graph is similar to the graph shown in fig. 5 (c), and will not be repeated here for brevity.

For another example, in the moving process of the application icon 404 and the application icon 408 in the returning home position, the initial moving speed of the application icon 404 may be faster than the initial moving speed of the application icon 408, then the distance between the application icon 404 and the application icon 408 becomes larger, the application icon 408 may be continuously accelerated so that the moving speed exceeds the moving speed of the application icon 404, 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 to d1, the home position is reached at the same time as the application icon 404 and the application icon 408.

It will be appreciated that, for the above example in which the initial movement speed of the application icon 404 may be faster than the initial movement speed of the application icon 408 in the process of moving the application icon 404 back to the home position, and the application icon 408 may be continuously accelerated such that the movement speed exceeds the movement speed of the application icon 404, the graph is similar to the graph shown in fig. 5 (d), and the description thereof will not be repeated here for brevity.

In other embodiments, the distance between the application icon 404 and the application icon 408 may be changed to be larger-smaller-larger during the movement of the application icon 404 and the application icon 408 back to the home position.

For example, during movement of the application icon 404 and the application icon 408 back to the home position, the initial movement speed of the application icon 404 may be faster than the initial movement speed of the application icon 408, then the distance between the application icon 404 and the application icon 408 may become larger, the application icon 408 may be continually accelerated such that the movement speed exceeds the movement speed of the application icon 404, then the distance between the application icon 404 and the application icon 408 may become smaller again, then the application icon 408 may reach and no longer move before the application icon 404 reaches, and the application icon 404 may continue to move to the home position, then the distance between the application icon 404 and the application icon 408 may become larger again.

For the above-mentioned movement process of the application icon 404 and the application icon 408 in the return position, the change process of the distance between the application icon 404 and the application icon 408 is changed to be larger-smaller-larger, which can be represented by using the graph shown in (g) of fig. 5, the curve #1 in (g) of fig. 5 is the speed time curve of the application icon 408, the curve #2 is the speed time curve of the application icon 404, it can be seen from the graph that the initial movement speed of the application icon 404 is faster than the movement speed of the application icon 408, the distance between the application icon 408 and the application icon 404 is increased, the movement speed of the application icon 404 is continuously decreased, and the movement speed of the application icon 408 is continuously increased, and the distance between the application icon 408 and the application icon 404 is started to be decreased. Since the application icon 408 reaches the home position before the application icon 404, the moving speed of the application icon 408 becomes 0, and the application icon 404 continues to move, the distance between the application icon 408 and the application icon 404 starts to increase.

As shown in fig. 5 (b), it is assumed that the application icon 408 is a clicked or pressed interface element, and the application icon 404 is an interface element affected by the "attraction" effect of the application icon 408. Before the application icon 408 is not clicked or pressed, the distance between the application icon 408 and the application icon 404 is d1. When the application icon 408 is clicked or pressed, the application icon 404 may be brought closer to the application icon 408 by the "attraction" of the application icon 408. Clicking on the application icon 408 may be understood as a user lifting his hand after clicking on the application icon 408, and pressing the application icon 408 may be understood as a user clicking on the application icon 408 without lifting his hand.

It should be noted that, in some embodiments, if the application icon 408 is pressed, the size of the application icon 408 may be changed. For example, the user presses the application icon 408, and the electronic device may cause the application icon 408 to become smaller in size. For another example, the user pressing the application icon 408, the electronic device may cause the application icon 408 to become larger in size.

In some embodiments, if the application icon 408 is clicked, the distance between the application icon 404 and the application icon 408 may be reduced and then restored to the original distance during the movement of the application icon 404, for example, the distance between the application icon 404 and the application icon 408 at time t1 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 may be the minimum distance between the application icon 408 and the application icon 404, when the minimum distance is reached, the application icon 404 may be moved 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, and the distance between the application icon 404 and the application icon 408 at time t5 is restored to d.

In other embodiments, if the application icon 408 is pressed, the application icon 404 may be moved closer to the application icon 408 by the "attraction" of the application icon 408, and the distance between the two may be reduced because the application icon 408 is not moving. The reduction in distance between application icon 404 and application icon 408 can be divided into two possible cases:

one possible scenario is that the distance between application icon 404 and application icon 408 continues to shrink until the two application icons merge.

One possible scenario is that after the distance between the application icon 404 and the application icon 408 has been reduced to a certain distance, the application icon 404 does not move any further.

It should be noted that, the electronic device may determine the moving distance and the moving state of the application icon 404 affected by the action of the "attraction force" in any suitable manner, that is, the electronic device may determine the moving distance and the moving state of the application icon 404 by using any suitable functional relation. The state of motion during movement can be understood as the change in speed of the interface element during movement.

In some embodiments, the electronic device may set the movement distance of the interface element affected by the "gravitational force" to the same distance, and the movement state is uniform movement. In this way, the processing of the electronic device for achieving the "attraction" animation effect may be simplified, for example. As in (b) and (d) of fig. 4, the moving distances of the application icons 402, 403, 404, 405, 406, 407, 409, 410, 411, 412, 413, 414 are the same, and the moving speeds are the same.

In other embodiments, the electronic device may determine the distance moved and the state of motion of the interface element that is subject to the "attractive force" based on a variety of factors including, but not limited to: the size of the interface element that generates the "gravitational force" action, the "gravitational force" range of the interface element that generates the "gravitational force" action, the "gravitational force" direction of the interface element that generates the "gravitational force" action, the level of the interface element that generates the "gravitational force" action, the color of the interface element that generates the "gravitational force" action, the size of the interface element that receives the "gravitational force" action, the stress condition of the interface element that receives the "gravitational force" action (e.g., the friction of the interface element, the pressure of the interface element, the gravity of the interface element), the level of the interface element that receives the "gravitational force" action, the color of the interface element that receives the "gravitational force" action, the distance between the two interface elements, and the like. The movement distance and movement speed of different interface elements subjected to the action of 'attraction' can be different due to the influence of various factors. For example, as shown in (b) and (d) of fig. 4, the moving distance of the application icon 402 and the application icon 404 may be different, and the moving speed may be different. The effect of various factors on the "attraction" animation effect is described in detail below, along with the exemplary description of the distance over time as the interface element affected by the "attraction" moves in conjunction with FIG. 13.

It should be noted that, the "attractive force" action of the operated interface element on the other interface element may be predetermined or may be set.

According to the embodiment of the application, the interface elements are related through the attractive force, a user can change other interface elements by operating one interface element, the animation effect with linkage is generated, the dynamic effect conforming to the natural rule is displayed, the user life experience is more consistent, and the man-machine interaction is improved.

The above mainly introduces that because of the existence of the 'attractive force', when one interface element is operated, other interface factors can be influenced due to the existence of the 'attractive force', and other interface factors are moved, namely linkage movement is generated, and the movement animation effect of the interface element influenced by the 'attractive force' is influenced by various factors. The influence of different factors on the "gravity" animation effect will be described below, and since the "gravity" animation effect is related to various influencing factors, the "gravity" animation effect in the embodiment of the present application may also be referred to as a linkage animation effect.

(1) The "attraction" range of interface elements that produce an "attraction" effect:

In embodiments of the present application, the range of "attraction" of the interface element that produces the "attraction" effect may be limited. In other words, the interface element that produces the "attraction" effect only acts on the interface factors within its "attraction" range, i.e., the interface element within the "attraction" range is the interface element that is affected by the "attraction", and the "attraction" range of the interface element that produces the "attraction" effect will be described below with reference to fig. 6 to 7.

In some embodiments, interface elements within the scope of "attraction" may be the same type of interface element as the interface element that produces the "attraction" effect, such that there may be "attraction" between the same type of interface element.

In other embodiments, interface elements within the scope of "attraction" may not be the same type of interface element as the interface element that produces the "attraction" effect.

FIG. 6 illustrates a set of GUIs provided by embodiments of the present application.

For example, as shown in (a) of fig. 6, 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, an application icon 408, an application icon 409, an application icon 410, an application icon 411, an application icon 412, an application icon 413, and an application icon 414, and the application icons may remain stationary until the application icons are not operated.

As shown in (a) and (b) in fig. 6, when the electronic device detects that the user holds the application icon 408 down, the electronic device may cause the application icon 403, the application icon 404, the application icon 405, the application icon 407, the application icon 409 to move toward the application icon 408 due to the "attraction" effect of the application icon 408 on other application icons, unlike the GUI shown in (b) in fig. 4, in which the application icon 403, the application icon 404, the application icon 405, the application icon 407, the application icon 409 are closer to the application icon 408, and the application icon 402, the application icon 406, the application icon 410, the application icon 411, the application icon 412, the application icon 413, and the application icon 414 do not move, that is, the application icon 403, the application icon 404, the application icon 405, the application icon 407, and the application icon 409 are within the "attraction" range of the application icon 408.

In the example shown in (a) and (b) in fig. 6, the "gravitational force range" is related to the distance, but the embodiment of the application is not limited thereto, and the "gravitational force" range may also be related to the movement direction of the interface element, for example, as shown in (a) and (c) in fig. 6, when the application icon 408 moves downward, the application icon 402, the application icon 403, the application icon 404, the application icon 405, the application icon 410, the application icon 411, the application icon 412, the application icon 413, and the application icon 414 that have a vertical relationship with the application icon 408 may move due to the "gravitational force" of the application icon 408, and the movement direction is the same as the application icon 408. For another example, as shown in (a) and (d) of fig. 6, when the application icon 408 moves downward, the application icon 402, the application icon 403, the application icon 404, the application icon 405, the application icon 410, the application icon 411, the application icon 412, the application icon 413, and the application icon 414, which are in a vertical relationship with the application icon 408, may move due to the "attractive force" of the application icon 408, and the moving direction is the vector direction of the element center point of each and the occurrence center point of the application icon 408.

In embodiments of the present application, the "attraction range" may also relate to the hierarchy of interface elements.

When the electronic device displays the interface element, the layout of the interface element is determined, and then the electronic device can determine the canvas to which the interface element belongs and the control tree to which the interface element belongs.

For example, as shown in (a) and (e) of fig. 6, assuming that the application icon 404, the application icon 405, the application icon 408, and the application icon 409 are the same hierarchy, when the application icon 408 moves downward, the application icon 404, the application icon 405, and the application icon 409 may move due to the "attraction" of the application icon 408.

While several factors affecting the "attraction" range are described above in connection with FIG. 6, several ways of determining the "attraction" range of an interface element that is subject to "attraction" provided in connection with FIG. 7 will be described in detail below, and the manner of determining the "attraction" range of an interface element that is subject to "attraction" may also be understood as determining the same type of interface element as the interface element that is subject to "attraction".

In one possible implementation, the electronic device may determine a "gravitational" range of the interface element that produces the "gravitational" by calculating a distance between the interface elements.

FIG. 7 illustrates a schematic diagram of determining the "attraction" range of an interface element that produces "attraction" provided by embodiments of the present application. For example, as shown in (a) of fig. 7, the same interface includes an interface element 701, an interface element 702, an interface element 703, an interface element 704, an interface element 705, an interface element 706, an interface element 707, an interface element 708, and an interface element 709, where the interface element 705 may be an interface element that is operated, a distance between the interface element 705 and the interface element 704, the interface element 706 is d1, a distance between the interface element 705 and the interface element 702, the interface element 708 is d2, a distance between the interface element 705 and the interface element 701, the interface element 703, the interface element 707, and the interface element 709 is d3, d1 < d2 < d3, and the electronic device may select the interface element whose distance between the interface element 705 and the interface element 705 is less than the first threshold value as the interface element affected by "attraction". For example, d1 < d2 < the first threshold value < d3, the electronic device may use interface element 702, interface element 704, interface element 706, and interface element 708 as interface elements that are affected by "attraction force", while interface element 701, interface element 703, interface element 707, and interface element 709 are not affected by "attraction force".

In the example shown in fig. 7 (a), when determining the distance between two interface elements, the electronic device uses the center point of the two interface elements as the calculated reference point, but the embodiment of the application is not limited thereto, and in the embodiment of the application, when calculating the distance between two interface elements, any point of the two interface elements may be selected as the reference point. For example, when the electronic device calculates the distance between two interface elements, two points with the shortest distance in the two interface elements may be selected as the reference points. Taking interface element 705 and interface element 702 as examples, the midpoint of the boundary above interface element 705 and the midpoint of the boundary below interface element 702 may be selected as reference points.

For another example, when the electronic device calculates the distance between the two interface elements, two points with the longest distance in the two interface elements may be selected as the reference points. Taking the interface element 705 and the interface element 701 as an example, an intersection point of a right boundary and a lower boundary of the interface element 705 and an intersection point of an upper boundary and a left boundary of the interface element 701 may be selected as a reference point.

For another example, the electronic device may calculate a lateral distance and a longitudinal distance between the two interface elements when calculating the distance between the two interface elements, and then determine the distance between the two interface elements according to the movement direction of the interface elements and at least one of the lateral distance and the longitudinal distance.

As shown in (b) of fig. 7, the lateral distance between the interface element 705 and the interface element 706 is d4, and the interface element 706 may move toward the interface element 705 under the influence of the "attraction force" of the interface element 705, and the moving direction is lateral, the distance between the interface element 705 and the interface element 706 may be the lateral distance between both.

Similarly, the distance between interface element 705 and interface element 702 may be a longitudinal distance between the two.

As shown in (c) of fig. 7, the lateral distance of the interface element 705 and the interface element 701 is d4, the longitudinal distance of the interface element 7-5 and the interface element 701 is d5, and the moving direction of the interface element 701 is neither lateral nor longitudinal, then the distance of the interface element 701 and the interface element 705 can be determined by the lateral distance d4 and the longitudinal distance d5 and based on the moving direction of the interface element 701. As an example, as shown in (d) of fig. 7, based on the magnitudes of the lateral distance d4 and the longitudinal distance d5, the electronic device may determine a right triangle having two right-angle sides of the lateral distance d4 and the longitudinal distance d5, the right triangle having hypotenuses. Then, based on the moving direction of the interface element 701, the electronic device may determine a line segment within the right triangle, where the direction of the line segment is the same as the moving direction of the interface element 701, and then the electronic device may determine the length of the line segment as d6, that is, the distance d6 between the interface element 701 and the interface element 705 according to the trigonometric function principle.

As another example, the electronic device may determine an angle between the moving direction and the transverse direction of the interface element 701, and an angle between the moving direction and the longitudinal direction of the interface element 701, and if the angle between the moving direction and the transverse direction of the interface element 701 is greater than the angle between the moving direction and the longitudinal direction of the interface element 701, the electronic device may determine that the longitudinal distance between the interface element 701 and the interface element 705 is the distance between the interface element 701 and the interface element 705. Conversely, if the angle between the moving direction and the lateral direction of the interface element 701 is smaller than the angle between the moving direction and the longitudinal direction of the interface element 701, the electronic device may determine that the lateral distance between the interface element 701 and the interface element 705 is the distance between the interface element 701 and the interface element 705. If the angle between the moving direction and the horizontal direction of the interface element 701 is equal to the angle between the moving direction and the vertical direction of the interface element 701, the electronic device may randomly select the horizontal distance or the vertical distance between the interface element 701 and the interface element 705 as the distance between the interface element 701 and the interface element 705.

The first threshold may be preset by the operating system, set by the user, or set by a third party developer.

In some embodiments, the first threshold may be related to factors such as the size, hierarchy, 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 "gravitational" range. As another example, interface elements of different levels or colors may correspond to different first thresholds.

In one possible implementation, the electronic device may select a geometric region as the "gravitational" range of the interface element centered on the center point of occurrence of the interface element that produces the "gravitational" effect.

For example, as shown in (e) of fig. 7, assuming that the interface element to be operated is the interface element 705, the electronic device may circle around the occurrence center point of the interface element 705, which may be any point in the interface element 705, with r1 as a radius, where the circle may be understood as a "gravitational" range of the interface element 705, and the interface element 702, the interface element 704, the interface element 706, and the interface element 708 covered by the "gravitational" range may be interface elements affected by the "gravitational".

For another example, as shown in (f) of fig. 7, assuming that the interface element to be operated is the interface element 705, the electronic device may select a rectangle as an "attractive force" range of the interface element 705 with a length of 2b and a width of 2a by using a generation center point of the interface element 705 as a geometric center, and the interface element 704 and the interface element 706 covered by the "attractive force" range may be interface elements affected by the "attractive force", and the generation center point may be any point in the interface element 705.

In the examples shown in fig. 7 (e) and (f), r1, a, and b may be constant values, may be factory preset by the operating system, may be set by a user, or may be set by a third party developer.

In some embodiments, r1, a, b may be related to factors such as the size, hierarchy, color, etc. of the interface element. For example, the larger the size of the interface element, the larger r1, a, b may be. As another example, interface elements of different levels or colors may correspond to different r1, a, b.

In the examples shown in fig. 7 (e) and (f), the geometric figures are selected to be circles and rectangles, but the present application is not limited thereto, and the geometric figures may be triangles, diamonds, and the like, for example.

Alternatively, in some embodiments, the electronic device may treat interface elements that intersect the boundaries of the geometric region as interface elements that are affected by "attractive forces".

For example, as shown in (g) of fig. 7, assuming that the interface element to be operated is the interface element 705, the electronic device may make a circle around the center point of the interface element 705, and the circle covers the interface element 701, the interface element 702, the interface element 703, the interface element 704, the interface element 706, the interface element 707, the interface element 708, and the interface element 709, where the interface element 701, the interface element 703, the interface element 707, and the interface element 709 intersect with the boundary of the circle, the electronic device may use the interface element 701, the interface element 703, the interface element 707, and the interface element 709 as the interface element affected by "attraction", and the interface element 702, the interface element 704, the interface element 706, and the interface element 708 do not intersect with the boundary of the circle, and the interface element 702, the interface element 704, the interface element 706, and the interface element 708 do not serve as the interface element affected by "attraction".

In one possible implementation, the electronic device may determine the "gravitational" range of an interface element that produces the "gravitational" effect based on the direction of movement of the interface element.

For example, as shown in (h) of fig. 7, it is assumed that the interface element being operated is an interface element 705, in which the interface element 701 is located at the upper left of the interface element 705, the interface element 702 is located at the upper right of the interface element 705, the interface element 703 is located at the upper right of the interface element 705, the interface element 704 is located at the left of the interface element 705, the interface element 706 is located at the right of the interface element 705, the interface element 707 is located at the lower left of the interface element 705, the interface element 708 is located at the lower right of the interface element 705, and the interface element 709 is located at the upper right of the interface element 705. The electronic device may determine the interface element affected by the "attraction" of the interface element 705 based on the direction of movement of the interface element 705.

Illustratively, when the interface element 705 moves to the right or to the left, the interface element 704 located to the left of the interface element 705, the interface element 706 located to the right of the interface element 705 may be moved under the influence of the "attraction" of the interface element 705, while the other interface elements are stationary, wherein the directions of movement of the interface element 704 and the interface element 706 may be the same or opposite to the interface element 705.

Illustratively, when the interface element 705 moves to the right or left, the interface element 704 located at the left of the interface element 705, the interface element 706 located at the right of the interface element 705, the interface element 701 located at the left upper side of the interface element 705, the interface element 703 located at the right upper side of the interface element 705, the interface element 707 located at the left lower side of the interface element 705, the interface element 709 located at the right lower side of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are stationary, wherein the movement directions of the interface element 704, the interface element 706, the interface element 701, the interface element 703, the interface element 707 and the interface element 709 may be the same or opposite to the movement direction of the interface element 705, or may be the vector directions in which the element center points of the interface element 704, the interface element 706, the interface element 701, the interface element 703, the interface element 707 and the interface element 709 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves to the right or left, the interface element 702 located above the interface element 705, the interface element 708 located below the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are not moved, where the movement directions of the interface element 702 and the interface element 708 may be the same as or opposite to the interface element 705, or may be a vector direction in which the element center points of the interface element 702 and the interface element 708 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves to the right or left, 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 of the 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 709 located at the lower right of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are stationary, wherein the movement directions of the interface element 701, the interface element 702, the interface element 703, the interface element 707, the interface element 708 and the interface element 709 may be the same or opposite to the movement direction of the interface element 705, or may be the vector directions in which the element center points of the interface element 701, the interface element 702, the interface element 703, the interface element 707, the interface element 708 and the interface element 709 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up or down, the interface element 702 above the interface element 705, the interface element 708 below the interface element 705 may move under the influence of the interface element 705 "attraction", while the other interface elements are stationary, wherein the directions of movement of the interface element 702 and the interface element 708 may be the same or opposite to the interface element 705.

Illustratively, when 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 of the 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 709 located at the lower right of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are stationary, wherein the movement directions of the interface element 701, the interface element 702, the interface element 703, the interface element 707, the interface element 708 and the interface element 709 may be the same or opposite to the movement direction of the interface element 705, or may be the vector directions in which the element center points of the interface element 701, the interface element 702, the interface element 703, the interface element 707, the interface element 708 and the interface element 709 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up or down, the interface element 704 located at the left of the interface element 705, the interface element 706 located at the right of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are not moved, where the movement directions of the interface element 704 and the interface element 706 may be the same as or opposite to the interface element 705, or may be a vector direction in which the element center points of the interface element 704 and the interface element 706 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up or down, the interface element 704 located at the left of the interface element 705, the interface element 706 located at the right of the interface element 705, the interface element 701 located at the left upper of the interface element 705, the interface element 703 located at the right upper of the interface element 705, the interface element 707 located at the left lower of the interface element 705, the interface element 709 located at the right lower of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are stationary, wherein the movement directions of the interface element 701, the interface element 703, the interface element 706, the interface element 707 and the interface element 709 may be the same as or opposite to the movement direction of the interface element 705, or the vector directions of the element center points of the interface element 701, the interface element 703, the interface element 704, the interface element 706, the interface element 707 and the interface element 709 may be directed to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up to the left or down to the right, the interface element 701 located at the upper left of the interface element 705, the interface element 709 located at the lower right of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are not moved, wherein the movement directions of the interface element 701 and the interface element 709 may be the same or opposite to the interface element 705, or the vector directions in which the element center points of the interface element 701 and the interface element 709 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up to the left or down to the right, the interface element 704 located at the left of the interface element 705, the interface element 702 located above the interface element 705, the interface element 701 located at the left of the interface element 705, the interface element 706 located at the right of the interface element 705, the interface element 708 located at the bottom of the interface element 705, the interface element 709 located at the bottom right of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are stationary, wherein the movement directions of the interface element 701, the interface element 702, the interface element 704, the interface element 706, the interface element 708 and the interface element 709 may be the same or opposite to the movement direction of the interface element 705, or may be the vector directions in which the element center points of the interface element 701, the interface element 705, the interface element 704, the interface element 706, the interface element 708 and the interface element 709 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up to the left or down to the right, 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 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are not moved, wherein the movement directions of the interface element 703 and the interface element 707 may be the same as or opposite to the interface element 705, or the vector directions in which the element center points of the interface element 703 and the interface element 707 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up to the left or down to the right, the interface element 704 located at the left of the interface element 705, the interface element 707 located at the left lower of the interface element 705, the interface element 708 located at the lower of the interface element 705, the interface element 702 located at the upper of the interface element 705, the interface element 703 located at the upper right of the interface element 705, the interface element 706 located at the right of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are not moved, wherein the movement directions of the interface element 702, the interface element 703, the interface element 704, the interface element 706, the interface element 707 and the interface element 708 may be the same or opposite to the movement direction of the interface element 705, or the vector directions of the element center points of the interface element 702, the interface element 703, the interface element 704, the interface element 706, the interface element 707 and the interface element 708 may be directed to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up to the right or down to the left, 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 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are not moved, wherein the movement directions of the interface element 703 and the interface element 707 may be the same as or opposite to the interface element 705, or the vector directions in which the element center points of the interface element 703 and the interface element 707 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up to the right or down to the left, 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 at the upper side of the interface element 705, the interface element 706 located at the right of the interface element 705, the interface element 708 located at the lower side of the interface element 705, the interface element 704 located at the left of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are not moved, wherein the movement directions of the interface element 702, the interface element 703, the interface element 704, the interface element 706, the interface element 707 and the interface element 708 may be the same or opposite to the movement direction of the interface element 705, or may be the vector directions in which the element center points of the interface element 702, the interface element 703, the interface element 704, the interface element 706, the interface element 707 and the interface element 708 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up to the right or down to the left, the interface element 701 located at the upper left of the interface element 705, the interface element 709 located at the lower right of the interface element 705 may be moved under the influence of the "attraction force" of the interface element 705, while the other interface elements are not moved, wherein the movement directions of the interface element 701 and the interface element 709 may be the same or opposite to the interface element 705, or the vector directions in which the element center points of the interface element 701 and the interface element 709 point to the occurrence center point of the interface element 705.

Illustratively, when the interface element 705 moves up to the right or down to the left, the interface element 704 located at the left of the interface element 705, the interface element 701 located at the upper left of the interface element 705, the interface element 702 located at the upper side of the interface element 705, the interface element 708 located at the lower side of the interface element 705, the interface element 706 located at the right side of the interface element 705, the interface element 709 located at the lower right side of the interface element 705 may be moved under the influence of the interface element 705, while other interface elements are stationary, wherein the movement directions of the interface element 701, the interface element 702, the interface element 704, the interface element 706, the interface element 708 and the interface element 709 may be the same or opposite to the movement directions of the interface element 705, or may be vector directions in which the element center points of the interface element 701, the interface element 702, the interface element 704, the interface element 706, the interface element 708 and the interface element 709 point to the occurrence center point of the interface element 705.

In one possible implementation, the electronic device determines a "gravitational" range of the interface element based on the hierarchy of the interface element.

For example, as shown in (i) of fig. 7, assuming that the interface element being operated is the interface element 705, and the hierarchy of the interface element 705, the interface element 702, and the interface element 706 is the same, the interface element 705, the interface element 702, and the interface element 706 may be moved under the influence of "attraction force" of the interface element 705. In this example, since the levels of the interface element 705, the interface element 702, and the interface element 706 are the same, the interface element 705, the interface element 702, and the interface element 706 may be understood as the same type of interface element, i.e., the electronic device may determine that the same type of interface element as the interface element generating the "attractive force" is the interface element affected by the "attractive force".

In other embodiments, assuming that interface elements 705, 702, 706 are interface elements having a parent-child hierarchical relationship, interface elements 705, 702, 706 may be moved under the influence of the "attraction" of interface elements 705.

In other embodiments, as shown in (i) of fig. 7, assuming that the interface element being operated is the interface element 705, and the hierarchy of the interface element 705, the interface element 702, and the interface element 706 is the same, the electronic device may determine that 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 that are affected by the "attraction force" of the interface element 705. In this example, an interface element that is different from the hierarchy of the interface element may be determined to be an interface element that is affected by "attraction force" from the hierarchy of the interface element that generates "attraction force". In other words, the electronic device may determine that an interface element that is not of the same type as the interface element that generated the "attractive force" is the interface element that is affected by the "attractive force".

In one possible implementation, the electronic device determines the "gravitational" range of the interface element based on the size of the interface element.

For example, as shown in (j) in fig. 7, assuming that the interface element to be operated is the interface element 705, where the dimensions of the interface element 701, the interface element 703, the interface element 704, and the interface element 709 are the same, the dimensions of the interface element 702, the interface element 705, the interface element 707, and the interface element 708 are the same, and the dimensions of the interface element 706 are larger than those of the interface element 705, the electronic device may select the interface element having the same dimensions as the interface element 705, that is, the interface element 702, the interface element 707, and the interface element 708 as the interface element affected by the "attractive force".

Alternatively, the electronic device may select not only the interface element having the same size as the interface element 705, but also an interface element having a size difference from the interface element 705 smaller than the second threshold value as the interface element affected by the "attractive force". For example, if the size of interface element 706 is greater than the size of interface element 705, but the difference in sizes is less than the second threshold, then the electronic device may also treat interface element 706 as an interface element that is affected by "attractive force".

For another example, as shown in (j) of fig. 7, assuming that the interface element to be operated is the interface element 705, in which the dimensions of the interface element 701, the interface element 703, the interface element 704, and the interface element 709 are the same, the dimensions of the interface element 702, the interface element 705, the interface element 707, and the interface element 708 are the same, and the dimensions of the interface element 706 are larger than those of the interface element 705, the electronic device may select the interface element having the same dimensions as the interface element 705 or smaller than those of the interface element 705, that is, the interface element 701, the interface element 702, the interface element 703, the interface element 704, the interface element 707, the interface element 708, and the interface element 709 as the interface element affected by the "attractive force".

Similar to the description for the hierarchy, the electronic device may determine the same size or near size interface elements as the same type of interface element.

In some embodiments, the electronic device may determine that an interface element that is the same as or similar to the size of the interface element that generated the "attractive force" is determined to be an interface element that is affected by the "attractive force", i.e., the electronic device may determine that an interface element that is the same type of interface element that generated the "attractive force" is an interface element that is affected by the "attractive force".

In other embodiments, the electronic device may determine that an interface element whose size difference from the interface element that generated the "attractive force" exceeds the second threshold is determined to be an interface element that is affected by the "attractive force", i.e., the electronic device may determine that an interface element that is not of the same type as the interface element that generated the "attractive force" is an interface element that is affected by the "attractive force".

It should be noted that, in the embodiment of the present application, the factors affecting the "gravitational force" range are not limited to the factors shown above, and the interface display method provided in the embodiment of the present application further supports the factors affecting the "gravitational force" range in a self-defining manner. For example, the electronic device may further use an interface element of the same color or a different color from that of the interface element generating the "attractive force" as the interface element affected by the "attractive force" according to the color of the interface element, wherein the color of the interface element may be the base color of the interface element.

Interface elements of the same color can be understood as interface elements of the same color family. When the electronic device determines the "gravitational range", the interface elements of the same color system may be determined as the interface elements affected by the "gravitational force".

In other embodiments, the same color interface element may be understood as the same RGB color of the interface element.

In other embodiments, the same color interface element may be understood as having the same R component in the RGB color of the interface element.

In other embodiments, the same color interface element may be understood as having the same G component in the RGB color of the interface element.

In other embodiments, the same color interface element may be understood as having the same B component in the RGB color of the interface element.

The above describes the "attractive force" range of the interface element that produces the "attractive force" effect and how the "attractive force" range of the interface element is determined based on factors such as distance, geometric area, direction of movement, level, size, etc. In this embodiment of the present application, the electronic device may determine the "gravitational force" range of the interface element by combining multiple factors, for example, may combine two factors of the multiple factors, for example, a combination of a distance factor and a hierarchy factor, a combination of a geometric area factor and a hierarchy factor, a combination of a movement direction factor and a hierarchy factor, a combination of a size factor and a hierarchy factor, a combination of a distance factor and a direction factor, a combination of a distance factor and a size factor, a combination of a distance factor and a geometric area factor, a combination of a geometric area factor and a direction factor, a combination of a geometric area factor and a size factor, and a combination of a direction factor and a size factor.

Similarly, the electronic device may also determine the "gravitational force" range of the interface element in combination with two or more of the plurality of factors.

For example, the electronic device may determine the "gravitational" range of interface factors that produce "gravitational" through the distance between interface elements and the hierarchical relationship of the interface elements.

For example, the electronic device may first determine a set of interface elements that are affected by "attraction" based on the distance between the interface elements, and then finally determine a "attraction" range of interface factors that generate "attraction" from the set based on the hierarchical relationship of the interface elements.

As shown in (k) of fig. 7, assuming that the interface element 705 is an operated interface element, the distance between the interface element 705 and the interface elements 704 and 706 is d1, the distance between the interface element 705 and the interface elements 702 and 708 is d2, the distance between the interface element 705 and the interface elements 701 and 703 and the interface elements 707 and 709 is d3, d1 < d2 < d3, the interface elements 702 and 703 and 706 are interface elements of the same level, and the electronic device may select an interface element having a distance between the interface elements 705 and the interface element lower than the first threshold and belonging to the same level as the interface element affected by "attraction". Illustratively, d1 < d2 < the first threshold < d3, the electronic device may treat interface element 702 and interface element 706 as interface elements that are affected by "gravitational force" while other interface elements are not affected by "gravitational force".

For example, the electronic device may first determine a set of interface elements that are affected by "attraction" according to a hierarchical relationship of the interface elements, and then finally determine a "attraction" range of interface factors that generate "attraction" from the set based on a distance between the interface elements.

For example, the electronic device may select a geometric area centered on a center point of occurrence of the interface element that generates the "gravitational" effect, and determine the "gravitational" range based on interface elements in the geometric area that are at the same level as the interface element that generates the "gravitational" effect.

For example, the electronic device may select a geometric region to determine a set of interface elements that are affected by "attraction", and then ultimately determine a "attraction" range for the interface factors that produce "attraction" from the set based on the hierarchical relationship of the interface elements.

As shown in fig. 7 (l), assuming that the interface element being operated is the interface element 705, the interface element 702, the interface element 703, the interface element 705, and the interface element 706 are interface elements of the same level, the electronic device may circle around the occurrence center point of the interface element 705, and r1 as a radius, and the interface element 702 and the interface element 706 of the same level as the interface element 705 covered by the circle may be interface elements affected by "attractive force", where the occurrence center point may be any point in the interface element 705.

For example, the electronic device may first determine a set of interface elements that are affected by "attraction" based on the hierarchical relationship of the interface elements, and then finally determine a "attraction" range of interface factors that generate "attraction" from the set based on the selected geometric region.

It should be noted that, when the electronic device determines the interface factor according to the selected geometric area, the electronic device may select an interface element intersecting with the boundary of the geometric area.

As shown in fig. 7 (g), assuming that the interface element being operated is the interface element 705, and that the interface element 702, the interface element 703, the interface element 705, and the interface element 706 are interface elements of the same hierarchy, the electronic device may determine a first set of interface elements affected by "attractive force" according to the hierarchy of the interface element 705, where the first set includes the interface element 702, the interface element 703, and the interface element 706. The electronic device may further make a circle around the center point of the interface element 705, determine a second set of interface elements intersecting with the boundary of the circle, where the second set includes the interface element 701, the interface element 703, the interface element 707, and the interface element 709, and finally the electronic device may use the interface element 703 that is common to the first set and the second set as an interface element that is affected by "attractive force", and other interface elements are not affected by "attractive force".

For example, the electronic device may determine a "gravitational force" range of interface factors that produce "gravitational force" based on a direction of movement of the interface element and a hierarchy of the interface element that produce the "gravitational force" effect.

For example, the electronic device may first determine a set of interface elements affected by the "gravitational force" according to a moving direction of the interface element that generates the "gravitational force" effect, and then select the interface element of the same level as the interface element that generates the "gravitational force" effect from the set.

For example, the electronic device may determine a set of interface elements affected by "attraction" from a hierarchy of interface elements that produce the "attraction" effect, and then determine a final set of interface elements affected by "attraction" from the set based on a direction of movement of the interface elements that produce the "attraction" effect.

For example, the electronic device may determine the "gravitational" range of interface factors that create "gravitational" by the distance between the interface elements and the size of the interface elements.

For example, the electronic device may first determine a set of interface elements that are affected by "attraction" based on the distance between the interface elements, and then ultimately determine a "attraction" range for the interface factors that produce "attraction" from the set based on the dimensions of the interface elements.

For example, the electronic device may first determine a set of interface elements that are affected by "attraction" based on the dimensions of the interface elements, and then ultimately determine a "attraction" range for the interface factors that produce "attraction" from the set based on the distance between the interface elements.

For example, the electronic device may determine a "gravitational" range of interface factors that create a "gravitational force" through a hierarchy of interface elements and a size of the interface elements.

For example, the electronic device may first determine a set of interface elements that are affected by "attraction" based on the hierarchy of interface elements, and then ultimately determine a "attraction" range for the interface factors that produce "attraction" from the set based on the dimensions of the interface elements.

For example, the electronic device may determine a set of interface elements that are affected by "attraction" based on the size of the interface elements, and then ultimately determine a "attraction" range for the interface factors that produce "attraction" from the set based on the hierarchy of the interface elements.

For example, the electronic device may determine the "attraction force" range of the interface factor that generates the "attraction force" by the distance between the interface elements and the direction of movement of the interface element that generates the "attraction force".

For example, the electronic device may first determine a set of interface elements that are affected by "attraction" based on a distance between the interface elements, and then finally determine a "attraction" range of interface factors that generate "attraction" from the set based on a moving direction of the interface elements that generate "attraction".

For example, the electronic device may determine a set of interface elements affected by the "attraction force" according to a moving direction of the interface elements generating the "attraction force", and then finally determine a "attraction force" range of the interface elements generating the "attraction force" from the set based on a distance between the interface elements.

For example, the electronic device may select a geometric area with the center point of occurrence of the interface element that generates the "gravitational" effect as the center, and determine the "gravitational" range of the interface element that generates the "gravitational" effect according to the distance between the geometric area and the interface element.

For example, the electronic device may determine a set of interface elements that are affected by "attraction" from the selected geometric region, and then ultimately determine a "attraction" range of interface factors that produce "attraction" from the set based on the distance between the interface elements.

For example, the electronic device may first determine a set of interface elements that are affected by "attraction" based on the distance between the interface elements, and then finally determine a "attraction" range of interface factors that produce "attraction" from the set based on the selected geometric region.

For example, the electronic device may select a geometric area with the occurrence center point of the interface element that generates the "gravitational" action as the center, and determine the "gravitational" range of the interface element that generates the "gravitational" action according to the movement direction of the geometric area and the interface element that generates the "gravitational" action.

For example, the electronic device may determine a set of interface elements that are affected by "attraction" based on the selected geometric region, and then ultimately determine a "attraction" range of interface factors that produce "attraction" from the set based on the direction of movement of the interface elements that produce the "attraction" effect.

For example, the electronic device may first determine a set of interface elements affected by "attraction" based on a direction of movement of the interface elements that produce the "attraction" effect, and then finally determine a "attraction" range of interface elements that produce the "attraction" from the set based on the selected geometric region.

For example, the electronic device may select a geometric area with the center point of occurrence of the interface element that generates the "attractive force" effect as the center, and determine the "attractive force" range of the interface element that generates the "attractive force" effect according to the size of the geometric area and the interface element.

For example, the electronic device may determine a set of interface elements that are affected by "attraction" from the selected geometric region, and then ultimately determine a "attraction" range of interface factors that produce "attraction" from the set based on the dimensions of the interface elements.

For example, the electronic device may first determine a set of interface elements that are affected by "attraction" based on the dimensions of the interface elements, and then ultimately determine a "attraction" range for the interface factors that produce "attraction" from the set based on the selected geometric region.

For example, the electronic device may determine the "gravitational" range of the interface element that produces the "gravitational" effect based on the direction of movement of the interface element that produces the "gravitational" and the size of the interface element.

For example, the electronic device may determine a set of interface elements that are affected by the "attraction force" according to a moving direction of the interface elements that generate the "attraction force", and then finally determine a range of interface factors that generate the "attraction force" from the set based on a size of the interface elements.

For example, the electronic device may determine a set of interface elements that are affected by "attraction" based on the size of the interface elements, and then finally determine a "attraction" range of interface factors that generate "attraction" from the set based on a moving direction of the interface elements that generate "attraction".

It should be noted that, the above example is taken as an example by combining two factors, but the embodiment of the present application is not limited thereto, and the electronic device may also determine the "gravitational force" range according to more than two factors, and the specific description may refer to the description of determining the "gravitational force" range according to two factors, which is described above, and will not be described herein.

(2) Size of interface element

The influence of the size of the interface element on the "attraction force" range of the interface element generating the "attraction force" is described above, and the influence of the size of the interface element on the linked animation effect will be described below.

The size of the interface element in the embodiment of the application can influence the moving distance and the moving speed of the interface element influenced by 'attraction'.

In one embodiment, referring to (c) in fig. 4, if the size of the application icon 402 and/or the application icon 408 increases, the movement distance of the application icon 402 may also increase. As the size of the application icon 402 and/or the application icon 408 increases, it may be appreciated that the "mass" of the application icon 402 and/or the application icon 408 increases, as may be obtained according to the gravitational equation, the "gravitational force" to which the application icon 402 is subjected may increase, and the distance of movement of the application icon 402 may increase.

It should be noted that, in fig. 4 (c), the movement of the application icon 402 may be that the application icon moves toward the application icon 408 first, then moves away from the application icon 408 to return to the original position, and then the movement distance of the application icon 402 includes a distance moving toward the application icon 408 and a distance moving away from the application icon 408, and then the movement distance of the application icon 402 is increased.

In one embodiment, with continued reference to (c) of fig. 4, if the size of the application icon 402 and/or the application icon 408 increases, the speed of movement of the application icon 402 may also increase. As the size of the application icon 402 and/or the application icon 408 increases, it may be appreciated that the "mass" of the application icon 402 and/or the application icon 408 increases, as may be obtained according to the gravitational equation, the "gravitational force" to which the application icon 402 is subjected increases, and the speed of movement of the application icon 402 may increase.

In some embodiments, referring to (j) in fig. 7, assuming that interface element 705 is an interface element that is operated, interface element 702 and interface element 706 are interface elements that are affected by "attractive force", and the distance between interface element 702 and interface element 705 is the same as the distance between interface element 706 and interface element 705, the electronic device may cause the movement distance of interface element 706 to be greater than the movement distance of interface element 702 because the size of interface element 706 is greater than the size of interface element 702.

In some embodiments, referring to (j) in fig. 7, assuming that the interface element 705 is an interface element that is operated, the interface element 702 and the interface element 706 are interface elements that are affected by "attraction force", and the distance between the interface element 702 and the interface element 705 is the same as the distance between the interface element 706 and the interface element 705, the size of the interface element 706 is larger than the size of the interface element 702, the size of the interface element may be equivalent to mass, and it is possible to obtain according to the general attraction force formula that the interface element 706 is subjected to "attraction force" that is larger than the interface element 702, if the movement speeds of the interface element 706 and the interface element 702 are both uniform, the electronic device may make the movement speed of the interface element 706 faster than the movement speed of the interface element 702. Or while the "attractive force" experienced by interface element 706 is greater than the "attractive force" experienced by interface element 702, the electronic device may still cause the movement speed of interface element 706 to be equal to the movement speed of interface element 702, or cause the movement speed of interface element 706 to be less than the movement speed of interface element 702.

In some embodiments, referring to (j) in fig. 7, assuming that interface element 705 is an interface element that is operated, interface element 702 and interface element 706 are interface elements that are affected by "attraction force", and the distance between interface element 702 and interface element 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 interface element may be equivalent to mass, and according to the universal attraction formula, the "attraction force" that interface element 706 receives is larger than the "attraction force" that interface element 702 receives, if interface element 706 and interface element 702 are subject to an accelerated movement or even accelerated movement, the electronic device may cause the acceleration of interface element 706 to be larger than the acceleration of interface element 702, or while the "attraction force" that interface element 706 receives is larger than the "attraction force" that interface element 702, the electronic device may cause the acceleration of interface element 706 to be equal to the acceleration of interface element 702, or cause the acceleration of interface element 706 to be smaller than the acceleration of interface element 702.

In summary, the size of the interface element generating the "attractive force" and the size of the interface element receiving the "attractive force" may affect the linkage animation effect, where the effect of the size of the interface element on the linkage animation effect is only an example, and in this embodiment of the present application, the linkage animation effect may be determined according to any functional relation including the size of the interface element generating the "attractive force" and/or the size of the interface element receiving the "attractive force", that is, the moving distance of the interface element receiving the "attractive force" and the speed change during the movement.

(3) Distance between interface elements.

The influence of the distance between the interface elements on the "attraction" range of the interface element generating the "attraction" is described above, and the influence of the distance between the interface elements on the "attraction" animation effect will be described below.

The distance between the interface elements in the embodiment of the application can influence the moving distance and the moving speed of the interface elements influenced by 'attraction'.

It should be appreciated that the description of determining the distance between interface elements may be referred to above and will not be repeated here for brevity.

In one embodiment, with continued reference to (d) in FIG. 4, if the distance between the application icon 402 and the application icon 408 increases, the distance of movement of the interface element 402 decreases. As the distance between the application icon 402 and the application icon 408 increases, as is available according to the gravitational equation, the "gravitational force" experienced by the application icon 402 decreases, and the distance of movement of the application icon 402 may decrease.

In one embodiment, with continued reference to (d) in FIG. 4, if the distance between the application icon 402 and the application icon 408 increases, the distance of movement of the interface element 402 decreases. As the distance between the application icon 402 and the application icon 408 increases, as is available according to the gravitational equation, the "gravitational force" experienced by the application icon 402 decreases and the speed of movement of the application icon 402 may decrease.

In some embodiments, with continued reference to (d) in fig. 4, since the distance between application icon 402 and application icon 408 is greater than the distance between application icon 404 and application icon 408, and the dimensions of application icon 402 and application icon 404 are the same, as is available according to the gravitational equation, the "gravitational force" experienced by application icon 404 is greater than the "gravitational force" experienced by application icon 402, the movement distance of application icon 402 may be less than the movement distance of application icon 404.

In some embodiments, with continued reference to (d) in fig. 4, since the distance between the application icons 402 and 408 is greater than the distance between the application icons 404 and 408, and the application icons 402 and 404 are the same size, it is available according to the gravitational equation that the application icons 404 are subject to a greater "gravitational force" than the application icons 402, and if the movement speed of the application icons 402 and 404 is uniform, the electronic device may cause the movement speed of the application icons 404 to be faster than the movement speed of the application icons 402. Or while the application icon 404 is subject to a greater "gravitational force" than the application icon 402, the electronic device may still cause the application icon 404 to move at a speed equal to the speed of movement of the application icon 402 or cause the application icon 404 to move at a speed less than the speed of movement of the application icon 402.

In some embodiments, with continued reference to (d) in fig. 4, because the distance between the application icons 402 and 408 is greater than the distance between the application icons 404 and 408, and the application icons 402 and 404 are the same size, it is possible according to the universal gravitation formula that the application icons 404 experience a greater "gravitation" than the application icons 402, if the application icons 402 and 404 undergo a uniform or variable acceleration movement, the electronic device may cause the acceleration of the application icons 402 to be less than the acceleration of the interface elements 404, or while the application icons 404 experience a greater "gravitation" than the application icons 402, the electronic device may cause the acceleration of the application icons 404 to be equal to the acceleration of the application icons 402, or cause the acceleration of the application icons 402 to be greater than the acceleration of the interface elements 404.

In summary, the distance between the interface element generating the "attractive force" and the interface element receiving the "attractive force" may affect the "attractive force" animation effect, and the influence of the distance between the interface elements on the linkage animation effect is merely an example.

In the description for (2) and (3), a gravitational model is introduced, which can be expressed by formula 1:

as can be derived from equation (1), the "attractive force" between two interface elements is related to the "mass" and distance of the two interface elements. Since the embodiments herein are directed to interface elements, equation (2) or equation (3) may be used to replace the "quality" of an interface element with the size of the interface element.

M＝K×R (2)

M＝K×r (3)

Where k is a constant parameter, M is the "mass" of the interface element, R is the size of the interface element, and R is the distance between two interface elements.

By combining the formulas (1) - (3), the formula (1) can be simplified to the formula (4),

as can be derived from equation (4), the "attraction" between interface elements is proportional to the size of the interface elements and inversely proportional to the distance between the interface elements.

Illustratively, in embodiments of the present application, the distance traveled by the interface element affected by the "attractive force" may be determined by equation (5).

Where a is a constant coefficient, R is a distance between two interface elements, R is a size of an interface element affected by "attraction", s is a distance that an interface element affected by "attraction" moves, and 0.1 and 0.8 are fixed constants that can be changed. In the embodiment of the application, the size of the interface element can be represented by using the area, the perimeter and the like of the interface element, and s is inversely proportional to R and directly proportional to R, which is obtained by the formula (5). The distance may be the final distance that the interface element is moved under the influence of "attraction". If the interface element affected by the "attraction force" moves unidirectionally, for example, the interface element affected by the "attraction force" moves in the direction of the interface element generating the "attraction force", the distance is the unidirectionally moving distance of the interface element affected by the "attraction force"; if the interface element affected by the "attractive force" moves in both directions, for example, the interface element affected by the "attractive force" moves first in the direction of the interface element generating the "attractive force" and then moves in the direction away from the interface element generating the "attractive force", the distance is the distance of the interface element affected by the "attractive force" moving in both directions.

It should be noted that, in the embodiment of the present application, the density of the interface element is supported, if the density of the interface element is defined, the "attraction" of the interface element may be determined according to the density and the size of the interface element, and then the interface element may be transformed according to formula (5) to obtain formula (6):

where M is the mass of the interface element affected by "gravitational force".

It should be noted that the above formulas (5) and (6) are only examples, and the electronic device may also make the movement distance of the interface element affected by the "attractive force" decrease as the size of the interface element affected by the "attractive force" increases, increase as the distance between the two interface elements increases, or have any other functional change relationship.

(4) Friction force

In the embodiment of the application, the friction force in the nature is introduced into the interface element, so that the animation effect is closer to the natural effect.

FIG. 8 illustrates a schematic diagram of the effect of friction provided by embodiments of the present application on a linked animation effect.

As shown in fig. 8, the interface element 801, the interface element 802, and the interface element 803 are displayed on the same interface, and the electronic device may define a "maximum static friction force" and a "sliding friction force" of the interface element, where the "maximum static friction force" may be collectively referred to as a "friction force", and the "maximum static friction force" may be understood as a maximum force that needs to be overcome when the interface element moves, and the "sliding friction force" may be understood as a "friction force" that the interface element receives during movement. In some embodiments, where the interface element is subject to an "attractive force" and a "maximum static friction force," the "attractive force" needs to be greater than or equal to the "maximum static friction force" before the interface element will begin to move. As shown in fig. 8, assuming that the interface element 801 is an interface element to be operated, the "attractive force" between the interface element 801 and the interface element 802 and the "attractive force" between the interface element 801 and the interface element 803 are equal, and are both f1, the "maximum static friction force" of the interface element 802 is f2, and the "maximum static friction force" of the interface element 803 is f3, where f3 is less than or equal to f1 < f2, since the "maximum static friction force" of the interface element 803 is less than or equal to the "attractive force" between the interface element 801 and the interface element 803, the interface element 803 can move, and the "maximum static friction force" of the interface element 802 is greater than the "attractive force" between the interface element 801 and the interface element 803, and the interface element 802 cannot move.

In some embodiments, when f3 is greater than f1, then the electronic device may increase f1 such that f1 is greater than f3, such that interface element 802 may also move, but interface element 802 may move later in time than interface element 803, such that there is a delay in movement of interface element 802. In other words, when the user reaches the preset time after operating the interface element 801, the interface element 802 starts to move.

In some embodiments, when the interface element 803 moves, the movement speed of the interface element 803 may be uniform, which may be understood that the interface element 803 is not affected by "attraction force" and "sliding friction force" when moving, and the electronic device may stop the movement of the interface element 803 after the interface element 803 moves a certain distance.

In other embodiments, when the interface element 803 moves, the electronic device may determine the movement effect of the interface element 803 according to the "sliding friction force" of the interface element 803 and the "attractive force" to which the interface element 803 is subjected.

For example, if the "sliding friction force" of the interface element 803 is equal to the "attractive force" received by the interface element 803, the electronic device may make the interface element 803 start to move toward the interface element 801 at an initial speed, and the distance between the interface element 801 and the interface element 803 is continuously reduced, so that the "attractive force" received by the interface element 803 is continuously increased, and the moving speed of the interface element 803 may be increased. In some examples, interface element 803 may not continue to move after moving to a location. In other examples, interface element 803 may ultimately coincide with interface element 801.

For example, if the "sliding friction force" of the interface element 803 is smaller than the "attractive force" received by the interface element 803, and if the interface element 803 moves toward the interface element 801, the electronic device may make the interface element 803 start to move toward the interface element 801 at an initial speed or the initial speed of the interface element 803 may be 0, and since the "sliding friction force" of the interface element 803 is smaller than the "attractive force" received by the interface element 803, the interface element 803 may perform accelerated movement, and the movement speed is continuously increased. In some examples, interface element 803 may not continue to move after moving to a location. In other examples, interface element 803 may ultimately be merged with interface element 801.

For example, if the "sliding friction force" of the interface element 803 is equal to the "attractive force" received by the interface element 803, the electronic device may make the interface element 803 start to move toward the interface element 801 at an initial speed, and the distance between the interface element 801 and the interface element 803 is continuously reduced, so that the "attractive force" received by the interface element 803 is continuously increased, and the moving speed of the interface element 803 may be increased. In some examples, after interface element 803 may move to a position, and no further movement may continue, the electronic device may change the "sliding friction" of interface element 803 such that the "sliding friction" is greater than the "gravitational force", and the speed of movement of interface element 803 may slow down until movement is stopped.

For example, if the "sliding friction" of the interface element 803 is smaller than the "attractive force" applied to the interface element 803, and assuming that the interface element 803 moves toward the interface element 801, the electronic device may start the movement of the interface element 803 toward the interface element 801 at an initial speed or the initial speed of the interface element 803 may be 0, and since the "sliding friction" of the interface element 803 is smaller than the "attractive force" applied to the interface element 803, the movement speed of the interface element 803 may be increased. In some examples, after interface element 803 may be moved to a position, the electronic device may change the "sliding friction" of interface element 803 such that the "sliding friction" is greater than the "gravitational force", and the speed of movement of interface element 803 may slow down until movement is stopped.

It should be noted that the above description of the animation effect of determining movement according to the "sliding friction force" and the "attraction force" of the interface factor is merely an example, and the electronic device may determine any other functional change relationship according to the "sliding friction force" and the "attraction force" of the interface factor, so that the speed change and the movement distance of the interface factor during the movement may be determined.

In the embodiments of the present application, when determining the "friction force" of the interface element, the "friction force" of the interface element may be determined in several ways.

In one possible implementation, the electronic device may randomly determine the "friction" of the interface element. For example, the "maximum static friction force" of the interface element #1 is defined as f#1, and the "maximum static friction force" of the interface element #2 is defined as f#2.

It will be appreciated that if the electronic device randomly determines the "friction" of an interface element, the electronic device may determine the interface element as a different "friction" for the same interface element in different times of "gravitational" linkages, in other words, in this possible implementation, the "friction" of the interface element may not be fixed.

In one possible implementation, the electronic device may define a "friction" of the interface element according to a hierarchy of interface elements. The hierarchy of interface elements of the same interface may be different, and the electronic device may determine a "friction" of the interface elements based on the hierarchy of interface elements.

In one possible implementation, the electronic device may determine the "friction" of the interface element based on the color of the interface element. The color of the interface element may be an RGB color and the electronic device may calculate the "friction" of the interface element from the RGB components of the color of the interface element. For example, interface element #1 includes color #1, where R component of color #1 is 131, g component is 134, and b component is 13, then the electronic device may determine the sum 278 of the 3 components as the magnitude of the "maximum stiction" of interface element # 1. For another example, the electronic device may determine the "friction force" of the interface element according to a preset rule according to the dispersion of the RGB components of the color of the interface element, and for example, if the dispersion of the RGB components of the color of the interface element is higher, the "friction force" thereof is greater; illustratively, the higher the dispersion of the RGB components of the color of the interface element, the greater the "dynamic friction factor" of the interface element, the greater the "friction force" thereof.

It should be appreciated that if the interface element includes a plurality of colors, the "friction force" corresponding to each color may be calculated separately, and then summed according to each corresponding "friction force" to obtain the "friction force" of the interface element.

It should also be appreciated that the above-described manner of determining the "friction force" of the interface element based on the color of the interface element is merely an example, and the correspondence between the color of the interface element and the "friction force" of the interface element may be characterized by any suitable functional relationship in the practice of the present application.

In one possible implementation, the electronic device may determine the "friction" of the interface element based on the size of the interface element. For example, different dimensions may correspond to different "friction forces", which may be greater for larger interface elements.

(5) Gravity force

In the embodiment of the application, the gravity in the nature is introduced into the interface element, so that the animation effect is closer to the natural effect.

In the introduction to (4), the electronic device defines the "maximum stiction" of the interface element. In order to better conform to the physical law, in the embodiment of the application, besides defining the "maximum static friction force" of the interface element, the "gravity" and the dynamic friction factor of the interface element can be defined, so that the "maximum static friction force" of the interface element can be determined according to the "gravity" and the dynamic friction factor of the interface element. After determining the "maximum static friction force" of the interface element, the electronic device may determine whether the interface element will move and the moving distance and the moving state when the interface element moves according to the "maximum static friction force" of the interface element and the "attractive force" of the interface element, which are described in detail above and will not be repeated here.

In the embodiment of the application, when determining the "friction force" of the interface element, the "gravity" of the interface element may be determined in several ways.

In one possible implementation, the electronic device may randomly determine the "gravity" of the interface element. For example, "gravity" of interface element #1 is defined as g#1, and "gravity" of interface element #2 is defined as g#2.

It will be appreciated that if the electronic device randomly determines the "gravity" of an interface element, the electronic device may determine the interface element as a different "attraction" for the same interface element in different times of "attraction" linkages, in other words, in this possible implementation, the "gravity" of the interface element may not be fixed.

In one possible implementation, the electronic device may define the "gravity" of the interface element according to the hierarchy of the interface element. The hierarchy of interface elements for the same interface may be different, and the electronic device may determine the "gravity" of the interface elements based on the hierarchy of interface elements.

In one possible implementation, the electronic device may determine the "gravity" of the interface element based on the color of the interface element. The color of the interface element may be an RGB color and the electronic device may calculate the "gravity" of the interface element from the RGB components of the color of the interface element. For example, interface element #1 includes color #1, where R component of color #1 is 131, g component is 134, and b component is 13, then the electronic device may determine the sum 278 of the 3 components as the magnitude of the "maximum stiction" of interface element # 1. For another example, the electronic device may determine the "gravity" of the interface element according to a preset rule based on the dispersion of the RGB components of the color of the interface element, and for example, if the dispersion of the RGB components of the color of the interface element is higher, the "gravity" thereof is greater.

It should be appreciated that if the interface element includes multiple colors, the "gravity" corresponding to each color may be calculated separately, and then summed according to each corresponding "gravity" to obtain the "gravity" of the interface element.

It should also be appreciated that the above-described manner of determining the "gravity" of the interface element based on the color of the interface element is merely an example, and that the correspondence of the color of the interface element to the "gravity" of the interface element may be characterized by any suitable functional relationship in the practice of the present application.

In one possible implementation, the electronic device may determine the "gravity" of the interface element based on the size of the interface element. For example, different dimensions may correspond to different "gravities", which may be greater for larger interface elements.

It should be noted that, if the interface element is a folder, and the folder includes a plurality of interface elements, the "gravity" of the folder may be obtained by adding the "gravity" of the plurality of interface elements.

(6) Pressure of

In the implementation of the animation method, the pressure in the nature is introduced into the interface element, so that the animation effect is closer to the nature effect.

FIG. 9 illustrates a schematic diagram of the impact of pressure provided by an embodiment of the present application on a linked animation effect.

As shown in (a) of fig. 9, an interface element 901, an interface element 902, and an interface element 903 are displayed on the same interface, wherein the user presses the interface element 901, and the electronic device can detect that the pressure of the user on the interface element 901 is f1 through the pressure sensor, and as shown in (a) of fig. 9, the interface element 902 and the interface element 903 can move toward the interface element 901 under the influence of "attractive force". If the force with which the user presses the interface element 901 increases from f1 to f2, the movement distance of the interface element 902 and the interface element 903 increases as shown in fig. 9 (b). In some embodiments, the movement speed of interface element 902 and interface element 903 may also be increased.

As shown in (c) of fig. 9, an interface element 901, an interface element 903, and an interface element 904 are displayed on the same interface, wherein the user presses the interface element 901, the electronic device may detect that the pressure of the user on the interface element 901 is f1 through the pressure sensor, and as shown in (c) of fig. 9, the interface element 903 may move toward the interface element 901 under the influence of "attractive force", but the interface element 904 does not move. If the force with which the user presses the interface element 901 increases from f1 to f2, as shown in (d) of fig. 9, the interface element 904 and the interface element 903 may move toward the interface element 901, and the moving distance of the interface element 903 increases. In some embodiments, the speed of movement of interface element 903 may also be increased.

In some embodiments, when the user presses the interface element, the electronic device may cause the size of the pressed interface element to become larger, and the size change of the pressed interface element may be proportional to the pressure with which the user presses the interface element. For example, as shown in (c) and (d) in fig. 9, since f1 < f2, when the pressure at which the user presses the interface element 901 is changed from f1 to f2, the size of the interface element 901 may become large.

(7) Creating a moving animation effect of the interface element of "attraction".

The moving animation effect of the interface element generating the 'attractive force' can also influence the linkage animation effect, so that the connection between the interface element generating the 'attractive force' and the interface element influenced by the 'attractive force' can be enhanced.

For example, referring to fig. 4 (a) and (b), if the speed of the user moving the application icon 408 increases, the movement speed of 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 413, and the application icon 414, which are affected by the "attractive force", also increases.

(8) A direction of movement.

The moving direction of the interface element in the application not only comprises a plane direction, but also comprises a depth direction, wherein the depth direction is a direction perpendicular to the screen of the electronic equipment.

Fig. 10 is a schematic diagram showing the influence of the movement direction on the linkage animation effect provided in the embodiment of the present application.

As shown in fig. 10, an interface element 1001, an interface element 1002, and an interface element 1003 are displayed on the same interface, wherein when the user presses the interface element 1001, if the movement direction of the interface element includes the depth direction, the size of the interface element 1001 may be reduced, the size reduction of the interface element 1001 may be understood as that the interface element 1001 moves toward the screen of the electronic device, and the sizes of the interface element 1002 and the interface element 1003 may be reduced due to the influence of the "attractive force" of the interface element 1001.

In some embodiments, interface element 1001 is scaled down more than interface element 1002 and interface element 1003. The above describes the influence of the "attraction force" range, the size of the interface elements, the distance between the interface elements, the friction force, the gravity force, the pressure force, the movement animation effect of the interface elements generating the "attraction force", the movement direction on the linkage animation effect, and similar to the influence of various factors on the "attraction force" range, the above factors can also be combined with each other to influence the linkage animation effect. The effect on the linked animation effect will be described below in connection with different influencing factors.

For example, the electronic device may determine the coordinated animation effect based on the size and "friction" of the interface element.

In some embodiments, according to the above description, the larger the size of the interface element, the larger the "attractive force" it receives, but the larger the "friction force" it receives, and the electronic device needs to determine whether the interface element is able to move and the movement distance and the movement state when it is able to move according to the "attractive force" and the "friction force".

By way of example, FIG. 11 illustrates the impact of different influencing factors provided by embodiments of the present application on a linked animation effect. As shown in fig. 11 (a), the electronic device displays an interface element 1101, an interface element 1102, an interface element 1103, and an interface element 1104, where the interface element 1101 is an operated interface element, distances between the interface element 1101 and the interface element 1102, between the interface element 1103 and the interface element 1104 are equal, and the size of the interface element 1102 is larger than the sizes of the interface element 1103 and the interface element 1104, and if the size of the interface element 1102 is larger than the size of the interface element 1103 and the size of the interface element 1104, the "attractive force" received by the interface element 1102 is larger than the "attractive force" received by the interface element 1103 and the "attractive force" received by the interface element 1104, and if friction is not considered, the moving distance of the interface element 1102 may be larger than the moving distance of the interface element 1103 and the interface element 1104. If the friction force is considered, the "maximum static friction force" of the interface element 1102 is larger because the size of the interface element 1102 is larger, and when the "maximum static friction force" of the interface element 1102 is larger than the "attractive force" received by the interface element 1102, the interface element 1102 may not move, and correspondingly, the sizes of the interface element 1103 and the interface element 1104 are smaller, and the "maximum static friction force" of the interface element 1102 is smaller, so that the interface element 1103 and the interface element 1104 may still move. In some cases, while interface element 1103 and interface element 1104 may still move, the distance that interface element 1103 and interface element 1104 move may decrease because interface element 1103 and interface element 1104 are subject to "friction.

The size and the "friction force" of the interface element can affect not only whether the interface element moves and the movement distance of the interface element, but also the movement speed of the interface element. With continued reference to fig. 11 (a), the movement speeds of the interface element 1103 and the interface element 1104 may be reduced due to the influence of the "friction force".

For example, the electronic device may determine the coordinated animation effect based on the distance between the interface elements and the "friction".

In some embodiments, according to the above description, the greater the distance between the interface elements, the smaller the "attraction force" it receives, and if the "friction force" of the interface elements is considered, the electronic device needs to determine whether the interface elements are able to move and the movement distance and the movement state when they are able to move according to the "attraction force" and the "friction force".

For example, as shown in (b) of fig. 11, the electronic device displays an interface element 1101, an interface element 1102, an interface element 1103, and an interface element 1104, where the interface element 1101 is an operated interface element, and a distance between the interface element 1101 and the interface element 1103, and between the interface element 1104 is equal to and smaller than a distance between the interface element 1102, and a distance between the interface element 1102, the interface element 1103, and the interface element 1104 are equal to each other, and if the "attractive force" received by the interface element 1102 is smaller than the "attractive force" received by the interface element 1103 and the "attractive force" received by the interface element 1104, the movement distance of the interface element 1102 may be smaller than the movement distance of the interface element 1103 and the interface element 1104, if friction is not considered. If the friction force is considered, since the distance between the interface element 1102 and the interface element 1101 is larger, the "attractive force" that the interface element 1102 receives is smaller, when the "maximum static friction force" of the interface element 1102 is larger than the "attractive force" that the interface element 1102 receives, the interface element 1102 may not move, and correspondingly, the distance between the interface element 1103 and the interface element 1104 and the interface element 1101 is larger, the "attractive force" that the interface element 1103 and the interface element 1104 receive is larger, so that even if the "friction force" exists between the interface element 1103 and the interface element 1104, the interface element 1103 and the interface element 1104 may still move. In some cases, while interface element 1103 and interface element 1104 may still move, the distance that interface element 1103 and interface element 1104 move may decrease because interface element 1103 and interface element 1104 are subject to "friction.

The distance between the interface elements and the "friction force" can affect not only whether the interface elements move and the movement distance of the interface elements, but also the movement speed of the interface elements. With continued reference to (b) in fig. 11, the movement speeds of the interface element 1103 and the interface element 1104 may be reduced due to the influence of the "friction force".

For example, the electronic device may determine the linkage animation effect based on the size of the interface element and "gravity".

For example, the electronic device may determine the linkage animation effect based on the distance between interface elements and "gravity".

It should be understood that, since the "friction force" of the interface elements may be determined according to the "gravity" and the dynamic friction factor, reference may be made to the description of determining the linkage animation effect according to the size and the "gravity" of the interface elements and determining the linkage animation effect according to the distance between the interface elements and the "gravity", and the description of determining the linkage animation effect according to the size and the "friction force" of the interface elements and determining the linkage animation effect according to the distance between the interface elements and the "friction force".

For example, the electronic device may determine the linked animation effect based on "pressure" and "friction".

For example, as shown in (c) of fig. 11, the electronic device displays an interface element 1101, an interface element 1102, an interface element 1103, and an interface element 1104, where the interface element 1101 is an interface element that is operated, when the pressure of the user operating the interface 1101 is f1, the interface element 1102, the interface element 1103, and the interface element 1104 do not move, and when the pressure of the user operating the interface element 1101 increases from f1 to f2, the interface element 1102, the interface element 1103, and the interface element 1104 move.

For example, the electronic device may determine the linked animation effect based on "gravity" and "friction".

It should be understood that, since the "friction force" of the interface element may be determined from the "gravity" and the dynamic friction factor, reference may be made to the description of determining the linked animation effect from the "gravity" and the "friction force".

For example, the electronic device may determine the linked animation effect based on the "pressure" and the "direction of movement.

For example, as shown in (d) of fig. 11, the electronic device displays an interface element 1101, an interface element 1102, an interface element 1103, and an interface element 1104, where the interface element 1101 is an interface element that is operated, when the pressure of the user pressing the interface 1101 is f1, if the moving direction includes the depth direction, the dimensions of the interface element 1101, the interface element 1102, the interface element 1103, and the interface element 1104 may be reduced, and when the pressure of the user pressing the interface element 1101 is increased from f1 to f2, the dimensions of the interface element 1101, the interface element 1102, the interface element 1103, and the interface element 1104 may be increased.

It should be noted that, the above example is taken as an example in which two factors are combined, but the embodiment of the application is not limited thereto, and the electronic device may determine the linkage animation effect according to more than two factors.

According to the embodiment of the application, the concept of multiple forces in the nature is introduced into the interface elements, so that the interface elements can be linked, the linked animation effect symbols are natural, the user experience and the user's look and feel are improved, and the user's operation is more similar to the real-world feeling.

The interface element affected by the "attractive force" is described above in connection with fig. 5, and a curve of a change in displacement time when the interface element affected by the "attractive force" is moved, and a curve of a change in displacement time and a curve of a change in velocity with time when the interface element affected by the "attractive force" is moved will be described below.

FIG. 12 shows a schematic diagram of an animation process and associated control logic for a linked animation effect, according to an embodiment of the present application. In an operating system of an electronic device, an animation essentially displays a current interface or control in real time according to a refresh rate, and a user perceives that a displayed picture is moving by utilizing a human visual persistence principle. Thus, as shown in FIG. 12, the electronic device can first determine an initial state 1210 of the animation and a final state 1220 of the animation. In addition, the electronic device can determine an animation time 1205 that continues during the transition from an initial state 1210 of the linked animation to a final state 1220 of the linked animation. Furthermore, the electronic device can also determine the animation type 1230 and the animation transformation form 1240. For example, animation type 4430 may include a displacement animation 1232, a scaling animation 1234, a rotation animation 1236, a transparent animation 1238, etc. of the interface element, while "animation transformation form 1240 may be controlled by interpolator 1242 and estimator 1244, such as control of the relevant transformation speed during a fixed animation time 1205, etc., which for the present embodiment may be the movement speed of the interface element.

In the present embodiment, the displacement animation 1232 in the animation type 1230 is mainly referred to for achieving the "attractive" animation effect, but it should be understood that other linkage animation types are possible. As described above, the displacement animation effect generated by the linkage animation effect in the embodiment of the present application may be that the interface element moves toward a certain direction first and then resets in the opposite direction, or may be that the interface element moves toward a certain direction for a certain distance and then stops.

For the situation that the interface element moves towards a certain direction and then resets in the opposite direction, the two animation segments can respectively define the duration and the interpolator, and the application side can adjust according to the requirement. It should be appreciated that the electronic device may employ any suitable displacement time profile, known or discovered in the future, to control the movement details of the interface element. In some embodiments, the electronic device may select a movement profile using a bezier profile or an elastic force profile as the interface element. For example, the electronic device may use a second order Bezier curve to control the movement of the interface element first in a certain direction and a spring force curve to control the resetting of the interface element, or vice versa. Of course, in other embodiments, the electronic device may also use one of a Bezier curve or an elastic force curve to control movement in one direction and to control resetting of the interface element. In this way, the electronic device can conveniently control the movement of the interface element based on the Bezier curve or the elastic force curve, so that the linkage animation effect is more consistent with the habit cognition of the user on the attractive force and the repulsive force in life, and the user experience is further improved. An example in which the electronic device controls the movement of the interface element 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 will be described below with reference to fig. 13.

Fig. 13 (a) shows a schematic diagram of a time-dependent displacement curve of an interface element according to an embodiment of the present application as a bezier curve. In the displacement time chart shown in fig. 13 (a), the abscissa represents time and the ordinate represents distance. In some embodiments, the interpolator used to control the movement of the interface element may use a common curve interpolator. Referring to fig. 4, 5 and 13 (a), the electronic device may control the application icon 404 to move according to the displacement time curve shown in fig. 13 (a) during a period of t0-t 2.

Specifically, the electronic device can achieve different movement effects of the interface element by selecting two second-order points of the second-order bezier curve. In this way, the interaction of the displacement time profile with time will produce a rhythmic feel of motion. The electronic device adjusts the displacement time profile so that the interface element accelerates and decelerates, rather than moving at a constant rate.

It should be noted that, in the embodiments of the present application, only the second-order bezier curves are used as the displacement time curves to describe some examples, but the embodiments of the present application are not limited thereto, and any curve form may be equivalently used as the displacement time curves to implement the movement of the interface element. For example, such curve forms include, but are not limited to, first order Bezier curves, third or higher order Bezier curves, other known or future discovered curve forms, or straight lines.

Fig. 13 (b) is a schematic diagram showing that the displacement-versus-time profile of the interface element according to an embodiment of the present application is a critical damping elastic force profile. In the example of (b) in fig. 13, the displacement time curve of the application icon 404 depicted in fig. 5 at the time t2-t4 is an elastic force curve, for example, an elastic force curve of critical damping. In general, the elastic force curve may use different states in different operating scenarios, i.e. critical damping, under-damping and over-damping. The elastic force curves for displacement times may be different in different damping states. Specifically, three cases are as follows: the square of the damping is equal to 4 times the mass times the stiffness, which is the critical damping. Further, if the damping is large, the damping is excessive, and if the rigidity is large, the damping is insufficient. In particular, a square of damping less than 4 times the mass times the stiffness is under-damped, while a square of damping greater than 4 times the mass times the stiffness is over-damped. In the displacement time chart shown in fig. 13 (b), the abscissa represents time and the ordinate represents displacement. It should be appreciated that while (b) in fig. 13 depicts the displacement time curve of the interface element reset of the present embodiment as a critical damped elastic force curve by way of example, the present embodiment is not limited thereto, but is equally applicable to any other curve, such as an under damped elastic force curve or an over damped elastic force curve. For example, the displacement time curve of the application icon 404 at the time t2-t4 is an under-damped elastic force curve as shown in fig. 13 (c), and the displacement time curve of the application icon 404 at the time t2-t4 is an over-damped elastic force curve as shown in fig. 13 (d).

In some embodiments, the elastic engine difference value is set as follows:

implementation of code classes:

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)

calling distance:

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()；

spring engine animation class:

animation class instance:

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)

animation class call instance:

1.HWSpringAnimation animation＝HWSpringAnimation(listView,DynamicAnimation.TRANSLATION_Y,400F,40F,0,1000F)；

2.animation.start()；

fig. 13 (a) and (b) show the displacement time curves of the interface element that is moved under the influence of "attraction force", and in some embodiments, the interface element that generates "attraction force" may be moved continuously after the user releases his hand, for example, the user may slide the interface element off the screen, and the interface element may be moved forward a certain distance, and the displacement time curves of the interface element may be the displacement time curves shown in fig. 12 (a) and (b), or may be determined by a friction model provided below.

The friction model in the embodiment of the present application can satisfy the formula (4) and the formula (5) by way of example

v(t)＝V ₀ ×e ^-4.2×f×t (7)

Wherein V (t) is the final speed of the interface element, V ₀ For the initial speed of the interface element, the initial speed of the interface element may be related to the speed of the user polishing the interface element, f is the "friction force" suffered by the interface element, s (t) is the moving distance of the interface element, t is the moving time, the constant portions in the formula (7) and the formula (8) are merely examples, and the embodiments of the present application are not limited thereto

The "friction force" of the interface element can be configured by the electronic device or a user or a developer, and v (t) is 0 due to the existence of the "friction force", t can be calculated by the formula (4), and then the moving distance of the interface element can be obtained by substituting t into the formula (5).

It should be appreciated that a detailed description of the "friction" for the interface element may be found above.

It should also be appreciated that the friction model described above may also be used to determine the distance traveled by the interface element affected by "attraction force, and if the friction model described above is used to determine the distance traveled by the interface element affected by" attraction force, the initial velocity of the interface element affected by "attraction force may be configured by the electronic device, and may be related to the user's operation, e.g., the greater the velocity at which the user throws the interface element, the greater the initial velocity of the interface element affected by" attraction force.

In the above, it is described how the "friction" factor controls the interface element to stop moving, which may be the interface element that generates the "attraction force" or the interface element that is affected by the "attraction force". Furthermore, whether the position where the interface element can be moved is limited may also control where the interface element stops moving.

Specifically, in some embodiments, the location to which the interface element can be moved is not limited, e.g., referring to (a) and (b) in fig. 4, 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 may move all the way with the movement of the application icon 408. In this case, the distance determined based on the friction model is the distance the application icon is to move. However, in other embodiments, the location to which the interface element can be moved is limited. In other words, the interface element can only be moved to a predetermined position. In other words, the movement distance of the interface element is limited. In this case, although the distance to be moved by the interface element may be determined based on the friction model, if the interface element is not located at a predetermined position after being moved by the distance, it is necessary to adjust the distance to be moved by the interface element so that the interface element can be moved to the predetermined position. For example, after the interface element is moved to be closest to the stop position determined based on the friction model and is not located at the predetermined position, the distance 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 may be moved to a predetermined position nearest to the stop position determined based on the friction model. Thus, the distance the interface element is to move may be determined jointly based on both the friction model and the predetermined position.

In the description of the interface display method provided in the implementation of the present application, the application icon of the desktop is taken as an example, but the embodiment of the present application is not limited thereto, and a schematic scenario of the interface display method provided in the embodiment of the present application will be described below with reference to fig. 14 to 21.

FIG. 14 illustrates a set of GUIs provided by embodiments of the present application.

As shown in (a) of fig. 14, the electronic device displays an interface 1401, the interface 1401 may be a negative screen, and the electronic device displays a card 1402, a card 1403, a card 1404, and a card 1405 on the interface 1401, and the distances between the adjacent cards may be equal. The electronic device can display a GUI as shown in (b) in fig. 14 in response to detecting a slide operation of the user with respect to the card 1403.

As in (b) of fig. 14, the electronic device can cause the card 1403 to move upward in response to the user's operation for the card 1403 to slide upward, while the card 1402 can also move upward due to the card 1402 receiving the "repulsive force" of the card 1403, and the card 1404 and the card 1405 receiving the "attractive force" of the card 1403 can move upward.

In some embodiments, if the user's upward sliding operation is a throwing slide, the distance between the card 1403 and the card 1402 may be reduced and then restored to the original distance, and the distance between the card 1403 and the card 1404 and the distance between the card 1403 and the card 1405 may be increased and then restored to the original distance. If the user's upward sliding operation is to press the card 1403 to slide upward, the distance between the card 1403 and the card 1402 may be reduced to a certain distance and then not changed, and similarly, the distance between the card 1403 and the card 1404 and the distance between the card 1403 and the card 1405 may be increased to a certain distance and then not changed, and when the user releases his hands, the distance between the cards may be restored to the original distance.

As is clear from the above description, in the process of the above-described card moving up to the stop, there is a minimum distance d1 between the card 1402 and the card 1403, a maximum distance d2 between the card 1403 and the card 1404, a maximum distance d3 between the card 1403 and the card 1405, assuming that the original distance between the card 1402 and the card 1403 is d11, the original distance between the card 1402 and the card 1404 is d22, the original distance between the card 1402 and the card 1405 is d33, the distance change amplitude between the card 1402 and the card 1403 is Δd1=d11-d 1, the distance change amplitude between the card 1403 and the card 1404 is Δd2=d2-d 22, the distance change amplitude between the card 1403 and the card 1405 is Δd3=d3-d 33, and in some embodiments Δd1= Δd2= Δd3.

In other embodiments, the distance between the cards may remain unchanged during the movement of the cards, and Δd1= Δd2= Δd3= 0.

Further, depending on the factors affecting the linked animation effects described above, the cards 1402, 1404, 1405 may have different animation effects, i.e., the displacement time curves of the cards 1402, 1403, 1404, 1405 may be different, and Δd1, Δd2, Δd3 may be different.

By way of example, since the distance between the card 1402 and the card 1403 is equal to the distance between the card 1403 and the card 1404, and the distance between the card 1403 and the card 1405 is greater than the distance between the card 1402 and the card 1403, the electronic device can make the moving speeds of the card 1402 and the card 1404 greater than the moving speed of the card 1405. Similarly, the moving distance of the card 1402 and the card 1404 is larger than that of the card 1405, so that Δd1= Δd2 >. Δd3.

Illustratively, assuming that cards 1402 and 1403 are one level and cards 1403 and 1034, 1405 are not one level, cards 1404 and 1405 do not interlock with cards 1403, i.e., do not move upward.

For example, if the card "friction force" is defined, assuming that the card 1402 and the card 1405 are more than the card "attraction force" to which they are subjected, the card 1402 and the card 1405 are not interlocked with the card 1403 if the card 1404 is less than the card "attraction force" to which they are subjected.

For example, if the "friction force" of the card is defined, the electronic device may determine the speed and distance of the card as it moves according to the "friction force" and "attraction force" of the card in any functional relation including the "friction force" and "attraction force".

Illustratively, if the speed of the upward sliding movement of the user increases, the speed of movement of the cards 1402, 1404, 1405 increases.

Illustratively, if the speed at which the user slides up increases, the minimum distance d1 between card 1402 and card 1403 may decrease, the maximum distance d2 between card 1403 and card 1404 may increase, and the maximum distance d3 between card 1403 and card 1405 may increase.

It should be noted that the influence of the above-mentioned influencing factors on the animation effect is only an example, and the animation effect of the card 1402, the card 1404 and the card 1405 may be determined based on any one or more influencing factors described above in the embodiments of the present application, and for a specific description of the influence of the influencing factors on the animation effect, reference may be made to the above.

If there are more cards under card 1405, as shown in fig. 14 (c) and (d), the electronic device can cause card 1402 to continue to move upward as the user slides card 1403 until interface 1401 no longer displays card 1402, and card 1406 under card 1405 can move upward due to the influence of "attraction".

Note that, although the card 1406 is not displayed in the interface 1401 in (c) in fig. 14, in the screen layout, the card 1406 is already present, that is, it can be understood that there is "attraction force" between the card 1403 and the card 1406, and when the card 1403 is slid, the card 1406 can move in the direction in which the card 1403 slides, that is, upward due to the "attraction force".

In some embodiments, 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 become larger and smaller during the movement of the card, and the card may maintain the distance as shown in (d) of fig. 14 when the movement is stopped.

It should be noted that, the distance-time curve of the card during the moving process may refer to the distance-time curve shown in fig. 5, and for brevity, the description is omitted herein.

It is also to be noted that, although the distance between the card 1403 and the card 1406 may become larger and smaller first, since the card 1406 has been subjected to the influence of "attraction force" to start moving when not displayed in the interface 1401, a process in which the distance between the card 1403 and the card 1406 becomes larger may occur before the card 1406 is displayed in the interface 1401, and thus, in some cases, it may be possible for the user to see a process in which the distance between the card 1403 and the card 1406 becomes smaller.

For this case, as shown in (e) of fig. 14, a time distance curve of the card 1403 and the card 1406 may be represented by a curve #1 of (e) of fig. 14, a distance time curve of the card 1403, a curve #2 of the card 1406, and it can be seen from the figure that in a period of t0 to t1, the distance moved by the card 1403 is larger than the distance moved by the card 1406 in the same time, the distance between the card 1403 and the card 1406 becomes larger, the card 1406 appears in the interface 1401 when the time t1 is reached, and the card 1403 is not moved any more, and the distance between the card 1403 and the card 1406 continues to move may become smaller.

For this case, the distance between card 1403 and card 1406 can be represented using the pitch time chart shown in (f) in fig. 14, and it can be seen from the figure that the distance between card 1403 and card 1406 increases from d1 to d2 in the period of t0-t1, and the distance between card 1403 and card 1406 decreases from d2 to d1 again in the period of t1-t 2.

In the embodiment of the application, the interface elements are associated, when one interface element is operated, the interface elements can be associated with other interface elements, the association between the interface elements is enhanced, and the association between the interface elements accords with the physical rule, so that a user can have more real experience, and the use experience of the user is improved.

FIG. 15 illustrates a set of GUIs provided in an embodiment of the present application.

As shown in fig. 15 (a), the electronic device displays an interface 1501, the interface 1501 is a message notification interface, and the interface 1501 displays a message 1502, a message 1503, a message 1504, a message 1505, a text element 1506, and a search field 1507.

As shown in (a) and (b) of fig. 15, the electronic device detects an operation of the user sliding down, for example, the user may throw at the message 1503, or the user may press down on the message 1503, and the electronic device may move the message 1502, the message 1504, the message 1505 due to the influence of "attraction", without the text element 1506, the search field 1507 moving, in response to the operation of the user. In addition, message 1508 above message 1502 may be progressively displayed in interface 1501 as message 1503 moves downward, as message 1508 is affected by "attraction" as well as by "attraction" of message 1503.

In some embodiments, the reason that text element 1506 and search field 1507 do not move may be that when the electronic device is generating a layout, the hierarchy of text element 1506 and the hierarchy of search field 1507 are different from the hierarchy of message 1503, and the "attraction" generated by message 1503 cannot affect text element 1506 and search field 1507.

In some embodiments, the reason that text element 1506 and search field 1507 do not move may be the hierarchy of text element 1506 and the "friction" to which search field 1507 is subjected, then the "attraction" generated by message 1503 cannot affect text element 1506 and search field 1507

In some embodiments, the distance between the messages 1502 and 1503 and between the messages 1503 and 1508 may be increased and then decreased, and the distance between the messages 1503 and 1504, 1503 and 1505 may be decreased and then increased during the movement of the messages until the stop. Similar to the description above for fig. 13, there may be a maximum distance between message 1502 and message 1503, a minimum distance between message 1503 and message 1504, a minimum distance between message 1503 and message 1505, and a minimum distance between message 1503 and message 1508.

In other embodiments, the distance between messages may remain unchanged during the movement of the messages.

Similarly, messages 1502, 1504, 1505, 1508 may have different animation effects, depending on the factors affecting the linked animation effects described above. It should be appreciated that the detailed description may be referred to above and will not be repeated here for brevity.

As shown in (c) of fig. 15, when the messages are not moved any more, the distances between the two messages may be equal. If message 1506 is the uppermost message and the electronic device detects that the user continues to slide down, a GUI as shown in fig. 15 (d) may be displayed.

As shown in fig. 15 (d), because message 1506 is the uppermost message, as the user continues to slide down, the electronic device may cause text element 1506 and search bar 1507 to move with the user's sliding down operation in order to enhance the human-machine interaction experience, since the new message will not be displayed anymore. When the user releases his hand or the message 1503 that generated the "attraction" stops moving downward, the electronic device may reset the message 1502, the message 1503, the message 1504, the message 1505, the text element 1506, the search field 1507, displaying a GUI as shown in fig. 15 (c).

For example, the electronic device may set the interface element of the other different hierarchy as the interface element affected by "attraction" when it is determined that there is no interface element of the same hierarchy as the message 1503 in the interface 1501.

For example, the electronic device may change the "friction" of the text element 1506 and the search field 1507 such that the text element 1506 and the search field 1507 are subject to a "gravitational force" that is greater than the "friction" such that the text element 1506 and the search field 1507 may move downward.

For example, the electronic device may change the hierarchical mapping of the text element 1506 and the search field 1507 such that the hierarchy of the text element 1506 and the search field 1507 is the same as the hierarchy of the message 1503, such that the text element 1506 and the search field 1507 may move downward.

Similarly, when text element 1506 and search field 1507 may be moved downward, the electronic device may determine the animation effect of text element 1506 and search field 1507 based on the influencing factors described above.

Illustratively, the faster the message 1503 moves downward, the faster the text element 1506 and search field 1507 can move downward.

Illustratively, the farther down the message 1503 is moved, the further down the text element 1506 and search field 1507 may be moved.

Illustratively, the larger the size of the message 1503, the more the text element 1506 and search field 1507 may be moved downward or may be increased. For example, the size of the message 1503 is R1, the distance the message 1503 moves downward is d1, the distance the text element 1506 and the search field 1507 move downward may be d2, if the size of the message 1503 becomes R2, R2 > R1, the distance the message 1503 moves downward is d1, and the distance the text element 1506 and the search field 1507 move downward may be d3, d3 > d2.

Illustratively, the larger the text element 1506 and search field 1507 size, the more the text element 1506 and search field 1507 may be moved downward or may be increased. The size of a text element may be characterized by the word size of the text.

For example, if a "friction" of text element 1506 and search field 1507 is defined, the electronic device may cause the speed of movement, the distance of movement, of text element 1506 and search field 1507 to satisfy any functional relationship including "friction" and "attraction".

It should be noted that the above-mentioned influence factors have an influence on the animation effect by way of example only, and the animation effects of the text element 1506 and the search field 1507 may be determined based on any one or more influence factors described above in the embodiments of the present application.

In some embodiments, to embody the linkage between text element 1506 and search bar 1507 and message 1503, the electronic device may cause not only the text element 1506 and search bar 1507 to move with the movement of message 1503, but also the size of text element 1506 and search bar 1507 to become larger with the movement of message 1503, so that a GUI as described in (e) of fig. 15 may be displayed.

It will be appreciated that when text element 1506 and search field 1507 are reset, their sizes may also be restored to their original sizes.

Fig. 14 and fig. 15 show interface element linkage of interface elements in a notification interface and a negative one-screen interface, and the embodiment of the application is not limited to an application scenario.

FIG. 16 illustrates a set of GUIs provided by embodiments of the present application.

As shown in (a) of fig. 16, a note interface may be displayed with a plurality of notes, and when a user operates one of the notes, the animation effect thereof may be similar to that shown in fig. 13 and 14.

As shown in (b) of fig. 16, a gallery interface, which may display a plurality of pictures, may have an animation effect similar to that shown in fig. 13 and 14 when a user operates one of the pictures.

As shown in (c) of fig. 16, a service center interface, which may display a plurality of application cards, may have an animation effect similar to that shown in fig. 13 and 14 when a user operates one of the application cards.

As shown in (d) of fig. 16, a setting interface, which may display a plurality of setting options, may have an animation effect similar to that shown in fig. 13 and 14 when a user operates one of the device options.

FIG. 17 illustrates a set of GUIs provided in an embodiment of the present application.

As shown in fig. 17 (a) and (b), the electronic device displays an interface 1701, the interface 1701 is a message notification interface, and the interface 1701 displays a message 1702, a message 1703, a message 1704, a message 1705, and a message 1706. The electronic device may detect a user sliding down the message 1704, and in response thereto, the electronic device may cause the message 1702, the message 1703, the message 1705, and the message 1706 to be moved, as detailed herein above, and for brevity, will not be described in detail herein. Further, the electronic device may display an interface element 1708 for identifying a refresh in response to a user sliding down operation, since message 1702 is already the uppermost message.

Similarly, the electronic device may determine the animation effect of the interface element 1708 based on the influencing factors described above.

Illustratively, as shown in FIGS. 17 (b) and (c), the farther down the message 1704 is moved, the farther down the interface element 1708 can be moved.

Illustratively, as shown in FIGS. 17 (b) and (c), the further down the message 1704 is moved, the larger the size of the interface element 1708 can be.

Illustratively, the faster the message 1704 moves downward, the faster the interface element 1708 can move downward.

Illustratively, the further down the message 1704 is moved, the faster the refresh rate can be for the electronic device since the interface element 1708 is an interface element for identifying a refresh.

Illustratively, if the interface element 1708 is rotatable, the faster the message 1704 moves downward, the faster the interface element 1708 can be rotated. For example, if the "friction" of the interface element 1708 is defined, the electronic device may cause the movement distance and movement speed of the interface element 1708 to satisfy any functional relation including "friction" and "attraction".

In the above description with respect to fig. 13 to 17, the manner in which the user operates the interface element is to slide up and down, but embodiments of the present application are not limited thereto, and a method for displaying an interface provided in the embodiments of the present application will be described below with reference to fig. 18.

FIG. 18 illustrates a set of GUIs provided by embodiments of the present application.

As shown in fig. 18 (a), the electronic device displays an interface 1801, the interface 1801 may be a message notification interface, and the interface 1801 displays a message 1802, a message 1803, a message 1804, and a message 1805. For the interface 1801, the user can slide not only the message in the interface 1801 up and down but also the message in the interface 1801 left and right. The electronic device detects an operation by the user to slide message 1803 to the left, in response to which the electronic device may cause message 1802, message 1804, message 1805 to be moved.

In some embodiments, the direction of movement of messages 1802, 1804, 1805 may be co-directional with the direction of movement of message 1803.

Similarly, the electronic device may determine the animation effect of messages 1802, 1804, 1805 based on the influencing factors described above.

For example, as shown in (b) of fig. 18, the moving directions of the messages 1802, 1804, 1805 may be the same as the moving direction of the message 1803, and since the distance between the messages 1802, 1804, 1803 is smaller than the distance between the messages 1805, 1803, the electronic device may make the moving distance of the messages 1802, 1804 larger than the moving distance of the message 1805 in the same time.

By way of example, if the "friction" of messages 1802, 1804, 1805 is defined and the "friction" of the 3 messages is different, the movement distance and/or movement speed of the 3 messages may be different.

By way of example, if the hierarchy of messages 1802, 1803, 1804 is the same, message 1803 is different from message 1804, message 1802 and 1804 may move without message 1805 moving.

For example, if the user moves message 1803 faster, the electronic device can cause message 1802, message 1804, message 1805 to move faster.

It should be noted that the above-mentioned influence factors have only an exemplary influence on the animation effect, and the animation effects of the messages 1802, 1804, 1805 may be determined according to any one or more influence factors described above in the embodiments of the present application.

In some embodiments, as shown in (c) of fig. 18, as the user continues to slide to the left, messages 1802, 1804, 1805 may no longer move with the movement of 1803 due to the presence of the boundary, while message 1803 may fade away in interface 1801 as the user continues to slide to the left.

In some embodiments, as shown in fig. 18 (c), as the user continues to slide the message 1803 to the left, the electronic device may display the control 1806 on the interface 1801 as the control 1806 is moved under the influence of "attraction".

In some embodiments, as shown in fig. 18 (c) and (d), the distance between the message 1803 and the control 1806 may be increased or decreased during movement until stopped.

In other embodiments, the distance between the message 1803 and the control 1806 may remain unchanged during movement until stopped

Similarly, the electronic device can determine the animation effect of control 1806 based on the influencing factors described above.

Illustratively, the faster the message 1803 moves to the left, the faster the control 1808 can move to the left.

For example, if a "friction" for the control 1806 is defined, the electronic device may cause the distance and speed of movement of the control 1806 to satisfy any functional relationship including "friction" and "attraction".

As shown in fig. 18 (d), as the user continues to slide the message 1803 to the left, the electronic device may display the control 1807 on the interface 1801 as the control 1807 moves under the influence of "attraction".

It should be appreciated that for a description of the animation effect of control 1807, reference may be made to the description of control 1806, which is not repeated here for brevity.

In some embodiments, as shown in (e) of fig. 18, if the control 1807 is the right-most control, the controls 1806 and 1807 may no longer move as the user continues to slide the message 1803 to the left, but the dimensions of the controls 1806 and 1807 may become larger because the controls 1806 and 1807 are subject to "attraction".

In other implementations, if the control 1807 is the rightmost control, as the user continues to slide the message 1803 to the left, the control 1806 and the control 1807 may continue to move, and the distance between the message 1803 and the control 1806 and the distance between the message 1803 and the control 1807 may become greater, and the distance between the control 1806 and the control 1807 may also become greater.

In some embodiments, as shown in fig. 18 (e) and (f), as the user continues to slide the message 1803 to the left, the size of the control 1806 may no longer grow, the size of the control 1807 may continue to grow, and the electronic device selects the control 1807 to perform the function to which the control corresponds.

In some embodiments, the display content of the interface element affected by the "attraction" is related to the "attraction". For example, as shown in fig. 18 (e), (g) and (h), as the user continues to slide the message 1803 to the left, the content displayed by the control 1807 may also change, i.e., the opening and closing angle of the "dustbin" shown in the figure increases.

In some embodiments, as shown in fig. 18 (f), (i) and (j), when the electronic device performs the function corresponding to the control 1907, the message 1803 is deleted, the message 1804 and the message 1805 may still be moved upwards under the influence of "attraction", the message 1802 may be used as an interface element generating "attraction" due to the deletion of the message 1803, the movement animation effect of the message 1804 and the message 1805 may be influenced by the above-described factors, and, for example, the movement speed of the message 1804 may be faster than the movement speed of the message 1805 due to the distance between the message 1804 and the message 1802 being smaller than the distance between the message 1805 and the message 1802, and the message 1804 may arrive at the destination location before the message 1805.

The displacement time curve and the spacing time curve for the above process are similar to those of fig. 14 (e) and (f), and are not described here again for brevity.

Fig. 18 illustrates interface element linkage of interface elements in a message notification interface, which is not limited to an application scenario in the embodiment of the present application.

FIG. 19 illustrates a set of GUIs provided in an embodiment of the present application.

As shown in (a) of fig. 19, the electronic device may display a message on the lock screen interface, and when the user can slide the message of the lock screen interface left and right, the animation effect may be similar to that shown in fig. 18.

As shown in (b) of fig. 19, the electronic device displays a recorder interface that can display a plurality of recordings, and when the user slides the recording displayed on the interface left and right, the animation effect thereof can be similar to that shown in fig. 18.

As shown in (c) of fig. 19, the electronic device displays a recently used interface that can display cards corresponding to a plurality of applications, and the user can slide the card displayed on the interface left and right, and the animation effect thereof can be similar to that shown in fig. 18.

As shown in (d) of fig. 19, the electronic device displays a call interface that can display call records, and the user can slide the call records displayed by the interface left and right, and the animation effect thereof can be similar to that shown in fig. 18.

As shown in (e) of fig. 19, the electronic device displays a weather interface that can display a plurality of city weather, and the user can slide the weather displayed by the interface left and right, and the animation effect thereof can be similar to that shown in fig. 18.

As shown in (f) of fig. 19, the electronic device displays a backlog interface that can display a plurality of backlogs, the user can slide the backlog displayed by the interface left and right, and the animation effect thereof can be similar to that shown in fig. 18.

FIG. 20 illustrates a set of GUIs provided in an embodiment of the present application.

As shown in (a) - (b) in fig. 20, the electronic device displays an interface 2001, and the electronic device may display an application icon 2002, an application icon 2003, an application icon 2004, an application icon 2005, a folder 2006, and an application icon 2007 on the interface 2001, when the user clicks the folder 2006, the electronic device may expand the folder 2006, and as the size of the folder becomes larger, the application icon 2002, the application icon 2003, the application icon 2004, the application icon 2005, and the application icon 2007 may be moved a distance in the direction of the folder 2006, and then return to the original position.

In other embodiments, application icons 2002, 2003, 2004, 2005, 2007 may be moved a distance away from folder 2006 and then returned to the home position.

FIG. 21 illustrates a set of GUIs provided in an embodiment of the present application.

As shown in fig. 21 (a), the electronic device displays an interface 2101, and the interface 2101 displays an application icon 2102, an application icon 2103, an application icon 2104, an application icon 2105, an application icon 2106, an application icon 2107, an application icon 2108, an application icon 2109, an application icon 2110, an application icon 2111, an application icon 2112, an application icon 1213, and an application icon 2114.

As shown in (a) and (b) in fig. 21, when the electronic device detects that the user presses the application icon 2108, the electronic device may move the application icons affected by the "attractive force" of the application icon 2108, that is, the application icon 2102, the application icon 2103, the application icon 2104, and the application icon 2105.

In some embodiments, as shown in (b) and (c) of fig. 21, the application icons 2102, 2103, 2104, 2105 may be moved such that the application icons 2108 merge and the application icons 2108 are changed to folders 2115, the folders 2115 including the application icons 2102, 2103, 2104, 2105, 2108.

It should be noted that, the above detailed description of the process of moving the application icons 2102, the application icon 2103, the application icon 2104, and the application icon 2105 and determining the application icon affected by the "attractive force" of the application icon 2108 may be referred to above, and by way of example, since the application icon 2104 is closest to the application icon 2108, the application icon 2104 may be first combined with the application icon 2108, and similarly, the application icon 2103 and the application icon 2105 may be simultaneously combined with the application icon 2108, and the application icon 2102 may be finally combined with the application icon 2108.

FIG. 22 illustrates a schematic diagram of a relationship between a linkage frame and an interface, which may be a system interface or an interface of a third party application, associated with a linkage animation effect, according to an embodiment of the present application. As shown in fig. 22, the linkage frame 2202 may provide animation effect capabilities 2204. Animation effect capabilities 2204 may take the form of AAR 2206, JAR 2208, and system interface 2210. The interface 2214 may implement various operations on interface elements, such as a move operation 2216, a merge operation 2218, an expand operation 2220, a delete operation 2222, and other operations 2224. Interface 2214 may use gravitational force performance 2204 provided by linkage frame performance 2202 by way of integration 2212. Although not shown in fig. 22, the interface 2214 may also use the animation effect capabilities 2204 provided by the linkage frame 2202 by way of a call (e.g., the system interface 2210). That is, the linkage framework may take the form of AAR, JAR, system interfaces to provide the capability of animation effects, and interface 2214 may be integrated to apply various scenarios as needed in the field.

FIG. 23 shows a schematic diagram of a system framework for implementing animation effect capabilities or functions, according to an embodiment of the present application. In some embodiments, the active capability of the linkage framework is implemented based on the overall architecture of the operating system (e.g., android or hong-and-mong) of the electronic device, which may include mainstream 4-layer logic processing, with the flow of data processing presented to the user from the bottom layer up. The user can use and experience the dynamic function mainly at the application layer. In an embodiment of the present application, the interaction of the interface and the capabilities of the linkage frame is depicted in FIG. 23. In particular, as shown in FIG. 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. The application layer 2310 may include an interface 2312. Interface 2312 may have interface element operations 2314 implemented thereon. Linkage 2314 may include, for example, initiating linkage, linkage movement, linkage completion. The application framework layer 2330 may include system services 2332 and extension services 2334. The system services 2332 may include various system services, such as Service 2333. The extension services 2334 may include various extension services, such as HwSDK 2335. The Hardware Abstraction Layer (HAL) 2350 may include HAL3.0 2352 and algorithm 2354, and embodiments of the present application are not limited to algorithms. The kernel layer 2370 may include a driver 2372 and a physical device 2374. Physical device 2374 may provide the raw parameter stream to driver 2372, while driver 2372 may provide the functional process parameter stream to physical device 2374. As further shown in fig. 23, a linkage framework 2321 for implementing animation effect capabilities 2325 may be implemented between the application layer 2310 and the application framework layer 2330. The linkage frame 2321 may include platform capabilities 2322 and system capabilities 2324, both of which may be used to provide an animation effect 2325. The effects 2325 may in turn be provided to interface element operations 2314 of the application layer 2310.

FIG. 24 is a schematic diagram showing a specific illustration of three ways of linking animation effect capability or function implementation, according to an embodiment of the present application. As shown in fig. 24, the relationship 2402 between the AAR format 2401 and the system of the electronic device is: AAR format 2401 is packaged in binary form of capability, providing the capability for application side integration in the system, allowing free control of version cadence, not following the system. The relationship 2404 between JAR format 2403 and the system of the electronic device is: JAR format 2403 is packaged in binary form of capability, providing all components in the system with the capability to freely control the version cadence 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 to the framework layer in the system version, providing the capability for all components in the system, following the system upgrade. More specifically, the integration mode may refer to the mode of AAR and JAR packets, and the calling mode may refer to the mode of system interface. Therefore, the scenes to which the embodiments of the present application apply are not limited to any specific scene, but the manner of exhibiting the ability to link animation effects may not be consistent. That is, the functions of the various methods described herein before may be implemented by AAR format files, JAR format files, and/or system interfaces of electronic devices. In this way, the ability or functionality of the linked animation effect may be simply and conveniently implemented and provided to an application of the electronic device.

The following will describe the relevant arrangement of the linkage frame according to the embodiment of the present application.

Table 1 is a linkage scene table provided in the embodiments of the present application.

TABLE 1 linkage scene table

Sequence number	Linkage scene
		1	Up-down linkage scene
2	Left-right linkage scene
		3	Drag linkage scene
4	Adding and deleting linkage scene
		5	Multidirectional linkage scene

The up-down linkage scene can be understood as an operation mode that a user can slide up and down when operating the interface element. Such as the GUIs shown in fig. 15-17.

The left-right linkage scene can be understood as an operation mode that a user can adopt left-right sliding when operating the interface element. Such as the GUIs shown in fig. 18-19.

The drag linkage scene can be understood as an operation mode that a user can drag when operating the interface element, and the drag direction is not limited. For example, a GUI as shown in fig. 4.

The adding and deleting linkage scene can be understood as that a user can delete or add interface elements through sliding operation when operating the interface elements. For example, a GUI as shown in fig. 18.

The multi-directional linkage scene can be understood as that the direction of the 'attractive force' generated by the interface element not only comprises a plane direction, but also comprises a depth direction, and the depth direction is a direction perpendicular to the screen of the electronic equipment.

It should be noted that, for the same interface, a plurality of linkage scenes may exist at the same time. For example, as shown in the GUI of fig. 18, the user may slide the messages in the interface left and right, or slide left and right until the messages in the interface are deleted, i.e., the GU shown in fig. 18 includes both the left and right linkage scenes and the add-delete linkage scenes.

Table 2 is a linkage model table provided in an embodiment of the present application.

Table 2 linkage model table

Sequence number	Linkage model
		1	Gravity model
2	Pressure model
		3	Gravity model
4	Friction model
		5	Custom model

The linkage framework in the embodiment of the application can comprise a plurality of models, wherein the custom models can be customized by a developer, and the developer can influence the movement of the interface elements through the custom models.

For example, if the linkage frame includes a gravitational model and a frictional model, the electronic device may determine the animation effect of the interface element based on the "gravitational" and "frictional" forces experienced by the interface element when determining the animation effect of the interface element.

Table 3 shows animation effect parameters provided in embodiments of the present application.

TABLE 3 animation parameters table

Sequence number	Animation parameters
		1	Refresh frequency
2	Screen size
		3	Screen ratio
4	Performance of
		5	Duration of time
6	Interpolation device
		7	Range of variation amplitude
8	Custom

In the embodiment of the application, the animation parameters can be changed to adjust the implementation details of the animation effect, for example, the screen of the electronic device is large, and the variation range of the animation effect can be increased, so that the user can see the details of the animation effect clearly.

It should be noted that the above animation parameter table is only an example, and the animation parameters in the embodiments of the present application may include some or all of the above parameters, and may also include other parameters, such as screen materials.

The linkage scene table shown in table 1 and the linkage model table shown in table 2 provide different parameter settings for different linkage scenes and different linkage models for part or all of the linkage scenes in table 1 and part or all of the linkage models in table 2.

For example, table 4 shows the parameter configuration of the up-down linkage scene.

Table 4 up-down linkage parameter table

The linkage range can be understood as a range in which linkage is generated in up-and-down linkage, and interface elements in which linkage is generated in an up-and-down linkage scene can be determined through parameters of the linkage range in the implementation of the application.

The linkage amplitude can be understood as the amplitude of the interface element moving in the up-down linkage, and the distance of the interface element moving in the up-down linkage scene can be determined through the linkage amplitude parameter in the implementation of the application.

The linkage time can be understood as the movement time of the interface element, and the movement time of the interface element in the up-and-down linkage scene can be determined through the linkage time parameter in the implementation of the application.

The linkage time delay can be understood as time for the interface elements to move in a delayed manner, and in the implementation of the present application, the time for each interface element to start to move can be determined through the linkage time delay parameter.

The moving speed is the moving speed of the interface element in the moving process, and the moving speed can be a fixed value or a functional relation, which is not limited in the embodiment of the present application.

The acceleration is the acceleration of the interface element in the moving process, and the moving speed can be a fixed value or a functional relation, which is not limited in the embodiment of the present application.

It should be noted that the above up-down linkage parameter table is only an example, and the up-down linkage parameters in the embodiments of the present application may include some or all of the above parameters, and may also include other parameters.

It should be further noted that, one or more models in table 2 may be introduced into the up-down linkage scene, so that the up-down linkage parameter table may further include one or more model parameters, for example, an "attraction" model is introduced into the up-down linkage scene, and then the up-down linkage parameter table may further include parameters shown in table 5.

For another example, table 5 shows the parameter configuration of the gravity model.

Table 5 gravitation model parameter table

Sequence number	Animation parameters
		1	Time
2	Range
		3	Influence factor
4	Size and dimensions of

Wherein the time parameter may indicate the time at which the "attraction" is generated. The range parameter may indicate a range of "attraction forces". The influence factor may influence the magnitude of the "attraction force", the range parameter, the time parameter, etc.

In some embodiments, in the embodiments of the present application, other linkage models may be quantized into influence factors, so that the electronic device may change parameters in the gravity model through the influence factors, and further determine the animation effect of the interface element.

When the electronic equipment starts linkage, the relevant settings of the linkage frame can be determined, and then the relevant settings in the linkage frame are analyzed to determine the animation effect of the interface element during linkage movement, so that linkage can be completed.

Having described the animation effects of the interface elements, the linkage scene, the linkage frame setting, and the like, a schematic flowchart of the interface display method provided in the embodiment of the present application will be described below.

Fig. 25 shows a schematic flowchart of an interface display method provided in an embodiment of the present application, as shown in fig. 25, where the method includes:

S2501, a first interface is displayed.

For example, the electronic device may display a first interface comprising M interface elements, M > 1 and an integer.

For example, as shown in fig. 4, the electronic device may interface 401, where the interface 401 displays a plurality of application icons.

As another example, as shown in fig. 14, the electronic device is displayed with a negative one screen 1401, and the negative one screen 1401 is displayed with a plurality of cards.

S2502, detecting operation of a user, and determining a first interface element.

In some embodiments, detecting a user operation, determining a first interface element includes:

the electronic equipment detects the operation of a user on any one interface element in M interface elements, and determines the any one interface element as the first interface element

For example, the user drags the interface element downward as shown in (a) in fig. 4.

For another example, the user clicks on an interface element as shown in (b) of fig. 4.

In other embodiments, a gesture operation of a user is detected, and a first interface element is determined according to a type of each of the M interface elements.

In the above example, the user operates one interface element, and determines the interface element as the first interface element, but the embodiment of the application is not limited thereto, and by way of example, the user may slide in a blank space of the first interface through gesture operation to refresh the first interface, that is, when the user does not operate on a certain interface element, the electronic device may, according to a type of each interface element in the first interface, for example, take an interface element with the highest level in the first interface as an interface element generating "attractive force", and other interface elements may be linked under the influence of "attractive force".

S2503, determining N interface elements affected by the first interface element according to the type of the first interface element.

In some embodiments, determining N interface elements affected by the first interface element based on the type of the first interface element includes:

according to the type of the first interface element, N interface elements which are the same as the type of the first interface element are determined to be the interface elements influenced by the first interface element.

For example, after determining the type of the first interface element, the electronic device may determine N interface elements having the same type as the first interface element as interface elements affected by the first interface element, where N is greater than or equal to 1 and less than or equal to M-1, and the N interface elements affected by the first interface element include the second interface element.

In other embodiments, determining N interface elements based on the type of the first interface element includes:

according to the type of the first interface element, N interface elements which are different from the type of the first interface element are determined to be the interface elements influenced by the first interface element.

For example, after determining the type of the first interface element, the electronic device may determine N interface elements that are different from the type of the first interface element as interface elements affected by the first interface element.

The different types can be understood as different levels, different colors, different sizes, etc.

In some embodiments, determining N interface elements of the same type as the first interface element according to the type of the first interface element includes:

the electronic device may determine that all interface elements except the first interface element in 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.

In some embodiments, according to the type of the first interface element, determining N interface elements of the same type as the first interface element as interface elements affected by the first interface element includes:

the electronic device may determine, according to the hierarchy of the first interface element, that N interface elements identical to the hierarchy of the first interface element are interface elements affected by the first interface element, that is, interface elements identical to the hierarchy in the first interface are interface elements of the same type.

For example, the electronic device may determine an interface element that is the same as the hierarchy of the first interface element as the interface element that is affected by the first interface element.

The electronic device may determine, according to the size of the first interface element, that N interface elements having the same size as the first interface element are interface elements affected by the first interface element, that is, interface elements having the same size in the first interface are interface elements of the same type.

For example, the electronic device may determine an interface element that is the same size as the first interface element as the interface element that is affected by the first interface element.

For another example, the electronic device may determine an interface element that is the same size as the first interface element, or that has a difference in size from the first interface element that is less than a threshold value, as the interface element that is affected by the first interface element.

In some embodiments, if the operation of the user on the first interface element is an operation of moving the interface element, determining, according to the type of the first interface element, N interface elements that are the same as the type of the first interface element as interface elements affected by the first interface element includes:

the electronic device determining a first direction of movement of the first interface element;

the electronic equipment determines N interface elements in the first direction of the first interface element as the interface elements influenced by the first interface element according to the first direction; or (b)

The electronic device determines that N interface elements in a second direction of the first interface element are interface elements affected by the first interface element according to a second direction, wherein the second direction is opposite to the first direction.

For example, if the movement direction of the first interface element is leftward movement, the electronic device may determine the interface element on the left side of the first interface element as the interface element of the same type as the first interface element. The interface element to the left of the first interface element may include the interface element to the right of the first interface element, and may further include the interface element to the upper left and/or lower left of the first interface element.

and the electronic equipment determines N interface elements with the same color as the first interface element as the interface elements influenced by the first interface element according to the color of the first interface element.

The electronic device may determine a distance between the first interface element and the M-1 interface elements, and determine, according to the distance between the first interface element and the M-1 interface elements, that N interface elements having the same type as the first interface element are interface elements affected by the first interface element, that is, interface elements within a preset distance are interface elements having the same type as the first interface element.

For example, the electronic device may determine a distance between the first interface element and M-1 interface elements, and then determine interface elements having a distance from the first interface element that is less than a first threshold as interface elements affected by the first interface element.

It should be noted that, the distance measurement manner in the embodiment of the present application is not limited, and a specific description may be referred to the description of fig. 7 above.

the electronic device may determine a center point of occurrence of the first interface element, then determine the first geometric region according to the center point of occurrence, and determine N interface elements that cover the first geometric region and/or intersect with a boundary of the first geometric region as interface elements affected by the first interface element.

For example, as shown in (e) - (g) of fig. 7, the electronic device may select a geometric region with a geometric center point of the interface element as a center point, and determine the interface element that the geometric region wraps around and/or intersects with a boundary of the geometric region as the interface element affected by the interface element. Geometric region cladding is understood to mean that the interface element is entirely within the geometric region.

S2504, determining a first animation effect of the second interface element according to the first linkage parameter.

For example, the electronic device may determine a first animation effect of the second interface element according to the first linkage parameter, where the animation effect includes a moving distance of the second interface element and a state when the second interface element moves. The linkage parameters in the embodiment of the 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, the limiting parameter of the second interface element, and the animation effect of the first interface element. The limiting parameter of the second interface element may be a parameter set by the electronic device to limit movement of the second interface element. For example, the limit of the second interface element may be the "friction" and/or "gravity" of the second interface element.

S2505, moving the second interface element according to the first animation effect movement.

For example, the electronic device can move the second interface element in accordance with the animation effect after determining the animation effect.

It will be appreciated that since the animation effect is determined according to the above-described linkage parameters, the animation effect may be different for different program elements of the same interface that are affected by the first interface element.

In some embodiments, prior to S2505, the method further comprises:

determining a first delay time;

for example, the electronic device may determine a delay time that is a time difference between when the first interface is operated and when the second interface element starts to move. For example, after the first interface element is clicked for 1s, the second interface element starts to move.

In some embodiments, the first delay time may be preconfigured.

In other embodiments, the first delay time may be determined based on a 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.

In some embodiments, moving the second interface element according to the first animation effect includes:

after the first delay time has elapsed, the second interface element is moved according to the first animation effect movement.

In some embodiments, the profile of the time change in displacement of the animation effect of the second interface element may be a Bezier profile or an elastic force profile,

in some embodiments, the method further comprises:

if the operation of the user on the first interface element is a pressing operation or a clicking operation, the method further includes:

in response to this operation, the size of the first interface element is changed.

In some embodiments, the method further comprises:

the first linkage parameter also includes a pressure at which the user performs the operation.

In some embodiments, the method further comprises:

if the type of the electronic equipment is detected to be changed from the first type to the second type or the screen parameters of the electronic equipment are changed, switching the first animation effect into a third animation effect;

moving the second interface element according to the first animation effect, comprising: :

and moving the second interface element according to the third animation effect.

The embodiment of the application also provides electronic equipment which comprises functional modules for realizing the steps involved in the embodiment of the method. It should be noted that, all relevant contents of each step related to the above method embodiment may be cited to the functional description of the corresponding functional module, which is not described herein. The electronic device provided by the embodiment of the application is used for executing the method for displaying the interface, so that the same effect as the above can be achieved.

The embodiment of the application also provides electronic equipment, which comprises: processor, memory, application program, and computer program. The devices described above may be connected by one or more communication buses. Wherein the one or more computer programs are stored in the memory and configured to be executed by the one or more processors, the one or more computer programs comprising instructions that can be used to cause the electronic device to perform the steps of the electronic device in the embodiments described above.

The processor may be, for example, the processor 110 shown in fig. 1, and the memory may be, for example, the internal memory 120 shown in fig. 1 and/or an external memory connected to the electronic device.

The embodiment of the application also provides a chip, which comprises a processor and a communication interface, wherein the communication interface is used for receiving signals and transmitting the signals to the processor, and the processor processes the signals so that the interface display method as described in any one of the possible implementation modes is executed.

The present embodiment also provides a computer-readable storage medium having stored therein computer instructions that, when executed on an electronic device, cause the electronic device to perform the above-described related method steps to implement the method for displaying an interface in the above-described embodiments.

The present embodiment also provides a computer program product which, when run on a computer, causes the computer to perform the above-described relevant steps to implement the method of interface display in the above-described embodiments.

As used in the above embodiments, the term "when …" or "after …" may be interpreted to mean "if …" or "after …" or "in response to determination …" or "in response to detection …" depending on the context. Similarly, the phrase "at the time of determination …" or "if detected (a stated condition or event)" may be interpreted to mean "if determined …" or "in response to determination …" or "at the time of detection (a stated condition or event)" or "in response to detection (a stated condition or event)" depending on the context.

Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.

It will be clear to those skilled in the art that, for convenience and brevity of description, specific working procedures of the above-described systems, apparatuses and units may refer to corresponding procedures in the foregoing method embodiments, and are not repeated herein.

In the several embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods may be implemented in other manners. For example, the apparatus embodiments described above are merely illustrative, e.g., the division of the units is merely a logical function division, and there may be additional divisions when actually implemented, e.g., multiple units or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices or units, which may be in electrical, mechanical or other form.

The units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

In addition, each functional unit in each embodiment of the present application may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit.

The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), a magnetic disk, or an optical disk, or other various media capable of storing program codes.

The foregoing is merely specific embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily think about changes or substitutions within the technical scope of the present application, and the changes and substitutions are intended to be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A method of interface display, the method comprising:

displaying a first interface, wherein the first interface comprises M interface elements, M is more than 1 and is an integer;

detecting operation of a user, and determining a first interface element;

determining N interface elements influenced by the first interface element according to the type of the first interface element, wherein the N interface elements influenced by the first interface element comprise second interface elements, N is more than or equal to 1 and less than or equal to M-1, and the N is an integer;

determining a first animation effect of the second interface element according to a first linkage parameter, wherein the first linkage parameter comprises 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, the limiting parameter of the second interface element, the animation effect of the first interface element;

And moving the second interface element according to the first animation effect.

2. The method of claim 1, wherein detecting the user operation, determining the first interface element, comprises:

detecting operation of a user on any one interface element in the M interface elements, and determining the any one interface element as the first interface element.

3. The method of claim 1, wherein detecting the user operation, determining the first interface element, comprises:

and detecting gesture operation of a user, and determining a first interface element according to the type of each interface element of the M interface elements.

4. A method according to any one of claims 1 to 3, wherein said determining N interface elements affected by said first interface element according to the type of said first interface element comprises:

and determining N interface elements with the same type as the first interface element as the interface elements affected by the first interface element according to the type of the first interface element.

5. The method of claim 4, wherein determining, according to the type of the first interface element, that N interface elements of the same type as the first interface element are interface elements affected by the first interface element comprises:

And determining N interface elements which are the same as the first interface element hierarchy as the interface elements affected by the first interface element according to the first interface element hierarchy.

6. The method of claim 5, wherein the method further comprises:

determining a third interface element according to the hierarchy of the first interface element, wherein the hierarchy of the third interface element is different from the hierarchy of the first interface element;

determining a second animation effect of the third interface element according to a second linkage parameter, wherein the second linkage parameter comprises at least one of the following: the size of the first interface element, the size of the third interface element, the distance between the first interface element and the third interface element, the limiting parameter of the third interface element, and the animation effect of the first interface element;

and moving the third interface element according to the second animation effect.

7. The method of claim 4, wherein determining, based on the type of the first interface element, N interface elements of the same type as the first interface element as interface elements affected by the first interface element comprises:

And determining N interface elements with the same color as the first interface element as the interface elements affected by the first interface element according to the color of the first interface element.

8. The method according to claim 2, wherein if the operation is a move operation, the determining N interface elements affected by the first interface element according to the type of the first interface element includes:

determining a first direction of movement of the first interface element;

determining N interface elements in a first direction of the first interface element as interface elements influenced by the first interface element according to the first direction; or (b)

And determining N interface elements in a second direction of the first interface element as the interface elements influenced by the first interface element according to a second direction, wherein the second direction is the opposite direction of the first direction.

9. The method of claim 4, wherein determining, based on the type of the first interface element, N interface elements of the same type as the first interface element as interface elements affected by the first interface element comprises:

Determining an occurrence center point of the first interface element;

and determining a first geometric area according to the occurrence center point, and determining N interface elements which are covered by the first geometric area or are intersected with the boundary of the first geometric area as interface elements influenced by the first interface elements.

10. The method of claim 2, wherein if the operation is a press operation or a click operation, the method further comprises:

in response to the operation, a size of the first interface element is changed.

11. The method of claim 10, wherein the first linkage parameter further comprises a pressure of the user performing the operation.

12. The method according to any one of claims 1 to 11, wherein prior to said moving said second interface element according to said effect, said method further comprises:

determining a first delay time;

the moving the second interface element according to the first animation effect includes:

and after the first delay time passes, moving the second interface element according to the first animation effect.

13. The method of claim 12, wherein the determining the first delay time comprises:

The first delay time is determined from a distance between the first interface element and the second interface element.

14. The method of claim 12, wherein the first delay time is preconfigured.

15. The method according to any one of claims 1 to 14, further comprising:

16. The method according to any one of claims 1 to 15, further comprising:

if the type of the electronic equipment is detected to be changed from the first type to the second type or the screen parameters of the electronic equipment are changed, the first animation effect is switched to a third animation effect;

the moving the second interface element according to the first animation effect includes: :

17. An electronic device, comprising: a module for implementing the method of any one of claims 1 to 16.

18. An electronic device comprising one or more processors; one or more memories; the one or more memories store one or more computer programs comprising instructions that, when executed by the one or more processors, cause the method of any of claims 1-16 to be performed.

19. A chip comprising a processor and a communication interface for receiving signals and transmitting the signals to the processor, the processor processing the signals such that the method of any of claims 1 to 16 is performed.

20. A computer readable storage medium having stored therein computer instructions which, when run on a computer, cause the method of any of claims 1 to 16 to be performed.

21. A computer program product comprising instructions which, when run on a computer, cause the computer to perform the method of any of claims 1 to 16.