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

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, where M is a positive integer greater than 1 (810). A drag performed on a first UI element among the M UI elements is detected (820). In response to the drag, each of the N UI elements on the screen is enabled to move with a corresponding animation effect, where N is a positive integer in the range of 1 to M-1 (830). Enabling the N UI elements to move with a corresponding animation effect includes determining a distance between the first UI element and a second UI element on the UI, determining an animation effect of the movement of the second UI element based on the distance, and enabling the second UI element to move with the animation effect to visually indicate that the second UI element moves with the first UI element. In this way, the link between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements is highlighted, so that the animation effects of the UI can better conform to the user's usage habits, thereby greatly improving the user experience.

Description

[Technical field]

[0001] The present disclosure relates generally 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 technology]

[0002] With the development of information technology, various types of electronic devices are equipped with various types of screens. Therefore, the display effect and style of the user interface (UI) on the screen become important factors that affect the user experience. Animation has become an important part of the UI. With the improvement of the performance of electronic devices such as smartphones, animation has also developed accordingly. The number of animations with high refresh rate, high rendering, and high complexity is increasing. Therefore, in order to improve the user experience, the display of animation needs to be further improved. Summary of the Invention [Means for solving the problem]

[0003] According to some embodiments of the present disclosure, a graphical interface display method, an electronic device, a medium, and a program product are provided to strengthen the link between the animation effects of different UI elements and highlight the relationship between independent UI elements. In this way, the animation effects of the UI are better adapted to the usage habits of users, thereby greatly improving the user experience.

[0004] According to a first aspect, the present disclosure provides a graphical interface display method. According to the graphical interface display method of the first aspect, M user interface UI elements are displayed on a screen of an electronic device, where M is a positive integer greater than 1. A drag performed on a first UI element among the M UI elements is detected. In response to the drag, each of the N UI elements on the screen is enabled to move with a corresponding animation effect, where N is a positive integer in the range of 1 to M-1. Enabling the N UI elements to move with the corresponding animation effect includes determining a distance between the first UI element and a second UI element on the UI, determining an animation effect of the movement of the second UI element based on the distance, and enabling the second UI element to move with the animation effect to visually indicate that the second UI element moves together with the first UI element. In this way, the link between the animation effects of different UI elements can be strengthened and the relationship between independent UI elements can be emphasized, so that the animation effect of the UI is better adapted to the usage habits of the user, thereby significantly improving the user experience.

[0005] In some implementations, to determine the distance, a first reference point of a first UI element and a second reference point of a second UI element may be determined, and the distance between the first reference point and the second reference point is determined as the distance. In this manner, the distance may be determined based on the determined reference points of the UI elements, thereby improving the accuracy of the determined distance and the flexibility of the distance determination method, and improving the user experience.

[0006] In some implementations, to determine the distance, a first reference point of the first UI element may be determined, and a target circle that intersects with the second UI element and has a minimum radius is determined from among a plurality of circles, each of which uses the first reference point as a center and has a respective radius, and the radius of the target circle is determined as the distance. In this way, the distance between UI elements may be determined more easily and conveniently, thereby improving the flexibility of the distance determination method and improving the user experience.

[0007] In some implementations, to determine the distance, a horizontal spacing between the first UI element and the second UI element may be determined, and a vertical spacing between the first UI element and the second UI element may be determined, and the distance is determined based on any one of the following: at least one of the horizontal spacing and the vertical spacing, or a direction from a second reference point of the second UI element to a first reference point of the first UI element and at least one of the horizontal spacing and the vertical spacing. In this manner, the distance between the UI elements may be determined based on the spacing between the UI elements, thereby improving the flexibility of the distance determination method and improving the user experience.

[0008] In some implementations, the method may further include determining an influence area of ​​the first UI element based on a size of the first UI element, and determining UI elements within the influence area within the M UI elements as the N UI elements. In this way, UI elements that move correspondingly with the dragged UI element may be determined based on the size of the dragged UI element, so that the UI animation effect is better adapted to the user's usage habits, thereby greatly improving the user experience.

[0009] In some implementations, the method may further include determining M-1 UI elements in the M UI elements other than the first UI element as the N UI elements. In this way, UI elements other than the dragged UI element on the screen may move correspondingly, so that the UI elements to be moved correspondingly are more easily and conveniently determined, and the animation effect of the UI is better suited to the user's usage habits, thereby greatly improving the user experience.

[0010] In some implementations, to determine the animation effect of the movement, a first animation effect of the first UI element moving in response to the drag may be determined, and an animation effect of the second UI element moving in response to the drag may be determined based on any one of the following: the first animation effect and a distance, or the first animation effect, the distance, and the size of the second UI element. In this way, the animation effect of the first UI element may be transmitted to the second UI element, and the animation effect of the second UI element is further determined based on the distance between the first UI element and the second UI element and the size of the second UI element. Thus, the animation effect of the UI may better fit the user's usage habits, thereby greatly improving the user experience.

[0011] In some implementations, the first animation effect of the movement of the first UI element may be determined based on a predefined curve whose displacement changes over time. In this way, the movement of the first UI element may be conveniently controlled based on a predefined curve whose displacement changes over time, so that the animation effect of the UI is better adapted to the user's usage habits, thereby greatly improving the user experience.

[0012] In some implementations, the predefined curve may be a Bessel curve or an elastic force curve. In this way, the movement of the first UI element can be conveniently controlled based on the Bessel curve or the elastic force curve, so that the animation effect of the UI can better match the user's usage habits, thereby greatly improving the user experience.

[0013] In some implementations, enabling the second UI element to move with an animation effect may include determining a direction of the drag and enabling the second UI element to move with an animation effect relative to the direction. In this manner, the movement direction of the correspondingly moving UI element may be controlled based on the movement direction of the UI element being dragged, so that the UI animation effect may better fit the user's usage habits, thereby significantly improving the user experience.

[0014] In some implementations, allowing the second UI element to move with an animation effect may include determining a delay time based on the distance, and allowing the second UI element to move with an animation effect after the delay time in response to the drag. In this way, it may be visually presented that the linked movements are conveyed according to the distance, which allows the UI animation effect to better fit the user's usage habits, thereby significantly improving the user experience.

[0015] In some embodiments, the method may be implemented using at least one of an AAR file, a JAR file, and a system interface. In this manner, a graphical interface display with linked navigation may be implemented simply and conveniently.

[0016] According to a second aspect of the present disclosure, an electronic device is provided. The electronic device includes a processor and a memory that stores instructions. When the instructions are executed by the processor, the electronic device is enabled to perform the method according to the first aspect and any one of the embodiments of the first aspect.

[0017] According to a third aspect of the present disclosure, a computer-readable storage medium is provided. The computer-readable storage medium stores instructions that, when executed by a processor, enable an electronic device to perform a method according to the first aspect and any one of the embodiments of the first aspect.

[0018] According to a fourth aspect of the present disclosure, there is provided a computer program product comprising instructions which, when executed by a processor, enable an electronic device to perform a method according to the first aspect and any one of the embodiments of the first aspect.

[0019] The features, advantages, and other aspects of the embodiments of the present disclosure will become more apparent by reference to the following detailed description and by reference to the accompanying drawings, in which: Several embodiments of the present disclosure are illustrated herein by way of example and not by way of limitation. In the accompanying drawings: [Brief description of the drawings]

[0020] [Figure 1A] FIG. 1 is a schematic diagram of a hardware structure of an electronic device capable of implementing an embodiment of the present disclosure. [Figure 1B] FIG. 2 is a schematic diagram of the software architecture of an electronic device in which an embodiment of the present disclosure may be implemented. [Diagram 2] FIG. 2 is a block diagram of another electronic device capable of implementing an embodiment of the present disclosure. [Figure 3A] 1 is a schematic diagram of an example UI according to some embodiments of the present disclosure. [Figure 3B] FIG. 2 is a schematic diagram of an exemplary UI according to some embodiments of the present disclosure. [Figure 3C] 1 is a schematic diagram of an example UI according to some embodiments of the present disclosure. [Figure 4] FIG. 1 is a schematic diagram of an exemplary drag link according to some embodiments of the present disclosure. [Figure 5A] FIG. 13 is a schematic diagram of an example velocity-time curve of a friction model, according to some embodiments of the present disclosure. [Figure 5B] FIG. 13 is a schematic diagram of an exemplary displacement-time curve of a friction model, according to some embodiments of the present disclosure. [Figure 6] 1A-1C are schematic diagrams of examples of limited and non-limited movement positions, according to some embodiments of the present disclosure. [Figure 7A] 4 is a schematic diagram of an exemplary curve of deformation x of a critically damped spring over time t, in accordance with some embodiments of the present disclosure. [Figure 7B] 2 is a schematic diagram of an example curve of deformation x of an underdamped spring over time t, in accordance with some embodiments of the present disclosure. [Figure 7C] 4 is a schematic diagram of an example curve of deformation x of an overdamped spring over time t, according to some embodiments of the present disclosure. [Figure 8] 1 is a flowchart of a method for displaying a graphical interface according to an embodiment of the present disclosure. [Figure 9] 2 is a schematic diagram of an exemplary area of ​​influence of a UI element according to one embodiment of the present disclosure. [Figure 10] 1 is a schematic diagram of an example of determining distance according to one embodiment of the present disclosure. [Figure 11A] 1 is a schematic diagram of an example of determining distance according to one embodiment of the present disclosure. [Figure 11B] 1 is a schematic diagram of an example of determining distance according to one embodiment of the present disclosure. [Figure 11C] 1 is a schematic diagram of an example of determining distance according to one embodiment of the present disclosure. [Figure 12] 1 is a schematic diagram of an example of determining distance according to one embodiment of the present disclosure. [Figure 13] 1 is a schematic diagram of an example of determining distance according to one embodiment of the present disclosure. [Figure 14A] 1 is a schematic diagram of an example of determining distance according to one embodiment of the present disclosure. [Figure 14B] 1 is a schematic diagram of an example of determining distance according to one embodiment of the present disclosure. [Figure 15] FIG. 2 is a schematic diagram of an exemplary delay time according to an embodiment of the present disclosure. [Figure 16A] FIG. 2 is a schematic diagram of an exemplary scenario in which a UI element is completely moved by a hand, according to one embodiment of the present disclosure. [Figure 16B]FIG. 13 is a schematic diagram of an exemplary displacement-time curve for a scenario in which a UI element is completely moved by a hand, according to an embodiment of the present disclosure. [Figure 17A] 1 is a schematic diagram of an exemplary scenario in which a UI element is not completely moved by a hand, according to an embodiment of the present disclosure. [Figure 17B] FIG. 13 is a schematic diagram of an exemplary displacement-time curve for a scenario in which a UI element is not completely moved by a hand, according to an embodiment of the present disclosure. [Figure 18A] FIG. 2 is a schematic diagram of an exemplary scenario in which a UI element is completely moved by a hand, according to one embodiment of the present disclosure. [Figure 18B] FIG. 13 is a schematic diagram of an exemplary displacement-time curve for a scenario in which a UI element is completely moved by a hand, according to an embodiment of the present disclosure. [Figure 19A] FIG. 2 is a schematic diagram of an exemplary scenario in which a UI element is completely moved by a hand, according to one embodiment of the present disclosure. [Figure 19B] FIG. 13 is a schematic diagram of an exemplary displacement-time curve for a scenario in which a UI element is completely moved by a hand, according to an embodiment of the present disclosure. [Figure 20] 1A-1C are schematic diagrams of exemplary changes to a UI element when pressed, according to some embodiments of the present disclosure. [Figure 21] 1A-1C are schematic diagrams of exemplary changes to a UI element when pressed at different positions, according to some embodiments of the present disclosure. [Figure 22] 1A-1C are schematic diagrams of exemplary changes in a UI element when pressed using different forces, according to some embodiments of the present disclosure. [Diagram 23] 11A-11C are schematic diagrams of exemplary changes to a UI element when pressed for different durations, in accordance with some embodiments of the present disclosure. [Figure 24] 11A-11C are schematic diagrams of exemplary variations of UI elements of different sizes in accordance with some embodiments of the present disclosure. [Diagram 25] 1 is a flowchart of a method for displaying a graphical interface according to an embodiment of the present disclosure. [Figure 26]FIG. 2 is a schematic diagram of an example of depth linking of N UI elements according to one embodiment of the present disclosure. [Figure 27] 2 is a schematic diagram of an exemplary area of ​​influence of a UI element according to one embodiment of the present disclosure. [Figure 28] 1 is a schematic diagram of an example of scaling a UI element based on distance, according to one embodiment of the present disclosure. [Figure 29] FIG. 2 is a schematic diagram of an exemplary delay time according to an embodiment of the present disclosure. [Diagram 30] 1 is a schematic diagram of an exemplary scaling of a UI element with a delay time according to the present disclosure. [Diagram 31] 1 is a schematic diagram of an exemplary displacement of a UI element movement according to an embodiment of the present disclosure. [Figure 32A] 1 is a schematic diagram of an example of restoring a UI element without displacement according to one embodiment of the present disclosure. [Figure 32B] FIG. 13 is a schematic diagram of an example of restoring a UI element with displacement according to one embodiment of the present disclosure. [Figure 33A] 1 is a schematic diagram of an exemplary size-time curve for restoring a UI element with a rebound effect, according to an embodiment of the present disclosure. [Figure 33B] 1 is a schematic diagram of an exemplary displacement-time curve for restoring a UI element with a repulsion effect according to an embodiment of the present disclosure. [Figure 33C] 1 is a schematic diagram of an exemplary size-time curve for restoring a UI element with a rebound effect of multiple rebounds having reduced rebound amplitudes, according to an embodiment of the present disclosure; FIG. [Figure 33D] 1 is a schematic diagram of an exemplary displacement-time curve for restoring a UI element with a rebound effect of multiple rebounds having reduced rebound amplitudes, according to an embodiment of the present disclosure; FIG. [Diagram 34] 1A-1C are schematic diagrams of an exemplary transformation of a UI element as a rigid body when pressed, according to some embodiments of the present disclosure. [Diagram 35] 13A-13C are schematic diagrams of examples of compressing and uncompressing a spring to simulate pressing a UI element, according to some embodiments of the present disclosure. [Diagram 36]1A-1C are schematic diagrams of exemplary changes to a UI element as a non-rigid body when pressed, in accordance with some embodiments of the present disclosure. [Figure 37] 1A-1C are schematic diagrams of exemplary changes in a UI element when pressed using different forces, according to some embodiments of the present disclosure. [Figure 38] 11A-11C are schematic diagrams of exemplary changes to a UI element when pressed for different durations, in accordance with some embodiments of the present disclosure. [Figure 39] 11A-11C are schematic diagrams of exemplary variations of UI elements of different sizes in accordance with some embodiments of the present disclosure. [Diagram 40] 1 is a flowchart of a method for displaying a graphical interface according to an embodiment of the present disclosure. [Diagram 41] FIG. 13 is a schematic diagram of an example of pressure links of N UI elements according to one embodiment of the present disclosure. [Diagram 42] FIG. 13 is a schematic diagram of another example of pressure links of N UI elements according to an embodiment of the present disclosure. [Diagram 43] 2 is a schematic diagram of an exemplary area of ​​influence of a UI element according to one embodiment of the present disclosure. [Diagram 44] 1 is a schematic diagram of an exemplary change in a UI element based on distance, according to one embodiment of the present disclosure. [Diagram 45] FIG. 2 is a schematic diagram of an exemplary delay time according to an embodiment of the present disclosure. [Figure 46A] FIG. 13 is a schematic diagram of an example of restoring a UI element according to one embodiment of the present disclosure. [Figure 46B] 1 is a schematic diagram of an exemplary angle-time curve for restoring a UI element with a repulsion effect according to an embodiment of the present disclosure. [Figure 46C] 13 is a schematic diagram of an exemplary angle-time curve for restoring a UI element with a rebound effect of multiple rebounds having reduced rebound amplitudes, according to an embodiment of the present disclosure; FIG. [Figure 47] FIG. 2 is a diagram of an implementation principle of animation according to one embodiment of the present disclosure. [Figure 48]FIG. 1 is a schematic diagram of a system framework for implementing the capabilities or functionality of a “link” animation effect, according to one embodiment of the present disclosure. [Figure 49] FIG. 2 is a schematic diagram of the relationship between the application side and the UI framework side related to the capability or functionality of the “link” animation effect according to one embodiment of the present disclosure. [Figure 50] 1 is a schematic diagram of a specific illustration of three ways of implementing the capabilities or functionality of a "link" animation effect, according to one embodiment of the present disclosure. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0021] Some exemplary embodiments of the present disclosure are described in detail below with reference to the accompanying drawings. Although some exemplary embodiments of the present disclosure are illustrated in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and is not limited to the exemplary embodiments described herein. Rather, these embodiments are provided to make the present disclosure more complete and complete, and to fully convey the scope of the present disclosure to those skilled in the art.

[0022] As used herein, the term "comprises" and variations thereof indicate an open inclusion, i.e., "including but not limited to." Unless otherwise stated, the term "or" means "and / or." The term "based on" means "based at least in part on." The terms "embodiments" and "some embodiments" both refer to "at least some embodiments." Terms such as "first" and "second" are used to distinguish different objects and do not indicate order, and "first" and "second" are not limited to different types.

[0023] The term "UI" as used herein refers to an interface for interaction and information exchange between a user and an application or an operating system, and performs the conversion between the internal form of information and a form acceptable to the user. For example, the UI of an application is source code written in a particular computer language, such as Java or extensible markup language (XML). The UI source code is parsed and rendered on an electronic device, and is ultimately presented as content that can be identified by the user, such as images, text, or UI elements such as buttons.

[0024] In some embodiments, attributes and content of UI elements on the UI are defined using labels or nodes. For example, UI elements contained in the UI are defined in XML as <textview> 、 <imgview>, and <videoview>A node corresponds to a UI element or an attribute on the UI. After being parsed and rendered, the node is presented to the user as visible content. In addition, the UI of multiple applications, such as a hybrid application, usually further includes a web page. A web page can be understood as a special UI element embedded in the UI of an application. A web page is a source code written in a specific computer language, for example, hyper text markup language (HTML), cascading style sheets (CSS), or JavaScript (JS). The web page source code can be loaded and displayed as content that can be identified by a user using a browser, or a web page display component whose function is similar to that of a browser. The specific content included in the web page is also defined using a label or node in the web page source code. For example, the elements and attributes of a web page are defined as follows in HTML: 、 、 <video>,or <canvas>is defined using

[0025] As used herein, the term "UI element" includes, but is not limited to, visual UI elements such as windows, scroll bars, table views, buttons, menu bars, text boxes, navigation bars, toolbars, images, static text, and widgets.

[0026] Some procedures described in the embodiments of the present disclosure include multiple operations or steps that appear in a particular order. However, it should be understood that the operations or steps may not be performed based on the order of the operations or steps that appear in the embodiments of the present disclosure, or may be performed in parallel. The sequential numbers of the operations are only used to distinguish different operations, and the sequential numbers do not represent the order of execution. In addition, the procedures may include more or fewer operations, the operations or steps may be performed in sequence or in parallel, and the operations or steps may be combined.

[0027] In mobile operating systems such as Android and iOS, animation is essentially the real-time display of a user interface UI or UI element based on a refresh rate. Due to the principle of persistence of image in human vision, a user perceives an image as moving. The animation changes from an initial state of the animation to a final state after an animation duration. In this transformation process, the animation may be controlled based on an animation type and an animation transformation format. For example, the animation type may include displacement animation, rotation animation, scaling animation, and transparency animation, etc. The animation transformation format may be controlled by a controller, such as an interpolator and an estimator. Such a controller may be configured to control the animation transformation speed during the animation duration.

[0028] However, traditionally, animation is merely a combination of simple animation effects, which are monotonous, do not follow physical rules, and do not take into account actual usage scenarios and users' usage habits.

[0029] Therefore, the embodiments of the present disclosure provide a new graphical interface display solution. The embodiments of the present disclosure relate to animation effect links of UI elements on a UI, including drag links, depth links, and pressure links. During linking, the target UI element being manipulated can affect other UI elements that are not manipulated. Specifically, triggering the animation effect of the target UI element can trigger the animation effects of one or more other UI elements together, or even other UI elements across the UI.

[0030] In this way, the link between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be emphasized. Compared with traditional animations in which the animation effects are monotonous and the UI elements are independent and unrelated, the embodiments of the present disclosure can make the animation effects better conform to physical rules and take into account actual usage scenarios and user usage habits, thereby greatly improving the user experience.

[0031] Some exemplary embodiments of the present disclosure will now be described with reference to FIGS. 1A to 46.

[0032] 1A is a schematic diagram of a hardware structure of an electronic device 100 that may implement an embodiment 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, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset jack 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display 194, and a subscriber identity module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyro sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, an optical proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, and a bone conduction sensor 180M, among others.

[0033] It should be understood that the structure shown in this embodiment of the disclosure does not constitute a particular limitation on the electronic device 100. In some other embodiments of the disclosure, the electronic device 100 may include more or fewer components than those shown in the figures, or some components may be combined, or some components may be divided, or a different arrangement of components may be used. The components shown in the figures may be implemented by hardware, software, or a combination of software and hardware.

[0034] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or may be integrated into one or more processors. The controller may generate operation control signals based on the instruction operation codes and time-series signals to control the reading and execution of instructions.

[0035] A memory may further be disposed in the processor 110 and configured to store instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory may store instructions or data that have been recently or periodically used by the processor 110. When the processor 110 needs to use the instructions or data again, the processor may retrieve the instructions or data directly from the memory. This avoids repeated accesses, reduces the latency of the processor 110, and improves system efficiency.

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

[0037] The I2C interface is a bidirectional synchronous serial bus and includes one serial data line (SDA) and one serial clock line (SCL). In some embodiments, the processor 110 may include multiple groups of I2C buses. The processor 110 may be separately 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 may be coupled to the touch sensor 180K through an I2C interface, such that the processor 110 communicates with the touch sensor 180K through the I2C bus interface to implement the touch function of the electronic device 100.

[0038] The I2S interface may be configured to perform audio communication. In some embodiments, the processor 110 may include multiple groups of I2S buses. The processor 110 may be coupled to the audio module 170 via the I2S bus to perform communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 may transmit audio signals to the wireless communication module 160 via the I2S interface to perform a function of answering a call via a Bluetooth headset.

[0039] The PCM interface may also be configured to perform audio communications and to sample, quantize, and encode analog signals. In some embodiments, audio module 170 may be coupled to wireless communications module 160 via a PCM bus interface. In some embodiments, audio module 170 may instead transmit audio signals to wireless communications module 160 via the PCM interface to perform the function of answering a call via a Bluetooth headset. Both the I2S interface and the PCM interface may be configured to perform audio communications.

[0040] The UART interface is a universal serial data bus and is configured to perform asynchronous communication. The bus may be a bidirectional communication bus. The bus converts the transmitted data between serial and parallel communication. In some embodiments, the UART interface is generally configured to connect the processor 110 and the wireless communication module 160. For example, the processor 110 communicates with a Bluetooth module in the wireless communication module 160 via the UART interface to perform a Bluetooth function. In some embodiments, the audio module 170 may transmit an audio signal to the wireless communication module 160 via the UART interface to perform a function of playing music via a Bluetooth headset.

[0041] The MIPI interface may be configured to connect the processor 110 to peripheral devices such as a display 194 or a camera 193. The MIPI interface includes a camera serial interface (CSI) and a display serial interface (DSI), etc. In some embodiments, the processor 110 communicates with the camera 193 via the CSI to perform image capture functions of the electronic device 100. The processor 110 communicates with the display 194 via the DSI to perform display functions of the electronic device 100.

[0042] The GPIO interface may be configured by software. The GPIO interface may be configured to transmit control or data signals. In some embodiments, the GPIO interface may be configured to connect the processor 110 to the camera 193, the display 194, the wireless communication module 160, the audio module 170, the sensor module 180, and the like. The GPIO interface may alternatively be configured as an I2C interface, an I2S interface, a UART interface, a MIPI interface, and the like.

[0043] The USB interface 130 is an interface that complies with the USB standard specification, and specifically may be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc. The USB interface 130 may be configured to connect to a charger to charge the electronic device 100, or may be configured to transmit data between the electronic device 100 and a peripheral device, or may be configured to connect to a headset to play audio through the headset. This interface may be further configured to connect to another electronic device, such as an AR device.

[0044] It may be understood that the interfacing relationships between modules shown in this embodiment of the present disclosure are merely illustrative examples and do not constitute limitations on the structure of the electronic device 100. In some other embodiments of the present disclosure, the electronic device 100 may instead use different interfacing methods or a combination of interfacing methods than the previously described embodiments.

[0045] The charging management module 140 is configured to receive a charging input from a charger. The charger may be a wireless charger or a wired charger. In some embodiments of wired charging, the charging management module 140 may receive the charging input from the wired charger via the USB interface 130. In some embodiments of wireless charging, the charging management module 140 may receive the wireless charging input using a wireless charging coil of the electronic device 100. The charging management module 140 may further provide power to the electronic device 100 via the power management module 141 while charging the battery 142.

[0046] The power management module 141 is configured to connect the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140 and provides power to the processor 110, the internal memory 121, the display 194, the camera 193, the wireless communication module 160, and the like. The power management module 141 may be further configured to monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage or impedance). In some other embodiments, the power management module 141 may instead be located in the processor 110. In some other embodiments, the power management module 141 and the charging management module 140 may instead be located in the same device.

[0047] The wireless communication function of the electronic device 100 may be implemented by antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor, and baseband processor, etc. Antenna 1 and antenna 2 are configured to transmit and receive electromagnetic wave signals. Each antenna of the electronic device 100 may be configured to cover one or more communication frequency bands. Different antennas may be further multiplexed to improve antenna utilization. For example, antenna 1 may be multiplexed as a diversity antenna in a wireless local area network. In some other embodiments, the antennas may be used in combination with a tuning switch.

[0048] The mobile communication module 150 may provide a solution for wireless communication such as 2G, 3G, 4G, 5G, and 6G used in the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, and low noise amplifier (LNA), etc. The mobile communication module 150 may receive electromagnetic waves via the antenna 1, perform processing such as filtering and amplification on the received electromagnetic waves, and transmit the electromagnetic waves to the modem processor for demodulation. The mobile communication module 150 may further amplify the signal modulated by the modem processor and convert the signal to an electromagnetic wave for emission via the antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 may be disposed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 may be disposed in the same device as at least some modules of the processor 110.

[0049] The modem processor may include a modulator and a demodulator. The modulator is configured to modulate a low-frequency baseband signal to be transmitted into a medium or high-frequency signal. The demodulator is configured to demodulate a received electromagnetic signal into a low-frequency baseband signal. The demodulator then transmits the low-frequency baseband signal obtained by demodulation to a baseband processor for processing. The low-frequency baseband signal is processed by the baseband processor and then transmitted to an application processor. The application processor outputs an acoustic signal via an audio device (such as but not limited to a speaker 170A or a receiver 170B) or displays an image or video via a display 194. In some embodiments, the modem processor may be an independent device. In some other embodiments, the modem processor may be independent from the processor 110 and is located in the same device as the mobile communication module 150 or another functional module.

[0050] The wireless communication module 160 may provide a wireless communication solution used in the electronic device 100. The wireless communication solution includes wireless local area networks (WLAN) (e.g., wireless fidelity (Wi-Fi) network), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC) technology, or infrared (IR) technology, etc. The wireless communication module 160 may be one or more devices incorporating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, performs frequency modulation and filtering processing on the electromagnetic wave signal, and transmits the processed signal to the processor 110. The wireless communication module 160 may further receive a signal to be transmitted from the processor 110, perform frequency modulation and amplification on the signal, and convert the signal into an electromagnetic wave for radiation via the antenna 2.

[0051] In some embodiments, antenna 1 and mobile communication module 150 of electronic device 100 are coupled and antenna 2 and wireless communication module 160 of electronic device 100 are coupled such that electronic device 100 can communicate with a network and another device using wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-CDMA), long term evolution (LTE), 5G and subsequent evolution standards, BT, GNSS, WLAN, NFC, FM, and / or IR technology, etc. GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), beidou navigation satellite system (BDS), quasi-zenith satellite system (QZSS), and / or satellite based augmentation systems (SBAS).

[0052] The electronic device 100 performs display functions, such as by a GPU, a display 194, and an application processor. The GPU is a microprocessor for image processing and is connected to the display 194 and the application processor. The GPU is configured to perform mathematical and geometric calculations and render images. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0053] The display 194 is configured to display images, videos, and the like. The display 194 includes a display panel. In some embodiments, the electronic device 100 may include one or N displays 194, where N is a positive integer greater than 1.

[0054] The electronic device 100 may perform image capture functions using an ISP, a camera 193, a video codec, a GPU, a display 194, and an application processor, etc. The ISP is configured to process data fed back by the camera 193. For example, during capture, a shutter is pressed, light is transmitted to a camera light receiving element through a lens, the light signal is converted into an electrical signal, and the camera light receiving element transmits the electrical signal to the ISP for processing to convert the electrical signal into a visible image. The ISP may further perform algorithmic optimization on noise, brightness, and aspect of the image. The ISP may further optimize parameters such as exposure and color temperature of the image capture scene. In some embodiments, the ISP may be located in the camera 193.

[0055] The camera 193 is configured to capture still images or videos. An optical image of an object is generated through a lens and projected onto a light receiving element. The light receiving element may be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The light receiving element converts the optical signal into an electrical signal, and then transmits the electrical signal to the ISP for converting the electrical signal into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard format, such as RGB or YUV. In some embodiments, the electronic device 100 may include one or N cameras 193, where N is a positive integer greater than 1.

[0056] The digital signal processor is configured to process digital signals and may process other digital signals in addition to the digital image signal, for example, when the electronic device 100 selects a frequency, the digital signal processor may be configured to perform a Fourier transform or the like on the frequency energy.

[0057] A video codec is configured to compress or decompress digital video. Electronic device 100 may support one or more types of video codecs. In this manner, electronic device 100 may play or record video in multiple encoding formats, e.g., moving picture experts group (MPEG) 1, MPEG 2, MPEG 3, and MPEG 4.

[0058] The NPU is a neural-network (NN) computing processor. The NPU can quickly process input information by referring to the structure of biological neural networks, such as the transmission mode between human brain neurons, and can also continuously perform self-learning. Applications such as intelligent cognition of the electronic device 100 can be implemented by the NPU. Intelligent cognition includes image recognition, face recognition, voice recognition, text understanding, and the like.

[0059] The external memory interface 120 may be configured to connect to an external memory card, such as a Micro SD card, to expand the storage capabilities of the electronic device 100. The external memory card communicates with the processor 110 via the external memory interface 120 to perform data storage functions. For example, files such as music and videos are stored on the external memory card.

[0060] The internal memory 121 may be configured to store computer executable program code. The executable program code includes instructions. The internal memory 121 may include a program storage area and a data storage area. The program storage area may store an operating system and applications required for at least one function (such as sound playback and image display functions). The data storage area may store data created during use of the electronic device 100 (such as audio data and an address book). In addition, the internal memory 121 may include a high-speed random access memory or may include a non-volatile memory, such as at least one magnetic disk storage device, flash memory, or universal flash storage (UFS). The processor 110 operates instructions stored in the internal memory 121 and / or instructions stored in a memory located in the processor to perform various functional applications and data processing of the electronic device 100.

[0061] The electronic device 100 may perform audio functions, such as music playback and recording, using an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset jack 170D, and an application processor, etc.

[0062] The SIM card interface 195 is configured to connect to a SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to perform contact or separation with the electronic device 100. The electronic device 100 can support one or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support a Nano SIM card, a Micro SIM card, or a SIM card, etc. Multiple cards can be inserted into the same SIM card interface 195 at the same time. The multiple cards can be of the same type or different types. The SIM card interface 195 can be compatible with different types of SIM cards. The SIM card interface 195 can also be compatible with an external memory card. The electronic device 100 interacts with the network through the SIM card to perform functions such as calling and data communication. In some embodiments, the electronic device 100 uses an eSIM, i.e., an internal SIM card. The eSIM card may be built into the electronic device 100 and cannot be separated from the electronic device 100.

[0063] The software system of the electronic device 100 may use a layered architecture, an event-driven architecture, a microkernel architecture, a microservices-based architecture, or a cloud architecture. In the embodiment of the present disclosure, a mobile operating system with a layered architecture is used as an example to describe the software structure of the electronic device 100.

[0064] 1B is a schematic diagram of the software structure of the electronic device 100 according to one embodiment of the present disclosure. In a layered architecture, the software is divided into several layers, each layer having a clear role and task. The layers communicate with each other through software interfaces. In some embodiments, the operating system may be divided into four layers from top to bottom: an application layer, an application framework layer, an operating system runtime and system libraries, and a kernel layer.

[0065] The application layer may include a set of application packages, such as applications for camera, gallery, calendar, calling, maps, navigation, WLAN, Bluetooth, music, video, and messaging, as shown in FIG.

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

[0067] As shown in FIG. 1B, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, and a notification manager, etc. The window manager is configured to manage window programs. The window manager may obtain the size of the display, determine whether there is a status bar, perform screen locking, take screenshots, etc. The content provider is configured to store and retrieve data and enable the data to be accessible by the application. The data may include video, images, audio, placed or answered calls, browsing history, bookmarks, address books, etc. The view system includes visual controls, such as controls for displaying text and controls for displaying images. The view system may be configured to build applications. The display interface may include one or more views. For example, a display interface that includes a notification icon for a message may include a text display view and an image display view. The phone manager is configured to provide management of communication functions of the electronic device 100, such as call status (including answering and rejecting, etc.). The resource manager provides various resources, such as localized strings, icons, images, layout files, and video files, to the application. The notification manager may be configured to allow applications to display notification information in the status bar and to convey notification messages. The notification manager may disappear automatically after a short pause without requiring user interaction. For example, the notification manager may be configured to provide download completion notifications and message notifications, etc. The notification manager may instead be notifications that appear in the form of graphs or scrollbar text in the top status bar of the system, notifications of applications running in the background, or notifications that appear on the screen in the form of dialog windows.For example, text information may be displayed in a status bar, an alert sound may be played, the electronic device may vibrate, or an indicator light may flash.

[0068] Please refer to FIG. 1B further. The operating system runtime includes a kernel library and a virtual machine. The operating system runtime is responsible for the scheduling and management of the operating system. The kernel library includes two parts, namely, the functions that need to be called in the Java language and the kernel library of the operating system. The application layer and the application framework layer run on a virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is configured to implement functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection. The system library may include multiple function modules, for example, a surface manager, Media Libraries, a three-dimensional graphic processing library (e.g., OpenGL ES), and a 2D graphic engine (e.g., SGL).

[0069] The surface manager is configured to manage the display subsystem and provide a blend of 2D and 3D layers for multiple applications. The media library supports playback and recording of multiple commonly used audio and video formats as well as still image files, etc. The media library may support multiple audio and video encoding formats such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG. The three-dimensional graphics processing library is configured to perform three-dimensional graphics drawing, image rendering, composition, and layer processing, etc. The 2D graphics engine is a drawing engine for 2D drawing.

[0070] The kernel layer is a layer between the hardware and the software, and includes at least a display driver, a camera driver, an audio driver, and a sensor driver.

[0071] 2 is a block diagram of another electronic device 200 that may implement an embodiment of the present disclosure. As shown in FIG. 2, the electronic device 200 may be in the form of a general-purpose computing device. The components of the electronic device 200 may include, but are not limited to, one or more processors or processing units 210, memory 220, storage device 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 a physical or virtual processor and is capable of performing various processes based on a program stored in the memory 220. In a multiprocessor system, multiple processing units execute computer-executable instructions in parallel to improve the parallel processing capabilities of the electronic device 200.

[0072] The electronic device 200 typically includes a number of computer storage media. Such media may be any available media accessible to the electronic device 200, including, but not limited to, volatile and non-volatile media and removable and non-removable media. The memory 220 may be volatile memory (e.g., registers, cache, random access memory (RAM)), non-volatile memory (e.g., read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory), or a combination thereof. The storage device 230 may be removable or non-removable media and may include a machine-readable medium, such as a flash drive, a disk, or any other medium. The storage device 230 may be configured to store information and / or data (e.g., training data used for training) and may be accessed within the electronic device 200.

[0073] The electronic device 200 may further include another removable / non-removable or volatile / non-volatile storage medium. Although not shown in FIG. 2, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk") and an optical disk drive for reading and writing to a removable non-volatile optical disk may be provided. In these cases, each drive may be connected to a bus (not shown) via one or more data medium interfaces. The memory 220 may include a computer program product 225, which has one or more program modules. These program modules are configured to execute the object editing method or process in the embodiment of the present disclosure.

[0074] The communication unit 240 communicates with another computing device via a communication medium. Furthermore, the functionality of the components of the electronic device 200 may be implemented using a single computing cluster or multiple computing machines. These computing machines may communicate with each other via a communication connection. Thus, the electronic device 200 may be operated in a networked environment using logical connections to one or more other servers, network personal computers (PCs), or other network nodes.

[0075] The input device 250 may be one or more input devices, such as a mouse, a keyboard, a tracking ball, etc. The output device 260 may be one or more output devices, such as a display, a speaker, or a printer. In this embodiment of the present disclosure, the output device 260 may include a touch screen having a touch sensor, which may accept a user's touch input. The electronic device 200 may further communicate with one or more external devices (not shown) via the communication unit 240 based on a request. The external devices, such as a storage device and a display device, communicate with one or more devices that allow a user to interact with the electronic device 200, or communicate with any device (e.g., a network adapter or a modem) that allows the 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).

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

[0077] Drag Link Currently, in order to display more information and better display information, the screen of electronic devices is becoming larger and larger, the layout of the UI on the screen is becoming more and more complex, and the difference in size and shape of UI elements is becoming larger and larger. In this case, there are various irregular UI elements arranged in various irregular layouts on the UI. For example, in the HiBoard, control center, application market, and gallery of a smartphone, there are various irregular UI elements such as controls, cards, images, and covers.

[0078] Traditionally, there is no animation effect link between various irregular UI elements. In other words, triggering an animation effect of a target UI element does not trigger the animation effects of one or more other UI elements together. The animation effects of UI elements are independent and unrelated. Therefore, traditional animation effects are monotonous, inflexible, and unable to reflect the relationships between UI elements.

[0079] An embodiment of the present disclosure relates to animation effect linking of UI elements on a UI during dragging, also referred to as drag linking. During drag linking, a target UI element being dragged may affect another UI element that is not being dragged. Specifically, during drag linking, triggering an animation effect of the target UI element may trigger animation effects of one or more other UI elements together, or even other UI elements across the UI. For example, during drag linking, when a target UI element is being dragged, in addition to the target UI element moving with animation effects according to the drag, another UI element may also move with corresponding animation effects to visually present the linked drag.

[0080] In this way, the link between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be emphasized. Compared with traditional animations in which the animation effects are monotonous and the UI elements are independent and unrelated, the embodiments of the present disclosure can make the animation effects better conform to physical rules and take into account actual usage scenarios and user usage habits, thereby greatly improving the user experience.

[0081] Some exemplary embodiments of a drag link are described below with reference to Figures 3A-19B.

[0082] 3A-3C are schematic diagrams of example UIs 300A-300C according to 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. Furthermore, a UI may have irregular portions instead. For example, as shown in FIG. 3B, the right side of UI elements 16 and 18 on UI 300B is empty, i.e., no UI elements are present. However, embodiments of the present disclosure are also applicable to UIs that have regular layouts and have UI elements of regular sizes and shapes. For example, as shown in FIG. 3C, UI 300C has a regular layout, and UI elements 25-40 on UI 300C all have the same size and the same shape. It should be understood that embodiments of the present disclosure are applicable to any UI that has a suitable regular or irregular layout and has UI elements of regular and irregular sizes and shapes.

[0083] A UI element on a UI may be dragged. For example, when a user wants to move a UI element, the user may drag the UI element. For example, when a user wants to change the position of a UI element on the UI, merge the UI element with another UI element, or place the UI element in a toolbar or trash can, the user may drag the UI element. When a drag of a UI element is detected, the UI element may move with an animation effect to visually present the drag action. As described above, during drag linking, a target UI element being dragged may affect another UI element that is not being dragged. Specifically, when a target UI element is being dragged, in addition to the target UI element moving with an animation effect according to the drag, the other UI element may also move with a corresponding animation effect to visually present the linked drag.

[0084] FIG. 4 is a schematic diagram of an example drag link 400 according to some embodiments of the present disclosure. As shown in FIG. 4, when a drag of a UI element 3 is detected, the UI element 3 may move with an animation effect to visually present the drag action. In addition to the UI element 3 moving with an animation effect according to the drag, other UI elements 2 and 4 may also move with corresponding animation effects to visually present the linked drag. For clarity, FIG. 4 only shows the linked movement of UI elements 2 and 3. It should be understood that the linked movement may take place between any at least two UI elements on any UI, for example, between any at least two UI elements on UIs 300A-300C.

[0085] Specifically, at time T01, a drag of the UI element 3 is detected, which causes the UI element 3 and other UI elements 2 and 4 to move. At time T02, the interval between the UI element 3 and the UI element 4 in the drag direction is shortened. This interval may represent the distance between the corresponding reference points of the two UI elements. In some embodiments, the center point of the UI element may be determined to be the reference point of the UI element. Optionally, this interval may represent the distance between the adjacent boundaries of the two UI elements. As shown in FIG. 4, in some embodiments, the UI element 3 may even cover at least a part of the UI element 4. Meanwhile, the interval between the UI element 3 and the UI element 2 in the direction opposite to the drag direction is lengthened. This means that the moving speed of the UI element 3 is faster than the moving speed of the UI elements 2 and 4. At time T03, the interval between the UI element 3 and the UI element 4 in the drag direction is lengthened, and the interval between the UI element 3 and the UI element 2 in the direction opposite to the drag direction is shortened. This means that the moving speed of the UI element 3 is slower than the moving speed of the UI elements 2 and 4. At time T04, the UI element 3 and the other elements 2 and 4 move to a predetermined distance and stop moving. In some embodiments, the predetermined distance may be determined based on a friction model. The following describes in detail how to determine the distance based on the friction model. Therefore, the description is omitted here.

[0086] The above describes an example of linked movement of UI elements, the following describes the principles of movement of UI elements.

[0087] The movement of a UI element may be controlled by the following factors: friction factor, link factor, hand tracking factor, hand tracking ratio factor, hand release repulsion factor, and / or inertia repulsion factor. For example, the friction factor may control the UI element to stop moving. The link factor may control the animation effect of another UI element. The hand tracking factor may control the hand tracking movement of the UI element, e.g., the hand tracking movement of the UI element when it is being dragged without crossing a boundary. The hand tracking ratio factor may control the ratio of the hand tracking movement of the UI element, e.g., the ratio of the displacement of the UI element to the displacement of the hand when the UI element is being dragged over a boundary. The hand release repulsion factor may control the reset of the UI element after the hand is released, e.g., the reset of the UI element after the UI element is dragged over a boundary and the hand is released. The inertia repulsion factor may control the repulsion of the UI element after it crosses a boundary. For example, the friction factor may not be able to stop the movement of the UI element when the UI element moves over a boundary. In this case, the inertial repulsion factor may control the repulsion of the UI element after it crosses the boundary.

[0088] The following describes in detail the friction model related to the friction factor and the elastic force model related to the link factor. In general, the distance moved of a UI element can be determined using the friction model, so that the original position and the target position of the movement of the UI element are determined. In addition, the spring parameters of another UI element that moves correspondingly can be determined based on the spring parameters (e.g., elastic coefficient or damping coefficient) of the UI element being dragged, using a transmission method described in detail below. In this way, in the movement process of the UI element being dragged and the UI element that moves correspondingly, each UI element is controlled to move according to the elastic force model based on the spring parameters of each UI element.

[0089] The friction model may be used to determine the distance a UI element is moved, for example, after a hand is released or flicked, which may be determined using equations (1) and (2) below.

number

number

[0090] From the above formula, it can be known that the movement duration t can be determined using formula (1). Thus, the distance S(t) can be further determined using formula (2). In this way, the moved distance of the UI element can be easily determined. In addition, since various parameters (e.g., friction and initial velocity) in the formula are configurable, the moved distance of the UI element can be influenced by configuring these parameters, thereby improving the flexibility of the animation effect and the user experience.

[0091] The movement of a UI element that fits the friction model satisfies the velocity-time curve and the displacement-time curve of the friction model. Figures 5A and 5B are schematic diagrams of an example velocity-time curve 500A and an example displacement-time curve 500B of the friction model, respectively, in accordance with some embodiments of the present disclosure. As shown in Figures 5A and 5B, with friction only, the velocity of the movement of the UI element decreases over time to 0, and the distance of the movement of the UI element increases over time until the UI element stops moving.

[0092] The above describes how friction factors control a UI element to stop moving. In addition, whether the positions to which a UI element can be moved are limited can also control where the UI element stops moving.

[0093] Specifically, in some embodiments, the position to which the UI element can be moved is not limited. In this case, the distance determined based on the friction model is the distance to which the UI element is moved. However, in some embodiments, the position to which the UI element can be moved is limited. In other words, the UI element can only be moved to a pre-determined position. In this case, the distance to which the UI element is moved may be determined based on the friction model, but if the UI element is not located at the pre-determined position after the UI element is moved the distance to which the UI element is moved, the distance to which the UI element is moved needs to be adjusted so that the UI element can be moved to the pre-determined position. For example, the UI element may be moved to a pre-determined position that is closest to the stop position determined based on the friction model. Thus, the distance to which the UI element is moved may be determined based on both the friction model and the pre-determined position.

[0094] 6 is a schematic diagram of examples 600 of limited and unlimited moving positions, according to some embodiments of the present disclosure. As shown in FIG. 6, when the positions to which a UI element can be moved are limited, the UI element can only be moved from its original position 620 on the screen 610 to a predetermined position 630. In contrast, when the positions to which a UI element can be moved are not limited, the UI element can be moved from its original position 620 on the screen 610 to any position 640.

[0095] Furthermore, in some embodiments, the range within which the UI element can be moved may be further limited. A movement of the UI element beyond this range is considered to exceed the boundary. This range may be any suitable range. For example, this range may be a range in which the distance to the screen boundary is less than a predetermined percentage or a predetermined number of pixels of the screen size (e.g., 10% or 1000 pixels), or a range in which the distance from the original position of the UI element to the target position is less than a predetermined percentage or a predetermined number of pixels of the screen size (e.g., 50% or 10000 pixels). Thus, the distance to which the UI element is moved may also be determined based on this range.

[0096] The above describes the friction model in detail, and the following further describes the elastic force model.

[0097] The curve of the displacement of the movement of the UI element changing with time may be an elastic force curve that fits the elastic force model. The velocity may be determined based on the displacement and time, so the movement velocity of the UI element also fits the elastic force model. Therefore, it may be considered that the movement of the UI element may simulate the motion law of a spring. It should be understood that, in order to explain the elastic force model herein, the curve of the displacement of the movement of the UI element changing with time is described as an elastic force curve. However, the curve of the displacement of the movement of the UI element changing with time may also be any suitable predefined curve, such as a Bessel curve.

[0098] The elastic force model may be based on damped vibration equations (3) and (4) under Hooke's law. f=ma (3)

number

[0099] The elastic modulus is the amount of force required by a unit deformation of the spring. A larger elastic modulus k indicates a shorter time for the spring to return to an equilibrium position from maximum amplitude, and vice versa. The elastic modulus k is configurable by the electronic device or by the user. In some embodiments, the value range of the elastic modulus k may be 1-999, and a recommended value range for the elastic modulus k may be 150-400.

[0100] The damping coefficient g is a quantitative expression of the shock absorbing force (e.g., fluid resistance or friction) of the spring in the vibration process. The shock absorbing force may gradually reduce the amplitude of the spring until the spring stops at the equilibrium position. A larger damping coefficient indicates that the spring stops at the equilibrium position more easily, and vice versa. The damping coefficient g is configurable by the electronic device or the user. In some embodiments, the value range of the damping coefficient g may be 1 to 99.

[0101] Furthermore, it should be understood that, as described above, the distance S(t) moved by the UI element can be determined based on a friction model. When the UI element moves a distance S(t), S(t) can be considered as the deformation of a spring. Thus, S(t) is equal to x.

[0102] The elastic force model has three damping states: critically damped, underdamped, and overdamped. The critical damping satisfies the following equation (5): g 2 =4×m×k (5) g represents the damping coefficient of the spring, m represents the size of the UI element, and k represents the elasticity coefficient of the spring.

[0103] Using critical damping as a criterion, if the damping value is greater than the critical damping value, the state is overdamped, or if the damping value is less than the critical damping value, the state is underdamped.

[0104] In different damping states, the displacement-time curves of the UI element are different. Figures 7A-7C are schematic diagrams of example curves 700A-700C of the deformation amount x of a spring over time t in a critically damped state, an underdamped state, and an overdamped state, respectively, according to some embodiments of the present disclosure. As shown in Figure 7A, in the critically damped state, the spring stops moving and does not oscillate after returning to the equilibrium position at the most stable speed and the shortest time. As shown in Figure 7B, in the underdamped state, the amplitude of the spring slowly and gradually decreases over multiple oscillations, and the spring eventually returns to the equilibrium position. As shown in Figure 7C, in the overdamped state, the spring barely oscillates, the amplitude gradually decreases, and the spring reaches the equilibrium position.

[0105] As described above, the curve of the displacement of the movement of the UI element over time may be an elastic force curve that fits the elastic force model. Therefore, it may be considered that the movement of the UI element may simulate the movement rule of a spring. In other words, the change rule of the displacement of the UI element may simulate the change rule of the deformation amount of a spring. The change rule of the displacement of the UI element may be adjusted by adjusting the damping coefficient and / or the elastic coefficient, so that the UI element simulates the movement rule of a spring in a critically damped state, an overdamped state, or an underdamped state.

[0106] Furthermore, as described above, the spring parameters of another UI element that moves correspondingly can be determined based on the spring parameters (e.g., elasticity coefficient or damping coefficient) of the UI element being dragged, using a transmission method described in detail below. In this way, in the moving process of the UI element being dragged and the UI element that moves correspondingly, each UI element is controlled to move according to an elastic force model based on the spring parameters of each UI element. In this way, the UI element being dragged and the UI element that moves correspondingly can simulate the movement rules of springs with different spring parameters to present an animation effect in which the spacing between the UI elements in the drag direction is first shortened and then restored (similar to a spring being first compressed and then restored), and the spacing between the UI elements in the direction opposite to the drag direction is first lengthened and then restored (similar to a spring being first stretched and then restored). This increases the dynamic feedback to the user's drag action.

[0107] The animation effect of the correspondingly moving UI element is determined based on the animation effect of the movement of the UI element being dragged and the distance between the UI element being dragged and the correspondingly moving UI element. Since the animation effect of the movement of the correspondingly moving UI element changes with distance, it can also be considered that the animation effect of the movement of the UI element is propagated with distance. In some embodiments, the propagation can be a non-linear propagation. Optionally, the propagation can be a linear propagation instead.

[0108] For example, in the case of non-linear transfer, the animation effect of the movement of a correspondingly moving UI element may be determined using the following equation (6): x n =x×(n+1) -0.18×g (6) x n represents the animation effect of the movement of the correspondingly moving UI element; x represents the animation effect of the movement of the UI element being dragged; n represents the distance between the UI element being dragged and the correspondingly moving UI element; g represents the transmission coefficient. When the transmission coefficient is 0, the animation effect of the movement of the correspondingly moving UI element is the same as the animation effect of the movement of the UI element being dragged. The constants in equation (6) are only examples and can be configured by the electronic device or the user.

[0109] When the curve along which the displacement of the movement of the UI element changes over time 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 can be determined based on at least one of the damping coefficient and the elastic coefficient.

[0110] For example, x may 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 UI element being dragged is transmitted to the corresponding moving UI element based on the distance n, so that the ratio of the elastic coefficient to the damping coefficient of the corresponding moving UI element x n is obtained. Thus, the animation effect of the movement of the UI element being dragged can be transferred to the correspondingly moving UI element based on the distance. A larger ratio of the elasticity coefficient to the damping coefficient indicates a weaker association between the movements of the UI elements and a larger difference between the spring properties and the movements of the UI elements. In this way, the spring can be considered "soft". Conversely, a smaller ratio of the elasticity coefficient to the damping coefficient indicates a stronger association between the movements of the UI elements and a smaller difference between the spring properties and the movements of the UI elements. In this way, the spring can be considered "stiff".

[0111] It should be understood that x, which represents the ratio of the elasticity coefficient to the damping coefficient of the UI element being dragged, is merely an example. x may be any suitable factor. In another example, x may be the elasticity coefficient of the UI element being dragged. In yet another example, x may instead be the damping coefficient of the UI element being dragged.

[0112] Further, although the elastic force curve is described in detail above, the animation effect of the movement of the UI element may follow any suitable pre-determined curve, such as a Bessel curve. Depending on the number of orders of the Bessel curve, the Bessel curve may have a control point corresponding to the order. For example, for a quadratic Bessel curve, the Bessel curve may have two control points. Similarly, for a first order Bessel curve, the Bessel curve may have one control point, for a third order Bessel curve, the Bessel curve may have three control points, and so on. When the curve on which the displacement of the movement of the UI element changes over time is a Bessel curve, the animation effect of the movement may be controlled using at least one coordinate of at least one control point of the Bessel curve. For example, for a quadratic Bessel curve, one or both of the two control points of the quadratic Bessel curve may be used to control the animation effect of the movement. Thus, x may be determined based on at least one coordinate of at least one control point.

[0113] The above describes nonlinear transfer in detail. In the case of linear transfer, the animation effect of the movement of the correspondingly moving UI element can be determined using the following equation (7): x n = xg × n (7) x n represents the animation effect of the movement of the correspondingly moving UI element. x represents the animation effect of the movement of the UI element being dragged. n represents the distance between the UI element being dragged and the correspondingly moving UI element. g represents the transmission coefficient. When the transmission coefficient is 0, the animation effect of the movement of the correspondingly moving UI element is the same as the animation effect of the movement of the UI element being dragged.

[0114] Similar to the nonlinear transfer, when the curve along which the displacement of the movement of the UI element changes over time 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 the damping coefficient and the elastic coefficient. When the curve along which the displacement of the movement of the UI element changes over time is a Bessel curve, the animation effect of the movement may be controlled using at least one coordinate of at least one control point of the Bessel curve. Thus, x may be determined based on at least one coordinate of at least one control point.

[0115] The above describes the drag linking principle in detail. The following further describes the process of using the drag linking principle to control linked movement of UI elements.

[0116] 8 is a flowchart of a graphical interface display method 800 according to one embodiment of the present disclosure. It should be appreciated that the method 800 may be performed by the electronic device 100 described with reference to FIG. 1 or the electronic device 200 described with reference to FIG. 2. The method 800 is described herein with reference to the UI 300A of FIG. However, it should be appreciated that the UI 300A is merely an example and that the method 800 is applicable to any suitable interface, including but not limited to the UIs 300B and 300C.

[0117] In block 810, M user interface UI elements are displayed on a screen of an electronic device, where M is a positive integer greater than 1. See Figure 9. For example, the M UI elements may be UI elements 1-13.

[0118] In block 820, a drag performed on a first UI element among the M UI elements is detected. For example, the first UI element may be UI element 5. The drag performed on the first UI element allows the first UI element to move with an animation effect to present a drag effect.

[0119] In block 830, in response to a drag performed on the first UI element, each of the N UI elements on the screen is enabled to move with a corresponding animation effect, where N is a positive integer in the range of 1 to M-1. Thus, a linked drag is visually indicated.

[0120] In some embodiments, the drag link may be used on all UI elements on the screen. In this case, M-1 UI elements among the M UI elements other than the first UI element may be determined to be the N UI elements. Optionally, the drag link may be applied to only a portion of the 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 among the M UI elements that are within the influence area are determined as the N UI elements. For example, a larger size of the first UI element may indicate a larger influence area of ​​the first UI element. Optionally, the influence area may also be narrowed with a size reduction. This is not limited here in the disclosure. For example, the influence area may be a circle using the reference point of the first UI element as a center and having a predetermined radius. It should be understood that the influence area may be any suitable area having any shape. For example, the influence area is a rectangle or a diamond having a predetermined size, etc. The influence area may be configurable by the electronic device and the user. This is not limited here in the disclosure.

[0121] Additionally, in some embodiments, a UI element that intersects with the influence area may be considered to be within the influence area. Optionally, when the influence area is a circle with a predetermined radius, a UI element may be considered to be within the influence area if the distance between the UI element and the first UI element is less than the predetermined radius of the influence area.

[0122] 9 is a schematic diagram of example areas of influence of UI elements according to one embodiment of the present disclosure. As shown in FIG. 9, UI elements 3, 4, 7, and 8 are within the area of ​​influence 910 of UI element 5, so UI elements 3, 4, 7, and 8 move correspondingly with UI element 5. In addition, UI elements 1, 2, 6, and 9-13 are not within the area of ​​influence 910 of UI element 5, so UI elements 1, 2, 6, and 9-13 do not move correspondingly with UI element 5.

[0123] Please refer to Figure 8 again. To enable the N UI elements to move with corresponding animation effects, a distance between the first UI element and each of the N UI elements may be determined. The following describes a method for determining a distance between the first UI element and a second UI element within the N UI elements.

[0124] In some embodiments, the distance may be classified into multiple distance levels based on the range in which the distance is located. For example, the distance level of the operated UI element may be 0, and the distance level of the linked UI element may be 1, 2, 3, ... based on the distance between the linked UI element and the operated UI element. UI elements at the same distance level may be considered to have the same distance to the operated UI element. Thus, by using the distance level, the link between UI elements may be simplified, such that UI elements at the same distance level are linked in the same way, thereby improving the consistency and coordination of the link. However, it should be understood that the distance may be used instead during linking so that the UI elements are linked more accurately. In the following, the distance level may be interchangeably referred to as distance.

[0125] FIG. 10 is a schematic diagram of an example 1000 of determining a distance according to an embodiment of the present disclosure. As shown in FIG. 10, in some embodiments, a first reference point of a first UI element (e.g., UI element 5) and a second reference point of a second UI element (e.g., UI element 2) may be determined. In FIG. 10, the reference point of each UI element is indicated by a "+". In some embodiments, the center point of the UI element may be determined to be the reference point of the UI element. Optionally, the reference point of the UI element may be configurable by the electronic device or the user, so that the location of the reference point may be any suitable location. This is not limited here in the present disclosure. Thus, the distance between the first reference point and the second reference point may be determined to be the distance between the first UI element and the second UI element.

[0126] For example, assume that the position coordinates of a first reference point on the screen are (x0, y0) and the position coordinates of a second reference point on the screen are (x1, y1). In this case, the distance can be determined using the following equation (8):

number

[0127] As shown in FIG. 10, the distances between UI element 5 and another UI element determined using the above-described method are as follows: The distance between UI element 5 and UI element 5 is 0. The distance between UI element 5 and each of UI elements 3, 7, and 8 is 1. The distance between UI element 5 and each of UI elements 2, 4, 6, and 9 is 2. The distance between UI element 5 and each of UI elements 1 and 10-13 is 3.

[0128] 11A-11C are schematic diagrams of distance determining examples 1100A-1100C according to an embodiment of the present disclosure. As shown in FIG. 11A, in some embodiments, a first reference point of a first UI element may be determined. A plurality of circles, e.g., circles 1110A-1130A, each using the first reference point as a center of the circle and having a respective radius, may be determined. It should be understood that in addition to circles, any other suitable shapes, such as a rectangle or a diamond, may be determined using the first reference point as a center and having a respective size. This is not limited here in the present disclosure.

[0129] For example, as shown in FIG. 11B, in some embodiments, a first reference point of a first UI element may be determined. A plurality of rectangles, such as rectangles 1110B and 1120B, using the first reference point as a center and having respective sizes may be determined. Additionally, as shown in FIG. 11C, in some embodiments, a first reference point of a first UI element may be determined. A plurality of diamonds, such as rectangles 1110C-1140C, using the first reference point as a center and having respective sizes may be determined.

[0130] In some embodiments, the radius of the circles may be increased based on a predetermined size or percentage. Optionally, the radius of the circles may be configurable by the electronic device or the user. This is not a limitation hereof.

[0131] Thus, a circle that intersects with the second UI element may be determined from among the multiple circles, and the radius of the intersecting circle may be determined to be the distance. In some embodiments, if more than one circle intersects with the second UI element, a target circle that intersects with the second UI element and has a smallest radius may be determined from among these circles. Furthermore, in some embodiments, if no circle intersects with the second UI element, the circle closest to the second UI element may be used as the target circle. Thus, the radius of the target circle may be determined to be the distance.

[0132] As shown in FIG. 11, the distances between UI element 5 and another UI element determined using the above-mentioned method are as follows: The distance between UI element 5 and UI element 5 is 0. The circle that intersects with UI elements 3, 4, 7, and 8 and has the smallest radius is circle 1110, so the distance between each of UI elements 3, 4, 7, and 8 and UI element 5 is 1. The circle 1120 intersects with UI elements 2, 6, and 9, so the distance between each of UI elements 2, 6, and 9 and UI element 5 is 2. In addition, the circle 1130 intersects with UI elements 1 and 10-13, so the distance between each of UI elements 1 and 10-13 and UI element 5 is 3.

[0133] FIG. 12 is a schematic diagram of an example 1200 of determining distance according to an embodiment of the present disclosure. As shown in FIG. 12, in some embodiments, a horizontal interval between a first UI element and a second UI element and / or a vertical interval between a first UI element and a second UI element may be determined. In some embodiments, the horizontal interval may represent a sum of the lengths of one or more horizontal intervals between the first UI element and the second UI element. The horizontal interval may represent a spacing between the vertical boundaries of the two UI elements on the screen. Similar to the horizontal interval, the vertical interval may represent a sum of the lengths of one or more vertical intervals between the first UI element and the second UI element. The vertical interval may represent a spacing between the horizontal boundaries of the two UI elements on the screen. In the case of an irregular layout, the lengths of the horizontal and vertical intervals between the UI elements may be irregular. In addition, the lengths of the horizontal and vertical intervals between the UI elements may be configurable by the electronic device or the user.

[0134] Therefore, the distance may be determined based on the horizontal interval and / or the vertical interval. For example, there are two vertical intervals between UI element 5 and UI element 13. Therefore, the distance between UI element 5 and UI element 13 may be the sum of the lengths of the two vertical intervals. In another example, there is one horizontal interval between UI element 12 and UI element 13. Therefore, the distance between UI element 12 and UI element 13 may be the length of this horizontal interval.

[0135] 12, the distances between UI element 5 and other UI elements determined using the method described above are as follows: The distance between UI element 5 and UI element 5 is 0. The distances between UI element 5 and each of UI elements 2-4 and 6-9 are 1. The distances between UI element 5 and each of UI elements 1 and 10-13 are 2.

[0136] FIG. 13 is a schematic diagram of an example 1300 of determining a distance according to an embodiment of the present disclosure. In some embodiments, unlike FIG. 12 in which only the intermediate intervals (e.g., horizontal and vertical intervals) between UI elements are considered in the horizontal and vertical intervals, the size of intermediate UI elements between UI elements may also be considered in the horizontal and vertical intervals. As shown in FIG. 13, the horizontal interval may represent the sum of the length of one or more horizontal intervals between a first UI element and a second UI element and the width of one or more intermediate UI elements. The vertical interval may represent the sum of the length of one or more vertical intervals between a first UI element and a second UI element and the height of one or more intermediate UI elements.

[0137] Therefore, the distance may be determined based on the horizontal interval and / or the vertical interval. For example, there are two vertical intervals and one intermediate UI element 9 between UI element 5 and UI element 13. Therefore, the distance between UI element 5 and UI element 13 may be the sum of the length of the two vertical intervals and the height of UI element 9. In another example, there is one horizontal interval and one intermediate UI element 12 between UI element 11 and UI element 13. Therefore, the distance between UI element 11 and UI element 13 may be the sum of the length of the horizontal interval and the width of UI element 12. In addition, there is one vertical interval between UI element 3 and UI element 5. Therefore, the distance between UI element 3 and UI element 5 is the length of the vertical interval. There are three vertical intervals 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 vertical intervals and the height of the two intermediate UI elements 5 and 7. There is one horizontal interval between UI element 3 and UI element 2. Therefore, the distance between UI element 3 and UI element 2 is the length of the horizontal interval.

[0138] 13, the distances between UI element 5 and other UI elements determined using the above-described method are as follows: The distance between UI element 5 and UI element 5 is 0. The distances between UI element 5 and each of UI elements 2-4 and 6-9 are 1. The distances between UI element 5 and each of UI elements 1 and 10-13 are 2.

[0139] 14A and 14B are schematic diagrams of examples 1400A and 1400B of determining distance according to an embodiment of the present disclosure. In some embodiments, in addition to the length of the horizontal and vertical intervals and the width and height of the intermediate UI element, the operation direction may also be considered in the horizontal and vertical intervals. For example, when the first UI element is dragged, the operation direction may be the direction of dragging the first UI element. In addition, although a drag link scenario is described here, there are depth link and pressure link scenarios, as described below. In the depth link and pressure link scenarios, a distance determination method in which the operation direction is considered may also be used. Specifically, in the depth link and pressure link scenarios, the UI element may be pressed. When the first UI element is pressed, there is no operation direction, but the direction from the second UI element to the first UI element (e.g., the direction from the second reference point to the first reference point) may be considered as the operation direction, and this operation direction is considered in the horizontal and vertical intervals.

[0140] In this case, the horizontal and / or vertical spacing may first be determined using the distance determination method described with reference to Figures 12 and 13. Then, the included angle between the steering direction and the horizontal and / or vertical directions may be determined. Thus, the distance of the steering direction may be determined using trigonometric principles.

[0141] In some embodiments, as shown in FIG. 14A, the horizontal spacing, vertical spacing, and the included angle between each of the steering direction 1410A and the horizontal or vertical direction are known, so the distance of the steering direction 1410A can be determined using trigonometric principles.

[0142] Optionally, the distance of the manipulation direction may instead be determined by selecting a horizontal or vertical direction closer to the manipulation direction as the reference direction based on the included angle between the manipulation direction and the horizontal direction and the included angle between the manipulation direction and the vertical direction. For example, as shown in FIG. 14B, the manipulation direction 1430B is closer to the vertical direction, so the vertical direction may be selected as the reference direction. In addition, the distance of the manipulation direction 1430B may be determined using the principle of trigonometric functions based on the vertical spacing and the included angle between the manipulation direction 1430B and the vertical direction. In another example, the manipulation direction 1420B is closer to the horizontal direction, so the horizontal direction may be selected as the reference direction. The distance of the manipulation direction 1420B may be determined using the principle of trigonometric functions based on the horizontal spacing and the included angle between the manipulation direction 1420B and the horizontal direction. In addition, the reference direction may be configurable by the electronic device or the user. This is not limited here in the present disclosure. For example, the reference direction may be set to the horizontal direction, the vertical direction, or any other suitable direction.

[0143] In the above, the distance of the operation direction is determined using the horizontal interval and the vertical interval. However, as described above, the horizontal interval and the vertical interval may be determined using the size of the intermediate interval and the intermediate UI element. Therefore, the distance of the operation direction may be determined by the segment of each intermediate interval and intermediate UI element instead. Specifically, for each intermediate interval and intermediate UI element, the size of the intermediate interval or intermediate UI element and the included angle between the operation direction and the horizontal direction or the vertical direction may be determined. Therefore, the distance of the operation direction may be determined using the principle of trigonometric functions. Then, the distances of the operation direction determined for the intermediate interval and the intermediate UI element may be summed up to determine the total distance of the operation direction.

[0144] Refer again to FIG. 8. After the distance between the first UI element and the second UI element is determined, an animation effect of the movement of the second UI element may be determined based on the distance. Thus, 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 whose displacement changes over time. For example, the predefined curve may be a Bessel curve or an elastic force curve.

[0145] 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, when the first animation effect of the movement of the first UI element is controlled by a predefined curve whose displacement changes with time, the curve whose displacement of the second UI element changes with time may be determined based on the predefined curve whose displacement of the first UI element changes with time. For example, in the case of an elastic force curve, the damping coefficient and / or elastic coefficient of the spring may be transmitted based on the distance. In the case of a Bessel curve, at least one coordinate of at least one control point of the Bessel curve may be transmitted based on the distance. The transmission method described in detail above may be used to implement the method of transmitting the animation effect of the first UI element to the second UI element to obtain the animation effect of the second UI element. Therefore, the description thereof is omitted here.

[0146] In this way, a drag link can be implemented that is intuitive, natural and follows the user's usage habits, since the animation effect of the movement of the second UI element is determined by the animation effect of the movement of the first UI element and the distance between the second UI element and the first UI element.

[0147] In addition, in some embodiments, the size of the second UI element may also affect the animation effect of the movement of the second UI element. In this case, the size of the second UI element may also be taken into consideration to determine the animation effect of the second UI element. For example, a larger size of the second UI element indicates a smaller possible link effect on the second UI element. Thus, the animation effect of the movement of the second UI element may be inversely proportional to the size of the second UI element. Thus, in some embodiments, the animation effect of the movement of the second UI element may be determined based on the amplitude, distance, and size of the first UI element.

[0148] 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 taken into consideration to determine the animation effect of the second UI element. For example, a larger size of the first UI element indicates a larger link effect that may be caused by the first UI element. Therefore, the animation effect of the movement of the second UI element may be directly proportional to the size of the first UI element. Therefore, in some embodiments, the animation effect of the movement of the second UI element may be determined based on the amplitude, distance, and size of the first UI element.

[0149] 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 movement of the second UI element. Thus, in some embodiments, the animation effect of the movement of the second UI element may be determined based on the amplitude of the first, the distance, the size of the first UI element, and the size of the second UI element.

[0150] See again FIG. 8. After the animation effect of the movement of the second UI element is determined, the second UI element may be enabled to move with an animation effect to visually indicate that the second UI element is moving with the first UI element. The N UI elements may move with their respective animation effects to visually indicate a drag on the entire screen or a portion of the screen, thereby presenting a drag link.

[0151] In some embodiments, the direction of movement of a correspondingly moving UI element may be associated with the drag direction to visually indicate the drag action. Thus, in some embodiments, a drag direction may be determined and a second UI element may be enabled to move with an animation effect relative to the direction.

[0152] In addition, in some embodiments, to better present the conveyance of the animation effect and improve the user experience, the first UI element and the second UI element do not start moving at the same time. For example, the first UI element may start moving when the drag is performed, and the second UI element may start moving after the drag is performed for a period of time. Thus, in some embodiments, a delay time may be determined based on a distance between the first UI element and the second UI element, and the second UI element is enabled to move in response to the drag after the delay time. Furthermore, 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 a quotient of the distance divided by the delay factor. The delay factor may be configurable by the electronic device and the user.

[0153] 15 is a schematic diagram of an example delay time 1500 according to an embodiment of the present disclosure. As shown in FIG. 15, a first UI element (e.g., UI element 5) starts moving when a drag occurs, UI elements whose distance is 1 (e.g., UI elements 3, 4, 7, and 8) move after the first UI element, UI elements whose distance is 2 (e.g., UI elements 2, 6, and 9) move after UI elements whose distance is 1, and UI elements whose distance is 3 (e.g., UI elements 1 and 10-13) move after UI elements whose distance is 2.

[0154] In this way, the link between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be emphasized. Compared with traditional animations in which the animation effects are monotonous and the UI elements are independent and unrelated, the embodiments of the present disclosure can make the animation effects better conform to physical rules and take into account actual usage scenarios and user usage habits, thereby greatly improving the user experience.

[0155] The above describes the process of implementing drag linking in detail. The following further describes drag linking in different scenarios. These scenarios include a scenario in which the UI element moves completely by the hand, a scenario in which the UI element does not move completely by the hand, a scenario in which the UI element continues to move after the hand is released or flicked, and a scenario in which the UI element continues to move and rebounds after the hand is released or flicked. It should be understood that these scenarios can be combined with each other to compound richer animation effects. For example, the UI element may not move completely by the hand and continue to move after the hand is released or flicked. In another example, the UI element may not move completely by the hand and continue to move and rebound after the hand is released or flicked. In the following, an example in which the UI element 5 is dragged and the UI elements 2-4 and 6-9 move correspondingly is used for explanation.

[0156] 16A and 16B are schematic diagrams of an example scenario 1600A and an example displacement-time curve 1600B of a scenario in which a UI element is moved completely by a hand, according to an embodiment of the present disclosure.

[0157] As shown in FIG. 16A and FIG. 16B, at T11, the UI element 5 is dragged. At T11a, the UI element 5 begins to move with the finger drag. In some embodiments, if the UI element 5 begins to move when the drag is performed, T11a may be equal to T11. Optionally, if the UI element 5 begins to move after the drag is performed, T11a may be later than T11. Additionally, in addition to the UI element 5 being dragged, other UI elements (e.g., UI elements 2-4 and 6-9) also move correspondingly. For clarity, it should be understood that the other UI elements are shown to start moving at the same time as the UI element 5. However, as explained above, each of the other UI elements may begin to move after the UI element's delay time.

[0158] At T12, the user releases or flicks the hand. In this case, the drag 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 the hand is released or flicked. Optionally, T12a may be later than T12 if UI element 5 stops moving after the hand is released or flicked. In this case, the displacement in the drag direction of UI element 5 is S10. The displacement in the drag direction of UI elements 3, 4, 7, and 8, whose distance is 1, is S11. The displacement in the drag direction of UI elements 2, 6, and 9, whose distance is 2, is S12. The displacement S10 is greater than the displacement S11, which is greater than the displacement S12. In this case, UI element 5 stops moving, and UI elements 3, 4, 7, and 8, whose distance is 1, and UI elements 2, 6, and 9, whose distance is 2, continue moving with an animation effect controlled by a predefined curve (e.g., an elastic force curve).

[0159] At T13, the distance in the drag direction between each of UI elements 3, 4, 7, and 8 whose distance is 1 and UI element 5 becomes shorter. In addition, the distance in the drag direction between each of UI elements 3, 4, 7, and 8 whose distance is 1 and UI element 9 whose distance is 2 becomes shorter. In addition, the distance in the direction opposite to the drag direction between each of UI elements 3, 4, 7, and 8 whose distance is 1 and each of UI elements 2 and 6 whose distance is 2 becomes longer in the drag direction.

[0160] In T14, the displacement of UI element 5 in the drag direction remains at S10. UI elements 3, 4, 7, and 8, whose distance is 1, move with a displacement S10 in the drag direction and then stop moving. The displacement of UI elements 2, 6, and 9, whose distance is 2, has not reached S10 in the drag direction, and UI elements 2, 6, and 9 continue to move with the animation effect controlled by the predefined curve. Compared with T13, the distance in the drag direction between each of UI elements 3, 4, 7, and 8, whose distance is 1, and UI element 9, whose distance is 2, becomes longer in the drag direction. In addition, the distance in the opposite direction to the drag direction between each of UI elements 3, 4, 7, and 8, whose distance is 1, and each of UI elements 2 and 6, whose distance is 2, becomes shorter in the drag direction.

[0161] At T15, the displacement in the drag direction of UI element 5 and UI elements 3, 4, 7, and 8, whose distance is 1, remains at S10. UI elements 2, 6, and 9, whose distance is 2, move with a displacement in the drag direction of S10 and then stop moving. In this case, the drag link is completed.

[0162] 17A and 17B are schematic diagrams of an example scenario 1700A and an example displacement-time curve 1700B of a scenario in which a UI element is not completely moved by a hand, according to an embodiment of the present disclosure.

[0163] As shown in FIG. 17A and FIG. 17B, at T21, the UI element 5 is dragged. At T21a, the UI element 5 begins to move with the finger drag. In some embodiments, if the UI element 5 begins to move when the drag is performed, T21a may be equal to T21. Optionally, if the UI element 5 begins to move after the drag is performed, T21a may be later than T21. Additionally, in addition to the UI element 5 being dragged, other UI elements (e.g., UI elements 2-4 and 6-9) also move correspondingly. For clarity, it should be understood that the other UI elements are shown to start moving at the same time as the UI element 5. However, as explained above, each of the other UI elements may begin to move after the UI element's delay time.

[0164] At T22, the user releases or flicks the hand. In this case, the drag of the UI element 5 ends. At T22a, the UI element 5 stops moving. In some embodiments, T22a may be equal to T22 if the UI element 5 stops moving when the hand is released or flicked. Optionally, T22a may be later than T22 if the UI element 5 stops moving after the hand is released or flicked. In this case, the displacement in the drag direction of the finger is SF2. The displacement in the drag direction of the UI element 5 is S20. The displacement in the drag direction of the UI elements 3, 4, 7, and 8, whose distance is 1, is S21. The displacement in the drag direction of the UI elements 2, 6, and 9, whose distance is 2, is S22. The displacement SF2 is greater than the displacement S20, which is greater than the displacement S21, which is greater than the displacement S22. In this case, UI element 5 stops moving, and UI elements 3, 4, 7, and 8 whose distance is 1 and UI elements 2, 6, and 9 whose distance is 2 continue to move with an animation effect controlled by a predefined curve (e.g., an elastic force curve). Compared to T21, the distance between UI element 5 and each of UI elements 3, 4, 7, and 8 whose distance is 1 becomes longer in the drag direction. The distance between UI elements 3, 4, 7, and 8 whose distance is 1 and each of UI elements 9 whose distance is 2 becomes shorter in the drag direction. In addition, the distance between UI elements 3, 4, 7, and 8 whose distance is 1 and each of UI elements 2 and 6 whose distance is 2 in the direction opposite to the drag direction becomes longer in the drag direction.

[0165] At T23, the distance in the drag direction between each of UI elements 3, 4, 7, and 8 whose distance is 1 and UI element 5 becomes shorter. In addition, the distance in the drag direction between each of UI elements 3, 4, 7, and 8 whose distance is 1 and UI element 9 whose distance is 2 becomes shorter. In addition, the distance in the direction opposite to the drag direction between each of UI elements 3, 4, 7, and 8 whose distance is 1 and each of UI elements 2 and 6 whose distance is 2 becomes longer in the drag direction.

[0166] In T24, the displacement of UI element 5 in the drag direction remains at S20. UI elements 3, 4, 7, and 8, whose distance is 1, move with displacement S20 in the drag direction and then stop moving. The displacement of UI elements 2, 6, and 9, whose distance is 2, has not reached S20 in the drag direction, and UI elements 2, 6, and 9 continue to move with the animation effect controlled by the predefined curve. Compared with T23, the distance in the drag direction between each of UI elements 3, 4, 7, and 8, whose distance is 1, and UI element 9, whose distance is 2, becomes longer in the drag direction. In addition, the distance in the opposite direction to the drag direction between each of UI elements 3, 4, 7, and 8, whose distance is 1, and each of UI elements 2 and 6, whose distance is 2, becomes shorter in the drag direction.

[0167] At T25, the displacement in the drag direction of UI element 5 and UI elements 3, 4, 7, and 8, whose distance is 1, remains at S20. UI elements 2, 6, and 9, whose distance is 2, move with a displacement in the drag direction of S20 and then stop moving. In this case, the drag link is completed.

[0168] In the scenario described with reference to FIGS. 16A-17B, the UI element 5 stops moving after the drag is stopped. However, the UI element 5 may instead continue to move a distance after the drag is stopped. In some embodiments, this distance may be determined based on a friction model as described above. Whether the UI element 5 continues to move after the drag is stopped is configurable by the electronic device and the user. For example, if the electronic device is configured to allow the UI element 5 to continue to move after the hand is released or flicked, the UI element 5 may continue to move. Otherwise, the UI element 5 stops moving when the drag is stopped.

[0169] 18A and 18B are schematic diagrams of an example scenario 1800A and an example displacement-time curve 1800B of a scenario in which a UI element is moved completely by a hand, according to an embodiment of the present disclosure.

[0170] As shown in FIG. 18A and FIG. 18B, at T31, UI element 5 is dragged. 3 At 1a, UI element 5 begins to move with the finger being dragged. In some embodiments, T31a may be equal to T31 if UI element 5 begins to move when the drag occurs. Optionally, T31a may be later than T31 if UI element 5 begins to move after the drag occurs. Additionally, in addition to the UI element 5 being dragged, other UI elements (e.g., UI elements 2-4 and 6-9) also move correspondingly. For clarity, it should be understood that the other UI elements are shown to begin moving at the same time as UI element 5. However, as explained above, each of the other UI elements may begin to move after the UI element's delay time.

[0171] At T32, the user releases or flicks the hand. In this case, the drag of UI element 5 ends. At T32a, UI element 5 continues to move with an animation effect controlled by a predefined curve (e.g., an elastic force curve). In some embodiments, if UI element 5 moves with an animation effect controlled by a predefined curve when the drag ends, T32a may be equal to T32. Optionally, if UI element 5 moves with an animation effect controlled by a predefined curve after the drag ends, T32a may be later than T32. In this case, the displacement of UI element 5 in the drag direction is SF3. The displacement of UI elements 3, 4, 7, and 8, whose distance is 1, in the drag direction is S31. The displacement of UI elements 2, 6, and 9, whose distance is 2, in the drag direction is S32. The displacement SF3 is greater than the displacement S31, which is greater than the displacement S32. In addition, UI elements 3, 4, 7, and 8 whose distance is 1, and UI elements 2, 6, and 9 whose distance is 2 also continue to move with a predefined curved animation effect. Compared to T31, the distance between UI element 5 and each of UI elements 3, 4, 7, and 8 whose distance is 1 becomes longer in the drag direction. The distance between UI elements 3, 4, 7, and 8 whose distance is 1, and UI element 9 whose distance is 2 becomes shorter in the drag direction. In addition, the distance between UI elements 3, 4, 7, and 8 whose distance is 1, and each of UI elements 2 and 6 whose distance is 2 in the direction opposite to the drag direction becomes longer in the drag direction.

[0172] In T33, the distance in the drag direction between UI element 5 and each of UI elements 3, 4, 7, and 8 whose distance is 1 increases. The distance in the drag direction between UI elements 3, 4, 7, and 8 whose distance is 1 and UI element 9 whose distance is 2 decreases. In addition, the distance in the opposite direction to the drag direction between UI elements 3, 4, 7, and 8 whose distance is 1 and each of UI elements 2 and 6 whose distance is 2 increases.

[0173] In T34, all UI elements continue to move with animation effects controlled by predefined curves. Compared to T33, the distance between each of UI elements 3, 4, 7, and 8 whose distance is 1 and UI element 5 becomes shorter in the drag direction. The distance between each of UI elements 3, 4, 7, and 8 whose distance is 1 and UI element 9 whose distance is 2 becomes longer in the drag direction. In addition, the distance between each of UI elements 3, 4, 7, and 8 whose distance is 1 and UI elements 2 and 6 whose distance is 2 in the opposite direction to the drag direction becomes shorter in the drag direction.

[0174] At T35, all UI elements move with a displacement S30 in the drag direction and stop moving. The distance in the drag direction between the displacement S30 of the position where the movement stops and the displacement SF3 of the position where the hand is released or flicked can be determined based on the friction model as described above. In this case, the drag link is completed.

[0175] Additionally, in some embodiments, if the UI element continues to move after the drag is stopped, the UI element may rebound a distance. As explained above, in the underdamped state, the spring displacement alternates between positive and negative values ​​over time. Thus, the underdamped elastic force curve may be used to control the rebound of the UI element.

[0176] It should be understood that in FIG. 18A and FIG. 18B, UI elements are shown to be allowed to overlap each other. For example, UI element 8 and UI element 9 overlap at times T32-T34. However, UI elements may not be allowed to overlap each other. Whether overlap is allowed is configurable by the electronic device or the user. When overlap is allowed, the movement of the UI element follows the elastic force curve in the underdamped state. When overlap is not allowed, the movement of the UI element follows the elastic force curve in the overdamped state. Furthermore, whether any two UI elements overlap may further depend on the relative movement amplitude of the two UI elements. For example, when the relative movement amplitude of the two UI elements is small, the UI elements usually do not overlap. However, when the relative movement amplitude of the two UI elements is large, the UI elements may overlap.

[0177] 19A and 19B are schematic diagrams of an example scenario 1900A and an example displacement-time curve 1900B of a scenario in which a UI element is moved completely by a hand, according to an embodiment of the present disclosure.

[0178] As shown in FIG. 19A and FIG. 19B, at T41, UI element 5 is dragged. At T41a, UI element 5 begins to move with the finger drag. In some embodiments, if UI element 5 begins to move when drag is performed, T41a may be equal to T41. Optionally, if UI element 5 begins to move after drag is performed, T41a may be later than T41. Additionally, in addition to the UI element 5 being dragged, other UI elements (e.g., UI elements 2-4 and 6-9) also move correspondingly. For clarity, it should be understood that the other UI elements are shown to start moving at the same time as UI element 5. However, as explained above, each of the other UI elements may begin to move after the UI element's delay time.

[0179] At T42, the user releases or flicks the hand. In this case, the drag of UI element 5 ends. At T42a, UI element 5 continues to move with an animation effect controlled by a predefined curve (e.g., an elastic force curve). In some embodiments, if UI element 5 moves with an animation effect controlled by a predefined curve when the drag ends, T42a may be equal to T42. Optionally, if UI element 5 moves with an animation effect controlled by a predefined curve after the drag ends, T42a may be later than T42. In this case, the displacement of UI element 5 in the drag direction is SF4. The displacement of UI elements 3, 4, 7, and 8, whose distance is 1, in the drag direction is S41. The displacement of UI elements 2, 6, and 9, whose distance is 2, in the drag direction is S42. The displacement SF4 is greater than the displacement S41, which is greater than the displacement S42. In addition, UI elements 3, 4, 7, and 8 whose distance is 1, and UI elements 2, 6, and 9 whose distance is 2 also continue to move with a predefined curved animation effect. Compared to T41, the distance between UI element 5 and each of UI elements 3, 4, 7, and 8 whose distance is 1 becomes longer in the drag direction. The distance between UI elements 3, 4, 7, and 8 whose distance is 1, and UI element 9 whose distance is 2 becomes shorter in the drag direction. In addition, the distance between UI elements 3, 4, 7, and 8 whose distance is 1, and each of UI elements 2 and 6 whose distance is 2 in the direction opposite to the drag direction becomes longer in the drag direction.

[0180] At T43, the UI element 5 moves with a drag direction displacement S40 and begins to rebound. In some embodiments, the distance between the drag direction displacement S40 of the rebound position and the drag direction displacement SF4 of the release or flick position may be determined based on a friction model as described above.

[0181] At T44, UI element 9, whose distance is 2, moves with a displacement S40 in the drag direction and starts to repel as well.

[0182] At T45, all UI elements repel with displacement SF4 in the drag direction and stop moving. In this case, the drag link is completed.

[0183] Although UI element 5 is shown to repel before UI elements 3, 4, 7, and 8 whose distance is 1, and UI elements 3, 4, 7, and 8 whose distance is 1, and UI elements 2, 6, and 9 whose distance is 2, it should be understood that all UI elements may repel together. For example, UI element 5 may stop moving, wait for the other UI elements to move with displacement S40, and then start to repel together. In addition, although all UI elements are shown to repel to the release or flick position, all UI elements may repel with a greater or lesser amplitude. This is not limited in this embodiment of the disclosure.

[0184] Depth Linking An embodiment of the present disclosure relates to linking UI elements on a UI in a depth direction, also referred to as depth linking. The depth direction is a direction perpendicular to the screen of an electronic device. During depth linking, a pressed target UI element may affect another UI element that is not pressed. Specifically, during depth linking, triggering an animation effect of a target UI element may trigger animation effects of one or more other UI elements, or even other UI elements throughout the UI together, such that all other UI elements are affected by the target UI element. For example, during depth linking, when a target UI element is pressed for a period of time, in addition to the target UI element being scaled over time, another UI element may also be scaled with a corresponding amplitude to visually present the linked scaling.

[0185] In this way, the link between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be emphasized. Compared with traditional animations in which the animation effects are monotonous and the UI elements are independent and unrelated, the embodiments of the present disclosure can make the animation effects better conform to physical rules and take into account actual usage scenarios and user usage habits, thereby greatly improving the user experience.

[0186] Some exemplary embodiments of depth links are described below with reference to FIGS.

[0187] Depth linking may be performed on a UI having any suitable regular or irregular layout, and UI elements on the UI may have any suitable size and shape. For example, depth linking may be performed on the UIs 300A-300C shown in FIGS. 3A-3C.

[0188] A UI element on the UI may be pressed. For example, a user may press a UI element when the user intends to perform an action related to the UI element. For example, a user may press a UI element when the user intends to enter an application represented by the UI element, open a menu related to the UI element, etc. When a press performed on a UI element is detected, the UI element may be changed. For example, the UI element may be scaled to represent a depthwise press action. For example, the UI element may be reduced to represent a depthwise distance. Optionally, the UI element may be enlarged to represent a depthwise proximity. The following describes scaling using a reduced UI element as an example. However, it should be understood that the UI element may be enlarged instead.

[0189] 20 is a schematic diagram of an example change 2000 of a UI element when the UI element is pressed, according to some embodiments of the present disclosure. As shown in FIG. 20, when a press performed on the UI element is detected, the UI element may be reduced to present a distance in a depth direction.

[0190] The change in the UI element may conform to a surface pressure model, in which the pressure is the same on each portion of the UI element (e.g., each pixel or each portion divided in any other suitable manner). In other words, the pressure is the same for all portions of the UI element, regardless of which portion of the UI element is pressed (e.g., whether the center or edge of the UI element is pressed). Thus, regardless of which portion of the UI element is pressed, the UI element has the same change.

[0191] 21 is a schematic diagram of example changes 2100 of a UI element when the UI element is pressed at different locations, according to some embodiments of the present disclosure. As shown in FIG. 21, regardless of whether the press is detected at the center or edge of the UI element, the UI element may be scaled down with the same amplitude to present a depthwise distance.

[0192] In addition, as shown in Fig. 21, after a UI element is reduced, the pressed location may not be within the range of the reduced UI element. In this case, the press may continue to be detected as a press on the UI element because the pressed location is still within the range of the UI element before the reduction, or any other suitable range. Optionally, the press is not detected as a press on the UI element because the pressed location is no longer within the range of the reduced UI element. In this case, the press may be considered to have ended.

[0193] In addition, in some embodiments, the change amplitude may depend on the magnitude of the pressing force to allow the change of the UI element to follow the laws of nature and the user's usage habits. In the real world, the force magnitude is usually the actual force magnitude. In this case, a larger pressing force indicates a larger change in depth. In some embodiments, the pressing force may be a pressing force applied by a user and detected by an electronic device. Optionally, the pressing force may instead be a preset pressing force set by the electronic device or the user.

[0194] 22 is a schematic diagram of an example change 2200 of a UI element when pressed using different forces, according to some embodiments of the present disclosure. As shown in FIG. 22, when the pressing force is large, the UI element may be scaled down to a greater extent to present a greater distance in the depth direction. In some embodiments, the UI element may be further scaled down to disappear from the UI, i.e., to a size of 0, to present a maximum distance in the depth direction. On the other hand, when the pressing force is small, the UI element may be scaled down to a lesser extent to present a smaller distance in the depth direction.

[0195] However, this is not limited to the embodiments of the present disclosure. The scaling method of the UI element in response to different pressure forces can be configured by the electronic device or the user. For example, when the pressure is large, the UI element may be scaled to a smaller extent, and when the pressure is small, the UI element may be scaled to a larger extent.

[0196] Furthermore, electronic devices may have relatively high requirements for users with respect to depth-wise changes based entirely on actual pressure, and electronic devices may need to be equipped with related hardware. Thus, in some embodiments, the pressure may be simulated or replaced by the pressure duration. For example, if the pressure duration is longer, the pressure may be considered to be larger, and therefore the depth-wise changes will be larger.

[0197] 23 is a schematic diagram of an example change 2300 of a UI element when pressed for different durations, according to some embodiments of the present disclosure. As shown in FIG. 23, when the press duration is long, the UI element may be scaled down to a greater extent to present a greater distance in the depth direction. In some embodiments, the UI element may be further scaled down to disappear from the UI, i.e., to a size of 0, to present a maximum distance in the depth direction. On the other hand, when the press duration is short, the UI element may be scaled down to a lesser extent to present a shorter distance in the depth direction.

[0198] However, this is not limited to the embodiments of the present disclosure. The scaling method of the UI element in response to different press durations can be configured by the electronic device or the user. For example, when the press duration is long, the UI element may be scaled to a smaller extent, and when the press duration is short, the UI element may be scaled to a larger extent.

[0199] In addition, in some embodiments, to further enable the change of the UI element to follow the natural law and the user's usage habits, the change amplitude may depend on the size of the UI element. For example, visually, under the same pressing force, it may be difficult to press a large UI element, but it is easy to press a small UI element. In this case, the impact of the pressing on a relatively large UI element may be small, and the impact of the pressing on a relatively small UI element may be large.

[0200] 24 is a schematic diagram of example transformations 2400 of UI elements of different sizes, according to some embodiments of the present disclosure. As shown in FIG. 24, when the size of the UI element is large, the UI element may be scaled to a greater extent to present a greater distance in the depth direction. On the other hand, when the size of the UI element is small, the UI element may be scaled to a lesser extent to present a smaller distance in the depth direction.

[0201] However, this is not limited to the embodiment of the present disclosure. The scaling method of UI elements of different sizes can be configured by the electronic device or the user. For example, to make the size of the scaled UI elements more balanced, the impact of the press on a relatively large UI element may be large, and the impact of the press on a relatively small UI element may be small. Thus, when the size of the UI element is large, the UI element may be scaled to a smaller extent, and when the size of the UI element is small, the UI element may be scaled to a larger extent, so as to present a shorter distance in the depth direction.

[0202] In addition, in some embodiments, to improve the user experience, the amplitude of scaling a UI element may be limited so that the UI element can only be scaled within an allowed amplitude range. For example, the amplitude range may be any suitable range, such as 10%-90% of the size of the UI element, 100-10000 pixels, or 2%-50% of the screen-to-body ratio. For example, the amplitude range is assumed to be 10%-90% of the size of the UI element. In this case, regardless of the pressing force and pressing duration, the pressed UI element can only be reduced to a maximum of 10% of its original size and cannot disappear from the screen.

[0203] The above describes the scaling of a pressed UI element in detail. As described above, during depth linking, a pressed target UI element may affect another UI element that is not pressed. Specifically, during depth linking, triggering an animation effect of a target UI element may trigger animation effects of one or more other UI elements, or even other UI elements throughout the UI together, such that all other UI elements are affected by the target UI element. For example, during depth linking, when a target UI element is pressed for a period of time, in addition to the target UI element being scaled over time, another UI element may also be scaled with a corresponding amplitude to visually present the linked scaling. Thus, the following describes depth linking in detail with reference to FIG. 25 to FIG. 33.

[0204] 25 is a flowchart of a graphical interface display method 2500 according to one embodiment of the present disclosure. It should be appreciated that the method 2500 may be performed by the electronic device 100 described with reference to FIG. 1 or the electronic device 200 described with reference to FIG. 2. The method 2500 is described herein with reference to the UI 300A of FIG. However, it should be appreciated that the UI 300A is merely an example and that the method 2500 is applicable to any suitable interface, including but not limited to the UIs 300B and 300C.

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

[0206] At block 2520, a press held for a period of time on a first UI element in the M UI elements is detected. For example, the first UI element may be UI element 5. As described above, a press held for a period of time on the first UI element allows the first UI element to be scaled over time to present a depth pressure effect.

[0207] At block 2530, each of the N UI elements on the screen is enabled to scale in response to a press detected on a first UI element and held for a period of time, where N is a positive integer ranging from 1 to M-1, thus providing a visual indication of linked presses.

[0208] FIG. 26 is a schematic diagram of an example of depth linking 2600 of N UI elements according to an embodiment of the present disclosure. As shown in FIG. 26, UI element 5 is pressed for a period of time, which causes UI element 5 to be scaled over time to present a depth-wise pressing effect. In addition, in response to the pressing, other UI elements on the screen (e.g., UI elements 1-4 and 6-13) are also scaled with different amplitudes over time to present a depth-wise pressing effect. Thus, the linked pressing is visually presented. For clarity, FIG. 26 shows depth linking of only UI elements 1-13 on UI 300A. It should be understood that depth linking can be performed between any at least two UI elements on any UI, for example, any at least two UI elements on UIs 300A-300C.

[0209] In some embodiments, depth linking may be used for all UI elements on the screen. In this case, M-1 UI elements in the M UI elements other than the first UI element may be determined to be the N UI elements. Optionally, depth linking may be applied to only 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 in the M UI elements that are in the influence area are determined as the N UI elements. For example, a larger size of the first UI element may indicate a larger influence area of ​​the first UI element. Optionally, the influence area may also be narrowed with the size reduction. This is not limited here in the disclosure. For example, the influence area may be a circle using the reference point of the first UI element as a center and having a predetermined radius. It should be understood that the influence area may be any suitable area having any shape. For example, the influence area is a rectangle or a diamond having a predetermined size, etc. The influence area may be configurable by the electronic device and the user. This is not limited here in the disclosure.

[0210] Additionally, in some embodiments, a UI element that intersects with the influence area may be considered to be within the influence area. Optionally, when the influence area is a circle with a predetermined radius, a UI element may be considered to be within the influence area if the distance between the UI element and the first UI element is less than the predetermined radius of the influence area.

[0211] 27 is a schematic diagram of an example area of ​​influence 2700 of UI elements according to one embodiment of the present disclosure. As shown in FIG. 27, UI elements 3, 4, 7, and 8 are within the area of ​​influence 2710 of UI element 5, and therefore UI elements 3, 4, 7, and 8 are correspondingly scaled together with UI element 5. In addition, UI elements 1, 2, 6, and 9-13 are not within the area of ​​influence 2710 of UI element 5, and therefore UI elements 1, 6, and 9-13 are not correspondingly scaled together with UI element 5.

[0212] Refer again to FIG. 25. To allow the N UI elements to be scaled with corresponding amplitudes, a distance between the first UI element and each of the N UI elements may be determined. As explained above, in some embodiments, the distance may be classified into a plurality of distance levels based on the range in which the distance is located. For example, the distance level of the manipulated UI element may be 0, and the distance level of the linked UI element may be 1, 2, 3, ... based on the distance between the linked UI element and the manipulated UI element. UI elements at the same distance level may be considered to have the same distance to the manipulated UI element. Thus, by using the distance level, the link between UI elements may be simplified, such that UI elements at the same distance level are linked in the same way, thereby improving the consistency and coordination of the link. However, it should be understood that the distance may be used instead during linking so that the UI elements are linked more accurately. In the following, the distance level may be interchangeably referred to as distance.

[0213] In the above, the method for determining the distance between the first UI element and the second UI element in the N UI elements has been described with reference to Figures 10 to 14B, and therefore the description thereof will be omitted here.

[0214] Refer again to FIG. 25. After the distance between the first UI element and the second UI element is determined, an amplitude for scaling the second UI element may be determined based on the distance. Optionally, if the distance between the first UI element and the second UI element is longer, the amplitude for scaling the second UI element may be smaller to visually indicate a smaller effect of the press on the farther UI element. Optionally, if the distance between the first UI element and the second UI element is longer, the amplitude for scaling the second UI element may also be larger to visually indicate a larger effect of the press on the farther UI element.

[0215] In some embodiments, a first amplitude for scaling the first UI element in response to a press may be determined to determine an amplitude for scaling the second UI element. In some embodiments, the first amplitude for scaling the first UI element may be determined based on various factors related to the first UI element. These factors may include, but are not limited to, a size of the first UI element, an amplitude range for changing the first UI element, a press duration, and a predetermined press force. The foregoing describes in detail the influence of these factors on the amplitude for scaling the UI element. Therefore, the description is omitted here.

[0216] Then, an amplitude for scaling the second UI element in response to the press can be determined based on the first amplitude and the distance between the first UI element and the second UI element. The transfer method described in detail above can be used to implement a method for transferring an amplitude for scaling the first UI element to the second UI element to obtain an amplitude for scaling the second UI element. The difference is that during depth linking, x in transfer equations (7) and (8) n represents the amplitude for scaling the correspondingly scaled UI element (e.g., the second UI element), and x in the transfer equations (7) and (8) represents the amplitude for scaling the pressed UI element (e.g., the first UI element). Therefore, the description thereof is omitted here.

[0217] In this way, a depth link can be implemented that is intuitive, natural and follows the user's usage habits, since the amplitude with which the second UI element is scaled is determined by the amplitude with which the first UI element is scaled and the distance between the second UI element and the first UI element.

[0218] In addition, in some embodiments, the size of the second UI element may also affect the amplitude of scaling the second UI element. In this case, the size of the second UI element may also be taken into consideration to determine the amplitude of scaling the second UI element. For example, if the second UI element is larger, the amplitude of scaling the second UI element may be larger, so that the sizes of the scaled UI elements on the screen are visually more similar and more aligned. Optionally, if the second UI element is larger, the amplitude of scaling the second UI element may be smaller, so that the size difference between the scaled UI elements on the screen is larger. Thus, in some embodiments, the amplitude of scaling the second UI element in response to the press may be determined based on the first amplitude, the distance, and the size of the second UI element.

[0219] In addition, in some embodiments, the size of the first UI element may also affect the amplitude of scaling the second UI element. In this case, the size of the first UI element may also be taken into consideration to determine the amplitude of scaling the second UI element. For example, a larger size of the first UI element indicates a larger link effect that may be caused by the first UI element. Thus, the animation effect of scaling the second UI element may be directly proportional to the size of the first UI element. Thus, in some embodiments, the amplitude of scaling the second UI element may be determined based on the amplitude of the first UI element, the distance, and the size of the first UI element.

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

[0221] See again FIG. 25. After the amplitude for scaling the second UI element is determined, the second UI element may be enabled to be scaled with that amplitude to visually indicate that the second UI element is scaled by a press performed on the first UI element. The N UI elements may be enabled to be scaled with their respective amplitudes to visually indicate a press on the entire screen or a portion of the screen, thereby presenting a press link.

[0222] FIG. 28 is a schematic diagram of an example scaling 2800 of a UI element based on distance, according to one embodiment of the present disclosure. to 8 As shown, the amplitude of scaling a UI element whose distance is 0 (e.g., UI element 5) is greater than the amplitude of scaling a UI element whose distance is 1 (e.g., UI elements 3, 4, 7, and 8), which is greater than the amplitude of scaling a UI element whose distance is 1 (e.g., UI elements 2, 6, and 9), which is greater than the amplitude of scaling a UI element whose distance is 2 (e.g., UI elements 1 and 10-13).

[0223] In addition, in some embodiments, the first UI element and the second UI element are not scaled at the same time to better present the conveyance of the animation effect and improve the user experience. For example, the first UI element may begin to be scaled when a press is made, and the second UI element may begin to be scaled after the press is made for a period of time. Thus, in some embodiments, a delay time may be determined based on a distance between the first UI element and the second UI element, and the second UI element may be enabled to be scaled in response to the press after the delay time. Furthermore, in some embodiments, a delay factor may be determined, and the delay time may be determined based on the distance and the delay factor. For example, the delay time may be a quotient of the distance divided by the delay factor. The delay factor may be configurable by the electronic device and the user.

[0224] 29 is a schematic diagram of an example delay time 2900 according to one embodiment of the present disclosure. As shown in FIG. 29, a first UI element whose distance is 0 starts to be scaled when a press is made, a UI element whose distance is 1 is scaled after the first UI element, a UI element whose distance is 2 is scaled after a UI element whose distance is 1, a UI element whose distance is 3 is scaled after a UI element whose distance is 2.

[0225] 30 is a schematic diagram of an example scaling 3000 of UI elements with a delay time according to the present disclosure. As shown in FIG. 30, UI element 5, whose distance is 0, begins to be scaled at time T51 when the press occurs, UI elements 3, 4, 7, and 8, whose distance is 1, begin to be scaled at a time T52 after time T51, UI elements 2, 4, 6, and 9, whose distance is 2, begin to be scaled at a later time T53, and UI elements 1 and 10-13, whose distance is 3, begin to be scaled the latest at T54.

[0226] Further, in some embodiments, the scaling speed of the UI element may be controlled by a predefined curve whose amplitude changes over time. For example, the predefined curve may be a Bessel curve or an elastic force curve. In the case of an elastic force curve, the scaling speed may be controlled by controlling the damping and stiffness coefficients of the spring. In the case of a Bessel curve, the scaling speed may be controlled by controlling at least one coordinate of at least one control point of the Bessel curve.

[0227] Further, in some embodiments, to improve the user experience, the correspondingly scaled UI element may further move toward the pressed UI element. Specifically, the N UI elements may move toward the first UI element to further visually emphasize the press. For example, the displacement amplitude may depend on at least one of the distance between the correspondingly scaled UI element and the pressed UI element, the press duration, the size of the second UI element, and the size of the first UI element. Thus, in some embodiments, the displacement of the movement of the second UI element may be determined based on the distance between the first UI element and the second UI element, the press duration, the size of the first UI element, and / or the size of the second UI element.

[0228] The second UI element may then be enabled to move with this displacement in a direction from the second UI element to the first UI element. For example, the second UI element may be enabled to move with this 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 by the first UI element. It should be understood that this is not limited to this in the embodiments of the present disclosure. For example, the second UI element may instead be enabled to move with this displacement in the opposite direction (e.g., 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 rejected by the first UI element.

[0229] 31 is a schematic diagram of an example displacement 3100 of a movement of a UI element according to an embodiment of the present disclosure. As shown in FIG. 3100, the displacement amplitude of a UI element whose distance is 1 (e.g., UI elements 3, 4, 7, and 8) is greater than the displacement amplitude of a UI element whose distance is 2 (e.g., UI elements 2, 6, and 9), which in turn is greater than the displacement amplitude of a UI element whose distance is 3 (e.g., UI elements 1 and 10-13).

[0230] In addition, in some embodiments, the scaled UI element may be restored after the pressing ends (e.g., after the user releases his / her finger from the screen). Specifically, both the pressed UI element and the correspondingly scaled N UI elements may be restored. Thus, in some embodiments, the scaled second UI element may be restored to the second UI element before scaling. The restoration process may be a reverse process of scaling, and therefore a detailed description thereof is omitted here.

[0231] 32A is a schematic diagram of an example of UI element restoration 3200A according to one embodiment of the present disclosure. As shown in FIG. 32A, all scaled UI elements (e.g., UI elements 1-13) are restored to their initial sizes before scaling.

[0232] Further, as described above, in some embodiments, the UI element may also move in response to the press. In this case, after the press ends, the moved UI element may be reset. Specifically, all of the N UI elements that moved toward the pressed UI element may be reset. Thus, in some embodiments, the second UI element may be restored from its post-movement position to its pre-movement position.

[0233] 32B is a schematic diagram of an example of restoration 3200B of a UI element with displacement according to one embodiment of the present disclosure. As shown in FIG. 32B, the moved and scaled UI elements (e.g., UI elements 1-13) are restored to their pre-movement positions and pre-scaling initial sizes.

[0234] In some embodiments, scaling restoration or translation restoration may have a rebound effect. For example, for scaling restoration, after the user releases his / her hand, the size of the UI element may first be increased to be larger than the initial size, and then be decreased to the initial size. In addition, for translation restoration, after the user releases his / her hand, the correspondingly moved UI element may first move away from the pressed UI element to a position farther than the initial position before the movement, and then return to the initial position.

[0235] 33A and 33B are schematic diagrams of an example size-time curve 3300A and an example displacement-time curve 3300B, respectively, for restoring a UI element with a rebound effect, according to an embodiment of the present disclosure.

[0236] Regarding scaling repulsion, as shown in Fig. 33A, at T61, UI element 5 is pressed and scaled down. In addition, other UI elements (e.g., UI elements 1-4 and 6-13) are correspondingly scaled down.

[0237] At T62, the user releases the hand. In this case, UI element 5 is scaled down to 0.5 times its initial size. In addition, UI elements whose distance is 1 (e.g., UI elements 3, 4, 7, and 8) are scaled down correspondingly, but the scaled down amplitude of the UI elements is smaller than that of UI element 5. In addition, UI elements whose distance is 2 (e.g., UI elements 2, 6, and 9) are scaled down correspondingly, but the scaled down amplitude of the UI elements is smaller than that of the UI elements whose distance is 1. In addition, UI elements whose distance is 3 (e.g., UI elements 1 and 10-13) are scaled down correspondingly, but the scaled down amplitude of the UI elements is smaller than that of the UI elements whose distance is 2.

[0238] At times T62 and T63, UI elements start to repel with respect to scaling.

[0239] In T63, the size of UI element 5 is expanded to 1.2 times the initial size. In addition, the sizes of UI elements whose distance is 1 (e.g., UI elements 3, 4, 7, and 8) are correspondingly increased, but the increase amplitude of the UI elements is smaller than that of UI element 5. In addition, the sizes of UI elements whose distance is 2 (e.g., UI elements 2, 6, and 9) are correspondingly increased, but the increase amplitude of the UI elements is smaller than that of the UI elements whose distance is 1. In addition, the sizes of UI elements whose distance is 3 (e.g., UI elements 1 and 10-13) are correspondingly increased, but the increase amplitude of the UI elements is smaller than that of the UI elements whose distance is 2.

[0240] In T64, the size of all UI elements is restored to its initial size.

[0241] In addition, with respect to the repulsion of the movement, at T71, the UI element 5 is pressed as shown in FIG.

[0242] At T72, the user releases the hand. In this case, the displacement of the UI elements whose distance is 1 (e.g., UI elements 3, 4, 7, and 8) moving toward UI element 5 is −1. In addition, the UI elements whose distance is 2 (e.g., UI elements 2, 6, and 9) also move toward UI element 5, but the displacement amplitude of the UI elements is smaller than the displacement amplitude of the UI elements whose distance is 1. In addition, the UI elements whose distance is 3 (e.g., UI elements 1 and 10-13) also move toward UI element 5, but the displacement amplitude of the UI elements is smaller than the displacement amplitude of the UI elements whose distance is 2.

[0243] At times T72 and T73, UI elements start to bounce around with respect to movement.

[0244] In T73, the displacement of UI elements whose distance is 1 (e.g., UI elements 3, 4, 7, and 8) exceeds the initial position and is +0.7. In addition, the displacement of UI elements whose distance is 2 (e.g., UI elements 2, 6, and 9) also exceeds the initial position, but the displacement amplitude of the UI elements whose distance is 1 is smaller. In addition, the displacement of UI elements whose distance is 3 (e.g., UI elements 1 and 10-13) also exceeds the initial position, but the displacement amplitude of the UI elements whose distance is 2 is smaller.

[0245] In T74, the positions of all UI elements are restored to their initial positions.

[0246] It should be understood that the scaling size (e.g., 0.5x or 1.2x) and movement displacement (e.g., -1 or 0.7 displacement) in FIG. 33A and FIG. 33B are merely examples, and the UI element may be scaled by a small amplitude having any suitable size or moved with any suitable displacement. Furthermore, although only one bounce bounce effect is shown in FIG. 33A and FIG. 33B, a multiple bounce bounce effect may be implemented. The number of bounces may be any suitable number of bounces. This is not limited here in the present disclosure. In some embodiments, the bounce amplitude of the multiple bounces may be decreased over time.

[0247] 33C and 33D are schematic diagrams of an exemplary size-time curve 3300C and displacement-time curve 3300D, respectively, for restoring a UI element with a rebound effect of multiple rebounds having reduced rebound amplitudes, according to one embodiment of the present disclosure.

[0248] As shown in FIG. 33C, the UI elements are restored to their initial size after multiple bounces. The scaling amplitude of the bounce of a UI element whose distance is 0 (e.g., UI element 5) is greater than the scaling amplitude of the bounce of a UI element whose distance is 1 (e.g., UI elements 3, 4, 7, and 8). The scaling amplitude of the bounce of a UI element whose distance is 1 is greater than the scaling amplitude of the bounce of a UI element whose distance is 2 (e.g., UI elements 2, 6, and 9). The scaling amplitude of the bounce of a UI element whose distance is 2 is greater than the scaling amplitude of the bounce of a UI element whose distance is 3 (e.g., UI elements 1 and 10-13).

[0249] Similarly, as shown in FIG. 33D, the UI elements are restored to their initial positions after multiple bounces. The displacement amplitude of the rebound of a UI element whose distance is 0 (e.g., UI element 5) is greater than the displacement amplitude of the rebound of a UI element whose distance is 1 (e.g., UI elements 3, 4, 7, and 8). The displacement amplitude of the rebound of a UI element whose distance is 1 is greater than the displacement amplitude of the rebound of a UI element whose distance is 2 (e.g., UI elements 2, 6, and 9). The displacement amplitude of the rebound of a UI element whose distance is 2 is greater than the displacement amplitude of the rebound of a UI element whose distance is 3 (e.g., UI elements 1 and 10-13).

[0250] Additionally, in some embodiments, the rebound effect may also be controlled by a predefined curve (e.g., an elastic force curve or a Bessel curve, etc.) For example, these UI elements may rebound on scaling or translation with an animation effect controlled by a predefined curve.

[0251] Pressure Link An embodiment of the present disclosure relates to linking UI elements on a UI for animation effects of pressing, also referred to as pressure linking. During pressure linking, a pressed target UI element may affect another UI element that is not pressed. Specifically, during pressure linking, triggering an animation effect of a target UI element may trigger animation effects of one or more other UI elements, or even other UI elements throughout the UI together, such that all other UI elements are affected by the target UI element. For example, during pressure linking, when a target UI element is pressed, in addition to the target UI element presenting a pressing effect with an animation effect, another UI element may also present a pressing effect with a corresponding animation effect to visually present the linked pressing.

[0252] In this way, the link between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be emphasized. Compared with traditional animations in which the animation effects are monotonous and the UI elements are independent and unrelated, the embodiments of the present disclosure can make the animation effects better conform to physical rules and take into account actual usage scenarios and user usage habits, thereby greatly improving the user experience.

[0253] In the following, some exemplary embodiments of pressure links will be described with reference to Figures 34 to 46.

[0254] Pressure linking may be performed on a UI having any suitable regular or irregular layout, and UI elements on the UI may have any suitable size and shape. For example, pressure linking may be performed on the UIs 300A to 300C shown in FIGS. 3A to 3C.

[0255] A UI element on the UI may be pressed. For example, a user may press a UI element when the user intends to perform an action related to the UI element. For example, a user may press a UI element when the user intends to enter an application represented by the UI element, open a menu related to the UI element, etc. When a press performed on a UI element is detected, the UI element may be changed with an animation effect. For example, the UI element may visually warp (hereinafter may be referred to as rotating) relative to the pressed position to present a pressing action, or may visually be depressed or protruded relative to the pressed position. In this case, the change in the UI element may conform to a point pressure model. In the point pressure model, the pressure of the UI element at the pressed position is greater than the pressure of another part.

[0256] In some embodiments, a UI element may be considered a rigid body, where when a press performed on the UI element is detected, the UI element may visually shift its position relative to the pressed location to present a press effect.

[0257] FIG. 34 is a schematic diagram of an example change 3400 of a UI element as a rigid body when pressed, according to some embodiments of the present disclosure. As shown in FIG. 34, when a press performed on a UI element is detected, the UI element may be changed with an animation effect from an initial shape 3410 to visually warp its position relative to the pressed position. For example, when the pressed position is on the left side of the UI element, the UI element is visually rotated to the left about the UI element's reference point (shown as "+"), thereby changing to a shape 3420. The changed shape 3420 resembles a warped board with its left side pressed and its right side tilted. Furthermore, when the pressed position is on the right side of the UI element, the UI element is visually rotated to the right about the UI element's reference point, thereby changing to a shape 3430. The changed shape 3430 resembles a warped board with its left side tilted and its right side pressed.

[0258] In this case, the UI element can be thought of as a curved plate connected to springs on both ends, and pressing the UI element can be thought of as compressing the spring on one side and stretching the spring on the other side, thereby achieving an overall animation effect in which the UI element is rotated around the UI element's reference point.

[0259] 35 is a schematic diagram of an example of compressing and stretching a spring 3500 to simulate pressing a UI element, according to some embodiments of the present disclosure. 3510 shows both springs in an initial state. 3520 shows the left spring being compressed and the right spring being stretched when the pressed location is on the left side of the UI element. 3530 shows the right spring being compressed and the left spring being stretched when the pressed location is on the right side of the UI element.

[0260] In this case, the spring model can be expressed using equation (9) below.

number

[0261] Furthermore, the above equation (9) can be transformed into the form of the following equation (10):

number

[0262] Additionally, in some embodiments, UI elements may be considered non-rigid, in that when a press performed on a UI element is detected, the UI element may be visually depressed or pushed out relative to the pressed location to present a press effect.

[0263] FIG. 36 is a schematic diagram of an example change 3600 of a UI element as a non-rigid body when pressed, according to some embodiments of the present disclosure. As shown in FIG. 36, the UI element may be considered as a grid diagram. When a press performed on the UI element is detected, the initial UI element 3610 may be changed with an animation effect to be visually depressed or pushed out relative to the pressed location. For example, the coordinates of the grid within the initial UI element 3610 may be changed, thereby changing to a depressed UI element 3620 relative to the pressed location. In addition, in some embodiments, the color (e.g., hue, brightness, and saturation) of the UI element may also be changed to emphasize the press. For example, the initial UI element 3610 may instead be depressed relative to the pressed location and its color changed to a deeper UI element 3630. It should be understood that color changes may also be applicable to UI elements as rigid bodies.

[0264] In some embodiments, after a UI element is changed, the pressed location may no longer be within the range of the changed UI element. In this case, the press may continue to be detected as a press on the UI element because the pressed location is still within the range of the UI element before the change, or any other suitable range. Optionally, the press is not detected as a press on the UI element because the pressed location is no longer within the range of the changed UI element. In this case, the press may be considered to have ended.

[0265] The following describes an embodiment of the present disclosure using an example in which a UI element visually moves its position relative to the pressed position, however, it should be understood that the UI element may instead be changed in another manner, for example, visually depressed or protruded relative to the pressed position.

[0266] In addition, in some embodiments, the change amplitude may depend on the magnitude of the pressing force to allow the change of the UI element to follow the laws of nature and the usage habits of the user. In the real world, the magnitude of the force is usually the magnitude of the actual force. In this case, a larger pressing force indicates a larger change of the UI element. In some embodiments, the pressing force may be a pressing force applied by the user and detected by the electronic device. Optionally, the pressing force may instead be a preset pressing force set by the electronic device or the user.

[0267] FIG. 37 is a schematic diagram of an example change 3700 of a UI element when pressed using different forces, according to some embodiments of the present disclosure. As shown in FIG. 37, when the pressing force is large, the UI element may be changed (e.g., rotated) to a larger extent. On the other hand, when the pressing force is small, the UI element may be changed to a smaller extent. However, this is not limited to this in the embodiments of the present disclosure. The manner in which the UI element changes in response to different pressing forces can be configured by the electronic device or the user. For example, when the pressing force is large, the UI element may be changed to a smaller extent, and when the pressing force is small, the UI element may be changed to a larger extent.

[0268] Furthermore, electronic devices may have relatively high requirements for users with respect to changes based entirely on actual pressure, and electronic devices may need to be equipped with related hardware. Thus, in some embodiments, the pressure may be simulated or replaced by the pressure duration. For example, if the pressure duration is longer, the pressure may be considered to be larger, and therefore the change will be larger.

[0269] 38 is a schematic diagram of example changes 3800 of a UI element when pressed for different durations, according to some embodiments of the present disclosure. As shown in FIG. 38, when the press duration is long, the UI element may be changed (e.g., rotated) to a greater extent. On the other hand, when the press duration is short, the UI element may be changed to a lesser extent.

[0270] However, this is not limited to the embodiments of the present disclosure. The manner in which the UI elements change in response to different press durations can be configured by the electronic device or the user. For example, when the press duration is long, the UI elements may be changed to a smaller extent, and when the press duration is short, the UI elements may be changed to a larger extent.

[0271] In addition, in some embodiments, to further enable the change of the UI element to follow the natural law and the user's usage habits, the change amplitude may depend on the size of the UI element. For example, visually, under the same pressing force, it may be difficult to press a large UI element, but it is easy to press a small UI element. In this case, the impact of the pressing on a relatively large UI element may be small, and the impact of the pressing on a relatively small UI element may be large.

[0272] 39 is a schematic diagram of example changes 3900 of UI elements of different sizes, according to some embodiments of the present disclosure. As shown in FIG. 39, when the size of the UI element is large, the UI element may be changed to a greater extent. On the other hand, when the size of the UI element is small, the UI element may be changed to a lesser extent.

[0273] However, this is not limited to the embodiment of the present disclosure. The change manner of UI elements of different sizes can be configured by the electronic device or the user. For example, when the size of the UI element is large, the UI element may be changed to a smaller extent, and when the size of the UI element is small, the UI element may be changed to a larger extent.

[0274] Additionally, in some embodiments, to improve the user experience, the amplitude of changing the UI element may be limited so that the UI element can only be changed within a permitted amplitude range. For example, the amplitude range may be any suitable range, such as a 0-60 degree rotation angle of the UI element, a 10%-50% grayscale of a color change of the UI element, or a 100-10000 pixel coordinate change of a grid within the UI element. For example, the amplitude range is assumed to be that the rotation angle of the UI element is 0-60 degrees. In this case, regardless of the pre-determined pressing force and pressing duration, the pressed UI element can be rotated by a maximum of 60 degrees around the reference point and cannot be rotated by a larger amplitude.

[0275] The above describes the change of a pressed UI element in detail. As described above, during pressure linking, a pressed target UI element may affect another UI element that is not pressed. Specifically, during pressure linking, triggering an animation effect of a target UI element may trigger animation effects of one or more other UI elements, or even other UI elements throughout the UI together, such that all other UI elements are affected by the target UI element. For example, during pressure linking, when a target UI element is pressed for a period of time, in addition to the target UI element being changed with an animation effect, another UI element may also be changed with a corresponding animation effect to visually present the linked press. Thus, the following describes pressure linking in detail with reference to FIG. 40 to FIG. 46.

[0276] 40 is a flowchart of a graphical interface display method 4000 according to one embodiment of the present disclosure. It should be understood that the method 4000 may be performed by the electronic device 100 described with reference to FIG. 1 or the electronic device 200 described with reference to FIG. 2. The method 4000 is described herein with reference to the UI 300A of FIG. 3A. However, the UI 300A is merely an example and the method 40 It should be appreciated that 00 is applicable to any suitable interface, including but not limited to UI 300B and 300C.

[0277] Block 4 10 At time t0, M user interface UI elements are displayed on the screen of the electronic device, where M is a positive integer greater than 1. For example, the M UI elements may be UI elements 1 to 13.

[0278] Block 4 20 At time t0, a press performed on a first UI element among the M UI elements is detected. For example, the first UI element may be UI element 5. As described above, the press performed on the first UI element rotates the first UI element to present a press effect.

[0279] Block 4 30 In response to a press detected on a first UI element at 0, each of the N UI elements on the screen is changed with a corresponding animation effect, where N is a positive integer ranging from 1 to M-1. Thus, linked presses are visually indicated.

[0280] In some embodiments, the direction in which the N UI elements are changed relative to the pressed position may be the direction in which each of the N UI elements points to the pressed position. In some embodiments, this direction may be the 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 the N elements. In other words, the pressed position is visually indicated as the center of the press. FIG. 41 illustrates a pressure link 4 of N UI elements according to one embodiment of the present disclosure. 1 41 is a schematic diagram of an example of UI element 500. As shown in FIG. 41, UI element 5 is pressed, which causes UI element 5 to rotate to present a pressing effect. In addition, in response to the pressing, other UI elements on the screen (e.g., UI elements 1-4 and 6-13) also rotate with respect to the pressed position, with different amplitudes, to present a pressing effect. Thus, linked pressings are visually presented.

[0281] Optionally, the change direction of the N UI elements relative to the pressed position may be the same as the change direction of the pressed UI element. FIG. 42 shows a pressure link 4 of N UI elements according to one embodiment of the present disclosure. 2 42 is a schematic diagram of another example of the UI element 5 of FIG. 42. As shown in FIG. 42, the UI element 5 is pressed, which causes the UI element 5 to rotate to present a pressing effect. In addition, in response to the pressing, other UI elements on the screen (e.g., UI elements 1-4 and 6-13) also rotate in the same direction as the UI element 5 with different amplitudes to present a pressing effect. In this case, the change reference point of the N elements is the reference point of the N elements. Thus, linked pressing is visually presented.

[0282] For clarity, Figures 41 and 42 only show pressure links for UI elements 1-13 on UI 300A. It should be understood that pressure links may be made between any at least two UI elements on any UI, for example, any at least two UI elements on UIs 300A-300C.

[0283] In some embodiments, the pressure link may be used on all UI elements on the screen. In this case, M-1 UI elements in the M UI elements other than the first UI element may be determined to be the N UI elements. Optionally, the pressure link may be applied to only 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 in the M UI elements that are in the influence area are determined as the N UI elements. For example, a larger size of the first UI element may indicate a larger influence area of ​​the first UI element. Optionally, the influence area may also be narrowed with the size reduction. This is not limited here in the present disclosure. For example, the influence area may be a circle using the reference point of the first UI element as a center and having a predetermined radius. It should be understood that the influence area may be any suitable area having any shape. For example, the influence area is a rectangle or a diamond having a predetermined size, etc. The influence area may be configurable by the electronic device and the user. This is not limited here in the present disclosure.

[0284] Additionally, in some embodiments, a UI element that intersects with the influence area may be considered to be within the influence area. Optionally, when the influence area is a circle with a predetermined radius, a UI element may be considered to be within the influence area if the distance between the UI element and the first UI element is less than the predetermined radius of the influence area.

[0285] 43 is a schematic diagram of an example area of ​​influence 4300 of UI elements according to one embodiment of the present disclosure. As shown in FIG. 43, UI elements 3, 4, 7, and 8 are within the area of ​​influence 4310 of UI element 5, therefore UI elements 3, 4, 7, and 8 are correspondingly changed along with UI element 5. In addition, UI elements 1, 2, 6, and 9-13 are not within the area of ​​influence 4310 of UI element 5, therefore UI elements 1, 6, and 9-13 are not correspondingly changed along with UI element 5.

[0286] Refer again to FIG. 40. To enable the N UI elements to be changed with corresponding animation effects, a distance between the first UI element and each of the N UI elements may be determined. As described above, in some embodiments, the distance may be classified into a plurality of distance levels based on the range in which the distance is located. For example, the distance level of the manipulated UI element may be 0, and the distance level of the linked UI element may be 1, 2, 3, ... based on the distance between the linked UI element and the manipulated UI element. UI elements at the same distance level may be considered to have the same distance to the manipulated UI element. Thus, by using the distance level, the link between UI elements may be simplified, such that UI elements at the same distance level are linked in the same way, thereby improving the consistency and coordination of the link. However, it should be understood that the distance may be used instead during linking so that the UI elements are linked more accurately. In the following, the distance level may be interchangeably referred to as distance.

[0287] In the above, the method for determining the distance between the first UI element and the second UI element in the N UI elements has been described with reference to Figures 10 to 14B, and therefore the description thereof will be omitted here.

[0288] Refer again to FIG. 40. After the distance between the first UI element and the second UI element is determined, the animation effect of changing the second UI element may be determined based on the distance. Optionally, if the distance between the first UI element and the second UI element is longer, the amplitude of changing the second UI element may be smaller to visually indicate the smaller effect of the press on the farther UI element. Optionally, if the distance between the first UI element and the second UI element is longer, the amplitude of changing the second UI element may also be larger to visually indicate the larger effect of the press on the farther UI element.

[0289] In some embodiments, a first amplitude for changing the first UI element in response to a press may be determined to determine the amplitude for changing the second UI element. In some embodiments, the first amplitude for changing the first UI element may be determined based on various factors related to the first UI element. These factors may include, but are not limited to, the size of the first UI element, the position of the first reference point of the first UI element, the amplitude range for changing the first UI element, the pressed position, the press duration, and the predetermined pressing force. The foregoing describes in detail the influence of these factors on the amplitude for changing the UI element. Therefore, the description is omitted here.

[0290] Then, an amplitude for changing the second UI element in response to the pressure can be determined based on the first amplitude and the distance between the first UI element and the second UI element. The transfer method described in detail above can be used to implement a method for transferring the amplitude for changing the first UI element to the second UI element to obtain the amplitude for changing the second UI element. The difference is that during the pressure link, x in transfer equations (7) and (8) n represents the amplitude of the change of the correspondingly changed UI element (e.g., the second UI element), and x in the transfer equations (7) and (8) represents the amplitude of the change of the pressed UI element (e.g., the first UI element). Therefore, the description thereof is omitted here.

[0291] In this way, a pressure link can be implemented that is intuitive, natural and follows the user's usage habits, since the amplitude of the change in the second UI element is determined by the amplitude of the change in the first UI element and the distance between the second UI element and the first UI element.

[0292] In addition, in some embodiments, the size of the second UI element may also affect the animation effect of changing the second UI element. In this case, the size of the second UI element may also be taken into consideration to determine the animation effect of changing the second UI element. For example, if the second UI element is larger, the amplitude of changing the second UI element may be larger. Optionally, if the second UI element is larger, the amplitude of changing the second UI element may be smaller. Thus, in some embodiments, the amplitude of changing the second UI element in response to the press may be determined based on the first amplitude, the distance, and the size of the second UI element.

[0293] In addition, in some embodiments, the size of the first UI element may also affect the animation effect of changing the second UI element. In this case, the size of the first UI element may also be taken into consideration to determine the animation effect of changing the second UI element. For example, a larger size of the first UI element indicates a larger link effect that may be caused by the first UI element. Thus, the amplitude of changing the second UI element may be directly proportional to the size of the first UI element. Thus, in some embodiments, the amplitude of the second UI element may be determined based on the amplitude of the first UI element, the distance, and the size of the first UI element.

[0294] 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 changing the second UI element. Thus, in some embodiments, the amplitude of changing the second UI element may be determined based on the amplitude of the first UI element, the distance, the size of the first UI element, and the size of the second UI element.

[0295] Refer again to Figure 40. After the animation effect of the change of the second UI element is determined, the second UI element may be enabled to be changed with an animation effect to visually indicate that the second UI element is changed due to a press performed on the first UI element. The N UI elements may be enabled to be changed with respective animation effects to visually indicate a press on the entire screen or a portion of the screen, thereby presenting a press link.

[0296] 44 is a schematic diagram of an example change 4400 of a UI element based on distance, according to one embodiment of the present disclosure. As shown in FIG. 4400, the amplitude of changing a UI element whose distance is 0 (e.g., UI element 5) is greater than the amplitude of changing a UI element whose distance is 1 (e.g., UI elements 3, 4, 7, and 8), which is greater than the amplitude of changing a UI element whose distance is 1 (e.g., UI elements 2, 6, and 9), which is greater than the amplitude of changing a UI element whose distance is 2 (e.g., UI elements 1 and 10-13).

[0297] In addition, in some embodiments, the first UI element and the second UI element are not changed at the same time to better present the conveyance of the animation effect and improve the user experience. For example, the first UI element may begin to change when a press is made, and the second UI element may begin to change after the press is made for a period of time. Thus, in some embodiments, a delay time may be determined based on a distance between the first UI element and the second UI element, and the second UI element may be enabled to change in response to the press after the delay time. Furthermore, in some embodiments, a delay factor may be determined, and the delay time may be determined based on the distance and the delay factor. For example, the delay time may be a quotient of the distance divided by the delay factor. The delay factor may be configurable by the electronic device and the user.

[0298] 45 is a schematic diagram of an example delay time 4500 according to an embodiment of the present disclosure. As shown in FIG. 45, the first UI element whose distance is 0 (e.g., UI element 5) starts to change at the time T81 when the press occurs, the UI elements whose distance is 1 (e.g., UI elements 3, 4, 7, and 8) start to change at a later time T82, the UI elements whose distance is 2 (e.g., UI elements 2, 4, 6, and 9) start to change at a later time T83, and the UI elements whose distance is 3 (e.g., UI elements 1 and 10-13) start to change at the latest time T84.

[0299] Additionally, in some embodiments, the rate of change of a UI element may be controlled by a predefined curve whose amplitude changes over time. For example, the predefined curve may be a Bessel curve or an elastic force curve. In the case of an elastic force curve, the rate of change may be controlled by controlling the damping and stiffness coefficients of a spring. In the case of a Bessel curve, the rate of change may be controlled by controlling at least one coordinate of at least one control point of the Bessel curve.

[0300] In addition, in some embodiments, the changed UI element may be restored after the pressing ends (e.g., after the user releases his / her finger from the screen). Specifically, both the pressed UI element and the correspondingly changed N UI elements may be restored. Thus, in some embodiments, the changed second UI element may be restored to the second UI element before the change. The restoration process may be a reverse process of the change, and therefore a detailed description thereof is omitted here.

[0301] 46 is a schematic diagram of an example of UI element restoration 4600 according to an embodiment of the present disclosure. As shown in FIG. 46, all changed UI elements (e.g., UI elements 1-13) are restored to their initial form before the change.

[0302] In some embodiments, the restoration of the change may have a rebound effect. For example, after the user releases his / her hand, the change of the UI element may be from the left side pressed while the right side is tilted, to the left side tilted while the right side is pressed, and then back to the original shape. In other words, the effect is visually presented that the UI element is flipped and then restored after the user releases his / her hand.

[0303] FIG. 46B is a schematic diagram of an exemplary angle-time curve 4600B for restoring a UI element with a rebound effect according to one embodiment of the present disclosure.

[0304] 46B, at T91, the UI element 5 is pressed and changed. For example, the left side of the UI element 5 is pressed, and the UI element 5 rotates around the reference point of the UI element 5. Specifically, the left side of the UI element 5 is pressed, and at the same time, the right side of the UI element 5 is tilted. In addition, other UI elements (for example, UI elements 1 to 4 and 6 to 13) are correspondingly changed.

[0305] At T92, the user releases the hand. In this case, the rotation angle of UI element 5 is -60°. In addition, UI elements whose distance is 1 (e.g., UI elements 3, 4, 7, and 8) are correspondingly rotated, but the rotation amplitude of the UI elements is smaller than that of UI element 5. In addition, UI elements whose distance is 2 (e.g., UI elements 2, 6, and 9) are correspondingly rotated, but the rotation amplitude of the UI elements is smaller than that of the UI elements whose distance is 1. In addition, UI elements whose distance is 3 (e.g., UI elements 1 and 10-13) are correspondingly rotated, but the rotation amplitude of the UI elements is smaller than that of the UI elements whose distance is 2.

[0306] At times T92 and T93, UI elements start to bounce around with respect to rotation.

[0307] In T93, UI element 5 is repulsive at a rotation angle of 45°. In addition, UI elements whose distance is 1 (e.g., UI elements 3, 4, 7, and 8) are correspondingly rotationally repulsive, but the amplitude of the rotational repulsion of the UI element is smaller than the amplitude of the rotational repulsion of UI element 5. In addition, UI elements whose distance is 2 (e.g., UI elements 2, 6, and 9) are correspondingly rotationally repulsive, but the amplitude of the rotational repulsion of the UI element is smaller than the amplitude of the rotational repulsion of the UI element whose distance is 1. Furthermore, UI elements whose distance is 3 (e.g., UI elements 1 and 10-13) are correspondingly rotationally repulsive, but the amplitude of the rotational repulsion of the UI element is smaller than the amplitude of the rotational repulsion of the UI element whose distance is 2.

[0308] In T94, all UI elements are restored to their initial shape, i.e. the rotation angle of all UI elements is restored to 0°.

[0309] It should be understood that the rotation angle in FIG. 46B is merely an example, and the UI element can be changed in any suitable pattern. Furthermore, in FIG. 46B, a rebound effect of only one rebound is shown, but a rebound effect of multiple rebounds may be implemented. The number of rebounds may be any suitable number of rebounds. This is not limited here in the present disclosure. In some embodiments, the rebound amplitude of the multiple rebounds may be decreased over time.

[0310] FIG. 46C is a schematic diagram of an example angle-time curve 4600C for restoring a UI element with a rebound effect of multiple rebounds having reduced rebound amplitudes, according to an embodiment of the present disclosure.

[0311] As shown in FIG. 46C, the UI elements are restored to their initial shapes after multiple bounces. The bounce rotation amplitude (e.g., rotation angle) of a UI element whose distance is 0 (e.g., UI element 5) is greater than the bounce rotation amplitude of a UI element whose distance is 1 (e.g., UI elements 3, 4, 7, and 8). The bounce rotation amplitude of a UI element whose distance is 1 is greater than the bounce rotation amplitude of a UI element whose distance is 2 (e.g., UI elements 2, 6, and 9). The bounce rotation amplitude of a UI element whose distance is 2 is greater than the bounce rotation amplitude of a UI element whose distance is 3 (e.g., UI elements 1 and 10-13).

[0312] Additionally, in some embodiments, the rebound effect may also be controlled by a predefined curve (e.g., an elastic force curve or a Bessel curve, etc.) For example, these UI elements may rebound on change with an animation effect controlled by a predefined curve.

[0313] The following describes the implementation principle and system architecture of link animation according to one embodiment of the present disclosure.

[0314] FIG. 47 is a diagram 4700 of an animation implementation principle according to an embodiment of the present disclosure. As described above, animation is essentially a real-time display of a UI or UI element based on a refresh rate. Due to the principle of persistence of image in human vision, a user perceives an image as moving. As shown in FIG. 47, the animation changes from an initial state of the animation to a final state after an animation duration. In this conversion process, the animation may be controlled based on an animation type and an animation conversion format. For example, the animation type may include a displacement animation, a rotation animation, a scaling animation, a transparency animation, and the like. The animation conversion format may be controlled by a controller, such as an interpolator and an estimator. Such a controller may be configured to control the animation conversion speed during the animation duration.

[0315] Specifically, the interpolator is configured to set change logic for the transition of an animation attribute value from an initial state to a final state to control the animation change rate such that the animation can be changed at one or more of the following rates: constant speed, acceleration, deceleration, and parabolic rate.

[0316] In some embodiments, the electronic device 100 may set the change logic of the animation attribute value using a system interpolator or a customized interpolator (e.g., an elasticity interpolator or a friction interpolator). When the animation is running, if the electronic device 100 determines that the animation attribute value has changed based on the change logic, the electronic device 100 draws a frame image based on the animation attribute value and refreshes the view.

[0317] In some embodiments, when the electronic device 100 determines, based on the interpolator's change logic, that the animation attribute value has changed, it calls the invalidate() function to refresh the view based on the animation attribute value, i.e., calls the onDraw() function to redraw the view and display the view.

[0318] In some embodiments, the electronic device 100 customizes the spring interpolator. For example, the parameters in the function of the spring interpolator include at least a stiffness coefficient and a damping coefficient. For example, the function code of the spring interpolator may 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)", and "SpringInterpolator(float stiffness, float damping, float endPos, float velocity, float valueThreshold)".

[0319] The endPos parameter represents the relative displacement, i.e. the difference between the initial position of the spring and its rest position. In some embodiments, endPos may represent the relative displacement of a UI element.

[0320] The velocity parameter represents the initial velocity. In some embodiments, the velocity may represent the initial velocity of the UI element.

[0321] The valueThreshold parameter represents a threshold value for determining that an animation has stopped. When the difference in displacement (or another attribute) between two adjacent frames is less than the threshold value, the animation stops running. When the threshold value is larger, the animation is more likely to stop and the running time is shorter. Conversely, when the threshold value is smaller, the running time of the animation is longer. The value of the threshold value may be set based on a particular animation attribute. In some embodiments, the FloatValueHold parameter of the elastic interpolator is 1 / 1000 by default, and in another construction method, the value of the threshold value is 1. In some embodiments, when the threshold value is customized, the recommended values ​​shown in Table 1 may be used based on the animation attribute.

[0322] [Table 1]

[0323] In addition, the thresholds may be directly the following constants provided by the DynamicAnimation class: MIN_VISIBLE_CHANGE_PIXELS, IN_VISIBLE_CHANGE_ROTATION_DEGREES, MIN_VISIBLE_CHANGE_ALPHA, and MIN_VISIBLE_CHANGE_SCALE.

[0324] For example, the specific code for a customized elastic interpolator animation class is as follows, i.e. “PhysicalInterpolatorBase interpolator=new SpringInterpolator(400F,40F,200F,2600F,1F); ObjectAnimator animator=ObjectAnimator.ofFloat(listView,"translationY",0,346); animator.setDuration(interpolator.getDuration()); / / Get animation duration animator.setInterpolator(interpolator); / / Set a customized interpolator for the animation class animator.start(); / / Start the animation It can be expressed as:

[0325] In some embodiments, the electronic device 100 customizes the friction interpolator. For example, the function code of the friction interpolator may be expressed as "FlingInterpolator(float initVelocity, float friction)", where initVelocity represents the initial velocity and friction represents the friction.

[0326] For example, the specific code for an animation class that uses the friction interpolator looks like this: “PhysicalInterpolatorBase interpolator=new FlingInterpolator(600F,0.5F); ObjectAnimator animator=ObjectAnimator.ofFloat(listView,"translationY",0,interpolator.getEndOffset()); animator.setDuration(interpolator.getDuration()); / / Get animation duration animator.setInterpolator(interpolator); / / Set a customized interpolator for the animation class animator.start(); / / Start the animation It can be expressed as:

[0327] In some embodiments, the electronic device 100 may set the animation duration and start position by itself, or may call the engine model to obtain the animation duration and end position, and then set the animation duration and end position of the animation class (Animator class).

[0328] For example, the code for calling the engine model by the electronic device 100 to obtain the animation duration may be expressed as "com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#getDuration".

[0329] For example, the code for calling an engine model to get the end position of a spring may be expressed as "com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#getEndOffset".

[0330] For example, the code for setting the valueThreshold parameter may be expressed as "com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#setValueThreshold".

[0331] In some embodiments, the code for an animation class that uses the elasticity engine is the following code: ``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) It can be expressed as one of:

[0332] The object parameter represents the animation object, and the Property parameter represents the animation class or attribute object to which the interpolator is applied, see Table 1. The parameter can be used to indirectly set the valueThreshold. The parameter is optional in the interpolator version, and may not be set when the valueThreshold is set in another way, i.e. the construction method without the property parameter is used directly. The parameter is a required parameter in the animation class version. The DynamicAnimation class provides the following constants that can be used directly:

[0333] "TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCALE_X, SCALE_Y, ROTATION, ROTATION_X, ROTATION_Y, X, Y, Z, ALPHA, SCROLL_X, and SCROLL_Y." Electronic device 100 may customize the ViewProperty interface.

[0334] For example, the specific code for an animation class that uses the spring engine might look like this: “SpringAnimation animation=SpringAnimation(listView,DynamicAnimation.TRANSLATION_Y,400F,40F,0,1000F); animation.start(); It can be expressed as:

[0335] In some embodiments, the code for an animation class that uses the friction engine looks like this: "FlingAnimation(K object,FloatPropertyCompat <k>property,float initVelocity,float friction) It can be expressed as:

[0336] For example, the specific code for an animation class that uses friction might look like this: “FlingAnimation animation=FlingAnimation(listView,DynamicAnimation.TRANSLATION_Y,2000F,0.5F); animation.start(); It can be expressed as:

[0337] FIG. 48 is a schematic diagram of a system framework 4800 for implementing a capability or function of a “link” animation effect according to an embodiment of the present disclosure. The animation effect capability of the UI framework is implemented based on the overall architecture of Android® or HarmonyOS®, including mainstream four-layer logical processing. The data processing process is presented to the user from bottom to top. The user mainly uses and experiences the animation effect function at the application layer. In this 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. The application layer 4810 may include a desktop 4812. The UI element operation 4814 may be implemented on the desktop 4812. The UI element operation 4814 may include a drag operation, a press operation, a depth press operation, and the like. The application framework layer 4830 may include system services 4832 and extension services 4834. The system services 4832 may include various system services, e.g., Service 4833. The extension services 4834 may include various extension services, such as SDK 4835. The hardware abstraction layer (HAL) 4850 may include HAL3.0 4852 and algorithm Algo 4854. The kernel layer 4870 may include drivers 4872 and physical devices 4874. The physical devices 4874 may provide original parameter flow to the drivers 4872, and the drivers 4872 may provide function processing parameter flow to the physical devices 4874. As further shown in FIG. 48, a UI framework 4820 for implementing link animation effects 4825 may be implemented between the application layer 4810 and the application framework layer 4830. The UI framework 4820 may include platform capabilities 4822 and system capabilities 4824, both of which may be used to provide link animation effects 4825.Link animation effects 4825 may be provided for UI element manipulation 4814 at the application layer 4810.

[0338] FIG. 49 is a schematic diagram of a relationship between an application side and a UI framework side related to a "link" animation effect capability or function, according to one embodiment of the present disclosure. As shown in FIG. 49, the application side 4910 may include a desktop 4915, where operations such as drag, press, and depth press may be performed on UI elements on the desktop 4915. The UI framework side 4950 may include a UI framework animation effect 4952, where the UI framework animation effect 4952 may implement a link animation effect capability 4954, where the link animation effect capability 4954 may be implemented using methods such as AAR 4951, JAR 4953, and system interface 4955. The application side 4910 may invoke the "link" animation effect capability or function provided by the UI framework side 4950 by integration 4930 and invocation 4940. Through interaction between the application side 4910 and the UI framework side 4950, new link "animation effects" are implemented in this embodiment of the disclosure so that the original independent UI elements (such as icons, cards, and controls) are associated.

[0339] FIG. 50 is a schematic diagram of a specific description of three ways to implement a capability or function of a "link" animation effect according to one embodiment of the present disclosure. As shown in FIG. 50, the relationship 5001 between AAR4951 and the system of electronic device 100 is as follows: AAR4951 is a capability packaged in a binary manner, provided to the application side in the system for integration; the version schedule of AAR4951 can be freely controlled without following the system; the relationship 5003 between JAR4953 and the system of electronic device 100 is as follows: JAR4953 is a capability packaged in a binary manner, provided to all components in the system; the version schedule of JAR4953 can be freely controlled without following the system; the relationship 5005 between system interface 4955 and the system of electronic device 100 is as follows: system interface 4955 is an interface of the framework layer of the system version, a capability provided to all components in the system, and upgraded with the system. The present disclosure focuses on the implementation of the link animation effect capability. The integration is implemented by the AAR and JAR methods, and the invocation is implemented by the system interface methods. Although the scenarios are not limited, the capability display methods are different. In other words, the functionality of the methods described above in this disclosure may be implemented using the AAR file, the JAR file, and / or the system interface of the electronic device 100. In this way, the capability or functionality of the "link" animation effect may be simply and conveniently implemented and provided to an electronic device, e.g., a desktop application. [Explanation of symbols]

[0340] 100 electronic device, 110 processor, 120 external memory interface, 121 internal memory, 130 USB interface, 140 charging management module, 141 power management module, 142 battery, 150 mobile communication module, 160 wireless communication module, 170 audio module, 170A speaker, 170B receiver, 170C microphone, 170D headset jack, 180 sensor module, 180A pressure sensor, 180B gyro sensor, 180C barometric pressure sensor, 180D magnetic sensor, 180E acceleration sensor, 180F distance sensor, 180G optical proximity sensor, 180H fingerprint sensor, 180J temperature sensor, 180K touch sensor, 180L ambient light sensor, 180M bone conduction sensor, 190 button, 191 motor, 192 indicator, 193 camera, 194 display, 195 SIM card interface, 200 electronic device, 210 processing unit, 220 memory, 225 computer program product, 230 storage device, 240 communication unit, 250 input device, 260 output device, 300A UI, 300B UI, 300C UI, 400 drag link, 500A velocity-time curve, 500B displacement-time curve, 600 example, 610 screen, 620 original position, 630 pre-determined position, 640 arbitrary position, 700A curve, 700B curve, 700C curve, 910 area of ​​influence, 1000 example, 1100A example, 1110A circle, 1111A circle, 1113A circle, 1114A circle, 1115A circle, 1116A circle, 1117A Circle, 1118A Circle, 1119A Circle, 1120A Circle, 1121A Circle, 1122A Circle, 1123A Circle, 1124A Circle, 1125A Circle, 1126A Circle, 1127A Circle, 1128A Circle, 1129A Circle, 1130A Circle, 1100B Example, 1110B Rectangle, 1120B Rectangle, 1100C Example, 1110C Rectangle, 1111C Rectangle, 1112C Rectangle, 1113C Rectangle, 1114C Rectangle, 1115C Rectangle, 1116C Rectangle, 1117C Rectangle, 1118C Rectangle, 1119C Rectangle, 1120C Rectangle, 1121C Rectangle, 1122C Rectangle, 1123C Rectangle, 1124C Rectangle, 1125CRectangle, 1126C Rectangle, 1127C Rectangle, 1128C Rectangle, 1129C Rectangle, 1130C Rectangle, 1131C Rectangle, 1132C Rectangle, 1133C Rectangle, 1134C Rectangle, 1135C Rectangle, 1136C Rectangle, 1137C Rectangle, 1138C Rectangle, 1139C Rectangle, 1140C Rectangle, 1200 Example, 1300 Example, 1400A Example, 1410A Operation Direction, 1400B Example, 1420B Operation Direction, 1430B Operation Direction, 1500 Delay Time, 1600A Scenario, 1600B Displacement-Time Curve, 1700A Scenario, 1700B Displacement-Time Curve, 1800A Scenario, 1800B Displacement-Time Curve, 1900A Scenario, 1900B Displacement-Time Curve, 2000 Change, 2100 Change, 2200 Change, 2300 Change, 2400 Change, 2500 Graphical Interface Display Method, 2600 Depth Link, 2700 Influence Area, 2710 Influence Area, 2800 Scaling, 2900 Delay Time, 3000 Scaling, 3100 Displacement, 3200A Restoration, 3200B Restoration, 3300A Size-Time Curve, 3300B Displacement-Time Curve, 3300C Size-Time Curve, 3300D Displacement-Time Curve, 3400 Change, 3410 Initial Shape, 3420 Transformed Shape, 3430 Transformed Shape, 3500 Spring, 3600 Change, 3610 Initial UI Element, 3620 Depressed UI Element, 3630 UI elements whose colors are deeper,3700 change,3800 change,3900 change,4100 pressure link,4200 pressure link,4300 influence area,4310 influence area,4400 change,4500 delay time,4600A restoration,4600B angle-time curve,4600C angle-time curve,4700 diagram,4800 system framework,4810 application layer,4812 desktop,4814 UI element manipulation,4820 UI framework,4822 platform capabilities,4824 system capabilities,4825 link animation effect,4830 application framework layer,4832 system services,4833 service,4834 extension services,4835 SDK,4850 hardware abstraction layer,4852 HAL3.0,4854 algorithm Algo,4870Kernel layer, 4872 Drivers, 4874 Physical devices, 4910 Application side, 4915 Desktop, 4920 UI element manipulation, 4930 Integration, 4940 Invocation, 4950 UI framework side, 4951 AARs, 4952 UI framework animation effects, 4953 JARs, 4954 Link animation effect capabilities, 4955 System interface< / k> < / k> < / k> < / canvas> < / video> < / videoview> < / imgview> < / textview>

Claims

1. A method for displaying a graphical interface, comprising: displaying M user interface UI elements on a screen of an electronic device, where M is a positive integer greater than 1; Detecting a drag performed on a first UI element within the M UI elements; a step of enabling each of N UI elements on the screen to move with a corresponding animation effect in response to the dragging, where N is a positive integer in a range of 1 to M-1, the step of enabling the N UI elements to move with a corresponding animation effect comprising: determining a distance between the first UI element and a second UI element of N UI elements on the screen; determining an animation effect for the movement of the second UI element based on the distance; and Enabling the second UI element to move with the animation effect to visually indicate that the second UI element moves with the first UI element. Steps Including, The step of determining an animation effect of the movement includes: determining a first animation effect for moving the first UI element in response to the drag; One of the following: the first animation effect and the distance; or the first animation effect, the distance, and / or a size of the second UI element and a size of the first UI element; determining an animation effect for moving the second UI element in response to the drag based on one of the A method comprising:

2. The step of determining the distance comprises: determining a first reference point of the first UI element and a second reference point of the second UI element; determining the distance between the first reference point and the second reference point as the distance; 2. The method of claim 1, comprising:

3. The step of determining the distance comprises: determining a first reference point of the first UI element; determining a target circle that intersects with the second UI element and has a smallest radius from among a plurality of circles, each of the circles using the first reference point as a center and each having a respective radius; determining the radius of the target circle as the distance; 2. The method of claim 1, comprising:

4. The step of determining the distance comprises: determining a 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; One of the following: At least one of the horizontal interval and the vertical interval, or a direction from a second reference point of the second UI element to a first reference point of the first UI element and at least one of the horizontal spacing and the vertical spacing; determining the distance based on one of 2. The method of claim 1, comprising:

5. determining an area of ​​influence of the first UI element based on a size of the first UI element; determining UI elements within the M UI elements as the N UI elements that are within the area of ​​influence; 5. The method of claim 1, further comprising:

6. determining M-1 UI elements among the M UI elements other than the first UI element as the N UI elements; 5. The method of claim 1, further comprising:

7. The method of claim 1 , wherein the first animation effect of the movement of the first UI element is determined based on a predefined curve whose displacement changes over time.

8. The method of claim 7 , wherein the predefined curve is a Bessel curve or an elastic force curve.

9. The step of enabling the second UI element to move with the animation effect includes: determining a direction of the drag; enabling the second UI element to move with the animation effect relative to the direction; 9. The method of any one of claims 1 to 4 and 7 and 8, comprising:

10. The step of enabling the second UI element to move with the animation effect includes: determining a delay time based on the distance; in response to the dragging, enabling the second UI element to move with the animation effect after the delay time; 9. The method of any one of claims 1 to 4 and 7 and 8, comprising:

11. 9. The method of claim 1, wherein the method is implemented using at least one of an AAR file, a JAR file, and a system interface.

12. 13. An electronic device comprising a processor and a memory storing instructions, the instructions, when executed by the processor, enabling the electronic device to perform the method of claim 1.

13. 13. A computer-readable storage medium having instructions stored therein that, when executed by an electronic device, enable the electronic device to perform the method of claim 1.

14. 13. A computer-readable storage medium comprising a computer program product, the computer program product comprising instructions that, when executed by an electronic device, enable the electronic device to perform the method of claim 1.

Images