WO2022222931A1

WO2022222931A1 - Graphical interface display method, electronic device, medium, and program product

Info

Publication number: WO2022222931A1
Application number: PCT/CN2022/087751
Authority: WO
Inventors: 卞超
Original assignee: 华为技术有限公司
Priority date: 2021-04-20
Filing date: 2022-04-19
Publication date: 2022-10-27
Also published as: CN115220621A

Abstract

The present disclosure relates to a graphical interface display method, an electronic device, a computer-readable storage medium, and a computer program product. According to the graphical interface display method described herein, M user interface (UI) elements are displayed on a screen of an electronic device, and M is a positive integer greater than 1. Pressing that acts on a first UI element of the M UI elements is detected. In response to the pressing, each of the N UI elements on the screen is caused to change with a corresponding animation effect, and N is a positive integer between 1 and M-1. Causing the N UI elements to change with the corresponding animation effects comprises: determining a distance between the first UI element and a second UI element of the N UI elements; determining, on the basis of the distance and the position of the pressing in a UI, an animation effect that the second UI element changes; and causing the second UI element to change with the animation effect to visually indicate the pressing. In this way, the relationship between the animation effects of different UI elements can be enhanced, and the relationship between independent UI elements is highlighted, such that the animation effect of the UI better conforms to usage habits of users, thereby significantly improving user experience.

Description

Graphical interface display method, electronic device, medium and program product

technical field

The present disclosure generally relates to the field of information technology, and more particularly, to a graphical interface display method, an electronic device, a computer-readable storage medium, and a computer program product.

Background technique

With the development of information technology, various types of electronic devices are equipped with various types of screens. For this reason, the display effect and style of the user interface (UI) on the screen become the key elements affecting the user experience. Animation has become a vital part of UI. As the performance of electronic devices such as smartphones increased, so did animation. There are more and more animations with high refresh rate, high rendering degree and high complexity. Therefore, the display of animation needs to be further improved to improve user experience.

SUMMARY OF THE INVENTION

According to some embodiments of the present disclosure, a graphical interface display method, electronic device, medium, and program product are provided, which can strengthen the connection between animation effects of different UI elements, highlight the relationship between individual UI elements, and make UI The animation effect is more in line with the user's usage habits, thereby significantly improving the user experience.

In a first aspect of the present disclosure, a graphical interface display method is provided. According to the graphical interface display method of the first aspect, M user interface UI elements are displayed on the screen of the electronic device, where M is a positive integer greater than 1. A press on a first UI element of the M UI elements is detected. In response to the press, each of the N UI elements on the screen is changed with a corresponding animation effect, where N is a positive integer between 1 and M-1. Making the N UI elements change with corresponding animation effects includes: determining a distance between the first UI element and a second UI element among the N UI elements; and determining the second UI element based on the distance and the pressed position in the UI animating the change; and animating the second UI element to visually indicate the press. In this way, the connection between the animation effects of different UI elements can be strengthened, and the relationship between the individual UI elements can be highlighted, so that the UI animation effects are more in line with the user's usage habits, thereby significantly improving the user experience.

In some implementations, to determine the distance, a first reference point of the first UI element and a second reference point of the second UI element may be determined; and a distance between the first reference point and the second reference point may be determined as the distance. In this way, the distance can be determined based on the determined reference point of the UI element, thereby improving the accuracy of the determined distance and the flexibility of the way of determining the distance, thereby improving the user experience.

In some implementations, in order to determine the distance, a first reference point of the first UI element may be determined; from a plurality of circles having respective radii centered on the first reference point, the intersection with the second UI element and the radius is determined the smallest target circle; and determining the radius of the target circle as the distance. In this way, the distance between UI elements can be determined more simply and conveniently, thereby improving the flexibility of the way of determining the distance, thereby improving the user experience.

In some implementations, to determine the distance, the horizontal spacing between the first UI element and the second UI element can be determined; the vertical spacing between the first UI element and the second UI element can be determined; and based on any of the following: Determine distance: at least one of horizontal spacing and vertical spacing, or at least one of horizontal spacing and vertical spacing, and a direction from the second fiducial point of the second UI element to the first fiducial point of the first UI element. In this way, the distance between UI elements can be determined based on the spacing between UI elements, thereby improving flexibility in the manner of distance determination, thereby improving user experience.

In some implementations, the method may further include: determining an area of influence of the first UI element based on a size of the first UI element; and determining a UI element within the area of influence among the M UI elements as N UI elements. In this way, the UI element that changes in linkage with the UI element can be determined based on the size of the pressed UI element, so that the UI animation effect is more in line with the user's usage habits, thereby significantly improving the user experience.

In some implementations, the method may further include: determining M-1 UI elements other than the first UI element among the M UI elements as N UI elements. In this way, all the UI elements on the screen except the pressed UI elements can be linked and changed with the UI elements, so that the UI elements that are linked and changed can be determined more simply and conveniently, and the animation effect of the UI can be more in line with the user's usage habits, so that it is more obvious. Improve user experience.

In some implementations, the animation effect may include a rocker-like movement of the position visually relative to the position of the press, or a depression or protrusion visually relative to the position of the press. In this way, the animation effect of the UI element being pressed can be presented intuitively, so that the animation effect of the UI is more in line with the user's usage habits, thereby significantly improving the user experience.

In some implementations, in order to determine the animation effect, the first magnitude of the change of the first UI element in response to the press may be determined; and the magnitude of the change of the second UI element in response to the press may be determined based on any of the following: A magnitude and a distance, or at least one of a size of the second UI element and a size of the first UI element, a first magnitude, and a distance. In this way, the animation effect of the first UI element can be caused to be conducted to the second UI element, and further the animation effect of the second UI element can be caused to be based on the distance between the first UI element and the second UI element and the second UI element The size of the UI can be determined, so that the animation effect of the UI can be more in line with the user's usage habits, thereby significantly improving the user experience.

In some implementations, the first magnitude of change of the first UI element may be determined based on at least one of the following associated with the first UI element: a size of the first UI element, a size of the first reference point of the first UI element The position, the range of the amplitude that the first UI element can change, the position of the pressing, the duration of the pressing, and the predetermined pressing force. In this way, the first magnitude of the change of the first UI element can be determined intuitively, reasonably and flexibly based on various factors associated with the first UI element, thereby making the animation effect of the UI more in line with the user's usage habits , thereby significantly improving the user experience.

In some implementations, changing the second UI element may include: determining a delay time based on the distance; and changing the second UI element in response to the delay time elapsed after the pressing occurs. In this way, it is possible to visually show that the linkage change propagates with the distance, so that the animation effect of the UI is more in line with the user's usage habits, thereby significantly improving the user experience.

In some implementations, causing the second UI element to change may include determining a speed at which the second UI element changes in response to the press based on a predefined curve of magnitude versus time. In this way, the change of the first UI element can be conveniently controlled based on a predefined curve whose amplitude varies with time, so that the UI animation effect is more in line with the user's usage habits, thereby significantly improving the user experience.

In some implementations, the predefined curve may be a Bezier curve or an elastic force curve. In this way, the change of the first UI element can be conveniently controlled based on the Bezier curve or the elastic force curve, so that the UI animation effect is more in line with the user's usage habits, thereby significantly improving the user experience.

In some implementations, the method may further include: restoring the changed second UI element to the second UI element. In this way, the UI element can be restored after being released, so that the UI animation effect is more in line with the user's usage habits, thereby significantly improving the user experience.

In some implementations, the method may be implemented by at least one of an AAR format file, a JAR format file, and a system interface. In this way, a graphical interface display with linked changes can be realized simply and conveniently.

In a second aspect of the present disclosure, an electronic device is provided. The electronic device includes a processor and a memory storing instructions, wherein the instructions, when executed by the processor, cause the electronic device to perform any of the methods according to the first aspect and implementations thereof.

In a third aspect of the present disclosure, a computer-readable storage medium is provided. A computer-readable storage medium stores instructions, wherein the instructions, when executed by a processor, cause an electronic device to perform any of the methods according to the first aspect and implementations thereof.

In a fourth aspect of the present disclosure, a computer program product is provided. The computer program product comprises instructions, wherein the instructions, when executed by a processor, cause an electronic device to perform any of the methods according to the first aspect and implementations thereof.

It should be understood that the matters described in this Summary are not intended to limit key or critical features of the embodiments of the present disclosure, nor are they intended to limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.

Description of drawings

The features, advantages, and other aspects of various implementations of the present disclosure will become more apparent when taken in conjunction with the accompanying drawings and with reference to the following detailed description. Several implementations of the present disclosure are shown herein by way of example and not by way of limitation, in the accompanying drawings:

1A to 1B show schematic diagrams of the hardware structure and the software structure of an electronic device that can implement embodiments of the present disclosure.

2 shows a block diagram of another electronic device that may implement embodiments of the present disclosure.

3A-3C respectively illustrate schematic diagrams of example UIs according to some embodiments of the present disclosure.

4 shows a schematic diagram of an example drag linkage in accordance with some embodiments of the present disclosure.

5A and 5B show schematic diagrams, respectively, of an example velocity time curve and an example displacement time curve of a friction model according to some embodiments of the present disclosure.

6 shows a schematic diagram of examples of restricted and non-restricted mobile locations in accordance with some embodiments of the present disclosure.

7A-7C show schematic diagrams of examples of curves of spring deflection x versus time t for critically damped, under-damped, and over-damped states, respectively, according to some embodiments of the present disclosure.

FIG. 8 shows a flowchart of a graphical interface display method according to an embodiment of the present disclosure.

9 shows a schematic diagram of an example of an area of influence of a UI element according to an embodiment of the present disclosure.

FIG. 10 shows a schematic diagram of an example of the determination of a distance according to an embodiment of the present disclosure.

11A-11C illustrate schematic diagrams of examples of distance determinations according to embodiments of the present disclosure.

FIG. 12 shows a schematic diagram of an example of distance determination according to an embodiment of the present disclosure.

FIG. 13 shows a schematic diagram of an example of the determination of distance according to an embodiment of the present disclosure.

14A and 14B illustrate schematic diagrams of examples of distance determination according to embodiments of the present disclosure.

FIG. 15 shows a schematic diagram of an example of a delay time according to an embodiment of the present disclosure.

16A shows a schematic diagram of an example of a scene in which a UI element moves completely with the hand, according to an embodiment of the present disclosure.

16B shows a schematic diagram of an example of a displacement time curve of a scene in which a UI element completely moves with a hand according to an embodiment of the present disclosure.

17A shows a schematic diagram of an example of a scenario in which UI elements do not completely follow the hand, according to an embodiment of the present disclosure.

17B shows a schematic diagram of an example of a displacement time curve of a scene in which a UI element does not completely move with the hand, according to an embodiment of the present disclosure.

18A shows a schematic diagram of an example of a scene in which a UI element moves completely with the hand, according to an embodiment of the present disclosure.

18B shows a schematic diagram of an example of a displacement time curve of a scene in which a UI element completely moves with a hand according to an embodiment of the present disclosure.

19A shows a schematic diagram of an example of a scene in which a UI element moves completely with the hand, according to an embodiment of the present disclosure.

19B shows a schematic diagram of an example of a displacement time curve of a scene in which a UI element completely moves with the hand, according to an embodiment of the present disclosure.

20 shows a schematic diagram of an example of a UI element changing when pressed, according to some embodiments of the present disclosure.

21 shows a schematic diagram of an example of a UI element changing when pressed at different locations, according to some embodiments of the present disclosure.

FIG. 22 shows a schematic diagram of an example of UI element changes at different pressing forces according to some embodiments of the present disclosure.

23 shows a schematic diagram of an example of UI element changes at different press durations, according to some embodiments of the present disclosure.

24 shows a schematic diagram of an example of UI elements changing at different sizes, according to some embodiments of the present disclosure.

FIG. 25 shows a flowchart of a graphical interface display method according to an embodiment of the present disclosure.

FIG. 26 shows a schematic diagram of an example of deep linkage of N UI elements according to an embodiment of the present disclosure.

27 shows a schematic diagram of an example of an area of influence of a UI element according to an embodiment of the present disclosure.

28 shows a schematic diagram of an example of distance-based scaling of UI elements, according to an embodiment of the present disclosure.

FIG. 29 shows a schematic diagram of an example of a delay time according to an embodiment of the present disclosure.

30 shows a schematic diagram of an example of scaling of UI elements with a delay time in accordance with the present disclosure.

31 shows a schematic diagram of an example of displacement of movement of UI elements according to an embodiment of the present disclosure.

32A-32B illustrate schematic diagrams of examples of restoration of UI elements without displacement and restoration of UI elements with displacement, respectively, according to embodiments of the present disclosure.

FIGS. 33A-33B respectively show schematic diagrams of an example of a restored size time curve and a displacement time curve of a UI element with a springback effect according to an embodiment of the present disclosure, and FIGS. 33C-33D respectively show a A schematic diagram of an example of the restored size time curve and displacement time curve of a UI element with the rebound effect of multiple rebounds with reduced rebound amplitudes of an embodiment.

34 shows a schematic diagram of an example of a UI element that is a rigid body changing when pressed, according to some embodiments of the present disclosure.

35 shows a schematic diagram of an example of pressing and stretching of a spring that simulates pressing of a UI element, according to some embodiments of the present disclosure.

36 shows a schematic diagram of an example of a UI element that is a non-rigid body when pressed, according to some embodiments of the present disclosure.

Figure 37 shows a schematic diagram of an example of UI element changes at different pressing forces, according to some embodiments of the present disclosure.

38 shows a schematic diagram of an example of UI element changes at different press durations, according to some embodiments of the present disclosure.

39 shows a schematic diagram of an example of UI elements changing at different sizes in accordance with some embodiments of the present disclosure.

FIG. 40 shows a flowchart of a graphical interface display method according to an embodiment of the present disclosure.

41 shows a schematic diagram of an example of pressure linkage of N UI elements according to an embodiment of the present disclosure.

42 shows a schematic diagram of another example of pressure linkage of N UI elements according to an embodiment of the present disclosure.

43 shows a schematic diagram of an example of an area of influence of a UI element according to an embodiment of the present disclosure.

44 shows a schematic diagram of an example of a distance-based UI element change according to an embodiment of the present disclosure.

FIG. 45 shows a schematic diagram of an example of a delay time according to an embodiment of the present disclosure.

46A shows a schematic diagram of an example of restoration of UI elements according to an embodiment of the present disclosure.

46B shows a schematic diagram of an example of an angle-time curve of recovery of a UI element with a bouncing effect, according to an embodiment of the present disclosure.

46C shows a schematic diagram of an example of an angle-time curve of recovery of a UI element with a rebound effect of multiple rebounds with reduced rebound amplitudes, according to an embodiment of the present disclosure.

FIG. 47 shows a schematic diagram of animation implementation according to an embodiment of the present disclosure.

Figure 48 shows a schematic diagram of a system framework for implementing "linkage" animation effect capabilities or functions according to an embodiment of the present disclosure.

FIG. 49 shows a schematic diagram of the relationship between the application side and the UI framework side involved in the "linkage" animation effect capability or function according to an embodiment of the present disclosure.

FIG. 50 shows a schematic diagram of a specific description of three ways of implementing the “linkage” animation effect capability or function according to an embodiment of the present disclosure.

Detailed ways

Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but rather are provided for the purpose of A more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes, and are not intended to limit the protection scope of the present disclosure.

Some example implementations of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although some example implementations of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited by the example implementations set forth herein. Rather, these implementations are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

As used herein, the term "including" and variations thereof mean open-ended inclusion, ie, "including but not limited to". The term "or" means "and/or" unless specifically stated otherwise. The term "based on" means "based at least in part on". The terms "embodiments" and "some embodiments" mean "at least some embodiments." The terms "first", "second", etc. are used for description to distinguish different objects, etc., and do not represent the order of precedence, nor do they limit the "first" and "second" to be different types.

As used herein, the term "UI" refers to the interface through which the user interacts with the application or operating system and exchanges information, which enables the conversion between the internal form of the information and the form acceptable to the user. For example, the UI of an application is source code written in a specific computer language such as java, extensible markup language (XML), etc. The UI source code is parsed and rendered on the electronic device, and finally presented as content that the user can recognize , such as images, text, buttons and other UI elements.

In some embodiments, the attributes and content of UI elements in the UI are defined by tags or nodes. For example, in XML, the UI elements contained in the UI are specified by nodes such as <Textview>, <ImgView>, and <VideoView>. A node corresponds to a UI element or attribute in the UI. After parsing and rendering, the node is presented as user-visible content. In addition, many applications, such as hybrid applications, often contain web pages in their UI. A web page can be understood as a special UI element embedded in the UI of an application. A web page is source code written in a specific computer language, such as hypertext markup language (HTML), cascading style sheets (cascading style sheets) , CSS), java script (JavaScript, JS), etc., the web page source code can be loaded and displayed as user-identifiable content by a browser or a web page display component similar in function to a browser. The specific content contained in a web page is also defined by tags or nodes in the source code of the web page. For example, HTML defines the elements and attributes of web pages through <p>, <img>, <video>, and <canvas>.

The term "UI element" as used herein includes, but is not limited to: window, scrollbar, tableview, button, menu bar, text box , Navigation bar, toolbar (toolbar), image (image), static text (tatictext), widget (Widget) and other visual UI elements.

In some processes described in the embodiments of the present disclosure, multiple operations or steps appear in a specific order, but it should be understood that these operations or steps may not be performed in accordance with the order in which they appear in the embodiments of the present disclosure Or in parallel, the sequence number of the operation is only used to distinguish different operations, and the sequence number itself does not represent any execution order. Additionally, the flows may include more or fewer operations, and the operations or steps may be performed sequentially or in parallel, and the operations or steps may be combined.

In mobile operating systems such as Android and iOS, animations are essentially real-time display of user interface UI or UI elements based on refresh rate. Due to the human vision persistence principle, the user feels that the picture is moving. The animation transitions from the initial state of the animation to the final state of the animation after the animation time has elapsed. During this transformation, the animation can be controlled by the animation type and animation transformation form. For example, animation types may include displacement animations, rotation animations, scale animations, and transparency animations, among others. The animation transformation form can be controlled by controllers such as interpolators and estimators. Such a controller can be used to control the speed at which the animation is transformed during animation time.

However, traditionally, animation is only a combination of simple animation effects, which makes the animation effect single, does not conform to the laws of physics, and does not consider real usage scenarios and user usage habits.

To this end, an embodiment of the present disclosure proposes a new solution for displaying a graphical interface. The embodiments of the present disclosure relate to the linkage of UI elements in the UI on animation effects, including drag linkage, depth linkage, and pressure linkage. In linkage, the manipulated target UI element can affect other UI elements that are not manipulated. Specifically, triggering the animation effect of the target UI element may jointly trigger the animation effect of one or more other UI elements, or even other UI elements in the entire UI.

Thereby, the connection between the animation effects of different UI elements can be strengthened, and the relationship between the individual UI elements can be highlighted. Compared with the traditional animation in which the animation effect is single and each UI element is independent and unrelated, the embodiments of the present disclosure can make the animation effect more in line with the laws of physics, and take into account the real usage scenarios and user usage habits, so that it can significantly improve the performance of the animation. Improve user experience.

Some example embodiments of the present disclosure will be described below with reference to FIGS. 1A through 46 .

FIG. 1A shows a schematic diagram of a hardware structure of an electronic device 100 that can implement embodiments of the present disclosure. As shown in FIG. 1 , the electronic device 100 may include a processor 110 , an external memory interface 120 , an internal memory 121 , a universal serial bus (USB) interface 130 , a charging management module 140 , a power management module 141 , and a battery 142 , Antenna 1, Antenna 2, Mobile Communication Module 150, Wireless Communication Module 160, Audio Module 170, Speaker 170A, Receiver 170B, Microphone 170C, Headphone Interface 170D, Sensor Module 180, Key 190, Motor 191, Indicator 192, Camera 193 , a display screen 194, and a subscriber identification module (subscriber identification module, SIM) card interface 195 and the like. The sensor module 180 may include a pressure sensor 180A, a gyro sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, and an ambient light sensor 180L, bone conduction sensor 180M, etc.

It should be understood that the structures shown in the embodiments of the present disclosure do not constitute a specific limitation on the electronic device 100 . In other embodiments of the present disclosure, the electronic device 100 may include more or fewer components than shown, or combine some components, or separate some components, or different component arrangements. 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, for example, 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), controller, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural-network processing unit (neural-network processing unit, NPU), etc. Wherein, different processing units may be independent devices, or may be integrated in one or more processors. The controller can generate an operation control signal according to the instruction operation code and timing signal, and complete the control of fetching and executing instructions.

A memory may also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in processor 110 is cache memory. This memory may hold instructions or data that have just been used or recycled by the processor 110 . If the processor 110 needs to use the instruction or data again, it can be called directly from the memory. Repeated accesses are avoided and the latency of the processor 110 is reduced, thereby increasing the efficiency of the system.

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

The I2C interface is a bidirectional synchronous serial bus that includes a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 110 may contain multiple sets of I2C buses. The processor 110 can be respectively coupled to the touch sensor 180K, the charger, the flash, the camera 193 and the like through different I2C bus interfaces. For example, the processor 110 can couple the touch sensor 180K through an I2C interface, so that the processor 110 and the touch sensor 180K communicate with each other through the I2C bus interface, so as to realize the touch function of the electronic device 100 .

The I2S interface can be used for audio communication. In some embodiments, the processor 110 may contain multiple sets of I2S buses. The processor 110 may be coupled with the audio module 170 through an I2S bus to implement communication between the processor 110 and the audio module 170 . In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 through the I2S interface, so as to realize the function of answering calls through a Bluetooth headset.

The PCM interface can also be used for audio communications, sampling, quantizing, and encoding analog signals. In some embodiments, the audio module 170 and the wireless communication module 160 may be coupled through a PCM bus interface. In some embodiments, the audio module 170 can also transmit audio signals to the wireless communication module 160 through the PCM interface, so as to realize the function of answering calls through the Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.

The UART interface is a universal serial data bus used for asynchronous communication. The bus may be a bidirectional communication bus. It converts the data to be transmitted between serial communication and parallel communication. In some embodiments, a UART interface is typically used to connect the processor 110 with the wireless communication module 160 . For example, the processor 110 communicates with the Bluetooth module in the wireless communication module 160 through the UART interface to implement the Bluetooth function. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 through the UART interface, so as to realize the function of playing music through the Bluetooth headset.

The MIPI interface can be used to connect the processor 110 with peripheral devices such as the display screen 194 and the camera 193 . MIPI interfaces include camera serial interface (CSI), display serial interface (DSI), etc. In some embodiments, the processor 110 communicates with the camera 193 through a CSI interface, so as to realize the photographing function of the electronic device 100 . The processor 110 communicates with the display screen 194 through the DSI interface to implement the display function of the electronic device 100 .

The GPIO interface can be configured by software. The GPIO interface can be configured as a control signal or as a data signal. In some embodiments, the GPIO interface may be used to connect the processor 110 with the camera 193, the display screen 194, the wireless communication module 160, the audio module 170, the sensor module 180, and the like. The GPIO interface can also be configured as an I2C interface, an I2S interface, a UART interface, a MIPI interface, and the like.

The USB interface 130 is an interface that conforms to the USB standard specification, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type C interface, and the like. The USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transmit data between the electronic device 100 and peripheral devices. It can also be used to connect headphones to play audio through the headphones. The interface can also be used to connect other electronic devices, such as AR devices.

It can be understood that the interface connection relationship between the modules illustrated in the embodiments of the present disclosure is only a schematic illustration, and does not constitute a structural limitation of the electronic device 100 . In other embodiments of the present disclosure, the electronic device 100 may also adopt different interface connection manners in the foregoing embodiments, or a combination of multiple interface connection manners.

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

The power management module 141 is used for connecting the battery 142 , the charging management module 140 and the processor 110 . The power management module 141 receives input from the battery 142 and/or the charging management module 140, and supplies power to the processor 110, the internal memory 121, the display screen 194, the camera 193, the wireless communication module 160, and the like. The power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle times, battery health status (leakage, impedance). In some 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 charging management module 140 may also be provided 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, the modulation and demodulation processor, the baseband processor, and the like. Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 may be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, the antenna 1 can be multiplexed as a diversity antenna of the 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 wireless communication solution including 2G/3G/4G/5G/6G etc. applied on the electronic device 100 . The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), and the like. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, filter and amplify the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and then turn it into an electromagnetic wave for radiation through the antenna 1 . In some embodiments, at least part of the functional modules of the mobile communication module 150 may be provided in the processor 110 . In some embodiments, at least part of the functional modules of the mobile communication module 150 may be provided in the same device as at least part of the modules of the processor 110 .

The modem processor may include a modulator and a demodulator. Wherein, the modulator is used to modulate the low frequency baseband signal to be sent into a medium and high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low frequency baseband signal. Then the demodulator transmits the demodulated low-frequency baseband signal to the baseband processor for processing. The low frequency baseband signal is processed by the baseband processor and passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to the speaker 170A, the receiver 170B, etc.), or displays an image or video through the display screen 194 . In some embodiments, the modem processor may be a stand-alone device. In other embodiments, the modem processor may be independent of the processor 110, and may be provided in the same device as the mobile communication module 150 or other functional modules.

The wireless communication module 160 may provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellites Wireless communication solutions such as global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared technology (IR). The wireless communication module 160 may be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2 , frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110 . The wireless communication module 160 can also receive the signal to be sent from the processor 110 , perform frequency modulation on it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2 .

In some embodiments, the antenna 1 of the electronic device 100 is coupled with the mobile communication module 150, and the antenna 2 is coupled with the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technologies may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), broadband Code Division Multiple Access (WCDMA), Time Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), 5G and subsequent evolution standards, BT, GNSS, WLAN, NFC, FM, and/or IR technologies, etc. GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), Beidou navigation satellite system (BDS), quasi-zenith satellite system (quasi- zenith satellite system, QZSS) and/or satellite based augmentation systems (SBAS).

The electronic device 100 implements a display function 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 screen 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 alter display information.

Display screen 194 is used to display images, videos, and the like. Display screen 194 includes a display panel. In some embodiments, the electronic device 100 may include one or N display screens 194 , where N is a positive integer greater than one.

The electronic device 100 may implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, and the like. The ISP is used to process the data fed back by the camera 193 . For example, when taking a photo, the shutter is opened, the light is transmitted to the camera photosensitive element through the lens, the light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing, and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on image noise, brightness, and skin tone. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, the ISP may be provided in the camera 193 .

The camera 193 is used to capture still images or video. The object is projected through the lens to generate an optical image onto the photosensitive element. The photosensitive element may be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to the ISP to convert it into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. DSP converts digital image signals into standard RGB, YUV and other formats of image signals. In some embodiments, the electronic device 100 may include 1 or N cameras 193 , where N is a positive integer greater than 1.

A digital signal processor is used to process digital signals, in addition to processing digital image signals, it can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the energy of the frequency point, and 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 can play or record videos of various encoding formats, for example, moving picture experts group (moving picture experts group, MPEG) 1, MPEG2, MPEG3, MPEG4, and so on.

The NPU is a neural-network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transfer mode between neurons in the human brain, it can quickly process the input information, and can continuously learn by itself. Applications such as intelligent cognition of the electronic device 100 can be implemented through the NPU, such as image recognition, face recognition, speech recognition, text understanding, and the like.

The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100 . The external memory card communicates with the processor 110 through the external memory interface 120 to realize the data storage function. For example, save files such as music, video, etc. in an external memory card.

Internal memory 121 may be used to store computer executable program code, which includes instructions. The internal memory 121 may include a storage program area and a storage data area. The storage program area can store an operating system, an application program required for at least one function (such as a sound playback function, an image playback function, etc.), and the like. The storage data area may store data (such as audio data, phone book, etc.) created during the use of the electronic device 100 and the like. In addition, the internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, universal flash storage (UFS), and the like. The processor 110 executes various functional applications and data processing of the electronic device 100 by executing instructions stored in the internal memory 121 and/or instructions stored in a memory provided in the processor.

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 playback, recording, etc.

The SIM card interface 195 is used to connect a SIM card. The SIM card can be contacted and separated from the electronic device 100 by inserting into the SIM card interface 195 or pulling out from the SIM card interface 195 . The electronic device 100 may support 1 or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support Nano SIM card, Micro SIM card, SIM card and so on. Multiple cards can be inserted into the same SIM card interface 195 at the same time. The types of the plurality of cards may be the same or different. The SIM card interface 195 can also be compatible with different types of SIM cards. The SIM card interface 195 is also compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to implement functions such as call and data communication. In some embodiments, the electronic device 100 employs an eSIM, an embedded SIM card. The eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100 .

The software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. The embodiments of the present disclosure take a mobile operating system with a layered architecture as an example to illustrate the software structure of the electronic device 100 as an example.

FIG. 1B is a schematic diagram of a software structure of the electronic device 100 according to an embodiment of the present disclosure. The layered architecture divides the software into several layers, and each layer has a clear role and division of labor. Layers communicate with each other through software interfaces. In some embodiments, the operating system may be divided into four layers, which are, from top to bottom, an application layer, an application framework layer, an operating system runtime and system library, and a kernel layer.

The application layer can include a series of application packages. As shown in FIG. 1B , the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and short message.

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

As shown in FIG. 1B, the application framework layer may include window managers, content providers, view systems, telephony managers, resource managers, notification managers, and the like. A window manager is used to manage window programs. The window manager can get the size of the display screen, determine whether there is a status bar, lock the screen, take screenshots, etc. Content providers are used to store and retrieve data and make these data accessible to applications. The data may include video, images, audio, calls made and received, browsing history and bookmarks, phone books, and the like. The view system includes visual controls, such as controls that display text, controls that display images, and so on. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface that includes an icon for an SMS notification may include a view for displaying text and a view for displaying images. The phone manager is used to provide the communication function of the electronic device 100 . For example, the management of call status (including connecting, hanging up, etc.). The resource manager provides various resources for the application, such as localized strings, icons, images, layout files, video files, etc. The notification manager enables applications to display notification information in the status bar, which can be used to convey notification-type messages, and can disappear automatically after a brief pause without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also display notifications in the status bar at the top of the system in the form of graphs or scroll bar text, such as notifications of applications running in the background, and notifications on the screen in the form of dialog windows. For example, text information is prompted in the status bar, a prompt sound is issued, the electronic device vibrates, and the indicator light flashes.

With continued reference to FIG. 1B , the operating system runtime includes core libraries and virtual machines. The operating system runtime is responsible for the scheduling and management of the operating system. The core library consists of two parts, one is the function functions that the Java language needs to call, and the other is the core library of the operating system. The application layer and the application framework layer run in virtual machines. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, safety and exception management, and garbage collection. A system library can include multiple functional modules. For example, surface manager (surface manager), media library (Media Libraries), 3D graphics processing library (eg OpenGL ES), 2D graphics engine (eg: SGL) and so on.

The Surface Manager is used to manage the display subsystem and provides a fusion of 2D and 3D layers for multiple applications. The media library supports playback and recording of a variety of commonly used audio and video formats, as well as still image files. The media library can support multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc. The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing. 2D graphics engine is a drawing engine for 2D drawing.

The kernel layer is the layer between hardware and software. The kernel layer includes at least display drivers, camera drivers, audio drivers, and sensor drivers.

FIG. 2 shows a block diagram of another electronic device 200 in which embodiments of the present disclosure may be implemented. As shown in FIG. 2, electronic device 200 may be in the form of a general-purpose computing device. Components of electronic device 200 may include, but are not limited to, one or more processors or processing units 210, memory 220, storage devices 230, one or more communication units 240, one or more input devices 250, and one or more output devices 260. The processing unit 210 may be an actual or virtual processor and can perform various processes according to programs stored in the memory 220 . In a multiprocessor system, multiple processing units execute computer-executable instructions in parallel to increase the parallel processing capability of the electronic device 200 .

Electronic device 200 typically includes multiple computer storage media. Such media can be any available media that can be accessed by electronic device 200, including but not limited to volatile and nonvolatile media, removable and non-removable media. Memory 220 may be volatile memory (eg, registers, cache, random access memory (RAM)), non-volatile memory (eg, read only memory (ROM), electrically erasable programmable read only memory (EEPROM) , Flash) or some combination of them. Storage device 230 may be removable or non-removable media, and may include machine-readable media, such as flash drives, magnetic disks, or any other media that may be capable of storing information and/or data (eg, training data for training). ) and can be accessed within the electronic device 200.

The electronic device 200 may further include additional removable/non-removable, volatile/non-volatile storage media. Although not shown in Figure 2, disk drives may be provided for reading or writing from removable, non-volatile magnetic disks (eg, "floppy disks") and for reading or writing from removable, non-volatile optical disks CD-ROM drive for reading or writing. In these cases, each drive may be connected to a bus (not shown) by one or more data media interfaces. The memory 220 may include a computer program product 225 having one or more program modules configured to perform the object editing methods or processes of embodiments of the present disclosure.

The communication unit 240 enables communication with other computing devices through a communication medium. Additionally, the functions of the components of the electronic device 200 may be implemented in a single computing cluster or multiple computing machines capable of communicating through a communication link. Accordingly, electronic device 200 may operate in a networked environment using logical connections to one or more other servers, network personal computers (PCs), or another network node.

Input device 250 may be one or more input devices, such as a mouse, keyboard, trackball, and the like. Output device 260 may be one or more output devices, such as a display, speakers, printer, and the like. In an embodiment of the present disclosure, the output device 260 may include a touch screen with a touch sensor, which may receive a user's touch input. The electronic device 200 may also communicate with one or more external devices (not shown) through the communication unit 240 as needed, such as a storage device, a display device, etc., with one or more devices that allow a user to interact with the electronic device 200 communicate, or with any device (eg, network card, modem, etc.) that enables electronic device 200 to communicate with one or more other computing devices. Such communication may be performed via an input/output (I/O) interface (not shown).

It should be understood that the electronic device 100 shown in FIG. 1 and the electronic device 200 shown in FIG. 2 above are merely two example electronic devices capable of implementing one or more embodiments of the present disclosure, and should not constitute a any limitations on the functionality and scope of the described embodiments.

Drag linkage

Currently, for more and better displayed information, the screens of electronic devices are getting larger and larger, the layout of UI on the screen is getting more and more complex, and UI elements are more and more different in size and shape. In this case, there are various irregular UI elements arranged in various irregular layouts in the UI. For example, there are various irregular UI elements such as controls, cards, pictures, and covers in the negative screen, control center, application market, and gallery of a smartphone.

Traditionally, there is no linkage of animation effects between various irregular UI elements. That is, triggering an animation of a target UI element does not jointly trigger an animation of one or more other UI elements. The animation effects of each UI element are independent and unconnected. Therefore, the traditional animation effects are single and rigid, and cannot reflect the relationship between UI elements.

The embodiments of the present disclosure relate to the linkage of animation effects of UI elements in the UI when dragging, which is also referred to as drag linkage. In drag linkage, the dragged target UI element can affect other UI elements that are not dragged. Specifically, in the drag linkage, triggering the animation effect of the target UI element may jointly trigger the animation effect of one or more other UI elements, or even other UI elements in the entire UI. For example, in drag linkage, when dragging a target UI element, in addition to the target UI element moving with an animation effect along with the drag, other UI elements can also move with a corresponding animation effect, thereby visually presenting the linkage drag.

Some example embodiments of drag linkage will be described below with reference to FIGS. 3A-19B .

3A-3C show schematic diagrams of example UIs 300A-300C in accordance with some embodiments of the present disclosure. In some embodiments, UI elements may have irregular sizes and shapes. For example, as shown in FIG. 3A, UI 300A may include multiple UI elements, such as UI elements 1-13, where

UI elements

1, 2, 4, and 5 have different sizes and shapes. Further, the UI may also have irregular parts. For example, as shown in FIG. 3B , the right side of

UI elements

16 and 18 in UI 300B is vacant, that is, there is no UI element. However, the embodiments of the present disclosure are equally applicable to regular layouts, sizes and shapes. For example, as shown in Figure 3C, UI 300C has a regular layout, and UI elements 25-40 in UI 300C all have the same size and shape. It should be understood that the embodiments of the present disclosure are applicable to any suitable regular or irregular layout, size and shape.

UI elements in the UI can be dragged. For example, the user may drag the UI element when the user desires to move the UI element. As an example, a user may drag a UI element when the user desires to change the position of the UI element in the UI, merge the UI element with another UI element, put the UI element into a toolbar or trash, or the like. In the event that a drag at the UI element is detected, the UI element can be moved with an animation effect to visually present the drag action. As mentioned above, in drag linkage, the dragged target UI element can affect other UI elements that are not dragged. Specifically, when the target UI element is dragged, in addition to the target UI element moving with an animation effect along with the drag, other UI elements can also move with a corresponding animation effect, thereby visually presenting a linked drag.

FIG. 4 shows a schematic diagram of an example drag linkage 400 in accordance with some embodiments of the present disclosure. As shown in FIG. 4 , in the event that a drag at UI element 3 is detected, UI element 3 may move with an animation effect to visually present the drag action. In addition to UI element 3 moving with an animation effect along with the drag,

other UI elements

2 and 4 can also move with a corresponding animation effect, thereby visually presenting a linked drag. For clarity, Figure 4 only shows the coordinated movement of UI elements 2-3. It should be understood that linked movement can occur at any at least two UI elements in any UI, for example, at any at least two UI elements in UIs 300A-300C.

Specifically, a drag at UI element 3 is detected at time T01, causing UI element 3 and

other UI elements

2 and 4 to move. At time T02, the distance between UI element 3 and UI element 4 located in the dragging direction becomes smaller. Spacing may represent the distance between corresponding reference points of two UI elements. In some embodiments, the center point of the UI element may be determined as the fiducial point of the UI element. Alternatively, the spacing may represent the distance between adjacent boundaries of two UI elements. As shown in FIG. 4 , in some embodiments, UI element 3 may even cover at least a portion of UI element 4 . On the other hand, the distance between UI element 3 and UI element 2 located in the opposite direction of the dragging direction becomes larger. This means that UI element 3 is moving faster than

UI elements

2 and 4. At time T03, the distance between UI element 3 and UI element 4 located in the drag direction becomes larger, and the distance from UI element 2 located in the opposite direction to the drag direction becomes smaller. This means that UI element 3 moves at a lower speed than

UI elements

2 and 4. At time T04, UI element 3 and

other elements

2 and 4 move to a predetermined distance, thereby stopping the movement. In some embodiments, the predetermined distance may be determined based on a friction force model. Hereinafter, the manner of determining the distance based on the friction force model will be described in detail, and thus the description thereof is omitted here.

The example of the linkage movement of the UI elements has been described above, and the principle of the movement of the UI elements will be described below.

Movement of UI elements may be controlled by friction factors, linkage factors, catch-hand factors, catch-hand ratio factors, release rebound factors, and/or inertial rebound factors. For example, the friction factor can control UI elements to stop moving. Linkage factors can control the animation of other UI elements. The follow factor can control the follow movement of UI elements, such as the follow movement of UI elements when dragging without crossing the boundary. The follow-to-hand ratio factor can control the ratio of the follow-hand movement of the UI element, such as the ratio of the UI element's displacement to the hand's displacement when dragging after crossing the bounds. The release rebound factor can control the reset of UI elements after letting go, for example, the reset of UI elements after dragging and letting go. The inertial rebound factor can control the rebound of UI elements after crossing the boundary. For example, friction factors may not stop the UI element from moving when it moves out of bounds. In this case, the inertial springback factor can control the springback of UI elements after they cross the bounds.

Hereinafter, the friction force model associated with the friction force factor and the elastic force model associated with the linkage factor will be described in detail. In general, the friction model can be used to determine the distance that the UI element will move, thereby determining the source and destination locations of the UI element's movement. In addition, the spring parameters of other UI elements that are moved in linkage can be determined based on the spring parameters (eg, elasticity coefficient, damping coefficient) of the dragged UI element, using a conduction method that will be described in detail below, so that the dragged UI can During the movement of the elements and the UI elements that are moved in linkage, each UI element is controlled to move according to the elastic force model based on the respective spring parameters of each UI element.

The friction model can be used to determine how far a UI element will move, such as how far a UI element will move after letting go or slipping. This distance can be determined by equations (1) and (2) as follows:

where f _friction is the friction force, which is configurable by the electronic device or user; t is the moving time; V ₀ is the initial velocity, which is configurable by the electronic device or the user, or obtained by detecting the speed of the user's dragging; V(t) represents the final velocity, since the movement of the UI element will eventually stop, so V(t) is 0; e represents the natural constant; S(t) represents the distance the UI element will move. It should be understood that the constants in the above equations are merely examples, which are electronically or user-settable.

From the above equation, the time t of the movement can be determined by equation (1). Thus, the distance S(t) can be further determined by equation (2). In this way, the distance that the UI element is to be moved can be easily determined. In addition, since various parameters in the equation (eg, friction, initial velocity, etc.) are configurable, it is possible to configure these parameters to affect the distance that UI elements will move, improving animation flexibility and user experience .

Movement of UI elements that conform to the friction model will satisfy the friction model's velocity-time and displacement-time curves. 5A and 5B show schematic diagrams of an example velocity time curve 500A and an example displacement time curve 500B, respectively, of a friction force model according to some embodiments of the present disclosure. As shown in FIGS. 5A and 5B , under the condition of only friction force, the moving speed of the UI element decreases to 0 with time, and the moving distance of the UI element increases with time until the movement stops.

Above, it was described how the friction factor controls UI elements to stop moving. In addition, whether there are restrictions on where UI elements can be moved can also control where UI elements stop moving.

Specifically, in some embodiments, the positions to which UI elements can be moved are not limited. In this case, the distance determined based on the friction model is the distance the UI element will move. However, in some embodiments, the positions to which UI elements can be moved are limited. In other words, UI elements can only be moved to predetermined positions. In this case, although the distance that the UI element will move can be determined based on the friction force model, if the UI element is not located at the predetermined position after moving the distance, the distance that the UI element will move needs to be adjusted so that the UI Elements can be moved to predetermined positions. For example, the UI element can be moved to a predetermined position closest to the stop position determined based on the friction model. Thus, the distance that the UI element is to be moved can be jointly determined based on both the friction model and the predetermined position.

FIG. 6 shows a schematic diagram of an example 600 of restricted and unrestricted mobile locations in accordance with some embodiments of the present disclosure. As shown in FIG. 6 , in the case where the position to which the UI element can be moved is limited, the UI element can only be moved from the source position 620 on the screen 610 to the predetermined position 630 . In contrast, UI elements can be moved from source position 620 on screen 610 to any position 640 without limitation to the position to which the UI element can be moved.

Further, in some embodiments, the moving range of the UI element may also be limited. UI elements that move beyond this range will be considered out of bounds. The range can be any suitable range. For example, the range may be a distance from the screen boundary that is less than a predetermined proportion of the screen size or a range of predetermined pixels (such as 10% or 1000 pixels), or the distance from the source location of the UI element to the destination location is less than a predetermined proportion of the screen size. or a range of predetermined pixels (such as 50% or 10000 pixels). Thus, the distance that the UI element is to be moved can also be determined based on the range.

The friction force model is described in detail above, and the elastic force model is further described below.

The displacement versus time curve of the movement of the UI element may be an elastic force curve conforming to an elastic force model. Since displacement and time can determine velocity, the velocity of UI elements' movement also follows the elastic force model. For this reason, it can be considered that the movement of UI elements can simulate the motion law of springs. It should be understood that, in order to describe the elastic force model here, a curve of the displacement of the UI element moving with time is described as an elastic force curve. However, the displacement versus time curve of the movement of the UI element may also be any suitable predefined curve, such as a Bezier curve.

The elastic force model can be based on the damped vibration equations (3) and (4) under Hooke's law:

f = ma (3),

where f represents the force on the spring during vibration (ie, moving), which can be electronically or user-configurable; a represents the acceleration of the movement; t represents the time of movement; k represents the spring coefficient of the spring; x represents the spring The deformation value of ; g represents the damping coefficient of the spring; m represents the mass of the UI element, where the size of the UI element can be equivalent to the mass of the UI element.

The coefficient of elasticity is the amount of force required for a unit of deformation of the spring. The larger the elastic coefficient k, the shorter the time for the spring to return from the maximum amplitude to the equilibrium position, and vice versa. The elasticity coefficient k is electronically or user configurable. In some embodiments, the value range of the elastic coefficient k may be 1-999, and the suggested value range of the elastic coefficient k may be 150-400.

The damping coefficient is a quantitative representation of the damping force (such as fluid resistance, friction, etc.) of the spring during the vibration process. The above damping force can gradually reduce the amplitude of the spring until it stops at the equilibrium position. The larger the damping coefficient, the easier it is for the spring to stop at the equilibrium position, and vice versa. The damping coefficient g is electronically or user configurable. In some embodiments, the value range of the damping coefficient g may be 1-99.

Furthermore, it should be understood that the distance S(t) that the UI element is to be moved can be determined based on the friction force model, as described above. In the case where the UI element moves a distance S(t), S(t) can be regarded as the amount of deformation of the spring. Therefore, S(t) is equal to x.

The elastic force model has three damping states, namely critical damping state, under damping state and over damping state. The critical damping conforms to the following equation (5):

g ² =4×m×k (5),

Where g is the damping coefficient of the spring; m is the size of the UI element; k is the spring's elastic coefficient.

Taking the critical damping as the benchmark, if the damping is greater than the critical damping, it is an over-damped state, and if the damping is less than the critical damping, it is an under-damping state.

Under different damping states, the displacement time curves of UI elements are different. 7A-7C show schematic diagrams of examples of plots 700A-700C of spring deflection amount x versus time t for a critically damped state, an under-damped state, and an over-damped state, respectively, according to some embodiments of the present disclosure. As shown in Fig. 7A, in the critical damping state, the spring stops moving after returning to the equilibrium position with the smoothest speed and the shortest time, and no longer oscillates. As shown in Fig. 7B, in the under-damped state, the spring slowly reduces the amplitude gradually through multiple oscillations, and finally returns to the equilibrium position. As shown in Fig. 7C, in the overdamped state, the spring hardly vibrates, and the amplitude gradually decreases, reaching the equilibrium position.

As described above, the displacement versus time curve of the movement of the UI element may be an elastic force curve conforming to an elastic force model. Therefore, it can be considered that the movement of the UI element can simulate the motion law of the spring, that is, the change law of the displacement of the UI element can simulate the change law of the spring deformation. By adjusting the damping coefficient and/or the elastic coefficient, the change law of the displacement of the UI element can be adjusted, so that the UI element simulates the motion law of the spring in a critical damping state, over damping or under damping state.

Further, as described above, the spring parameters of other UI elements that are moved in linkage can be determined based on the spring parameters (such as elasticity coefficient, damping coefficient) of the dragged UI element, using a conduction method that will be described in detail below, so as to During the movement of the dragged UI element and the UI element that is moved in linkage, each UI element is controlled to move according to the elastic force model based on its respective spring parameters. In this way, the dragged UI elements and the UI elements that are moved in linkage can simulate the motion law of springs with different spring parameters, so that the interval between UI elements in the drag direction decreases first and then recovers (similar to a spring First compress and then restore), and the interval between UI elements in the opposite direction of the dragging direction first increases and then restores (similar to the animation effect of a spring stretching and then restoring), which increases the dynamic feedback to the user's dragging action.

The animation effect of a UI element that is moved in linkage is determined based on the animation effect of the dragged UI element moving and the distance between the dragged UI element and the UI element that is moved in linkage. Since the animation effect of the UI element moving in linkage changes with the distance, it can also be considered that the animation effect of its movement is conducted with the distance. In some embodiments, the conduction may be non-linear conduction. Alternatively, the conduction can also be linear conduction.

For example, in the case of non-linear conduction, the animation effect of the movement of UI elements that move in conjunction can be determined by the following equation (6):

x ⁿ =x×(n+1) ^-0.18×g (6),

where x ⁿ represents the animation effect of the UI element moving in linkage; x represents the animation effect of the UI element being dragged; n represents the distance between the UI element being dragged and the UI element that is moved in linkage; g represents the conduction coefficient , when the conduction coefficient is 0, the animation effect of the UI element moving in linkage is the same as the animation effect of the UI element being dragged; the constant in equation (6) is only an example, which is configurable by the electronic device or user of.

In the case that the time-varying curve of the movement of the UI element is an elastic force curve, the animation effect of the movement may be controlled by a damping coefficient and/or an elastic coefficient. Thus x may be determined based on at least one of a damping coefficient and a spring coefficient.

For example, x can be the ratio of the elastic coefficient to the damping coefficient of the UI element being dragged. In this case, the ratio of the elastic coefficient to the damping coefficient of the dragged UI element is transmitted to the UI element that moves in conjunction with the distance n, thereby obtaining the ratio x ⁿ of the elastic coefficient to the damping coefficient of the UI element that moves in conjunction. Thereby, the animation effect of the dragged UI element moving can be transferred to the UI element that is moved in conjunction based on the distance. The larger the ratio of elastic coefficient to damping coefficient, the weaker the correlation between the movement of UI elements, the greater the difference in spring characteristics and movement between UI elements, which can be considered as "softer" springs. Conversely, the smaller the ratio of the elastic coefficient to the damping coefficient, the stronger the correlation between the movement of UI elements, and the smaller the difference in spring characteristics and movement between UI elements, which can be considered as a “harder” spring.

It should be understood that the ratio of the elastic coefficient to the damping coefficient of the UI element being dragged by x is merely an example. x can be any suitable factor. As another example, x may be the elasticity coefficient of the UI element being dragged. As yet another example, x may also be the damping coefficient of the UI element being dragged.

Furthermore, although the elastic force curve is described in detail above, the animation effect of UI element movement may follow any suitable predetermined curve, such as a Bezier curve. Depending on the order of the Bezier curve, the Bezier curve may have control points corresponding to the order. For example, in the case of a second-order Bezier curve, the Bezier curve can have two control points. Similarly, in the case of a first-order Bezier curve, the Bezier curve can have one control point, and in the case of a third-order Bezier curve, the Bezier curve can have three control points, and so on . In the case where the time-varying curve of the movement of the UI element is a Bezier curve, the animation effect of the movement can be controlled by the coordinates of at least one of at least one control point of the Bezier curve. For example, in the case of a second-order bezier curve, the animation of the movement can be controlled by one or both of the two control points of the second-order bezier curve. Thus, x may be determined based on the coordinates of at least one of the at least one control point.

The nonlinear conduction is described in detail above. In the case of linear conduction, the animation effect of the UI element moving in linkage can be determined by the following equation (7):

xn=xg× ⁿ (7),

where x ⁿ represents the animation effect of the UI element moving in linkage; x represents the animation effect of the UI element being dragged; n represents the distance between the UI element being dragged and the UI element that is moved in linkage; g represents the conduction coefficient , when the conduction coefficient is 0, the animation effect of the UI element moving in linkage is the same as the animation effect of the UI element being dragged.

Similar to nonlinear conduction, in the case where the time-varying displacement curve of the UI element is an elastic force curve, the animation effect of the movement can be controlled by a damping coefficient and/or an elastic coefficient. Thus x may be determined based on at least one of a damping coefficient and a spring coefficient. In the case where the time-varying curve of the movement of the UI element is a Bezier curve, the animation effect of the movement can be controlled by the coordinates of at least one of at least one control point of the Bezier curve. Thus, x may be determined based on the coordinates of at least one of the at least one control point.

In the above, the principle of drag linkage is described in detail. In the following, the process of controlling UI elements to perform linked movement using the drag linkage principle will be further described.

FIG. 8 shows a flowchart of a graphical interface display method 800 according to an embodiment of the present disclosure. It should be understood that the method 800 may be performed by the electronic device 100 described above with reference to FIG. 1 or the electronic device 200 described with reference to FIG. 2 . Method 800 is described herein with reference to UI 300A of Figure 3A. It should be understood, however, that UI 300A is merely an example, and method 800 may be applied to any suitable interface, including but not limited to UIs 300B-300C.

At block 810, the M user interface UI elements are displayed on the screen of the electronic device. M is a positive integer greater than 1. For example, referring to FIG. 9 , the M UI elements may be UI elements 1 to 13 .

At block 820, a drag at a first UI element of the M UI elements is detected. For example, the first UI element may be UI element 5 . The drag on the first UI element will cause the first UI element to move with an animation effect to present the drag effect.

At block 830, in response to the drag on the first UI element, each of the N UI elements on the screen is moved with a corresponding animation effect. N is a positive integer between 1 and M-1. Thereby, interlocking drag is visually instructed.

In some embodiments, the drag linkage can act on all UI elements on the screen. In this case, M-1 UI elements other than the first UI element among the M UI elements may be determined as N UI elements. Alternatively, the drag linkage may only act on some UI elements on the screen. In this case, the influence area of the first UI element may be determined based on the size of the first UI element, and the UI elements within the influence area among the M UI elements may be determined as N UI elements. For example, the larger the size of the first UI element, the larger its area of influence may be. Alternatively, the area of influence may also be reduced in size, and the present disclosure is not limited herein. For example, the area of influence may be a circle with a predetermined radius centered on the reference point of the first UI element. It should be understood that the area of influence may be any suitable area having any shape, such as a rectangle, diamond, etc. having a predetermined size. The area of influence may be configurable by the electronic device and the user, and the present disclosure is not limited herein.

Additionally, in some embodiments, UI elements that intersect the area of influence may be considered to be within the area of influence. Alternatively, where the area of influence is a circle with a predetermined radius, the UI element may be considered to be within the area of influence if the distance from the first UI element is less than the predetermined radius of the area of influence.

9 shows a schematic diagram of an example of an area of influence of a UI element according to an embodiment of the present disclosure. As shown in FIG. 9 , since

UI elements

3 , 4 , 7 , and 8 are within the influence area 910 of UI element 5 ,

UI elements

3 , 4 , 7 , and 8 will move in conjunction with UI element 5 . In addition, since

UI elements

1, 2, 6, 9-13 are not within the influence area 910 of UI element 5,

UI elements

1, 2, 6, 9-13 will not move in conjunction with UI element 5.

Referring back to FIG. 8, in order to move the N UI elements with a corresponding animation effect, the distance between the first UI element and each of the N UI elements may be determined. Hereinafter, how to determine the distance between the first UI element and the second UI element among the N UI elements will be described.

In some embodiments, the distances may be divided into a plurality of distance classes according to the range in which the distances lie. For example, the operated UI element itself may be at distance level 0, and the linked UI elements may be at

distance level

1, 2, 3 according to their corresponding distance from the operated UI element... UI elements at the same distance level may be are considered to be the same distance. Therefore, by using the distance level, the linkage of UI elements can be simplified, so that UI elements at the same distance level are linked in the same way, thereby improving the unity and coordination of the linkage. However, it should be understood that in linkage, the distance itself may also be used, thereby allowing UI elements to be more precisely linked. In the following, distance classes are referred to interchangeably as distances.

FIG. 10 shows a schematic diagram of an example 1000 of distance determination according to an embodiment of the present disclosure. As shown in FIG. 10, in some embodiments, a first fiducial point for a first UI element (eg, UI element 5) and a second fiducial point for a second UI element (eg, UI element 2) may be determined. In Figure 10, the reference point of each UI element is indicated by "+". In some embodiments, the center point of the UI element may be determined as the fiducial point of the UI element. Alternatively, the fiducial point of the UI element may be electronically or user-configurable, so that the location of the fiducial point may be any suitable location, and the present disclosure is not limited herein. Thus, the distance between the first reference point and the second reference point can be determined as the distance between the first UI element and the second UI element.

For example, it is assumed that the position coordinates of the first reference point on the screen are (x0, y0), and the position coordinates of the second reference point on the screen are (x1, y1). In this case, the distance can be determined by the following equation (8):

Where n represents the distance, x0 represents the abscissa of the first reference point, y0 represents the ordinate of the first reference point, x1 represents the abscissa of the second reference point, and y1 represents the ordinate of the second reference point.

As shown in Figure 10, the distances between UI element 5 and other UI elements determined in the above manner are as follows: the distance between UI element 5 and itself is 0, the distance between UI element 5 and

UI elements

3, 7, and 8 is 1, and the distance between UI element 5 and itself is 0. The distance between

UI elements

2, 4, 6, 9 is 2, and the distance from UI elements 1, 10-13 is 3.

11A-11C show schematic diagrams of examples 1100A-1100C of distance determination according to embodiments of the present disclosure. As shown in FIG. 11A, in some embodiments, a first reference point for the first UI element may be determined. A plurality of circles having respective radii, such as circles 1110A-1130A, may be determined from the first reference point as the center of the circle. It should be understood that, in addition to a circle, any other suitable shapes with respective sizes can also be determined with the first reference point as the center, such as rectangles, diamonds, etc., and the present disclosure is not limited herein.

For example, as shown in FIG. 11B, in some embodiments, a first reference point for the first UI element may be determined. A plurality of rectangles having respective dimensions, eg, rectangles 1110B-1120B, may be determined from the first reference point as the center. Additionally, as shown in FIG. 11C, in some embodiments, a first reference point for the first UI element may be determined. A plurality of diamonds having respective dimensions, such as rectangles 1110C-1140C, may be determined from the first reference point as the center.

In some embodiments, the radii of the plurality of circles may increase by a predetermined size or ratio. Alternatively, the radii of the plurality of circles may be electronically or user configurable, and the present disclosure is not limited herein.

Thus, from among the plurality of circles, the circle intersecting the second UI element can be determined. From this, the radius of the intersecting circles can be determined as the distance. In some embodiments, if there is more than one circle that intersects the second UI element, from these circles, a target circle that intersects the second UI element and has the smallest radius can be determined. Further, in some embodiments, if no circle intersects the second UI element, the circle closest to the second UI element may be used as the target circle, whereby the radius of the target circle may be determined as the distance.

As shown in FIG. 11 , the distance between UI element 5 and other UI elements determined in the above manner is as follows: the distance between UI element 5 and itself is 0. Since the circle with the smallest radius that intersects

UI elements

3, 4, 7, 8 is circle 1110, the distance between

UI elements

3, 4, 7, 8 and UI element 5 is 1. Since circle 1120 intersects

UI elements

2, 6, 9, the distance between

UI elements

2, 6, 9 and UI element 5 is 2. Also, since circle 1130 intersects UI elements 1, 10-13, the distance between UI elements 1, 10-13 is 3.

FIG. 12 shows a schematic diagram of an example 1200 of distance determination according to an embodiment of the present disclosure. As shown in FIG. 12, in some embodiments, the horizontal spacing between the first UI element and the second UI element may be determined, and/or the vertical spacing between the first UI element and the second UI element may be determined. In some embodiments, the lateral spacing may represent the sum of the lengths of one or more lateral spacings between the first UI element and the second UI element. Horizontal spacing may represent the spacing between the vertical boundaries of two UI elements on the screen. Similar to horizontal spacing, vertical spacing may represent the sum of the lengths of one or more vertical spacings between the first UI element and the second UI element. Vertical spacing may represent the spacing between the horizontal boundaries of two UI elements on the screen. In the case of an irregular layout, the lengths of the horizontal and vertical spaces between UI elements can be irregular. Furthermore, the lengths of the horizontal and vertical spaces between UI elements may be electronically device or user configurable.

Thus, the distance may be determined based on the lateral spacing and/or the longitudinal spacing. For example, there are two vertical spaces between UI element 5 and UI element 13. Thus, the distance between UI element 5 and UI element 13 may be the sum of the lengths of these two longitudinal intervals. As another example, there is a lateral space between UI element 12 and UI element 13 . Thus, the distance between UI element 12 and UI element 13 may be the length of this lateral separation.

As shown in FIG. 12 , the distances between UI element 5 and other UI elements determined in the above manner are as follows: UI element 5 has a distance of 0 from itself, and distances from UI elements 2-4 and UI elements 6-9. is 1, and the distance from UI elements 1, 10-13 is 2.

FIG. 13 shows a schematic diagram of an example 1300 of distance determination according to an embodiment of the present disclosure. In some embodiments, instead of only taking the intermediate spacing (eg, horizontal spacing, vertical spacing) between UI elements into account in the horizontal spacing and vertical spacing, as shown in FIG. Dimensions take into account horizontal spacing and vertical spacing. As shown in FIG. 13, the horizontal spacing may represent the sum of the lengths of one or more horizontal spacings between the first UI element and the second UI element and the width of one or more intermediate UI elements. The vertical spacing may represent the sum of the lengths of one or more vertical gaps between the first UI element and the second UI element and the height of one or more intermediate UI elements.

Thus, the distance may be determined based on the lateral spacing and/or the longitudinal spacing. For example, there are two vertical spaces and an intermediate UI element 9 between UI element 5 and UI element 13 . Thus, the distance of UI element 5 from UI element 13 may be the sum of the lengths of these two longitudinal intervals and the height of UI element 9 . As another example, there is one lateral space and one intermediate UI element 12 between UI element 11 and UI element 13 . Thus, the distance of UI element 11 from UI element 13 may be the sum of the length of this lateral separation and the width of UI element 12 . Additionally, there is a vertical space between UI element 3 and UI element 5. Thus the distance between UI element 3 and UI element 5 is the length of this longitudinal interval. There are three vertical spaces and two

intermediate UI elements

5 and 7 between UI element 3 and UI element 11 . Therefore, the distance between UI element 3 and UI element 11 is the sum of the length of the three longitudinal intervals and the height of the two

intermediate UI elements

5 and 7 . There is a horizontal space between UI element 3 and UI element 2. So the distance between UI element 3 and UI element 2 is the length of this horizontal separation.

As shown in Figure 13, the distances between UI element 5 and other UI elements determined in the above manner are as follows: the distance between UI element 5 and itself is 0, and the distance between UI elements 2-4 and UI elements 6-9 is 1 and the distance to UI element 1, 10-13 and UI element 5 is 2.

14A and 14B illustrate schematic diagrams of examples 1400A and 1400B of distance determinations in accordance with embodiments of the present disclosure. In some embodiments, in addition to considering the lengths of the horizontal and vertical spacing and the width and height of the intervening UI elements, the operation direction may also be taken into account in the horizontal and vertical spacing. For example, in the case of dragging the first UI element, the operation direction may be the direction of dragging the first UI element. In addition, although the drag linkage scenario is described here, as will be described below, there are also deep linkage scenarios and pressure linkage scenarios. In the depth linkage scene and the pressure linkage scene, the distance determination method considering the operation direction can also be used. Specifically, in the depth linkage scene and the pressure linkage scene, UI elements can be pressed. In the case of pressing the first UI element, although there is no operation direction, the direction from the second UI element to the first UI element (such as the direction from the second reference point to the first reference point) can be regarded as an operation direction, so that the direction of operation is taken into account in the horizontal and vertical spacing.

In this case, the lateral spacing and/or the longitudinal spacing may first be determined using the manner of determining the distance described with reference to FIGS. 12 and 13 . Then, the angle between the operation direction and the horizontal direction and/or the vertical direction can be determined. Thus, the distance in the operation direction can be determined using the principle of trigonometric functions.

In some embodiments, as shown in FIG. 14A , since the horizontal distance, the vertical distance, and the included angle between the operation direction 1410A and the horizontal direction or the vertical direction are known, the trigonometric function principle can be used to determine the distance between the operation direction 1410A and the horizontal direction. distance.

Alternatively, the distance in the operation direction may be determined by selecting one of the horizontal direction and the vertical direction that is closer to the operation direction as the reference direction according to the included angle between the operation direction and the horizontal direction and the vertical direction. For example, as shown in FIG. 14B , since the operation direction 1430B is closer to the vertical direction, the vertical direction can be selected as the reference direction, and based on the longitudinal distance and the angle between the operation direction 1430B and the vertical direction, the principle of trigonometric function is used to determine Distance in operating direction 1430B. As another example, since the operation direction 1420B is closer to the horizontal direction, the horizontal distance in the operation direction 1420B can be determined based on the horizontal spacing and the angle between the operation direction 1420B and the horizontal direction, using the principle of trigonometric functions. Furthermore, the reference direction may be electronically or user-configurable, and the present disclosure is not limited herein. For example, the reference direction may be set to a horizontal direction, a vertical direction or any other suitable direction.

In the above, the distance in the operation direction is determined by using the horizontal distance and the vertical distance. However, as discussed above, the horizontal and vertical spacing may be determined by the size of the intermediate spacing and intermediate UI elements. Therefore, the distance in the manipulation direction can also be determined piecewise for each intermediate interval and intermediate UI element. Specifically, for each intermediate interval and intermediate UI element, the size of the intermediate interval or the intermediate UI element, and the included angle between the operation direction and the horizontal direction or the vertical direction can be determined. Thus, the distance in the operation direction can be determined by using the principle of trigonometric functions. The distances in the manipulation direction determined for each intermediate interval and intermediate UI element may then be summed to determine the total distance in the manipulation direction.

Referring back to FIG. 8 , after the distance between the first UI element and the second UI element is determined, an animation effect of moving the second UI element may be determined based on the distance. To this end, in some embodiments, a first animation effect of the movement of the first UI element in response to the drag may be determined. As described above, in some embodiments, the first animation effect of the movement of the first UI element may be controlled by a predefined curve of displacement over time. For example, the predefined curve can be a Bezier curve or an elastic force curve.

Thus, the animation effect of the movement of the second UI element in response to the drag may be determined based on the first animation effect and the distance between the first UI element and the second UI element. In some embodiments, in the case where the first animation effect of the movement of the first UI element is controlled by a predefined curve of the displacement of the first UI element over time, it may be based on the predefined curve of the displacement of the first UI element over time. A plot of the displacement of the second UI element versus time is determined. For example, in the case of an elastic force curve, the damping coefficient and/or the spring coefficient of the distance conduction spring can be based. In the case of a Bezier curve, the coordinates of at least one of the at least one control point of the Bezier curve may be conducted based on distance. How to transmit the animation effect of the first UI element to the second UI element, so as to obtain the animation effect of the second UI element, can be realized by using the transmission method described in detail above. Therefore, its description is omitted here.

In this way, since the animation effect of moving the second UI element is determined by the animation effect of moving the first UI element and the distance between the second UI element and the first UI element, an intuitive, natural and user-friendly use can be achieved Habitual drag linkage.

In addition, in some embodiments, the size of the second UI element can also affect the animation effect of its movement. In this case, the size of the second UI element may also be considered to determine the animation effect of the second UI element. For example, the larger the size of the second UI element, the less it may be affected by the linkage, so the animation effect of the movement of the second UI element can be inversely proportional to its size. To this end, in some embodiments, the animation effect of moving the second UI element may be determined based on the first magnitude, the distance, and the size of the second UI element.

In addition, in some embodiments, the size of the first UI element may also affect the animation effect of the movement of the second UI element. In this case, the size of the first UI element may also be considered to determine the animation effect of the second UI element. For example, the larger the size of the first UI element, the greater the possible linkage effect, so the animation effect of the movement of the second UI element can be proportional to the size of the first UI element. To this end, in some embodiments, the animation effect of moving the second UI element may be determined based on the first magnitude, the distance, and the size of the first UI element.

Further, as described above, both the size of the first UI element and the size of the second UI element may affect the animation effect of moving the second UI element. Therefore, in some embodiments, the animation effect of moving the second UI element may be determined based on the first magnitude, the distance, the size of the first UI element, and the size of the second UI element.

Referring back to FIG. 8, after the animation effect of moving the second UI element is determined, the second UI element may be moved with the animation effect to visually indicate that the second UI element moves with the first UI element. For N UI elements, they can all be moved with respective animation effects to visually indicate dragging on the entire screen or a partial area of the screen, thereby presenting a dragging linkage.

In some embodiments, the movement direction of a UI element that moves in conjunction can be associated with the drag direction, thereby visually indicating the drag action. To this end, in some embodiments, the direction of the drag may be determined, and the second UI element may be animated to move in association with the determined direction.

Furthermore, in some embodiments, in order to better present the conduction of the animation effect and improve the user experience, the first UI element and the second UI element do not start to move at the same time. For example, a first UI element may start moving when the drag occurs, while a second UI element may start moving some time after the drag occurs. To this end, in some embodiments, a delay time may be determined based on the distance between the first UI element and the second UI element, and the second UI element is moved in response to the delay time elapsed after the drag occurs. Further, in some embodiments, a delay factor may be determined, and the delay time is determined based on the distance and the delay factor. For example, the delay time may be the quotient of the distance divided by the delay factor. The delay factor may be electronically and user configurable.

FIG. 15 shows a schematic diagram of an example of a delay time 1500 according to an embodiment of the present disclosure. As shown in Figure 15, the first UI element (eg, UI element 5) starts to move when the drag occurs, and the UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, 8) move later than the first UI elements, UI elements with distance 2 (eg,

UI elements

2, 6, 9) move later than UI elements with distance 1, and UI elements with distance 3 (eg, UI elements 1, 10-13) Move later than UI elements with a distance of 2.

In this way, the connection between the animation effects of different UI elements can be strengthened, and the relationship between the individual UI elements can be highlighted. Compared with the traditional animation in which the animation effect is single and each UI element is independent and unrelated, the embodiments of the present disclosure can make the animation effect more in line with the laws of physics, and take into account the real usage scenarios and user usage habits, so that it can significantly improve the performance of the animation. Improve user experience.

In the above, the process of realizing the drag linkage is described in detail, and the drag linkage in different scenarios will be further described below. These scenarios include: scenarios where UI elements move completely with the hand, scenarios where UI elements do not completely move with hands, scenarios where UI elements continue to move after letting go or slip, and scenarios where UI elements continue to move and rebound after letting go or slip Scenes. It should be understood that these scenes can be combined with each other to synthesize richer animation effects. For example, UI elements may not fully follow the hand and continue to move after letting go or slipping. As another example, UI elements may not move completely with the hand, and continue to move and bounce back after letting go or slipping. In the following, description will be given by taking an example that the UI element 5 is dragged and the UI elements 2-4 and 6-9 are moved in conjunction.

FIG. 16A shows a schematic diagram of an example of a scene 1600A in which UI elements move completely with the hand, according to an embodiment of the present disclosure. 16B shows a schematic diagram of an example of a displacement time curve 1600B for a scene in which a UI element completely moves with the hand, according to an embodiment of the present disclosure.

As shown in FIGS. 16A and 16B, at T11, UI element 5 is dragged. At T11a, UI element 5 starts to move following the drag of the finger. In some embodiments, T11a may be equal to T11 if UI element 5 begins to move when the drag occurs. Alternatively, T11a may be greater than T11 if UI element 5 begins to move after the drag occurs. Furthermore, in addition to the dragged UI element 5, other UI elements (eg, UI elements 2-4 and 6-9) also move in conjunction. It should be understood that other UI elements are shown as starting to move at the same time as UI element 5 for clarity. However, as mentioned above, other UI elements may start moving after their respective delay times.

At T12, the user releases or slips, in which case the dragging of UI element 5 ends. At T12a, UI element 5 stops moving. In some embodiments, T12a may be equal to T12 if UI element 5 stops moving when released or slipped. Alternatively, T12a may be greater than T12 if UI element 5 stops moving after being released or slipped. At this time, the displacement of the UI element 5 in the dragging direction is S10. The displacement of

UI elements

3, 4, 7, and 8 with a distance of 1 in the drag direction is S11. The displacement of

UI elements

2, 6, and 9 with a distance of 2 in the drag direction is S12. Displacement S10 is greater than displacement S11, and displacement S11 is greater than displacement S12. At this point, UI element 5 stops moving, while

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

2, 6, and 9 with a distance of 2 continue the animation controlled with a predefined curve (eg, an elastic force curve) The effect moves.

At T13, the spacing in the drag direction between UI element 5 and

UI elements

3, 4, 7, and 8 with a distance of 1 decreases. Furthermore, the spacing in the drag direction between

UI elements

3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the drag direction decreases. In addition, the distance in the drag direction increases between

UI elements

3, 4, 7, and 8 with a distance of 1 and

UI elements

2, 6 with a distance of 2 in the opposite direction to the drag direction.

At T14, the displacement of the UI element 5 in the drag direction remains at S10. The

UI elements

3, 4, 7, and 8 with a distance of 1 move by displacement S10 in the drag direction, and stop moving. The displacement of

UI elements

2, 6, and 9 with a distance of 2 in the drag direction has not yet reached S10, and continues to move with an animation effect controlled by a predefined curve. Compared with T13, the spacing in the drag direction between

UI elements

3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the drag direction increases. Furthermore, the spacing in the drag direction between

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

2, 6 with a distance of 2 in the opposite direction to the drag direction is reduced.

At T15, the displacements of UI element 5 and

UI elements

3, 4, 7, and 8 with a distance of 1 in the drag direction remain at S10.

UI elements

2, 6, 9 with a distance of 2 move a displacement S10 in the drag direction, and stop moving. Thereby, the drag linkage is completed.

17A shows a schematic diagram of an example of a scene 1700A in which UI elements do not completely follow the hand, according to an embodiment of the present disclosure. 17B shows a schematic diagram of an example of a displacement time curve 1700B for a scene in which a UI element does not completely follow the hand, according to an embodiment of the present disclosure.

As shown in FIGS. 17A and 17B, at T21, UI element 5 is dragged. At T21a, UI element 5 begins to move following the drag of the finger. In some embodiments, T21a may be equal to T21 if UI element 5 begins to move when the drag occurs. Alternatively, T21a may be greater than T21 if UI element 5 starts to move after the dragging occurs. Furthermore, in addition to the dragged UI element 5, other UI elements (eg, UI elements 2-4 and 6-9) also move in conjunction. It should be understood that other UI elements are shown as starting to move at the same time as UI element 5 for clarity. However, as mentioned above, other UI elements may start moving after their respective delay times.

At T22, the user releases or swipes, in which case dragging UI element 5 ends. At T22a, UI element 5 stops moving. In some embodiments, T22a may be equal to T22 if UI element 5 stops moving when released or slipped. Alternatively, T22a may be greater than T22 if the UI element 5 stops moving after being released or slipped. At this time, the displacement of the finger in the dragging direction is SF2. The displacement of the UI element 5 in the dragging direction is S20. The displacement of

UI elements

3, 4, 7, and 8 with a distance of 1 in the dragging direction is S21. The displacement of

UI elements

2, 6, and 9 with a distance of 2 in the drag direction is S22. Displacement SF2 is greater than displacement S20, displacement S20 is greater than displacement S21, and displacement S21 is greater than displacement S22. At this point, UI element 5 stops moving, while

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

2, 6, and 9 with a distance of 2 continue the animation controlled with a predefined curve (eg, an elastic force curve) The effect moves. Compared with T21, the distance between UI element 5 and

UI elements

3, 4, 7, and 8 with a distance of 1 in the drag direction is increased. The spacing in the drag direction between

UI elements

3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the drag direction decreases. In addition, the spacing in the drag direction between

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

2, 6 with a distance of 2 in the opposite direction to the drag direction increases.

At T23, the spacing in the drag direction between UI element 5 and

UI elements

3, 4, 7, and 8 with a distance of 1 and

UI elements

2, 6 with a distance of 2 in the opposite direction to the drag direction.

At T24, the displacement of the UI element 5 in the drag direction remains at S20. The

UI elements

3, 4, 7, and 8 with a distance of 1 move the displacement S20 in the drag direction, and stop moving. The displacement of

UI elements

2, 6, and 9 with a distance of 2 in the dragging direction has not yet reached S20, and continues to move with an animation effect controlled by a predefined curve. Compared with T23, the spacing in the drag direction between

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

At T25, the displacements of UI element 5 and

UI elements

3, 4, 7, and 8 with a distance of 1 in the drag direction remain at S20.

UI elements

2, 6, 9 with a distance of 2 move in the drag direction by displacement S20, and stop moving. Thereby, the drag linkage is completed.

In the scenario described with reference to Figures 16A-17B, UI elements 5 all stop moving after stopping the dragging. However, the UI element 5 may also continue to move a certain distance after stopping the dragging. In some embodiments, the distance may be determined based on a friction force model as described above. Whether the UI element 5 continues to move after stopping the drag is electronically device and user configurable. For example, if the electronic device is configured to allow continued movement after a release or slip, UI element 5 may continue to move. Conversely, UI element 5 will stop moving as the dragging stops.

FIG. 18A shows a schematic diagram of an example of a scene 1800A in which UI elements move completely with the hand, according to an embodiment of the present disclosure. 18B shows a schematic diagram of an example of a displacement time curve 1800B for a scene in which a UI element completely moves with the hand, according to an embodiment of the present disclosure.

As shown in FIGS. 18A and 18B, at T31, UI element 5 is dragged. At T11a, UI element 5 starts to move following the drag of the finger. In some embodiments, T31a may be equal to T31 if UI element 5 begins to move when the drag occurs. Alternatively, T31a may be greater than T31 if UI element 5 begins to move after the drag occurs. Furthermore, in addition to the dragged UI element 5, other UI elements (eg, UI elements 2-4 and 6-9) also move in conjunction. It should be understood that other UI elements are shown as starting to move at the same time as UI element 5 for clarity. However, as mentioned above, other UI elements may start moving after their respective delay times.

At T32, the user releases or swipes, in which case dragging UI element 5 ends. At T32a, UI element 5 continues to move with an animation effect controlled by a predefined curve (eg, an elastic force curve). In some embodiments, T32a may be equal to T32 if the UI element 5 moves with an animation controlled by a predefined curve when the drag is ended. Alternatively, T32a may be greater than T32 if the UI element 5 is moved with an animation effect controlled by a predefined curve after the end of the drag. At this time, the displacement of the UI element 5 in the drag direction is SF3. The displacement of

UI elements

3, 4, 7, and 8 with a distance of 1 in the dragging direction is S31. The displacement of

UI elements

2, 6, and 9 with a distance of 2 in the drag direction is S32. The displacement SF3 is greater than the displacement S31, and the displacement S31 is greater than the displacement S32. In addition,

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

2, 6, and 9 with a distance of 2 also continue to move with the animation effect of the predefined curve. Compared with T31, the distance in the drag direction between UI element 5 and

UI elements

3, 4, 7, and 8 with a distance of 1 is increased. The spacing in the drag direction between

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

At T33, the spacing in the drag direction between UI element 5 and

UI elements

3, 4, 7, and 8 with a distance of 1 increases. The spacing in the drag direction between

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

At T34, all UI elements continue to move with the animation controlled by the predefined curve. Compared with T33, the distance in the drag direction between UI element 5 and

UI elements

3, 4, 7, and 8 with a distance of 1 is reduced. The spacing in the drag direction increases between

UI elements

3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the drag direction. Furthermore, the spacing in the drag direction between

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

At T35, all UI elements move in the drag direction by displacement S30, and stop moving. The distance in the drag direction between the displacement S30 at the position where the movement is stopped and the displacement SF3 at the position where the hand is released or slipped can be determined based on the friction force model as described above. Thereby, the drag linkage is completed.

Further, in some embodiments, if the UI element continues to move after the drag is stopped, the UI element can bounce back a certain distance. As mentioned above, in the underdamped state, the displacement of the spring oscillates between positive and negative values over time. Therefore, the spring force curve of the underdamped state can be used to control the springback of UI elements.

It should be appreciated that in Figures 18A-18B UI elements are shown to be allowed to overlap each other, eg UI element 8 overlaps UI element 9 at times T32-T34. However, UI elements may not be allowed to overlap each other. Whether overlapping is allowed is electronically device or user configurable. Movement of UI elements follows the elastic force curve of the underdamped state, with overlap allowed. The movement of UI elements follows the elastic force curve of the overdamped state without allowing overlap. Further, whether any two UI elements overlap may also depend on the relative movement magnitudes of the two UI elements. For example, where the relative movement of the two UI elements is small, the UI elements generally do not overlap. In the case of a large relative movement of the two UI elements, the UI elements may overlap.

FIG. 19A shows a schematic diagram of an example of a scene 1900A in which UI elements move completely with the hand, according to an embodiment of the present disclosure. 19B shows a schematic diagram of an example of a displacement time curve 1900B for a scene in which a UI element completely moves with the hand, according to an embodiment of the present disclosure.

As shown in FIGS. 19A and 19B, at T41, UI element 5 is dragged. At T41a, UI element 5 begins to move following the drag of the finger. In some embodiments, T41a may be equal to T41 if UI element 5 begins to move when the drag occurs. Alternatively, T41a may be greater than T41 if UI element 5 begins to move after the drag occurs. Furthermore, in addition to the dragged UI element 5, other UI elements (eg, UI elements 2-4 and 6-9) also move in conjunction. It should be understood that other UI elements are shown as starting to move at the same time as UI element 5 for clarity. However, as mentioned above, other UI elements may start moving after their respective delay times.

At T42, the user releases or swipes, in which case dragging UI element 5 ends. At T42a, UI element 5 continues to move with an animation effect controlled by a predefined curve (eg, an elastic force curve). In some embodiments, T42a may be equal to T42 if the UI element 5 moves with an animation controlled by a predefined curve when the drag is ended. Alternatively, T42a may be greater than T42 if the UI element 5 is moved with an animation effect controlled by a predefined curve after ending the drag. At this time, the displacement of the UI element 5 in the drag direction is SF4. The displacement of

UI elements

3, 4, 7, and 8 with a distance of 1 in the dragging direction is S41. The displacement of

UI elements

2, 6, and 9 with a distance of 2 in the dragging direction is S42. The displacement SF4 is greater than the displacement S41, and the displacement S41 is greater than the displacement S42. In addition,

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

2, 6, and 9 with a distance of 2 also continue to move with the animation effect of the predefined curve. Compared with T41, the distance between UI element 5 and

UI elements

3, 4, 7, 8 with a distance of 1 and

UI elements

At T43, the UI element 5 moves the displacement S40 in the drag direction, and starts to spring back. In some embodiments, the distance between the displacement S40 in the drag direction at the position of the rebound and the displacement SF4 in the drag direction at the position of the release or slip may be determined based on the friction force model as described above.

At T44, the UI element 9 with a distance of 2 moves a displacement S40 in the drag direction, and also starts to spring back.

At T45, all UI elements bounce back to displacement SF4 in the drag direction, and stop moving. Thereby, the drag linkage is completed.

It should be understood that while UI element 5 is shown to bounce ahead of

UI elements

3, 4, 7, 8 with distance 1, and

UI elements

3, 4, 7, 8 with distance 1 are shown to precede

distance UI elements

2, 6, and 9 for 2 bounce back, but all UI elements can bounce together. For example, UI element 5 may stop moving to wait for other UI elements to move by displacement S40, and then start bouncing back together. In addition, although all UI elements are shown as rebounding to the position of letting go or slipping, all UI elements may rebound more or less, and the embodiments of the present disclosure are not limited thereto.

Deep linkage

The embodiments of the present disclosure relate to the linkage of UI elements in the UI in the depth direction, which is also referred to as depth linkage. The depth direction refers to a direction perpendicular to the screen of the electronic device. In deep linkage, the pressed target UI element can affect other UI elements that are not pressed. Specifically, in deep linkage, triggering the animation effect of the target UI element can jointly trigger the animation effect of one or more other UI elements, or even other UI elements in the entire UI, so that all other UI elements are affected by the target UI element . For example, in deep linkage, when a target UI element is pressed during a duration, in addition to the scale of the target UI element over time, other UI elements can also be scaled by a corresponding magnitude, thereby visually showing a linked scaling.

Some example embodiments of deep linkage will be described below with reference to FIGS. 20 to 33 .

Deep linkage can occur in a UI with any suitable regular or irregular layout, and UI elements in the UI can have any suitable size and shape. For example, deep linkage can occur in UIs 300A-300C as shown in Figures 3A-3C.

UI elements in the UI can be pressed. For example, a user may press a UI element when the user desires to perform an operation associated with the UI element. As an example, a user may press a UI element when the user desires to enter an application represented by the UI element, open a menu associated with the UI element, and the like. In the event that a press at the UI element is detected, the UI element may change, eg, the UI element may be scaled to render the press action in the depth direction. For example, UI elements can be scaled down to render away in the depth direction. Alternatively, UI elements can be enlarged to render close in depth direction. Hereinafter, zooming will be described taking UI element zooming out as an example. However, it should be understood that zooming may also be enlarging UI elements.

20 shows a schematic diagram of an example of a UI element changing 2000 when pressed, according to some embodiments of the present disclosure. As shown in FIG. 20, upon detection of a press at the UI element, the UI element can be zoomed out to appear away in the depth direction.

Changes in UI elements can conform to the surface pressure model. In a face pressure model, the pressure is the same at every part of the UI element (eg, every pixel or every part divided in any other suitable way). That is, the pressure is the same for all parts of the UI element, regardless of which part of the UI element is pressed (eg, whether the center of the UI element is pressed or the edge of the UI element). So no matter which part of the UI element is pressed, the UI element changes will be the same.

21 shows a schematic diagram of an example of a change 2100 of a UI element as it is pressed at different locations, according to some embodiments of the present disclosure. As shown in Figure 21, whether a press is detected at the center of the UI element or the edge of the UI element, the UI element can be shrunk by the same amount to appear away in the depth direction.

Furthermore, as shown in FIG. 21 , after the UI element is shrunk, the pressed position may no longer be within the range of the shrunk UI element. In this case, since the location of the press is still within the range of the UI element before zooming out, or any other suitable range, the press can continue to be detected as a press on the UI element. Alternatively, since the location of the press is no longer within the scope of the reduced UI element, the press will not be detected as a press on the UI element. In this case, the compression can be considered to be over.

In addition, in some embodiments, in order to make the changes of UI elements conform to natural laws and user usage habits, the magnitude of the changes may depend on the magnitude of the pressing force. In the real world, the magnitude of the force usually refers to the actual magnitude of the force. In this case, the greater the pressing force, the greater the change in the depth direction. In some embodiments, the force of the pressing may be the force of the pressing applied by the user detected by the electronic device. Alternatively, the pressing force may also be a predetermined pressing force set by the electronic device or the user.

FIG. 22 shows a schematic diagram of an example of a UI element changing 2200 at different pressing forces in accordance with some embodiments of the present disclosure. As shown in Figure 22, in the case of a large pressing force, the UI elements can be shrunk by a larger margin to present a greater degree of distance in the depth direction. In some embodiments, UI elements may even shrink to disappear from the UI, ie, to a size of 0, so as to appear as far away as possible in the depth direction. In contrast, in the case of a small pressing force, the UI elements can be shrunk by a smaller amount to present a smaller degree of separation in the depth direction.

However, embodiments of the present disclosure are not limited thereto. How UI elements scale in response to different pressing forces is electronically device or user configurable. For example, UI elements can shrink in smaller increments when the pressing force is high, and can shrink by a larger amount when the pressing force is small.

Further, in an electronic device, the change in the depth direction based entirely on the real pressing force may have high requirements on the user, and may require the electronic device to be equipped with relevant hardware. Thus, in some embodiments, the time of the compression may be used to simulate or replace the force of the compression. For example, if the pressing time is longer, it can be considered that the pressing force is larger, and thus the change in the depth direction is larger.

23 shows a schematic diagram of an example of a change 2300 of UI elements at different press durations, according to some embodiments of the present disclosure. As shown in FIG. 23 , in the case where the duration of the pressing is long, the UI element can be shrunk by a larger amount to present a greater degree of distance in the depth direction. In some embodiments, UI elements may even shrink to disappear from the UI, ie, to a size of 0, so as to appear as far away as possible in the depth direction. In contrast, where the duration of the press is short, the UI element may shrink by a smaller amount to present a smaller degree of separation in the depth direction.

However, embodiments of the present disclosure are not limited thereto. How UI elements scale in response to different press durations is electronically device or user configurable. For example, where the duration of the press is long, the UI element may shrink by a smaller amount, and when the duration of the press is short, the UI element may shrink by a larger amount.

In addition, in some embodiments, in order to further make the changes of UI elements conform to natural laws and user usage habits, the magnitude of changes may depend on the sizes of UI elements. For example, intuitively, the same press may be difficult to press on a larger UI element, while it may be easier to press on a smaller UI element. In this case, larger UI elements may be less affected by presses, while smaller UI elements may be more affected by presses.

24 shows a schematic diagram of an example of a UI element changing 2400 at different sizes, according to some embodiments of the present disclosure. As shown in FIG. 24 , in the case where the size of the UI element is large, the UI element can be shrunk by a larger magnitude to present a greater degree of distance in the depth direction. In contrast, in the case where the size of the UI element is small, the UI element can be reduced by a smaller amount to present a smaller degree of separation in the depth direction.

However, embodiments of the present disclosure are not limited thereto. How UI elements scale at different sizes is electronically device or user configurable. For example, in order to make the size of the scaled UI elements more balanced, larger UI elements may be more affected by presses, while smaller UI elements may be less affected by presses. To this end, in the case of a large size of the UI element, the UI element can be scaled down by a smaller amount, and in the case of a small size of the UI element, the UI element can be scaled down by a larger scale to render more depthwise A small distance away.

In addition, in some embodiments, in order to improve the user experience, the range that the UI element can be zoomed may be limited, so that the UI element can only be zoomed within the allowed range. For example, the magnitude range may be any suitable range, such as 10%-90% of the size of the UI element, 100 pixels-10,000 pixels, or 2%-50% of the screen-to-body ratio, or the like. As an example, assume the magnitude range is 10%-90% of the size of the UI element. In this case, no matter how hard the pressing force is or how long the pressing duration is, the pressed UI element can only be reduced to at most 10% of its original size, and it is impossible to disappear from the screen.

In the above, scaling of the pressed UI element is described in detail. As mentioned above, in deep linkage, the pressed target UI element can affect other UI elements that are not pressed. Specifically, in deep linkage, triggering the animation effect of the target UI element can jointly trigger the animation effect of one or more other UI elements, or even other UI elements in the entire UI, so that all other UI elements are affected by the target UI element . For example, in deep linkage, when a target UI element is pressed during a duration, in addition to the scale of the target UI element over time, other UI elements can also be scaled by a corresponding magnitude, thereby visually showing a linked scaling. Therefore, hereinafter, the depth linkage will be described in detail with reference to FIGS. 25 to 33 .

FIG. 25 shows a flowchart of a graphical interface display method 2500 according to an embodiment of the present disclosure. It should be understood that the method 2500 may be performed by the electronic device 100 described above with reference to FIG. 1 or the electronic device 200 described with reference to FIG. 2 . Method 2500 is described herein with reference to UI 300A of Figure 3A. However, it should be understood that UI 300A is merely an example, and method 2500 may be applied to any suitable interface, including but not limited to UIs 300B-300C.

At block 2510, the M user interface UI elements are displayed on the screen of the electronic device. M is a positive integer greater than 1. For example, the M UI elements may be UI elements 1-13.

At block 2520, a press is detected for a duration at a first UI element of the M UI elements. For example, the first UI element may be UI element 5 . As described above, a press at the first UI element for a duration will cause the first UI element to scale over time to present the effect of the press in the depth direction.

At block 2530, in response to detecting a press at the first UI element for a duration, each of the N UI elements on the screen is scaled. N is a positive integer between 1 and M-1. Thereby, interlocking pressing is visually indicated.

FIG. 26 shows a schematic diagram of an example of a depth linkage 2600 of N UI elements according to an embodiment of the present disclosure. As shown in Figure 26, UI element 5 is pressed during a duration, so that UI element 5 is scaled over time to present a pressing effect in the depth direction. In addition, other UI elements on the screen (eg, UI elements 1 to 4, and 6 to 13) are also scaled by different magnitudes over time in response to the pressing to present the pressing effect in the depth direction. Thereby, interlocking pressing is visually presented. For clarity, FIG. 26 only shows the depth linkage of UI elements 1-13 in UI 300A. It should be understood that deep linkage can occur at any at least two UI elements in any UI, for example, at any at least two UI elements in UIs 300A-300C.

In some embodiments, deep linkage can work on all UI elements on the screen. In this case, M-1 UI elements other than the first UI element among the M UI elements may be determined as N UI elements. Alternatively, deep linkage can only act on some UI elements on the screen. In this case, the influence area of the first UI element may be determined based on the size of the first UI element, and the UI elements within the influence area among the M UI elements may be determined as N UI elements. For example, the larger the size of the first UI element, the larger its area of influence may be. Alternatively, the area of influence may also be reduced in size, and the present disclosure is not limited herein. For example, the area of influence may be a circle with a predetermined radius centered on the reference point of the first UI element. It should be understood that the area of influence may be any suitable area having any shape, such as a rectangle, diamond, etc. having a predetermined size. The area of influence may be configurable by the electronic device and the user, and the present disclosure is not limited herein.

27 shows a schematic diagram of an example of a UI element's area of influence 2700 according to an embodiment of the present disclosure. As shown in FIG. 27 , since

UI elements

3, 4, 7, and 8 are within the influence area 2710 of UI element 5,

UI elements

3, 4, 7, and 8 will be scaled in conjunction with UI element 5. In addition, since

UI elements

1, 2, 6, 9-13 are not within the influence area 2710 of UI element 5,

UI elements

1, 6, 9-13 will not be scaled in conjunction with UI element 5.

Referring back to FIG. 25 , in order to scale the N UI elements by corresponding magnitudes, the distance between the first UI element and each of the N UI elements may be determined. As mentioned above, in some embodiments, distances may be divided into a plurality of distance levels according to the range in which the distances lie. For example, the operated UI element itself may be at distance level 0, and the linked UI elements may be at

distance level

In the above, the manner of determining the distance between the first UI element and the second UI element among the N UI elements has been described with reference to FIGS. 10-14B , and thus the description thereof is omitted here.

Referring back to FIG. 25 , after the distance between the first UI element and the second UI element is determined, the magnitude of scaling the second UI element may be determined based on the distance. For example, if the distance between the first UI element and the second UI element is greater, the second UI element may be scaled less, thereby visually indicating that the press has less impact on the distant UI element. Alternatively, if the distance between the first UI element and the second UI element is larger, the magnitude of the zooming of the second UI element may also be larger, thereby visually indicating that the impact of the press on the distant UI element becomes larger .

In some embodiments, to determine the magnitude by which the second UI element is scaled, a first magnitude by which the first UI element is scaled in response to the press may be determined. In some embodiments, the first magnitude of scaling of the first UI element may be determined based on various factors associated with the first UI element. These factors may include, but are not limited to, the size of the first UI element, the range of magnitudes within which the first UI element can vary, the duration of the pressing, and the predetermined pressing force. In the above, the effects of these factors on the zooming amplitude of the UI elements are described in detail, so the descriptions thereof are omitted here.

The magnitude by which the second UI element scales in response to the press can then be determined based on the first magnitude and the distance between the first UI element and the second UI element. How to transmit the magnitude of scaling the first UI element to the second UI element, so as to obtain the magnitude of scaling the second UI element, can be implemented using the conducting manner described in detail above. The difference is that in deep linkage, x ⁿ in conduction equations (7) and (8) represents the zoom magnitude of the linked-zoomed UI element (eg, the second UI element), while x represents the pressed UI element (eg. , the zoom range of the first UI element). Therefore, its description is omitted here.

In this way, since the zooming amplitude of the second UI element is determined by the zooming amplitude of the first UI element and the distance between the second UI element and the first UI element, it can be intuitive, natural, and conform to the user's usage habits. deep linkage.

Furthermore, in some embodiments, the size of the second UI element may also affect the magnitude of the scaling of the second UI element. In this case, the size of the second UI element may also be considered to determine the magnitude by which to scale the second UI element. For example, if the second UI element is larger, the range of scaling the second UI element may be larger, so that the sizes of the scaled UI elements on the screen are more similar and thus more visually coordinated. Alternatively, if the second UI element is larger, the magnitude of scaling the second UI element may be smaller, so that the size difference of the scaled UI element on the screen is larger. To this end, in some embodiments, the magnitude by which the second UI element scales in response to the press may be determined based on the first magnitude, the distance, and the size of the second UI element.

Additionally, in some embodiments, the size of the first UI element may also affect the magnitude of the scaling of the second UI element. In this case, the size of the first UI element may also be considered to determine the magnitude by which the second UI element is scaled. For example, the larger the size of the first UI element, the greater the possible linkage effect, so the animation effect of scaling the second UI element can be proportional to the size of the first UI element. To this end, in some embodiments, the magnitude by which the second UI element is scaled may be determined based on the first magnitude, the distance, and the size of the first UI element.

Further, as described above, both the size of the first UI element and the size of the second UI element may affect the magnitude of the scaling of the second UI element. Thus, in some embodiments, the magnitude of scaling the second UI element may be determined based on the first magnitude, the distance, the size of the first UI element, and the size of the second UI element.

Referring back to FIG. 25 , after determining the magnitude by which the second UI element is scaled, the second UI element can be scaled by the magnitude to visually indicate that the second UI element scales as the first UI element is pressed. For N UI elements, they can all be scaled with respective amplitudes to visually indicate pressing on the entire screen or a partial area of the screen, thereby presenting a pressing linkage.

28 shows a schematic diagram of an example of distance-based scaling of UI elements 2800 in accordance with an embodiment of the present disclosure. As shown in diagram 2800, UI elements with a distance of 0 (eg, UI element 5 itself) are scaled more than UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, 8), and UI elements with a distance of 1 is zoomed more than UI elements with a distance of 2 (eg,

UI elements

2, 6, 9), and UI elements with a distance of 2 are zoomed more than UI elements with a distance of 3 (eg, UI elements 1, 10-13) .

Furthermore, in some embodiments, in order to better present the conduction of the animation effect and improve the user experience, the first UI element and the second UI element do not start scaling at the same time. For example, a first UI element may start scaling when a press occurs, while a second UI element may start scaling some time after the press occurs. To this end, in some embodiments, a delay time may be determined based on the distance between the first UI element and the second UI element, and the second UI element is scaled in response to the delay time elapsed after the press occurs. Further, in some embodiments, a delay factor may be determined, and the delay time is determined based on the distance and the delay factor. For example, the delay time may be the quotient of the distance divided by the delay factor. The delay factor may be electronically and user configurable.

FIG. 29 shows a schematic diagram of an example of a delay time 2900 according to an embodiment of the present disclosure. As shown in Figure 29, the first UI element with a distance of 0 starts scaling when the press occurs, the UI element with a distance of 1 is scaled later than the first UI element, and the UI element with a distance of 2 is scaled later than the UI element with a distance of 1 UI elements, and UI elements with a distance of 3 are scaled later than UI elements with a distance of 2.

30 shows a schematic diagram of an example of scaling 3000 of UI elements with a delay time in accordance with the present disclosure. As shown in Figure 30, UI element 5 with a distance of 0 starts scaling at time T51 when the press occurs,

UI elements

3, 4, 7, and 8 with a distance of 1 start scaling at a later time T52, and UI elements with a distance of 2 start scaling at time T52. 2, 4, 6, 9 start scaling at a later time T53, and UI elements 1, 10-13 with a distance of 3 start scaling at the latest T54.

Furthermore, in some embodiments, the speed of zooming of UI elements may be controlled by a predefined curve of amplitude versus time. For example, the predefined curve can be a Bezier curve or an elastic force curve. In the case of elastic force curves, the speed of scaling can be controlled by controlling the damping and stiffness coefficients of the spring. In the case of a Bezier curve, the speed of scaling can be controlled by controlling the coordinates of at least one of the at least one control point of the Bezier curve.

Further, in some embodiments, in order to improve the user experience, the UI element that is zoomed in linkage can also be moved toward the pressed UI element. Specifically, the N UI elements may be moved toward the first UI element to further visually highlight the press. For example, the magnitude of the displacement may depend on at least one of the distance between the co-zoomed UI element and the pressed UI element, the duration of the pressing, the size of the second UI element, and the size of the first UI element. To this end, in some embodiments, movement may be determined based on the distance between the first UI element and the second UI element, the duration of the press, the size of the first UI element, and/or the size of the second UI element The displacement of the second UI element.

The second UI element can then be moved by the displacement in a direction from the second UI element to the first UI element. For example, the second UI element may be moved by the displacement in a direction from the second reference point of the second UI element to the first reference point of the first UI element. The visual effect of this is that the second UI element is attracted to the first UI element. It should be understood that embodiments of the present disclosure are not limited thereto. For example, the displacement can also be made to move the second UI element in the opposite direction (eg, from the first reference point of the first UI element to the second reference point of the second UI element). The visual effect of this is that the second UI element is repelled by the first UI element.

FIG. 31 shows a schematic diagram of an example of a displacement 3100 of movement of a UI element according to an embodiment of the present disclosure. As shown in graph 3100, UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, 8) have greater displacement magnitudes than UI elements with a distance of 2 (eg,

UI elements

2, 6, 9), and the distance is UI elements with a distance of 2 have a greater displacement magnitude than UI elements with a distance of 3 (e.g. UI elements 1, 10-13)

Furthermore, in some embodiments, the scaled UI element may be restored after the press ends (eg, after the user lifts the finger off the screen). Specifically, both the pressed UI element and the N UI elements that are zoomed together can be restored. To this end, in some embodiments, the scaled second UI element may be restored to the pre-scaled second UI element. The restoration process may be an inverse process of scaling, and thus a detailed description thereof is omitted here.

32A shows a schematic diagram of an example of a restoration 3200A of UI elements in accordance with an embodiment of the present disclosure. As shown in Figure 32A, the scaled UI elements (eg, UI elements 1-13) are all restored to their original size before scaling.

Further, as described above, in some embodiments, UI elements may also move in response to presses. In this case, the moved UI element can be reset after the press ends. Specifically, all N UI elements moved toward the pressed UI element can be reset. To this end, in some embodiments, the second UI element may be restored from the moved position to the pre-move position.

32B shows a schematic diagram of an example of restoration 3200B of UI elements with a displacement, according to an embodiment of the present disclosure. As shown in Figure 32B, the moved and scaled UI elements (eg, UI elements 1-13) all return to their pre-movement positions and their pre-scaled original dimensions.

In some embodiments, the restoration of zooming or the restoration of movement may have a bouncing effect. For example, regarding the recovery of zooming, after the user lets go, the size of the UI element can be first increased to be larger than the initial size, and then reduced to the initial size. In addition, regarding the recovery of movement, after the user releases the hand, the UI element that is moved in linkage can first move away from the pressed UI element to a farther than the initial position before the movement, and then return to the initial position.

33A-33B show schematic diagrams, respectively, of an example of a restored size time curve 3300A and a displacement time curve 3300B of a UI element with a springback effect, according to an embodiment of the present disclosure.

With regard to the zoom rebound, as shown in FIG. 33A, at T61, UI element 5 is pressed to zoom out. In addition, other UI elements (eg, UI elements 1-4, 6-13) are also reduced in linkage.

At T62, the user lets go. At this point, UI element 5 is reduced to 0.5 times its original size. In addition, UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, and 8) are reduced in linkage, but the reduction rate is smaller than that of UI element 5. In addition, UI elements with a distance of 2 (for example,

UI elements

2, 6, and 9) are also reduced in linkage, but the reduction rate is smaller than that of UI elements with a distance of 1. Further, UI elements with a distance of 3 (for example, UI elements 1, 10-13) are also reduced in linkage, but the reduction rate is smaller than that of UI elements with a distance of 2.

During T62 and T63, UI elements start scaling and bouncing back.

At T63, the size of UI element 5 is increased to 1.2 times the original size. In addition, UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, 8) increase in linkage, but the increase is smaller than that of UI element 5. In addition, UI elements with a distance of 2 (for example,

UI elements

2, 6, and 9) also increase in linkage, but the increase is smaller than that of UI elements with a distance of 1. Further, UI elements with a distance of 3 (for example, UI elements 1, 10-13) also increase in synergy, but the increase is smaller than that of UI elements with a distance of 2.

At T64, the size of all UI elements reverts to the original size.

Further, regarding the movement rebound, as shown in FIG. 33B , at T71, UI element 5 is pressed. Other UI elements move towards UI element 5.

At T72, the user lets go. At this time, the displacement of UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, 8) moving toward UI element 5 is -1. In addition, UI elements with a distance of 2 (eg,

UI elements

2, 6, 9) also move towards UI element 5, but the displacement magnitude is smaller than that of the UI elements with a distance of 1. Further, UI elements with a distance of 3 (eg, UI elements 1, 10-13) also move towards UI element 5, but the displacement magnitude is smaller than that of the UI elements with a distance of 2.

During T72 and T73, UI elements start to move and bounce back.

At T73, the displacement of UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, 8) exceeds the initial position and is +0.7. In addition, UI elements with a distance of 2 (eg,

UI elements

2, 6, 9) are also displaced beyond the initial position, but the displacement magnitude is smaller than that of the UI elements with a distance of 1. Further, the displacement of UI elements with a distance of 3 (eg, UI elements 1, 10-13) also exceeds the initial position, but the displacement magnitude is smaller than that of the UI elements with a distance of 2.

At T74, the positions of all UI elements are restored to their original positions.

It should be understood that the scaling dimensions (eg, 0.5x, 1.2x) and movement displacements (eg, displacement-1, displacement 0.7) in Figures 33A-33B are only examples, and UI elements may be scaled smaller at any suitable size or at any Appropriate displacement moves. Furthermore, although the rebound effect is shown as only one rebound in Figures 33A-33B, a rebound effect with multiple rebounds can be achieved. The number of rebounds may be any suitable number of rebounds, and the present disclosure is not limited herein. In certain embodiments, the rebound magnitude of the multiple rebounds may decrease over time.

33C-33D show schematic diagrams, respectively, of an example of a restored size-time curve 3300C and a displacement-time curve 3300D for a UI element with a rebound effect of multiple rebounds with reduced rebound amplitudes, according to embodiments of the present disclosure.

As shown in FIG. 33C , the UI element is restored to its original size after multiple rebounds, wherein the UI element with a distance of 0 (eg, UI element 5 ) bounces back at a larger scale than the UI element with a distance of 1 (eg, UI element 5 ) 3, 4, 7, 8). A UI element with a distance of 1 will have a larger rebound scale than a UI element with a distance of 2 (eg,

UI elements

2, 6, 9). A UI element with a distance of 2 will have a larger rebound scaling than a UI element with a distance of 3 (eg, UI elements 1, 10-13).

Similarly, as shown in FIG. 33D , the UI element recovers to the initial position after multiple rebounds, wherein the UI element with a distance of 0 (eg, UI element 5 ) rebounds with a greater displacement magnitude than the UI element with a distance of 1 (eg, UI element 5 ) ,

UI elements

3, 4, 7, 8). A UI element with a distance of 1 rebounds with a larger displacement magnitude than a UI element with a distance of 2 (eg,

UI elements

2, 6, 9). A UI element with a distance of 2 rebounds with a larger displacement magnitude than a UI element with a distance of 3 (eg, UI elements 1, 10-13).

Further, in some embodiments, the springback effect may also be controlled by predefined curves (eg, elastic force curves, Bezier curves, etc.). For example, these UI elements can scale bounce or move bounce in an animated effect controlled by a predefined curve.

pressure linkage

The embodiments of the present disclosure relate to the linkage of UI elements in the UI on the animation effect of pressing, which is also referred to as pressure linkage. In pressure linkage, the pressed target UI element can affect other UI elements that are not pressed. Specifically, in the pressure linkage, triggering the animation effect of the target UI element can jointly trigger the animation effect of one or more other UI elements, or even other UI elements in the entire UI, so that all other UI elements are affected by the target UI element . For example, in the pressure linkage, when the target UI element is pressed, in addition to the target UI element showing the pressing effect with an animation effect, other UI elements can also show the pressing effect with the corresponding animation effect, so as to visually present the linkage pressing .

Some example embodiments of pressure linkage will be described below with reference to FIGS. 34-46 .

Pressure linkage can occur in a UI with any suitable regular or irregular layout, and UI elements in the UI can have any suitable size and shape. For example, pressure linkage can occur in UIs 300A-300C as shown in Figures 3A-3C.

UI elements in the UI can be pressed. For example, a user may press a UI element when the user desires to perform an operation associated with the UI element. As an example, a user may press a UI element when the user desires to enter an application represented by the UI element, open a menu associated with the UI element, and the like. In the event that a press at the UI element is detected, the UI element may change with an animation effect, for example, the UI element may be visually moved in a rocker fashion relative to the position of the press (alternatively referred to hereinafter as a rotation), Or visually concave or protrude relative to the pressed position to present a pressing action. In this case, changes in UI elements can conform to the point pressure model. In the point pressure model, the pressure of the UI element at the pressed position is greater than the pressure of other parts.

In some embodiments, UI elements can be treated as rigid bodies. In this case, upon detection of a press at the UI element, the UI element can be visually moved in a rocker fashion relative to the position of the press to present the press effect.

34 shows a schematic diagram of an example of a UI element that is a rigid body changing 3400 when pressed, according to some embodiments of the present disclosure. As shown in Figure 34, upon detection of a press at the UI element, the UI element can be animated from the initial shape 3410 to visually move the position in a rocker fashion relative to the position of the press. For example, when the pressed position is to the left of the UI element, the UI element is visually rotated to the left about its reference point (indicated by a "+"), changing to shape 3420. The altered shape 3420 resembles a rocker with the left side depressed and the right side up. Furthermore, when the pressed position is on the right side of the UI element, the UI element is visually rotated to the right around its reference point, changing to shape 3430 . The altered shape 3430 resembles a rocker with the left side lifted and the right side depressed.

In this case, the UI element can be seen as a rocker connected to a spring on both sides, and the pressing of the UI element can be seen as pressing the spring on one side and stretching the spring on the other, thus implementing the UI as a whole Animate the element's rotation around its base point.

35 shows a schematic diagram of an example of a pressing and stretching of a spring 3500 that simulates pressing of a UI element, according to some embodiments of the present disclosure. Figure 3510 shows the two-sided spring in its initial state. Graph 3520 shows that when the pressed position is on the left side of the UI element, the left spring is pressed and the right spring is stretched. Diagram 3530 shows that when the pressed position is on the right side of the UI element, the right spring is pressed and the left spring is stretched.

In this case, the model of the spring can be represented by the following equation (9):

where L represents the horizontal distance between the pressed position and the reference point of the UI element, c represents the linear distance between the pressed position and the reference point, and k' represents the spring coefficient of the spring.

Further, the above equation (9) can be transformed into the form of the following equation (10):

Where k' represents the elastic coefficient of the spring, x' represents the deformation amount of the spring, g' represents the damping coefficient of the spring, T represents the time of deformation, and m' represents the size of the UI element.

Furthermore, in some embodiments, UI elements may be considered non-rigid bodies. In this case, upon detection of a press at the UI element, the UI element may be visually recessed or protruded relative to the location of the press to present the press effect.

36 shows a schematic diagram of an example of a UI element that is a non-rigid body changing 3600 when pressed, according to some embodiments of the present disclosure. As shown in Figure 36, UI elements can be viewed as grid diagrams. In the event that a press at the UI element is detected, the initial UI element 3610 may change with an animation effect to visually recess or protrude relative to the location of the press. For example, the coordinates of the grid within the initial UI element 3610 can be changed to change to UI element 3620 recessed relative to the location of the press. Additionally, in some embodiments, the color (eg, hue, lightness, saturation, etc.) of the UI elements may also vary to accentuate the press. For example, the initial UI element 3610 may also change to a UI element 3630 that is recessed and darkened relative to the location of the press. It should be understood that color changes may also apply to UI elements that are rigid bodies.

In some embodiments, after the UI element is changed, the pressed position may no longer be within the range of the changed UI element. In this case, since the location of the press is still within the range of the UI element before the change, or any other suitable range, the press can continue to be detected as a press on the UI element. Alternatively, since the location of the press is no longer within the range of the changed UI element, the press will not be detected as a press on the UI element. In this case, the compression can be considered to be over.

Hereinafter, an embodiment of the present disclosure will be described by taking an example of the UI element being moved in a rocker manner visually relative to the pressed position. It should be understood, however, that UI elements may also vary in other ways, such as being recessed or protruding visually relative to the location of the press.

In addition, in some embodiments, in order to make the changes of UI elements conform to natural laws and user usage habits, the magnitude of the changes may depend on the magnitude of the pressing force. In the real world, the magnitude of the force usually refers to the actual magnitude of the force. In this case, the greater the pressing force, the greater the change in the UI element. In some embodiments, the force of the pressing may be the force of the pressing applied by the user detected by the electronic device. Alternatively, the pressing force may also be a predetermined pressing force set by the electronic device or the user.

37 shows a schematic diagram of an example of a UI element changing 3700 at different pressing forces, according to some embodiments of the present disclosure. As shown in FIG. 37, in the case where the pressing force is large, the UI element can be changed (eg, rotated) by a larger magnitude. In contrast, UI elements can change in smaller magnitudes when the pressing force is small. However, embodiments of the present disclosure are not limited thereto. The manner in which the UI elements change in response to different pressing forces is electronically device or user configurable. For example, UI elements can change in smaller magnitudes when the pressing force is high, and UI elements can change in larger magnitudes when the pressing force is small.

Further, in an electronic device, making changes based entirely on the actual pressing force may have high requirements on the user, and may require the electronic device to be equipped with relevant hardware. Thus, in some embodiments, the time of the compression may be used to simulate or replace the force of the compression. For example, if the pressing time is longer, it can be considered that the pressing force is larger, and thus the change is larger.

38 shows a schematic diagram of an example of changes 3800 of UI elements at different press durations in accordance with some embodiments of the present disclosure. As shown in FIG. 38, the UI element may change (eg, rotate) by a larger magnitude with a long duration of the press. In contrast, where the duration of the press is short, UI elements may change in smaller magnitudes.

However, embodiments of the present disclosure are not limited thereto. The manner in which the UI elements change in response to different press durations is electronically device or user configurable. For example, where the duration of the press is long, the UI elements may change in smaller magnitudes, and where the duration of the press is short, the UI elements may change by a larger magnitude.

39 shows a schematic diagram of an example of a UI element changing 3900 at different sizes, according to some embodiments of the present disclosure. As shown in FIG. 39, in the case where the size of the UI element is large, the UI element can be changed by a larger magnitude. In contrast, where the size of the UI element is small, the UI element can vary in smaller magnitudes.

However, embodiments of the present disclosure are not limited thereto. The way UI elements change at different sizes is electronically device or user configurable. For example, where the size of the UI element is large, the UI element may vary in smaller magnitudes, and in the case where the size of the UI element is small, the UI element may vary in larger magnitudes.

In addition, in some embodiments, in order to improve the user experience, the range that the UI element can change may be limited, so that the UI element can only change within the range of the allowable range. For example, the magnitude range may be any suitable range, such as a rotation angle of a UI element between 0-60 degrees, a color change of a UI element between 10%-50% grayscale, or the coordinates of a grid within a UI element Variation between 100-10000 pixels etc. As an example, assume the magnitude range is that the UI element's rotation angle is between 0-60 degrees. In this case, no matter how high the predetermined pressing force is and how long the pressing duration is, the pressed UI element can only be rotated at most 60 degrees around the reference point, and it is impossible to rotate by a larger amount.

In the above, the change of the pressed UI element is described in detail. As mentioned above, in the pressure linkage, the pressed target UI element can affect other UI elements that are not pressed. Specifically, in the pressure linkage, triggering the animation effect of the target UI element can jointly trigger the animation effect of one or more other UI elements, or even other UI elements in the entire UI, so that all other UI elements are affected by the target UI element . For example, in pressure linkage, when a target UI element is pressed during a duration, in addition to the target UI element changing with an animation effect, other UI elements can also change with a corresponding animation effect, thereby visually presenting the linkage press down. Therefore, hereinafter, the pressure linkage will be described in detail with reference to FIGS. 40 to 46 .

FIG. 40 shows a flowchart of a graphical interface display method 4000 according to an embodiment of the present disclosure. It should be understood that the method 4000 may be performed by the electronic device 100 described above with reference to FIG. 1 or the electronic device 200 described with reference to FIG. 2 . Method 4000 is described herein with reference to UI 300A of Figure 3A. However, it should be understood that UI 300A is merely an example, and method 2500 may be applied to any suitable interface, including but not limited to UIs 300B-300C.

At block 4010, the M user interface UI elements are displayed on the screen of the electronic device. M is a positive integer greater than 1. For example, the M UI elements may be UI elements 1-13.

At block 4020, a press at a first UI element of the M UI elements is detected. For example, the first UI element may be UI element 5 . As described above, a press at the first UI element will cause the first UI element to rotate to render the press effect.

At block 4030, in response to detecting the press at the first UI element, cause each of the N UI elements on the screen to change with a corresponding animation effect. N is a positive integer between 1 and M-1. Thereby, interlocking pressing is visually indicated.

In some embodiments, the direction in which the N UI elements change relative to the pressed position may be a direction from each of the N UI elements to the pressed position. In some embodiments, the direction may be a direction from the corresponding reference point of each of the N UI elements to the reference point of the pressed UI element. In this case, the pressed position is the change reference point for the change of N elements, that is, the pressed position is visually indicated as the center of the pressed. 41 shows a schematic diagram of an example of a pressure linkage 4000 of N UI elements according to an embodiment of the present disclosure. As shown in FIG. 41, UI element 5 is pressed, so that UI element 5 is rotated to present the pressing effect. In addition, other UI elements on the screen (eg, UI elements 1 to 4, and 6 to 13) also rotate at different magnitudes relative to the position of the press in response to the press to present the press effect. Thereby, interlocking pressing is visually presented.

Alternatively, the direction in which the N UI elements change relative to the pressed position may be the same as the direction in which the pressed UI element changes. 42 shows a schematic diagram of another example of pressure linkage 4000 of N UI elements according to an embodiment of the present disclosure. As shown in FIG. 42, UI element 5 is pressed, so that UI element 5 is rotated to present the pressing effect. In addition, other UI elements on the screen (eg, UI elements 1 to 4, and 6 to 13) also rotate in the same direction as UI element 5 by different magnitudes in response to pressing to present the pressing effect. In this case, the change reference point of the change of N elements is its own reference point. Thereby, interlocking pressing is visually presented.

For clarity, Figures 41-42 only show the pressure linkages of UI elements 1-13 in UI 300A. It should be understood that pressure linkage can occur at any at least two UI elements in any UI, eg, at any at least two UI elements in UIs 300A-300C.

In some embodiments, pressure linkage can act on all UI elements on the screen. In this case, M-1 UI elements other than the first UI element among the M UI elements may be determined as N UI elements. Alternatively, the pressure linkage may only act on some UI elements on the screen. In this case, the influence area of the first UI element may be determined based on the size of the first UI element, and the UI elements within the influence area among the M UI elements may be determined as N UI elements. For example, the larger the size of the first UI element, the larger its area of influence may be. Alternatively, the area of influence may also be reduced in size, and the present disclosure is not limited herein. For example, the area of influence may be a circle with a predetermined radius centered on the reference point of the first UI element. It should be understood that the area of influence may be any suitable area having any shape, such as a rectangle, diamond, etc. having a predetermined size. The area of influence may be configurable by the electronic device and the user, and the present disclosure is not limited herein.

43 shows a schematic diagram of an example of a UI element's area of influence 4300 according to an embodiment of the present disclosure. As shown in FIG. 43 , since

UI elements

3, 4, 7, and 8 are within the influence area 4310 of UI element 5,

UI elements

3, 4, 7, and 8 will change in conjunction with UI element 5. In addition, since

UI elements

1, 2, 6, 9-13 are not within the influence area 4310 of UI element 5,

UI elements

1, 6, 9-13 will not change in conjunction with UI element 5.

Referring back to FIG. 40, in order for the N UI elements to change with corresponding animation effects, the distance between the first UI element and each of the N UI elements may be determined. As described above, in some embodiments, distances may be divided into a plurality of distance levels according to the range in which the distances lie. For example, the operated UI element itself may be at distance level 0, and the linked UI elements may be at

distance level

Referring back to FIG. 40 , after the distance between the first UI element and the second UI element is determined, the animation effect of the change of the second UI element may be determined based on the distance. For example, if the distance between the first UI element and the second UI element is larger, the magnitude of the change in the second UI element may be smaller, thereby visually indicating that the impact of the press on the distant UI element is smaller. Alternatively, if the distance between the first UI element and the second UI element is larger, the magnitude of the change in the second UI element may also be larger, thereby visually indicating that the impact of the press on the distant UI element changes. big.

In some embodiments, to determine the magnitude of the change in the second UI element, a first magnitude of the change in the first UI element in response to the press may be determined. In some embodiments, the first magnitude of change in the first UI element may be determined based on various factors associated with the first UI element. These factors may include, but are not limited to, the size of the first UI element, the location of the first reference point of the first UI element, the range of magnitudes that the first UI element can vary, the location of the press, the duration of the press, and the predetermined press force. In the above, the influences of these factors on the magnitudes of changes of UI elements are described in detail, so the descriptions thereof are omitted here.

The magnitude by which the second UI element changes in response to the press can then be determined based on the first magnitude and the distance between the first UI element and the second UI element. How to transmit the magnitude of the change of the first UI element to the second UI element, so as to obtain the magnitude of the change of the second UI element, can be implemented using the transmission method described in detail above. The difference is that in pressure linkage, x ⁿ in conduction equations (7) and (8) represents the magnitude of change of the UI element (e.g., the second UI element) that changes in linkage, while x represents the pressed UI element (e.g., the second UI element) , the first UI element). Therefore, its description is omitted here.

Therefore, since the magnitude of the change of the second UI element is determined by the magnitude of the change of the first UI element and the distance between the second UI element and the first UI element, it can be intuitive, natural and conform to the user's usage habits. pressure linkage.

In addition, in some embodiments, the size of the second UI element may also affect the animation effect of the change of the second UI element. In this case, the size of the second UI element may also be considered to determine the animation effect of the change of the second UI element. For example, if the second UI element is larger, the magnitude of the change in the second UI element may be larger. Alternatively, if the second UI element is larger, the magnitude of the change in the second UI element may be smaller. To this end, in some embodiments, the magnitude of the change in the second UI element in response to the press may be determined based on the first magnitude, the distance, and the size of the second UI element.

In addition, in some embodiments, the size of the first UI element may also affect the animation effect of the change of the second UI element. In this case, the size of the first UI element may also be considered to determine the animation effect of the change of the second UI element. For example, the larger the size of the first UI element, the greater the possible linkage effect, so the magnitude of the change of the second UI element may be proportional to the size of the first UI element. To this end, in some embodiments, the magnitude of the second UI element may be determined based on the first magnitude, the distance, and the size of the first UI element.

Further, as described above, both the size of the first UI element and the size of the second UI element may affect the animation effect of the change of the second UI element. Therefore, in some embodiments, the magnitude of the change in the second UI element may be determined based on the first magnitude, the distance, the size of the first UI element, and the size of the second UI element.

Referring back to FIG. 40 , after determining the animation effect of the change of the second UI element, the second UI element may be changed with the animation effect to visually indicate that the second UI element changes as the first UI element is pressed change. For N UI elements, all of them can be changed with their respective animation effects to visually indicate pressing on the entire screen or a partial area of the screen, thereby presenting a pressing linkage.

FIG. 44 shows a schematic diagram of an example of a distance-based UI element change 4400 in accordance with an embodiment of the present disclosure. As shown in diagram 4400, UI elements with a distance of 0 (eg, UI element 5 itself) change more than UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, 8), and UI elements with a distance of 1 Elements change more than UI elements with distance 2 (

e.g. UI elements

2, 6, 9), and UI elements with distance 2 change more than UI elements with distance 3 (e.g. UI elements 1, 10) -13).

Furthermore, in some embodiments, in order to better present the conduction of the animation effect and improve the user experience, the first UI element and the second UI element do not start to change at the same time. For example, a first UI element may begin to change when a press occurs, while a second UI element may begin to change some time after the press occurs. To this end, in some embodiments, a delay time may be determined based on the distance between the first UI element and the second UI element, and the second UI element is changed in response to the elapse of the delay time after the pressing occurs. Further, in some embodiments, a delay factor may be determined, and the delay time is determined based on the distance and the delay factor. For example, the delay time may be the quotient of the distance divided by the delay factor. The delay factor may be electronically and user configurable.

45 shows a schematic diagram of an example of a delay time 4500 in accordance with an embodiment of the present disclosure. As shown in FIG. 45 , the first UI element with a distance of 0 (eg, UI element 5) starts to change at time T81 when the press occurs, and the UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, 8) Changes begin at a later time T82, UI elements with a distance of 2 (eg,

UI elements

2, 4, 6, 9) begin to change at a later time T83, and UI elements with a distance of 3 (eg, UI Elements 1, 10-13) begin to change at the latest T84.

Furthermore, in some embodiments, the speed at which UI elements change may be controlled by a predefined curve of amplitude versus time. For example, the predefined curve can be a Bezier curve or an elastic force curve. In the case of an elastic force curve, the speed at which the change occurs can be controlled by controlling the damping and stiffness coefficients of the spring. In the case of a Bezier curve, the speed at which the change occurs can be controlled by controlling the coordinates of at least one of the at least one control point of the Bezier curve.

Furthermore, in some embodiments, UI elements that have changed may be restored after the press ends (eg, after the user lifts the finger off the screen). Specifically, the pressed UI element and the N UI elements that are changed in linkage can be restored. To this end, in some embodiments, the changed second UI element may be restored to the second UI element before the change. The restoration process may be an inverse process of the change, so a detailed description thereof is omitted here.

46 shows a schematic diagram of an example of a restoration 4600 of UI elements in accordance with an embodiment of the present disclosure. As shown in FIG. 46, the UI elements (eg, UI elements 1-13) after the change are all restored to their pre-change forms.

In some embodiments, there may be a rebound effect to the restoration of changes. For example, after the user lets go, the UI element can change from being pressed on the left side while the right side is lifted, to being lifted on the left side while the right side is pressed down, and then back to the original shape. That is to say, after the user lets go, the effect of the UI element being flipped and then restored visually is presented.

46B shows a schematic diagram of an example of an angle-time curve 4600B of recovery of a UI element with a bouncing effect, according to an embodiment of the present disclosure.

As shown in FIG. 46B, at T91, UI element 5 is pressed and changed. For example, UI element 5 is pressed on the left, thus rotating around its reference point. Specifically, UI element 5 is depressed on the left side, while the right side is lifted. In addition, other UI elements (eg, UI elements 1-4, 6-13) also change in conjunction.

At T92, the user lets go. At this time, the angle by which the UI element 5 is rotated is -60°. In addition, UI elements with a distance of 1 (eg,

UI elements

3, 4, 7, and 8) rotate in conjunction with each other, but the rotation magnitude is smaller than that of UI element 5. In addition, UI elements with a distance of 2 (for example,

UI elements

2, 6, and 9) are also rotated in conjunction, but the rotation amplitude is smaller than that of UI elements with a distance of 1. Further, UI elements with a distance of 3 (for example, UI elements 1, 10-13) are also rotated in conjunction, but the rotation amplitude is smaller than that of UI elements with a distance of 2.

During T92 and T93, UI elements start to spin and bounce back.

At T93, UI element 5 rotates back at an angle of 45°. In addition, UI elements with a distance of 1 (for example,

UI elements

3, 4, 7, and 8) rotate and rebound together, but the magnitude of the rotation rebound is smaller than that of UI element 5. In addition, UI elements with a distance of 2 (for example,

UI elements

2, 6, and 9) also rotate and rebound in conjunction, but the magnitude of the rotation rebound is smaller than that of UI elements with a distance of 1. Further, UI elements with a distance of 3 (for example, UI elements 1, 10-13) also rotate and rebound in linkage, but the magnitude of the rotation rebound is smaller than that of UI elements with a distance of 2.

At T94, all UI elements revert to their original shapes. In other words, the rotation angle of all UI elements reverts to 0°.

It should be understood that the rotation angles in Figure 46B are examples only, and the UI elements may vary in any suitable pattern. Furthermore, although the rebound effect is shown as only one rebound in FIG. 46B, a rebound effect with multiple rebounds can be achieved. The number of rebounds may be any suitable number of rebounds, and the present disclosure is not limited herein. In certain embodiments, the rebound magnitude of the multiple rebounds may decrease over time.

46C shows a schematic diagram of an example of a recovered angular time curve 4600C of a UI element with the rebound effect of multiple rebounds with reduced rebound amplitudes, according to an embodiment of the present disclosure.

As shown in FIG. 46C , the UI element recovers to its original shape after multiple rebounds, wherein the UI element with a distance of 0 (eg, UI element 5 ) rebounds with a greater rotation amplitude (eg, rotation angle) than the UI with a distance of 1 elements (

eg UI elements

3, 4, 7, 8). A UI element with a distance of 1 bounces with a greater rotation magnitude than a UI element with a distance of 2 (eg,

UI elements

2, 6, 9). A UI element with a distance of 2 bounces with a greater rotation magnitude than a UI element with a distance of 3 (eg, UI elements 1, 10-13).

Further, in some embodiments, the springback effect may also be controlled by predefined curves (eg, elastic force curves, Bezier curves, etc.). For example, these UI elements can bounce back and forth with animation effects controlled by predefined curves.

The following describes the implementation principle and system architecture of the linked animation proposed by the embodiments of the present disclosure.

Figure 47 shows an animation implementation schematic 4700 in accordance with an embodiment of the present disclosure. As mentioned above, animation is essentially the real-time display of UI or UI elements based on refresh rate. Due to the human vision persistence principle, the user feels that the picture is moving. As shown in FIG. 47 , the animation transitions from the initial state of the animation to the final state of the animation after the animation time has elapsed. During this transformation, the animation can be controlled by the animation type and animation transformation form. For example, animation types may include displacement animations, rotation animations, scale animations, and transparency animations, among others. The animation transformation form can be controlled by controllers such as interpolators and estimators. Such a controller can be used to control the speed at which the animation is transformed during animation time.

Specifically, the interpolator is used to set the change logic of the animation property value transitioning from the initial state to the final state, thereby controlling the rate of animation change, so that the animation can change at one or more of the rates of uniform speed, acceleration, deceleration, and parabolic rate. .

In some embodiments, the electronic device 100 may set the change logic of the animation property value according to a system interpolator or a custom interpolator (eg, an elastic force interpolator, a friction force interpolator). When the animation is running, when the electronic device 100 determines that the animation attribute value changes according to the above-mentioned change logic, it draws an image frame based on the above-mentioned animation attribute value, and refreshes the view.

In some embodiments, when the electronic device 100 determines that the animation property value has changed according to the change logic of the interpolator, the invalidate() function is called based on the animation property value to refresh the view, that is, the onDraw() function is called to redraw and display the view.

In some embodiments, the electronic device 100 customizes an elastic force interpolator. For example, the parameters of the function of the elastic force interpolator include at least stiffness and damping. As an example, the function code for an elastic force interpolator can be expressed as one of the following: "SpringInterpolator(float stiffness,float damping)", "SpringInterpolator(float stiffness,float damping,float endPos)", "SpringInterpolator(float stiffness,float)" damping,float endPos,float velocity)", "SpringInterpolator(float stiffness,float damping,float endPos,float velocity,float valueThreshold)".

Among them, the parameter endPos represents the relative displacement, that is, the difference between the initial position of the spring and the rest position. In some embodiments, endPos may represent a relative displacement of UI elements.

The parameter velocity represents the initial velocity. In some embodiments, velocity may represent the initial velocity of UI elements.

The parameter valueThreshold indicates the threshold for judging animation stop. When the difference in displacement (or other properties) between two adjacent frames is less than the threshold, the animation stops running. The larger the threshold, the easier it is for the animation to stop and the shorter the run time; conversely, the longer the animation runs. The value of the threshold can be set according to specific animation properties. In some embodiments, the default value of the elastic interpolator FloatValueHold parameter is 1/1000, and the threshold value is 1 in other construction methods. In some embodiments, when customizing the threshold, the suggested values shown in Table 1 can be used according to the animation properties.

Table 1

动画属性animation properties	valueThresholdvalueThreshold
ROTATION/ROTATION_X/ROTATION_YROTATION/ROTATION_X/ROTATION_Y	1/101/10
ALPHA ALPHA	1/2561/256
SCALE_X/SCALE_YSCALE_X/SCALE_Y	1/5001/500
TRANSLATION_Y/TRANSLATION_XTRANSLATION_Y/TRANSLATION_X	11

In addition, the threshold can directly use the following constants provided by the DynamicAnimation class: MIN_VISIBLE_CHANGE_PIXELS, IN_VISIBLE_CHANGE_ROTATION_DEGREES, MIN_VISIBLE_CHANGE_ALPHA, MIN_VISIBLE_CHANGE_SCALE.

As an example, the specific code of the animation class of the custom elastic force interpolator can be expressed as follows:

"PhysicalInterpolatorBase interpolator=new SpringInterpolator(400F, 40F, 200F, 2600F, 1F);

ObjectAnimator animator = ObjectAnimator.ofFloat(listView, "translationY", 0, 346);

animator.setDuration(interpolator.getDuration());//Get animation time

animator.setInterpolator(interpolator);//Set the custom interpolator to the animation class

animator.start(); //Run the animation".

In some embodiments, electronic device 100 customizes a friction interpolator. As an example, the function code for the friction interpolator can be expressed as "FlingInterpolator(float initVelocity, float friction)". Among them, initVelocity represents the initial velocity, and friction represents the frictional force.

As an example, the concrete code for an animation class using a friction interpolator can be represented as follows:

"PhysicalInterpolatorBase interpolator=new FlingInterpolator(600F, 0.5F);

ObjectAnimator animator=ObjectAnimator.ofFloat(listView,"translationY",0,interpolator.getEndOffset());

animator.setDuration(interpolator.getDuration());//Get animation time

animator.setInterpolator(interpolator);//Set the custom interpolator to the animation class animator.start();"//Run the animation.

In some embodiments, the electronic device 100 can set the animation time (Duration) and start position by itself; it can also call the engine model to obtain the animation time (Duration) and end position, and then set them to the animation class (Animator class).

As an example, the code for the electronic device 100 to call the engine model to obtain the animation time may be expressed as "com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#getDuration".

As an example, the code that calls the engine model to get the end position of the spring can be expressed as "com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#getEndOffset".

As an example, the code to set the parameter valueThreshold may be represented as "com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#setValueThreshold".

In some embodiments, the code using the elastic engine animation class can be expressed as one of the following codes: "SpringAnimation(K object,FloatPropertyCompat<K>property,float stiffness,float damping,float startValue,float endValue,float velocity )", "SpringAnimation(K object,FloatPropertyCompat<K>property,float stiffness,float damping,float endValue,float velocity)".

Among them, the parameter object represents the animation object; Property represents the animation class or the property object of the interpolator. See Table 1, this parameter can be used to indirectly set valueThreshold. This parameter is optional in the interpolator version. When valueThreshold has been set in other ways, this parameter can be omitted, that is, the construction method without the property parameter can be used directly. This parameter is required in the animation version. The DynamicAnimation class already provides the following constants that can be used directly:

"TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCALE_X, SCALE_Y, ROTATION, ROTATION_X, ROTATION_Y, X, Y, Z, ALPHA, SCROLL_X, SCROLL_Y", the electronic device 100 may also implement the ViewProperty interface by definition.

As an example, concrete code using the Spring Engine animation class can be expressed as follows:

"SpringAnimation animation=SpringAnimation(listView,DynamicAnimation.TRANSLATION_Y,400F,40F,0,1000F);

animation.start();"

In some embodiments, the code using the friction engine animation class can be expressed as: "FlingAnimation(K object, FloatPropertyCompat<K> property, float initVelocity, float friction)".

As an example, concrete code using the friction animation class can be expressed as follows:

"FlingAnimation animation=FlingAnimation(listView,DynamicAnimation.TRANSLATION_Y,2000F,0.5F);

animation.start();".

Figure 48 shows a schematic diagram of a system framework 4800 for implementing "linkage" animation effects capabilities or functions according to an embodiment of the present disclosure. The animation capabilities of the UI framework are based on Android

or Hongmeng

It is implemented by the overall architecture of the system, including the mainstream 4-layer logic processing, and the data processing process is presented to the user from the bottom to the top. Users mainly use and experience animation functions at the application layer. In the embodiment of the present disclosure, the capability interaction relationship between the desktop and the UI framework is shown in FIG. 48 . Specifically, as shown in FIG. 48 , the system framework 4800 may include an application layer 4810 , an application framework layer 4830 , a hardware abstraction layer 4850 , and a kernel layer 4870 . Application layer 4810 may include desktop 4812. UI element operations 4814 may be implemented on the desktop 4812. The UI element operation 4814 may include, for example, a drag operation, a press operation, a deep press operation, and the like. The application framework layer 4830 may include system services 4832 and extension services 4834. System services 4832 may include various system services, such as Service 4833. Extension services 4834 may include various extension services, such as SDK 4835. A hardware abstraction layer (HAL) 4850 may include HAL 3.0 4852 and algorithm Algo 4854. Kernel layer 4870 may include drivers 4872 and physical devices 4874. Physical device 4874 may provide raw parameter streams to driver 4872, and driver 4872 may provide functional processing parameter streams to physical device 4874. As further shown in FIG. 48 , the UI framework 4820 for implementing the linkage motion effect 4825 may be implemented between the application layer 4810 and the application framework layer 4830 . UI framework 4820 may include platform capabilities 4822 and system capabilities 4824, both of which may be used to provide linkage animation 4825. The linkage animation 4825 may in turn be provided to the UI element operations 4814 of the application layer 4810.

FIG. 49 shows a schematic diagram of the relationship between the application side and the UI framework side involved in the "linkage" animation effect capability or function according to an embodiment of the present disclosure. As shown in FIG. 49 , the application side 4910 may include a desktop 4915, and UI elements on the desktop 4915 may implement operations such as dragging, pressing, and deep pressing. The UI frame side 4950 may include UI frame motion effects 4952. The UI frame motion effects 4952 may implement the linkage motion effect capability 4954. The linkage motion effect capability 4954 may be implemented by means of AAR format 4951, JAR format 4953, and system interface 4955. The application side 4910 can call the "linkage" animation effect capability or function provided by the UI framework side 4950 by integrating 4930 and calling 4940. Through the interaction between the application side 4910 and the UI framework side 4950, embodiments of the present disclosure implement a new type of linkage "animation effect" that links originally independent UI elements (eg, icons, cards, controls, etc.).

FIG. 50 shows a schematic diagram of a specific description of three ways of implementing the “linkage” animation effect capability or function according to an embodiment of the present disclosure. As shown in Figure 50, the relationship 5001 between the AAR format 4951 and the system of the electronic device 100 is as follows: AAR format 4951 is packaged with capabilities in a binary format, which provides the ability to integrate the application side in the system, and can freely control the version rhythm, Do not follow the system. The relationship 5003 between the JAR format 4953 and the system of the electronic device 100 is as follows: the JAR format 4953 is packaged with capabilities in a binary format, provides capabilities for all components in the system, and can freely control the version rhythm without following the system. The relationship 5005 between the system interface 4955 and the system of the electronic device 100 is: the system interface 4955 is the interface of the framework layer in the system version, and provides the capability of all components in the system, following the system upgrade. The focus of the present disclosure is the realization of the linkage dynamic effect capability. Among them, integration is the way of AAR and JAR, and invocation is the way of system interface. The scene is not limited, but the way the ability is displayed is inconsistent. That is to say, the functions of the various methods described above in the present disclosure may be implemented through an AAR format file, a JAR format file, and/or a system interface of the electronic device 100 . In this way, the ability or functionality to "link" animation effects can be simply and conveniently implemented and provided to an application of an electronic device, such as a desktop.

Claims

A graphical interface display method, comprising:

Display M user interface UI elements on the screen of the electronic device, where M is a positive integer greater than 1;

detecting a press acting on the first UI element among the M UI elements;

In response to the pressing, causing each of the N UI elements on the screen to change with a corresponding animation effect, where N is a positive integer between 1 and M-1, wherein the N UI elements are caused to change with a corresponding animation effect Changes with corresponding animation effects include:

determining the distance between the first UI element and the second UI element in the N UI elements;

determining an animation effect of the change of the second UI element based on the distance and the position of the press in the UI; and

The second UI element is animated with the animation effect to visually indicate the press.
The method of claim 1, wherein determining the distance comprises:

determining a first fiducial point for the first UI element and a second fiducial point for the second UI element; and

The distance between the first reference point and the second reference point is determined as the distance.
The method of claim 1, wherein determining the distance comprises:

determining a first reference point of the first UI element;

from a plurality of circles having respective radii centered on the first reference point, determining a target circle intersecting the second UI element and having the smallest radius; and

The radius of the target circle is determined as the distance.
The method of claim 1, wherein determining the distance comprises:

determining the horizontal spacing between the first UI element and the second UI element;

determining a vertical spacing between the first UI element and the second UI element; and

The distance is determined based on any of the following:

at least one of said lateral spacing and said longitudinal spacing, or

at least one of the horizontal spacing and the vertical spacing, and a direction from a second fiducial point of the second UI element to a first fiducial point of the first UI element.
The method of any one of claims 1 to 4, further comprising:

determining an area of influence of the first UI element based on the size of the first UI element; and

The UI elements within the influence area among the M UI elements are determined as the N UI elements.
The method of any one of claims 1 to 4, further comprising:

M-1 UI elements other than the first UI element among the M UI elements are determined as the N UI elements.
The method according to any one of claims 1 to 6, wherein the animation effect comprises:

seesaw the position visually relative to the position of the press, or

A depression or protrusion visually relative to the location of the press.
The method of any one of claims 1 to 7, wherein determining the animation effect comprises:

determining a first magnitude by which the first UI element changes in response to the press; and

The magnitude of the change in the second UI element in response to the press is determined based on any of the following:

the first magnitude and the distance, or

at least one of a size of the second UI element and a size of the first UI element, the first magnitude, and the distance.
9. The method of claim 8, wherein the first magnitude of change in the first UI element is determined based on at least one of the following associated with the first UI element:

the size of the first UI element,

the position of the first reference point of the first UI element,

the range of the amplitude that the first UI element can change,

said position of said pressing,

the duration of the compression, and

Scheduled pressing force.
The method of any one of claims 1 to 9, wherein changing the second UI element comprises:

determining a delay time based on the distance; and

The second UI element is changed in response to the elapse of the delay time after the pressing occurs.
The method of any one of claims 1 to 10, wherein changing the second UI element comprises:

The speed at which the second UI element changes in response to the press is determined based on a predefined curve of amplitude versus time.
The method of claim 11, wherein the predefined curve is a Bezier curve or an elastic force curve.
The method of any one of claims 1 to 12, further comprising:

Restore the changed second UI element to the second UI element.
The method of any one of claims 1 to 13, wherein the method is implemented by at least one of an AAR format file, a JAR format file, and a system interface.
An electronic device, characterized by comprising: a processor and a memory storing instructions, the instructions, when executed by the processor, cause the electronic device to execute the method according to any one of claims 1 to 14 Methods.
A computer-readable storage medium, characterized in that the computer-readable storage medium stores instructions, and when executed by an electronic device, the instructions cause the electronic device to perform the method according to any one of claims 1 to 14 Methods.
A computer program product, characterized in that the computer program product comprises instructions which, when executed by an electronic device, cause the electronic device to perform the method according to any one of claims 1 to 14.