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 the screen of the electronic device, where M is a positive integer greater than 1. A press acting on a first UI element among the M UI elements is detected. In response to the press, each UI element among the N UI elements on the screen is changed with a corresponding animation effect, where N is a positive integer between 1 and M-1. Changing the N UI elements with corresponding animation effects includes: determining the distance between the first UI element and the second UI element among the N UI elements; determining the animation effect of the change of the second UI element based on the distance and the position of the press in the UI; and changing the second UI element with an animation effect to visually indicate the press. In this way, the connection between the animation effects of different UI elements can be strengthened, the relationship between each independent UI element can be highlighted, and the animation effect of the UI is more in line with the user's usage habits, thereby significantly improving the user experience.

Description

Technical Field

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

[0002] With the development of information technology, various types of electronic devices are equipped with various types of screens. For this reason, the display effect and style of the user interface (UI) on the screen have become key factors affecting the user experience. Animation has become a vital part of UI. As the performance of electronic devices such as smart phones improves, animation has also developed. There are more and more animations with high refresh rate, high rendering degree and high complexity. Therefore, it is necessary to further improve the display of animation to improve the user experience. Summary of the invention

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

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

[0005] In some implementations, to determine the distance, a first reference point of the first UI element and a second reference point of the second UI element may be determined; and the distance between the first reference point and the second reference point may be determined as the distance. In this way, 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, thereby improving the user experience.

[0006] In some implementations, to determine the distance, a first reference point of the first UI element may be determined; a target circle with the smallest radius that intersects the second UI element is determined from a plurality of circles with respective radii and centered at the first reference point; and the radius of the target circle is determined as the distance. In this way, the distance between UI elements may be determined more simply and conveniently, thereby increasing the flexibility of the distance determination method and thus improving the user experience.

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

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

[0009] In some implementations, the method may further include: determining M-1 UI elements other than the first UI element among the M UI elements as N UI elements. In this way, all UI elements on the screen except the pressed UI element can be linked to change with the UI element, thereby more simply and conveniently determining the UI elements that change in linkage, making the UI animation effect more in line with the user's usage habits, thereby significantly improving the user experience.

[0010] In some implementations, the animation effect may include: visually moving the position in a seesaw manner relative to the pressed position, or visually sinking or protruding relative to the pressed position. In this way, the animation effect of the UI element being pressed can be intuitively presented, making the UI animation effect more in line with the user's usage habits, thereby significantly improving the user experience.

[0011] In some implementations, in order to determine the animation effect, the first amplitude of the change of the first UI element in response to pressing can be determined; and the amplitude of the change of the second UI element in response to pressing can be determined based on any of the following: the first amplitude and the distance, or at least one of the size of the second UI element and the size of the first UI element, the first amplitude, and the distance. In this way, the animation effect of the first UI element can be transmitted to the second UI element, and further the animation effect of the second UI element can be determined based on the distance between the first UI element and the second UI element and the size of the second UI element, thereby making the UI animation effect more in line with the user's usage habits, thereby significantly improving the user experience.

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

[0013] In some implementations, causing the second UI element to change may include: determining a delay time based on the distance; and causing the second UI element to change in response to the delay time after the pressing occurs. In this way, the linkage change can be visually presented to propagate with the distance, so that the UI animation effect is more in line with the user's usage habits, thereby significantly improving the user experience.

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

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

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

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

[0018] In a second aspect of the present disclosure, an electronic device is provided, comprising a processor and a memory storing instructions, wherein when the instructions are executed by the processor, the electronic device executes any method according to the first aspect and its implementation manner.

[0019] In a third aspect of the present disclosure, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores instructions, wherein when the instructions are executed by a processor, an electronic device executes any method according to the first aspect and its implementation manner.

[0020] In a fourth aspect of the present disclosure, a computer program product is provided, wherein the computer program product includes instructions, wherein when the instructions are executed by a processor, an electronic device executes any method according to the first aspect and its implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] The features, advantages and other aspects of various implementations of the present disclosure will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. Several implementations of the present disclosure are shown here in an exemplary and non-limiting manner. In the accompanying drawings:

[0022] Figures 1A to 1B A schematic diagram showing the hardware structure and software structure of an electronic device that can implement an embodiment of the present disclosure is shown.

[0023] Figure 2 A block diagram of another electronic device in which embodiments of the present disclosure may be implemented is shown.

[0024] Figures 3A-3C Schematic diagrams of example UIs according to some embodiments of the present disclosure are respectively shown.

[0025] Figure 4 A schematic diagram of an example drag linkage according to some embodiments of the present disclosure is shown.

[0026] Figure 5A and 5B Schematic diagrams of example velocity time curves and example displacement time curves of a friction force model according to some embodiments of the present disclosure are respectively shown.

[0027] Figure 6 Schematic diagram showing examples of restricted and unrestricted movement positions according to some embodiments of the present disclosure.

[0028] Figures 7A-7C Schematic diagrams showing examples of curves of spring deformation x versus time t in a critical damping state, an underdamping state, and an overdamping state according to some embodiments of the present disclosure are shown respectively.

[0029] Figure 8 A flowchart of a graphical interface display method according to an embodiment of the present disclosure is shown.

[0030] Fig. 9 A schematic diagram showing an example of an influence area of ​​a UI element according to an embodiment of the present disclosure.

[0031] Fig.10 A schematic diagram showing an example of determining a distance according to an embodiment of the present disclosure.

[0032] Figures 11A-11C A schematic diagram showing an example of determining a distance according to an embodiment of the present disclosure.

[0033] Fig.12 A schematic diagram showing an example of determining a distance according to an embodiment of the present disclosure.

[0034] Fig.13 A schematic diagram showing an example of determining a distance according to an embodiment of the present disclosure.

[0035] Fig.14A and 14B A schematic diagram showing an example of determining a distance according to an embodiment of the present disclosure.

[0036] Fig.15 A schematic diagram showing an example of delay time according to an embodiment of the present disclosure.

[0037] Fig.16A A schematic diagram showing an example of a scenario in which a UI element completely follows the movement of a hand according to an embodiment of the present disclosure.

[0038] Fig. 16B A schematic diagram showing an example of a displacement time curve of a scene in which a UI element moves completely with a hand according to an embodiment of the present disclosure.

[0039] Fig.17A A schematic diagram showing an example of a scenario in which a UI element does not completely follow the movement of a hand according to an embodiment of the present disclosure.

[0040] Fig. 17B A schematic diagram showing an example of a displacement time curve of a scenario in which a UI element does not completely follow the movement of a hand according to an embodiment of the present disclosure.

[0041] Fig.18A A schematic diagram showing an example of a scenario in which a UI element completely follows the movement of a hand according to an embodiment of the present disclosure.

[0042] Fig.18B A schematic diagram showing an example of a displacement time curve of a scene in which a UI element moves completely with a hand according to an embodiment of the present disclosure.

[0043] Fig.19A A schematic diagram showing an example of a scenario in which a UI element completely follows the movement of a hand according to an embodiment of the present disclosure.

[0044] Fig.19B A schematic diagram showing an example of a displacement time curve of a scene in which a UI element moves completely with a hand according to an embodiment of the present disclosure.

[0045] Fig. 20 A schematic diagram showing an example of how a UI element changes when pressed according to some embodiments of the present disclosure.

[0046] Fig.21 A schematic diagram showing an example of changes in a UI element when it is pressed at different positions according to some embodiments of the present disclosure.

[0047] Fig. 22 A schematic diagram showing an example of changes in UI elements at different pressing forces according to some embodiments of the present disclosure.

[0048] Fig.23 A schematic diagram showing an example of changes in a UI element at different press durations according to some embodiments of the present disclosure.

[0049] Fig.24 A schematic diagram showing examples of changes in UI elements at different sizes according to some embodiments of the present disclosure.

[0050] Fig.25 A flowchart of a graphical interface display method according to an embodiment of the present disclosure is shown.

[0051] Fig.26 A schematic diagram showing an example of deep linkage of N UI elements according to an embodiment of the present disclosure is shown.

[0052] Fig. 27 A schematic diagram showing an example of an influence area of ​​a UI element according to an embodiment of the present disclosure.

[0053] Fig.28 A schematic diagram showing an example of scaling of a UI element based on distance according to an embodiment of the present disclosure.

[0054] Fig.29A schematic diagram showing an example of delay time according to an embodiment of the present disclosure.

[0055] Fig.30 A schematic diagram showing an example of scaling of a UI element with a delay time according to the present disclosure.

[0056] Fig.31 A schematic diagram showing an example of displacement of a movement of a UI element according to an embodiment of the present disclosure.

[0057] Figures 32A-32B Schematic diagrams respectively show examples of restoration of a UI element without displacement and restoration of a UI element with displacement according to an embodiment of the present disclosure.

[0058] Figures 33A-33B Schematic diagrams of examples of a restored size time curve and a displacement time curve of a UI element with a rebound effect according to an embodiment of the present disclosure are respectively shown, and Figures 33C-33D Schematic diagrams respectively show examples of a restored size-time curve and a displacement-time curve of a UI element having a rebound effect of multiple rebounds with reduced rebound amplitude according to an embodiment of the present disclosure.

[0059] Fig.34 A schematic diagram showing an example of how a UI element as a rigid body changes when being pressed according to some embodiments of the present disclosure.

[0060] Fig.35 A schematic diagram illustrating an example of compression and extension of a spring simulating compression of a UI element according to some embodiments of the present disclosure.

[0061] Fig.36 A schematic diagram showing an example of how a UI element that is a non-rigid body changes when being pressed according to some embodiments of the present disclosure.

[0062] Fig.37 A schematic diagram showing an example of changes in UI elements at different pressing forces according to some embodiments of the present disclosure.

[0063] Fig.38 A schematic diagram showing an example of changes in a UI element at different press durations according to some embodiments of the present disclosure.

[0064] Fig.39 A schematic diagram showing examples of changes in UI elements at different sizes according to some embodiments of the present disclosure.

[0065] Fig.40 A flowchart of a graphical interface display method according to an embodiment of the present disclosure is shown.

[0066] Fig.41A schematic diagram showing an example of pressure linkage of N UI elements according to an embodiment of the present disclosure is shown.

[0067] Fig.42 A schematic diagram showing another example of pressure linkage of N UI elements according to an embodiment of the present disclosure is shown.

[0068] Fig.43 A schematic diagram showing an example of an influence area of ​​a UI element according to an embodiment of the present disclosure.

[0069] Fig.44 A schematic diagram showing an example of a change of a UI element based on distance according to an embodiment of the present disclosure.

[0070] Fig.45 A schematic diagram showing an example of delay time according to an embodiment of the present disclosure.

[0071] Fig.46A A schematic diagram showing an example of restoration of a UI element according to an embodiment of the present disclosure.

[0072] Fig.46B A schematic diagram showing an example of an angle-time curve of restoration of a UI element with a rebound effect according to an embodiment of the present disclosure is shown.

[0073] Fig.46C A schematic diagram showing an example of an angle-time curve of recovery of a UI element having a rebound effect of multiple rebounds with reduced rebound amplitude according to an embodiment of the present disclosure.

[0074] Fig.47 A schematic diagram of an animation implementation according to an embodiment of the present disclosure is shown.

[0075] Fig.48 A schematic diagram of a system framework for implementing a “linked” animation effect capability or function according to an embodiment of the present disclosure is shown.

[0076] Fig.49 A schematic diagram showing the relationship between the application side and the UI framework side involved in the "linked" animation effect capability or function according to an embodiment of the present disclosure.

[0077] Fig.50 A schematic diagram showing three specific descriptions of the implementation of the "linked" animation effect capability or function according to an embodiment of the present disclosure. DETAILED DESCRIPTION

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

[0079] As used herein, the term "including" and its variations represent 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 "embodiment" and "some embodiments" mean "at least some embodiments". The terms "first", "second", etc. are used to distinguish different objects, etc., and do not represent a sequence, nor do they limit the "first" and "second" to different types.

[0080] The term "UI" used in this article refers to the interface for users to interact and exchange information with applications or operating systems, which realizes the conversion between the internal form of information and the form acceptable to users. For example, the UI of an application is the source code written in a specific computer language such as Java and extensible markup language (XML). The UI source code is parsed and rendered on the electronic device, and finally presented as content that can be recognized by the user, such as pictures, text, buttons and other UI elements.

[0081] In some embodiments, the attributes and content of UI elements in the UI are defined by tags or nodes, such as XML. <textview> 、 <imgview> 、 <videoview>The UI elements contained in the UI are specified by nodes such as . A node corresponds to a UI element or attribute in the UI. After parsing and rendering, the node is presented as user-visible content. In addition, many applications, such as hybrid applications, usually also contain web pages in their UI. A web page can be understood as a special UI element embedded in the application UI. A web page is source code written in a specific computer language, such as hypertext markup language (HTML), cascading style sheets (CSS), JavaScript (JS), etc. The web page source code can be loaded and displayed as user-recognizable content by a browser or a web page display component with similar functions to a browser. The specific content contained in a web page is also defined by tags or nodes in the web page source code. For example, HTML is defined by 、 、 <video> 、 <canvas>To define the elements and attributes of a web page.

[0082] The term "UI element" used in this article includes but is not limited to: windows, scroll bars, table views, buttons, menu bars, text boxes, navigation bars, toolbars, images, static text, widgets and other visual UI elements.

[0083] In some processes described in the embodiments of the present disclosure, multiple operations or steps that appear in a specific order are included, but it should be understood that these operations or steps may not be executed in the order in which they appear in the embodiments of the present disclosure or executed in parallel, and the sequence number of the operation is only used to distinguish between different operations, and the sequence number itself does not represent any execution order. In addition, these processes may include more or fewer operations, and these operations or steps may be executed in sequence or in parallel, and these operations or steps may be combined.

[0084] In mobile operating systems such as Android and iOS, animation is essentially the real-time display of user interfaces UI or UI elements based on refresh rate. Due to the principle of human visual persistence, users feel that the picture is moving. The animation changes from the initial state of the animation to the final state of the animation after the animation time. In this transformation process, the animation can be controlled by the animation type and the animation transformation form. For example, the animation type can include displacement animation, rotation animation, scaling animation, and transparent animation. The animation transformation form can be controlled by controllers such as interpolators and estimators. Such a controller can be used to control the speed of transforming the animation during the animation time.

[0085] However, traditionally, animation is merely a combination of simple animation effects, which makes the animation effect single, inconsistent with the laws of physics, and does not take into account real usage scenarios and user habits.

[0086] To this end, an embodiment of the present disclosure proposes a new scheme for displaying a graphical interface. An embodiment of the present disclosure relates to the linkage of UI elements in a UI in terms of animation effects, including drag linkage, depth linkage, and pressure linkage. In the linkage, the operated target UI element can affect other UI elements that are not operated. Specifically, the animation effect of triggering the target UI element can jointly trigger the animation effects of one or more other UI elements, or even other UI elements in the entire UI.

[0087] Thus, the connection between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be highlighted. Compared with traditional animations with a single animation effect and each UI element being independent and unconnected, the embodiments of the present disclosure can make the animation effect more in line with physical laws and take into account real usage scenarios and user usage habits, thereby significantly improving the user experience.

[0088] The following will refer to the attached Figures 1A to 4 6 describes some example embodiments of the present disclosure.

[0089] Figure 1A FIG. 1 is a schematic diagram showing a hardware structure of an electronic device 100 that can implement an embodiment of the present disclosure. Figure 1A As shown, 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, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, and the like.

[0090] It should be understood that the structure shown in the embodiments of the present disclosure does not constitute a specific limitation on the electronic device 100. In other embodiments of the present disclosure, the electronic device 100 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0091] 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). Different processing units may be independent devices or integrated into one or more processors. The controller may generate an operation control signal according to the instruction opcode and the timing signal to complete the control of fetching and executing instructions.

[0092] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0093] In some embodiments, the processor 110 may include one or more interfaces. The interface 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.

[0094] The I2C interface is a bidirectional synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 110 may include multiple groups of I2C buses. The processor 110 can be coupled to the touch sensor 180K, the charger, the flash, the camera 193, etc. through different I2C bus interfaces. For example, the processor 110 can be coupled to the touch sensor 180K through the I2C interface, so that the processor 110 communicates with the touch sensor 180K through the I2C bus interface to realize the touch function of the electronic device 100.

[0095] The I2S interface can be used for audio communication. In some embodiments, the processor 110 can include multiple I2S buses. The processor 110 can be coupled to the audio module 170 via the I2S bus to achieve communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 can transmit an audio signal to the wireless communication module 160 via the I2S interface to achieve the function of answering a call through a Bluetooth headset.

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

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

[0098] The MIPI interface can be used to connect the processor 110 with peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI), a display serial interface (DSI), etc. In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to realize the shooting function of the electronic device 100. The processor 110 and the display screen 194 communicate via the DSI interface to realize the display function of the electronic device 100.

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

[0100] The USB interface 130 is an interface that complies with the USB standard specification, and specifically can be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc. The USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transfer data between the electronic device 100 and a peripheral device. It can also be used to connect headphones to play audio through the headphones. The interface can also be used to connect other electronic devices, such as AR devices, etc.

[0101] It is understandable that the interface connection relationship between the modules illustrated in the embodiments of the present disclosure is only for illustrative purposes and does not constitute a structural limitation on the electronic device 100. In other embodiments of the present disclosure, the electronic device 100 may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.

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

[0103] The power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, and supplies power to the processor 110, the internal memory 121, the display screen 194, the camera 193, and the wireless communication module 160. The power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle number, battery health status (leakage, impedance), etc. In some other embodiments, the power management module 141 can also be set in the processor 110. In other embodiments, the power management module 141 and the charging management module 140 can also be set in the same device.

[0104] The wireless communication function of the electronic device 100 can be implemented by antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modulation and demodulation processor and baseband processor. Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of the antenna. For example, antenna 1 can be reused as a diversity antenna of a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0105] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G / 6G applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

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

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

[0108] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication 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-SCDMA), long term evolution (LTE), 5G and subsequent evolution standards, BT, GNSS, WLAN, NFC, FM, and / or IR technology, etc. GNSS may include the global positioning system (GPS), the global navigation satellite system (GLONASS), the Beidou navigation satellite system (BDS), the quasi-zenith satellite system (QZSS) and / or the satellite based augmentation system (SBAS).

[0109] The electronic device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0110] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In some embodiments, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

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

[0112] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV or other format. In some embodiments, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0113] The digital signal processor is used to process digital signals, and can process not only digital image signals but also other digital signals. For example, when the electronic device 100 is selecting a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0114] Video codecs are used to compress or decompress digital videos. The electronic device 100 may support one or more video codecs. Thus, the electronic device 100 may play or record videos in a variety of coding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0115] NPU is a neural network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and can also continuously self-learn. Through NPU, applications such as intelligent cognition of electronic device 100 can be realized, such as image recognition, face recognition, voice recognition, text understanding, etc.

[0116] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function, such as storing files such as music and videos in the external memory card.

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

[0118] The electronic device 100 can implement audio functions such as music playing and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0119] The SIM card interface 195 is used to connect a SIM card. The SIM card can be connected to and separated from the electronic device 100 by inserting it into the SIM card interface 195 or pulling it out from the SIM card interface 195. The electronic device 100 can support 1 or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, and the like. Multiple cards can be inserted into the same SIM card interface 195 at the same time. The types of the multiple cards can be the same or different. The SIM card interface 195 can also be compatible with different types of SIM cards. The SIM card interface 195 can also be compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to implement functions such as calls and data communications. In some embodiments, the electronic device 100 uses an eSIM, i.e., an embedded SIM card. The eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.

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

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

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

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

[0124] like Figure 1B As shown, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and the like. The window manager is used to manage window programs. The window manager can obtain the size of the display screen, determine whether there is a status bar, lock the screen, capture the screen, and the like. The content provider is used to store and obtain data and make the data accessible to the application. The data may include video, images, audio, calls made and received, browsing history and bookmarks, phone books, and the like. The view system includes visual controls, such as controls for displaying text, controls for displaying images, and the like. The view system can be used to build applications. The display interface may be composed of one or more views. For example, a display interface including a text notification icon may include a view for displaying text and a view for displaying images. The phone manager is used to provide communication functions for the electronic device 100. For example, the management of call status (including connecting, hanging up, and the like). The resource manager provides various resources for the application, such as localized strings, icons, images, layout files, video files, and the like. The notification manager enables the application to display notification information in the status bar, which can be used to convey notification-type messages and can automatically disappear after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of an icon or scroll bar text, such as a notification of an application running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is displayed in the status bar, a prompt sound is emitted, an electronic device vibrates, an indicator light flashes, etc.

[0125] Continue to refer Figure 1B , the operating system runtime includes a core library and a virtual machine. The operating system runtime is responsible for the scheduling and management of the operating system. The core library consists of two parts, one is the function functions that the Java language needs to call, and the other is the core library of the operating system. The application layer and the application framework layer run in the 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 used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection. The system library can include multiple functional modules. For example, a surface manager, a media library, a three-dimensional graphics processing library (such as OpenGL ES), a 2D graphics engine (such as SGL), etc.

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

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

[0128] Figure 2 FIG. 2 is a block diagram of another electronic device 200 that can implement an embodiment of the present disclosure. Figure 2 As shown, 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, a memory 220, a 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 an actual or virtual processor and is capable of performing various processes according to a program stored in the memory 220. In a multi-processor system, multiple processing units execute computer executable instructions in parallel to improve the parallel processing capability of the electronic device 200.

[0129] The electronic device 200 typically includes a plurality 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, removable and non-removable media. The memory 220 may be a volatile memory (e.g., a register, a cache, a random access memory (RAM)), a non-volatile memory (e.g., a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), flash memory), or some combination thereof. The storage device 230 may be a removable or non-removable medium, and may include a machine-readable medium, such as a flash drive, a disk, or any other medium, which may be capable of being used to store information and / or data (e.g., training data for training) and may be accessed within the electronic device 200.

[0130] The electronic device 200 may further include additional removable / non-removable, volatile / non-volatile storage media. Figure 2 As shown in , a disk drive for reading or writing from a removable, non-volatile disk (e.g., a "floppy disk") and an optical drive for reading or writing from a removable, non-volatile optical disk may be provided. In these cases, each drive may be connected to a bus (not shown) by one or more data media interfaces. Memory 220 may include a computer program product 225 having one or more program modules that are configured to perform the object editing method or process of an embodiment of the present disclosure.

[0131] The communication unit 240 implements communication with other computing devices through a communication medium. Additionally, the functions of the components of the electronic device 200 can be implemented in a single computing cluster or multiple computing machines that can communicate through a communication connection. Therefore, the electronic device 200 can operate in a networked environment using a logical connection with one or more other servers, a network personal computer (PC), or another network node.

[0132] 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, a printer, etc. In an embodiment of the present disclosure, the output device 260 may include a touch screen with a touch sensor, which can receive a user's touch input. The electronic device 200 may also communicate with one or more external devices (not shown) through the communication unit 240 as needed, such as a storage device, a display device, etc., communicate with one or more devices that enable the user to interact with the electronic device 200, or communicate with any device (e.g., a network card, a modem, etc.) that enables the electronic device 200 to communicate with one or more other computing devices. Such communication can be performed via an input / output (I / O) interface (not shown).

[0133] It should be understood that the above Figure 1A The electronic device 100 and Figure 2 The electronic device 200 shown is merely two exemplary electronic devices capable of implementing one or more embodiments of the present disclosure, and should not constitute any limitation on the functionality and scope of the embodiments described herein.

[0134] Drag and drop linkage

[0135] At present, in order to display more and better information, the screens of electronic devices are getting bigger and bigger, the layout of the UI on the screen is getting more and more complicated, and the differences in the size and shape of UI elements are getting bigger and bigger. In this case, there are various irregular UI elements arranged in various irregular layouts in the UI. For example, there are various irregular controls, cards, pictures, covers and other UI elements in the negative first screen, control center, application market, gallery, etc. of smart phones.

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

[0137] Embodiments of the present disclosure relate to the linkage of animation effects of UI elements in a UI when dragged, also referred to as drag linkage. In drag linkage, the target UI element being dragged can affect other UI elements that are not dragged. Specifically, in drag linkage, the animation effect that triggers the target UI element can jointly trigger the animation effects of one or more other UI elements, or even other UI elements in the entire UI. For example, in drag linkage, when dragging a target UI element, in addition to the target UI element moving with an animation effect as it is dragged, other UI elements can also move with corresponding animation effects, thereby visually presenting a linked drag.

[0138] Thus, the connection between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be highlighted. Compared with traditional animations with a single animation effect and each UI element being independent and unconnected, the embodiments of the present disclosure can make the animation effect more in line with physical laws and take into account real usage scenarios and user usage habits, thereby significantly improving the user experience.

[0139] The following will refer to the attached FIG. 3A to FIG. 19B Some example embodiments of drag linkage are described.

[0140] Figures 3A-3C Schematic diagrams of example UIs 300A to 300C according to some embodiments of the present disclosure are shown. In some embodiments, UI elements may have irregular sizes and shapes. For example, Figure 3A As shown, UI 300A may include multiple UI elements, such as UI elements 1-13, wherein UI elements 1, 2, 4, and 5 have different sizes and shapes. Further, the UI may also have irregular parts. For example, Figure 3B As shown, the right side of UI elements 16 and 18 in UI 300B is empty, that is, there is no UI element. However, the embodiments of the present disclosure are also applicable to regular layouts, sizes and shapes. For example, Figure 3C As shown, UI 300C has a regular layout, and UI elements 25-40 in UI 300C all have the same size and shape. It should be understood that embodiments of the present disclosure are applicable to any suitable regular or irregular layouts, sizes, and shapes.

[0141] UI elements in the UI can be dragged. For example, when the user expects to move the UI element, the user can drag the UI element. As an example, when the user expects to change the position of the UI element in the UI, merge the UI element with another UI element, or put the UI element into a toolbar or a trash can, etc., the user can drag the UI element. In the case of detecting a drag at a UI element, the UI element can move with an animation effect to visually present the dragging action. As described above, in drag linkage, the dragged target UI element can affect other UI elements that are not dragged. Specifically, when dragging the target UI element, in addition to the target UI element moving with an animation effect as the drag is made, other UI elements can also move with corresponding animation effects, thereby visually presenting a linked drag.

[0142] Figure 4 FIG. 4 is a schematic diagram showing an example drag linkage 400 according to some embodiments of the present disclosure. Figure 4 As shown, when a drag is detected at UI element 3, UI element 3 may move with an animation effect to visually present the drag action. In addition to UI element 3 moving with an animation effect as the drag is made, other UI elements 2 and 4 may also move with corresponding animation effects to visually present a coordinated drag. For clarity, Figure 4 Only the coordinated movement of UI elements 2-3 is shown. It should be understood that the coordinated movement can occur at any at least two UI elements in any UI, for example, at any at least two UI elements in UIs 300A-300C.

[0143] Specifically, at time T01, a drag is detected at UI element 3, causing UI element 3 and other UI elements 2 and 4 to move. At time T02, the distance between UI element 3 and UI element 4 located in the drag direction becomes smaller. The distance can represent the distance between the corresponding reference points of the two UI elements. In some embodiments, the center point of the UI element can be determined as the reference point of the UI element. Alternatively, the distance can represent the distance between adjacent boundaries of the two UI elements. Figure 4 As shown, in some embodiments, UI element 3 can even cover at least a portion of UI element 4. The distance between UI element 3 and UI element 2 located in the opposite direction of the dragging direction becomes larger. This means that the speed of movement of UI element 3 is greater than the speed of UI elements 2 and 4. At time T03, the distance between UI element 3 and UI element 4 located in the dragging direction becomes larger, while the distance between UI element 3 and UI element 2 located in the opposite direction of the dragging direction becomes smaller. This means that the speed of movement of UI element 3 is less than the speed of UI elements 2 and 4. At time T04, UI element 3 and other elements 2 and 4 move to a predetermined distance and stop moving. In some embodiments, the predetermined distance can be determined based on a friction model. In the following, the method for determining the distance based on the friction model will be described in detail, so its description is omitted here.

[0144] An example of the coordinated movement of UI elements is described above, and the principle of the movement of UI elements will be described below.

[0145] The movement of UI elements can be controlled by the following factors: friction factor, linkage factor, hand-following factor, hand-following ratio factor, hand-releasing rebound factor, and / or inertial rebound factor. For example, the friction factor can control the UI element to stop moving. The linkage factor can control the animation effects of other UI elements. The hand-following factor can control the hand-following movement of UI elements, such as the hand-following movement of UI elements when the drag is not out of bounds. The hand-following ratio factor can control the ratio of the hand-following movement of UI elements, such as the ratio of the displacement of the UI element to the displacement of the hand when dragging after out of bounds. The hand-releasing rebound factor can control the reset of the UI element after releasing the hand, such as the reset of the UI element after releasing the hand after dragging out of bounds. The inertial rebound factor can control the rebound of the UI element after crossing the boundary. For example, when the UI element moves out of bounds, the friction factor may not be able to stop the UI element from moving. In this case, the inertial rebound factor can control the rebound of the UI element after crossing the boundary.

[0146] In the following, the friction model associated with the friction factor and the elastic force model associated with the linkage factor will be described in detail. In general, the friction model can be used to determine the distance that the UI element will move, thereby determining the source position and destination position of the movement of the UI element. In addition, based on the spring parameters (such as elastic coefficient, damping coefficient) of the dragged UI element, the spring parameters of other UI elements that move in linkage can be determined using the conduction method that will be described in detail below, so that during the movement of the dragged UI element and the linked UI element, each UI element is controlled to move in accordance with the elastic force model based on its own spring parameters.

[0147] The friction model can be used to determine the distance a UI element will move, for example, the distance a UI element will move after releasing the grip or sliding. This distance can be determined by the following equations (1) and (2):

[0148]

[0149] where f friction represents the friction force, which is configurable by the electronic device or the user; t represents the time of movement; V 0 represents the initial velocity, which is configurable by the electronic device or the user, or is obtained by detecting the dragging speed of the user; V(t) represents the final velocity, and since the movement of the UI element will eventually stop, V(t) is 0; e represents a natural constant; S(t) represents the distance that the UI element will move. It should be understood that the constants in the above equations are only examples and are configurable by the electronic device or the user.

[0150] As can be seen from the above equations, the time t of the movement can be determined by equation (1). Therefore, the distance S(t) can be further determined by equation (2). In this way, the distance that the UI element will move can be easily determined. In addition, since various parameters in the equation (e.g., friction, initial velocity, etc.) are configurable, the distance that the UI element will move can be affected by configuring these parameters, thereby improving the flexibility of the animation effect and the user experience.

[0151] The movement of UI elements that conform to the friction model will satisfy the velocity time curve and displacement time curve of the friction model. Figure 5A and 5B Schematic diagrams of an example velocity time curve 500A and an example displacement time curve 500B of a friction force model according to some embodiments of the present disclosure are respectively shown. Figure 5A and 5B As shown, when only friction force is applied, the moving speed of the UI element decreases to 0 over time, and the moving distance of the UI element increases over time until the movement stops.

[0152] In the above, it is described how the friction factor controls the UI element to stop moving. In addition, whether the position to which the UI element can be moved is restricted can also control where the UI element stops moving.

[0153] Specifically, in some embodiments, the position to which the UI element can be moved is unrestricted. In this case, the distance determined based on the friction model is the distance that the UI element will move. However, in some embodiments, the position to which the UI element can be moved is restricted. In other words, the UI element can only be moved to a predetermined position. In this case, although the distance that the UI element will move can be determined based on the friction model, if the UI element is not at the predetermined position after moving the distance, it is necessary to adjust the distance that the UI element will move so that the UI element can be moved to the predetermined position. For example, the UI element can be moved to a predetermined position that is closest to the stop position determined based on the friction model. Thus, the distance that the UI element will move can be determined based on both the friction model and the predetermined position.

[0154] Figure 6 A schematic diagram of an example 600 of limited and unrestricted mobile position according to some embodiments of the present disclosure is shown. Figure 6 As shown, when the position to which the UI element can be moved is restricted, the UI element can only be moved from the source position 620 on the screen 610 to a predetermined position 630. In contrast, when the position to which the UI element can be moved is not restricted, the UI element can be moved from the source position 620 on the screen 610 to an arbitrary position 640.

[0155] Further, in some embodiments, the range in which the UI element can move can also be limited. A UI element that moves beyond this range will be considered out of bounds. The range can be any appropriate range. For example, the range can be a range in which the distance from the screen border is less than a predetermined ratio or predetermined pixels of the screen size (such as 10% or 1000 pixels), or a range in which the distance from the source position of the UI element to the destination position is less than a predetermined ratio or predetermined pixels of the screen size (such as 50% or 10000 pixels). Thus, the distance that the UI element is to move can also be determined based on the range.

[0156] The friction force model is described in detail above, and the elastic force model will be further described below.

[0157] The curve of the displacement of the movement of the UI element over time can be an elastic force curve that conforms to the elastic force model. Since displacement and time can determine the speed, the speed of the movement of the UI element also follows the elastic force model. For this reason, it can be considered that the movement of the UI element can simulate the movement law of the spring. It should be understood that here, in order to describe the elastic force model, the curve of the displacement of the movement of the UI element over time is described as an elastic force curve. However, the curve of the displacement of the movement of the UI element over time can also be any appropriate predefined curve, such as a Bezier curve.

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

[0159] f=ma (3),

[0160]

[0161] Wherein f represents the force exerted on the spring during vibration (i.e., movement), which may be configurable by an electronic device or a user; a represents the acceleration of movement; t represents the time of movement; k represents the elastic coefficient of the spring; x represents the deformation of the spring; g represents the damping coefficient of the spring; and m represents the mass of the UI element, where the size of the UI element may be equated with the mass of the UI element.

[0162] The elastic coefficient is the amount of force required for a unit deformation of the spring. The larger the elastic coefficient k, the shorter the time it takes for the spring to return to the equilibrium position from the maximum amplitude, and vice versa. The elastic coefficient k is configurable by the electronic device or the user. In some embodiments, the elastic coefficient k can range from 1 to 999, and the recommended range of the elastic coefficient k can be 150 to 400.

[0163] The damping coefficient is a quantitative representation of the damping force (e.g., fluid resistance, friction, etc.) of the spring during vibration, which can gradually reduce the spring amplitude until it stops at a balanced position. The larger the damping coefficient, the easier it is for the spring to stop at a balanced position, 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 can be 1-99.

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

[0165] The elastic force model has three damping states, namely, critical damping state, underdamping state and overdamping state. Critical damping conforms to the following equation (5):

[0166] g 2 =4×m×k (5),

[0167] Where g represents the damping coefficient of the spring; m represents the size of the UI element; and k represents the elastic coefficient of the spring.

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

[0169] Under different damping states, the displacement time curves of UI elements are different. Figures 7A-7C Schematic diagrams of examples of curves 700A-700C showing spring deformation x versus time t in a critical damping state, an underdamped state, and an overdamped state according to some embodiments of the present disclosure are shown. Fig. 7A As shown in , under the critical damping state, the spring returns to the equilibrium position at the most stable speed in the shortest time and then stops moving and no longer oscillates. Figure 7B As shown in the figure, in the underdamped state, the spring slowly oscillates through multiple oscillations and gradually reduces the amplitude, and finally returns to the equilibrium position. Figure 7C As shown, in the over-damped state, the spring has almost no vibration, and the amplitude gradually decreases to reach the equilibrium position.

[0170] As described above, the curve of the displacement of the movement of the UI element over time can be an elastic force curve that conforms to the elastic force model. For this reason, it can be considered that the movement of the UI element can simulate the motion law of the spring, that is, the change law of the displacement of the UI element can simulate the change law of the spring deformation. By adjusting the damping coefficient and / or the elastic coefficient, the change law of the displacement of the UI element can be adjusted so that the UI element simulates the motion law of the spring in the critical damping state, over-damped or under-damped state.

[0171] Further, as described above, based on the spring parameters (such as elastic coefficient, damping coefficient) of the dragged UI element, the spring parameters of other UI elements that move in conjunction can be determined using the conduction method that will be described in detail below, so that during the movement of the dragged UI element and the linked UI element, each UI element is controlled to move in accordance with the elastic force model based on the respective spring parameters of each UI element. In this way, the dragged UI element and the linked UI element can simulate the movement law of springs with different spring parameters, thereby presenting an animation effect in which the interval between UI elements in the dragging direction first decreases and then recovers (similar to the spring first compressing and then recovering), while the interval between UI elements in the opposite direction of the dragging direction first increases and then recovers (similar to the spring first stretching and then recovering), thereby increasing dynamic feedback on the user's dragging action.

[0172] The animation effect of a certain linked moving UI element is determined based on the animation effect of the dragged UI element and the distance between the dragged UI element and the linked moving UI element. Since the animation effect of the linked moving UI element changes with the distance, it can also be considered that the animation effect of its movement is conducted with the distance. In some embodiments, the conduction can be nonlinear conduction. Alternatively, the conduction can also be linear conduction.

[0173] For example, in the case of nonlinear conduction, the animation effect of the moving UI elements can be determined by the following equation (6):

[0174] x n =x×(n+1) -0.18×g (6)

[0175] where x n represents the animation effect of the linked moving UI element; x represents the animation effect of the dragged UI element; n represents the distance between the dragged UI element and the linked moving UI element; g represents the conduction coefficient, when the conduction coefficient is 0, the animation effect of the linked moving UI element is the same as the animation effect of the dragged UI element; the constants in equation (6) are only examples and are configurable by the electronic device or the user.

[0176] In the case where the displacement curve of the UI element moving over time is an elastic force curve, the animation effect of the movement can be controlled by the damping coefficient and / or the elastic coefficient. Therefore, x can be determined based on at least one of the damping coefficient and the elastic coefficient.

[0177] For example, x may be the ratio of the elastic coefficient to the damping coefficient of the dragged UI element. In this case, the ratio of the elastic coefficient to the damping coefficient of the dragged UI element is transmitted to the linked moving UI element based on the distance n, thereby obtaining the ratio x of the elastic coefficient to the damping coefficient of the linked moving UI element. n . Thus, the animation effect of the dragged UI element can be transmitted to the linked moving UI elements based on the distance. The larger the ratio of the elastic coefficient to the damping coefficient, the weaker the correlation between the movements of the UI elements, the larger the spring characteristics and movement differences between the UI elements, which can be considered as the spring being "softer". Conversely, the smaller the ratio of the elastic coefficient to the damping coefficient, the stronger the correlation between the movements of the UI elements, the smaller the spring characteristics and movement differences between the UI elements, which can be considered as the spring being "harder".

[0178] It should be understood that x represents the ratio of the elastic coefficient of the dragged UI element to the damping coefficient is only an example. x can be any appropriate factor. As another example, x can be the elastic coefficient of the dragged UI element. As another example, x can also be the damping coefficient of the dragged UI element.

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

[0180] The above describes nonlinear conduction in detail. In the case of linear conduction, the animation effect of the movement of the linked moving UI elements can be determined by the following equation (7):

[0181] x n =xg×n (7),

[0182] where x n Represents the animation effect of the linked moving UI elements; x represents the animation effect of the dragged UI element; n represents the distance between the dragged UI element and the linked moving UI element; g represents the conduction coefficient. When the conduction coefficient is 0, the animation effect of the linked moving UI elements is the same as the animation effect of the dragged UI element.

[0183] Similar to nonlinear conduction, when the displacement curve 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 the damping coefficient and / or the elastic coefficient. Therefore, x can be determined based on at least one of the damping coefficient and the elastic coefficient. When the displacement curve of the movement of the UI element changes over time is a Bezier curve, the animation effect of the movement can be controlled by the coordinates of at least one of the at least one control point of the Bezier curve. Therefore, x can be determined based on the coordinates of at least one of the at least one control point.

[0184] In the above, the principle of drag linkage is described in detail. In the following, the process of controlling the linkage movement of UI elements by using the principle of drag linkage will be further described.

[0185] Figure 8 FIG. 8 is a flowchart of a method 800 for displaying a graphical interface according to an embodiment of the present disclosure. It should be understood that the method 800 may be implemented by the above reference. Figure 1A The electronic device 100 described or referenced Figure 2 The electronic device 200 described herein is implemented. Figure 3A Method 800 is described with reference to UI 300A of FIG. 300A. However, it should be understood that UI 300A is merely an example and method 800 may be applicable to any suitable interface, including but not limited to UIs 300B-300C.

[0186] In block 810, M user interface UI elements are displayed on the screen of the electronic device. M is a positive integer greater than 1. For example, see Fig. 9 , the M UI elements can be UI elements 1 to 13.

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

[0188] In block 830, in response to the dragging on the first UI element, each of the N UI elements on the screen is moved with a corresponding animation effect. N is a positive integer between 1 and M-1. Thus, the dragging is visually indicated in a coordinated manner.

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

[0190] In addition, in some embodiments, a UI element that intersects the impact area can be considered to be within the impact area. Alternatively, in the case where the impact area is a circle with a predetermined radius, if the distance between the UI element and the first UI element is less than the predetermined radius of the impact area, the UI element can be considered to be within the impact area.

[0191] Fig. 9 FIG. 1 is a schematic diagram showing an example of an influence area of ​​a UI element according to an embodiment of the present disclosure. Fig. 9 As shown, since UI elements 3, 4, 7, and 8 are within the influence area 910 of UI element 5, UI elements 3, 4, 7, and 8 will move in conjunction with UI element 5. In addition, since UI elements 1, 2, 6, and 9-13 are not within the influence area 910 of UI element 5, UI elements 1, 2, 6, and 9-13 will not move in conjunction with UI element 5.

[0192] Return to reference Figure 8 In order to make the N UI elements move with corresponding animation effects, the distance between the first UI element and each of the N UI elements may be determined. Hereinafter, how to determine the distance between the first UI element and the second UI element among the N UI elements will be described.

[0193] In some embodiments, the distance can be divided into multiple distance levels according to the range of the distance. For example, the operated UI element itself can be at distance level 0, and the linked UI elements can be at distance levels 1, 2, 3 according to their corresponding distances from the operated UI element... UI elements at the same distance level can be regarded as having the same distance. Thus, by using distance levels, the linkage of UI elements can be simplified, so that UI elements at the same distance level are linked in the same way, thereby improving the unity and coordination of the linkage. However, it should be understood that in the linkage, the distance itself can also be used, so that the UI elements are more accurately linked. In the following, distance levels are interchangeably referred to as distances.

[0194] Fig.10 1 is a schematic diagram showing an example 1000 of determining a distance according to an embodiment of the present disclosure. Fig.10 As shown, in some embodiments, a first reference point of a first UI element (eg, UI element 5) and a second reference point of a second UI element (eg, UI element 2) may be determined. Fig.10 , the reference point of each UI element is indicated by a "+". In some embodiments, the center point of the UI element can be determined as the reference point of the UI element. Alternatively, the reference point of the UI element can be configurable by the electronic device or the user, so that the position of the reference point can be any appropriate position, and the present disclosure is not limited thereto. Thus, the distance between the first reference point and the second reference point can be determined as the distance between the first UI element and the second UI element.

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

[0196]

[0197] Wherein n represents the distance, x0 represents the abscissa of the first reference point, y0 represents the ordinate of the first reference point, x1 represents the abscissa of the second reference point, and y1 represents the ordinate of the second reference point.

[0198] like Fig.10 As shown, the distances between UI element 5 and other UI elements determined in the above manner are as follows: the distance between UI element 5 and itself is 0, the distance between UI element 5 and UI elements 3, 7, and 8 is 1, the distance between UI element 2, 4, 6, and 9 is 2, and the distance between UI elements 1, 10-13 is 3.

[0199] Figures 11A-11C Schematic diagrams showing examples 1100A-1100C of determining distances according to embodiments of the present disclosure. Fig.11A As shown, in some embodiments, a first reference point of the first UI element can be determined. Multiple circles with respective radii can be determined with the first reference point as the center, such as circles 1110A-1130A. It should be understood that in addition to circles, any other suitable shapes with respective sizes can be determined with the first reference point as the center, such as rectangles, diamonds, etc., and the present disclosure is not limited thereto.

[0200] For example, Fig. 11B As shown, in some embodiments, a first reference point of the first UI element can be determined. A plurality of rectangles with respective sizes, such as rectangles 1110B-1120B, can be determined with the first reference point as the center. Fig. 11C As shown, in some embodiments, a first reference point of the first UI element may be determined. A plurality of rhombuses with respective sizes, such as rectangles 1110C-1140C, may be determined with the first reference point as the center.

[0201] In some embodiments, the radii of the multiple circles may increase in a predetermined size or ratio. Alternatively, the radii of the multiple circles may be configurable by an electronic device or a user, and the present disclosure is not limited thereto.

[0202] Thus, a circle intersecting with the second UI element can be determined from a plurality of circles. Thus, the radius of the intersecting circle can be determined as the distance. In some embodiments, if there are more than one circle intersecting with the second UI element, a target circle intersecting with the second UI element and having the smallest radius can be determined from these circles. Further, in some embodiments, if no circle intersects with the second UI element, the circle closest to the second UI element can be used as the target circle, thereby, the radius of the target circle can be determined as the distance.

[0203] like Fig.11A As shown, the distances between UI element 5 and other UI elements determined in the above manner are as follows: the distance between UI element 5 and itself is 0. Since the circle with the smallest radius intersecting UI elements 3, 4, 7, and 8 is circle 1110A, the distance between UI elements 3, 4, 7, and 8 and UI element 5 is 1. Since circle 1120A intersects UI elements 2, 6, and 9, the distance between UI elements 2, 6, and 9 and UI element 5 is 2. In addition, since circle 1130A intersects UI elements 1 and 10-13, the distance between UI elements 1 and 10-13 is 3.

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

[0205] Thus, the distance can be determined based on the horizontal spacing and / or the vertical spacing. For example, there are two vertical spacings between UI element 5 and UI element 13. Therefore, the distance between UI element 5 and UI element 13 can be the sum of the lengths of these two vertical spacings. As another example, there is a horizontal spacing between UI element 12 and UI element 13. Therefore, the distance between UI element 12 and UI element 13 can be the length of the horizontal spacing.

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

[0207] Fig.13 1300 is a schematic diagram showing an example of determining a distance according to an embodiment of the present disclosure. Fig.12 Only the intermediate spacing (e.g., horizontal spacing, vertical spacing) between UI elements is considered in the horizontal spacing and vertical spacing, and the size of the intermediate UI elements between UI elements can also be considered in the horizontal spacing and vertical spacing. Fig.13 As shown, the horizontal spacing may represent the sum of the length of one or more horizontal intervals between the first UI element and the second UI element and the width of one or more intermediate UI elements. The vertical spacing may represent the sum of the length of one or more vertical intervals between the first UI element and the second UI element and the height of one or more intermediate UI elements.

[0208] Thus, the distance can be determined based on the horizontal spacing and / or the vertical spacing. For example, there are two vertical intervals and one middle UI element 9 between UI element 5 and UI element 13. Therefore, the distance between UI element 5 and UI element 13 can be the sum of the length of the two vertical intervals and the height of UI element 9. As another example, there is a horizontal interval and one middle UI element 12 between UI element 11 and UI element 13. Therefore, the distance between UI element 11 and UI element 13 can be the sum of the length of the horizontal interval and the width of UI element 12. In addition, there is a 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 middle 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 middle UI elements 5 and 7. There is a 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.

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

[0210] Fig.14A and 14B Schematic diagrams of examples 1400A and 1400B of determining the distance according to an embodiment of the present disclosure are shown. In some embodiments, in addition to considering the length of the horizontal spacing and the vertical spacing and the width and height of the middle UI element, the operation direction can also be taken into account in the horizontal spacing and the vertical spacing. For example, in the case of dragging the first UI element, the operation direction can be the direction of dragging the first UI element. In addition, although the drag linkage scene is described here, as will be described below, there are also deep linkage scenes and pressure linkage scenes. In the deep linkage scene and the pressure linkage scene, the distance determination method considering the operation direction can also be used. Specifically, in the deep linkage scene and the pressure linkage scene, the UI element can be pressed. In the case of pressing the first UI element, although there is no operation direction, the direction from the second UI element to the first UI element (such as the direction from the second reference point to the first reference point) can be regarded as the operation direction, so that the operation direction is taken into account in the horizontal spacing and the vertical spacing.

[0211] In this case, you can first use the reference Fig.12 and 13 The horizontal spacing and / or the vertical spacing can be determined by the distance determination method described above. Then, the angle between the operation direction and the horizontal direction and / or the vertical direction can be determined. Thus, the distance in the operation direction can be determined by using the principle of trigonometric function.

[0212] In certain embodiments, such as Fig.14A As shown, since the horizontal spacing, the vertical spacing, and the angle between the operation direction 1410A and the horizontal direction or the vertical direction are known, the distance in the operation direction 1410A can be determined by using the principle of trigonometric function.

[0213] Alternatively, the distance in the operating direction may be determined by selecting the horizontal direction or the vertical direction closer to the operating direction as the reference direction according to the angle between the operating direction and the horizontal direction and the vertical direction. Fig. 14B As shown, since the operation direction 1430B is closer to the vertical direction, the vertical direction can be selected as the reference direction, and based on the longitudinal spacing and the angle between the operation direction 1430B and the vertical direction, the distance on the operation direction 1430B is determined using the trigonometric principle. As another example, since the operation direction 1420B is closer to the horizontal direction, the horizontal direction can be selected based on the lateral spacing and the angle between the operation direction 1420B and the horizontal direction, and the distance on the operation direction 1420B is determined using the trigonometric principle. In addition, the reference direction can be configurable by the electronic device or the user, and the present disclosure is not limited thereto. For example, the reference direction can be set to the horizontal direction, the vertical direction, or any other appropriate direction.

[0214] The above uses the horizontal spacing and the vertical spacing to determine the distance in the operation direction. However, as mentioned above, the horizontal spacing and the vertical spacing can be determined by the size of the intermediate spacing and the intermediate UI element. Therefore, the distance in the operation direction can also be determined in sections for each intermediate spacing and the intermediate UI element. Specifically, for each intermediate spacing and the intermediate UI element, the size of the intermediate spacing or the intermediate UI element, and the angle between the operation direction and the horizontal direction or the vertical direction can be determined. Thus, the principle of trigonometric function can be used to determine the distance in the operation direction. Then, the distance in the operation direction determined for each intermediate spacing and the intermediate UI element can be summed to determine the total distance in the operation direction.

[0215] Return to reference Figure 8 After determining the distance between the first UI element and the second UI element, an animation effect for moving the second UI element can be determined based on the distance. To this end, in some embodiments, a first animation effect of the first UI element moving in response to dragging can be determined. As described above, in some embodiments, the first animation effect of the first UI element moving can be controlled by a predefined curve of displacement changing over time. For example, the predefined curve can be a Bezier curve or an elastic force curve.

[0216] Thus, the animation effect of the second UI element moving in response to dragging can 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 of displacement variation over time, the curve of displacement variation over time of the second UI element can be determined based on the predefined curve of displacement variation over time of the first UI element. For example, in the case of an elastic force curve, the damping coefficient and / or elastic coefficient of the spring can be conducted based on the distance. In the case of a Bezier curve, the coordinates of at least one of at least one control point of the Bezier curve can be conducted based on the distance. How to conduct the animation effect of the first UI element to the second UI element, so as to obtain the animation effect of the second UI element, can be achieved using the conduction method described in detail above. Therefore, its description is omitted here.

[0217] In this way, since the animation effect of moving the second UI element is determined by the animation effect of moving the first UI element and the distance between the second UI element and the first UI element, a drag linkage that is intuitive, natural and in line with user usage habits can be achieved.

[0218] In addition, in some embodiments, the size of the second UI element may also affect the animation effect of its movement. 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, the larger the size of the second UI element, the less it may be affected by the linkage, so the animation effect of the movement of the second UI element may be inversely proportional to its size. To this end, in some embodiments, the animation effect of moving the second UI element can 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 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, the larger the size of the first UI element, the greater the linkage effect it may produce, so the animation effect of the movement of the second UI element may be proportional to the size of the first UI element. To this end, in some embodiments, the animation effect of moving the second UI element can be determined based on the first amplitude, distance, and size of the first UI element.

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

[0221] Return to reference Figure 8 After determining the animation effect for moving the second UI element, the second UI element can be moved with the animation effect to visually indicate that the second UI element moves with the first UI element. For N UI elements, each can be moved with its own animation effect to visually indicate dragging on the entire screen or a portion of the screen, thereby presenting drag linkage.

[0222] In some embodiments, the moving direction of the UI element of the linkage movement can be associated with the dragging direction, thereby visually indicating the dragging action. To this end, in some embodiments, the direction of the dragging can be determined, and the second UI element can be associated with the determined direction and moved with an animation effect.

[0223] In addition, in some embodiments, in order to better present the conduction of the animation effect and improve the user experience, the first UI element and the second UI element do not start moving at the same time. For example, the first UI element may start moving when the drag occurs, and the second UI element may start moving after the drag occurs for a period of time. To this end, in some embodiments, a delay time can be determined based on the distance between the first UI element and the second UI element, and the second UI element is moved in response to the delay time after the drag occurs. Further, in some embodiments, a delay coefficient can be determined, and the delay time can be determined based on the distance and the delay coefficient. For example, the delay time can be the quotient of the distance divided by the delay coefficient. The delay coefficient can be configurable by the electronic device and the user.

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

[0225] In this way, the connection between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be highlighted. Compared with traditional animations with a single animation effect and each UI element is independent and unconnected, the embodiments of the present disclosure can make the animation effect more consistent with the laws of physics and take into account real usage scenarios and user usage habits, thereby significantly improving the user experience.

[0226] In the above, the process of realizing drag linkage is described in detail, and the drag linkage in different scenarios will be further described below. These scenarios include: scenarios in which UI elements move completely with the hand, scenarios in which UI elements do not move completely with the hand, scenarios in which UI elements continue to move after letting go or throwing, and scenarios in which UI elements continue to move and rebound after letting go or throwing. It should be understood that these scenes can be combined with each other to synthesize richer animation effects. For example, a UI element may not move completely with the hand, and continue to move after letting go or throwing. As another example, a UI element may not move completely with the hand, and continue to move and rebound after letting go or throwing. In the following, it will be described as an example of UI element 5 being dragged and UI elements 2-4 and 6-9 moving in linkage.

[0227] Fig.16A A schematic diagram showing an example of a scene 1600A in which a UI element completely follows the movement of a hand according to an embodiment of the present disclosure. Fig. 16B A schematic diagram showing an example of a displacement-time curve 1600B of a scene in which a UI element completely follows the movement of a hand according to an embodiment of the present disclosure.

[0228] like Fig.16A and 16B As shown, at T11, UI element 5 is dragged. At T11a, UI element 5 begins to move following the drag of the finger. In some embodiments, if UI element 5 begins to move when the drag occurs, T11a may be equal to T11. Alternatively, if UI element 5 begins to move after the drag occurs, T11a may be greater than T11. In addition, in addition to the dragged UI element 5, other UI elements (e.g., UI elements 2-4 and 6-9) also move in tandem. It should be understood that for clarity, other UI elements are shown as beginning to move at the same time as UI element 5. However, as described above, other UI elements may begin to move after their respective delay times.

[0229] At T12, the user lets go or throws, in which case the dragging of UI element 5 ends. At T12a, UI element 5 stops moving. In some embodiments, if UI element 5 stops moving when it is let go or thrown, T12a may be equal to T12. Alternatively, if UI element 5 stops moving after letting go or throwing, T12a may be greater than T12. At this point, the displacement of UI element 5 in the dragging direction is S10. The displacement of UI elements 3, 4, 7, and 8 with a distance of 1 in the dragging direction is S11. The displacement of UI elements 2, 6, and 9 with a distance of 2 in the dragging direction is S12. Displacement S10 is greater than displacement S11, and displacement S11 is greater than displacement S12. At this point, UI element 5 stops moving, while UI elements 3, 4, 7, and 8 with a distance of 1 and UI elements 2, 6, and 9 with a distance of 2 continue to move with an animation effect controlled by a predefined curve (e.g., an elastic force curve).

[0230] At T13, the distance between UI element 5 and UI elements 3, 4, 7, 8 with a distance of 1 in the dragging direction is reduced. In addition, the distance between UI elements 3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the dragging direction is reduced. In addition, the distance between UI elements 3, 4, 7, 8 with a distance of 1 and UI elements 2, 6 with a distance of 2 in the opposite direction of the dragging direction in the dragging direction is increased.

[0231] At T14, the displacement of UI element 5 in the dragging direction remains at S10. UI elements 3, 4, 7, 8 with a distance of 1 move a displacement of S10 in the dragging direction and stop moving. The displacement of UI elements 2, 6, 9 with a distance of 2 in the dragging direction has not yet reached S10, and continue to move with an animation effect controlled by a predefined curve. Compared with T13, the spacing in the dragging direction between UI elements 3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the dragging direction increases. In addition, the spacing in the dragging direction between UI elements 3, 4, 7, 8 with a distance of 1 and UI elements 2, 6 with a distance of 2 in the opposite direction of the dragging direction decreases.

[0232] At T15, the displacement of UI element 5 and UI elements 3, 4, 7, and 8 with a distance of 1 in the dragging direction is maintained at S10. UI elements 2, 6, and 9 with a distance of 2 move in the dragging direction by a displacement of S10 and stop moving. Thus, the drag linkage is completed.

[0233] Fig.17A A schematic diagram showing an example of a scene 1700A in which a UI element does not completely follow the movement of a hand according to an embodiment of the present disclosure. Fig. 17B A schematic diagram showing an example of a displacement-time curve 1700B of a scenario in which a UI element does not completely follow the movement of a hand according to an embodiment of the present disclosure.

[0234] like Fig.17A and 17B As shown, at T21, UI element 5 is dragged. At T21a, UI element 5 begins to move following the drag of the finger. In some embodiments, if UI element 5 begins to move when the drag occurs, T21a may be equal to T21. Alternatively, if UI element 5 begins to move after the drag occurs, T21a may be greater than T21. In addition, in addition to the dragged UI element 5, other UI elements (e.g., UI elements 2-4 and 6-9) also move in tandem. It should be understood that for clarity, other UI elements are shown as beginning to move at the same time as UI element 5. However, as described above, other UI elements may begin to move after their respective delay times.

[0235] At T22, the user lets go or throws, in which case the dragging of UI element 5 ends. At T22a, UI element 5 stops moving. In some embodiments, if UI element 5 stops moving when it is let go or thrown, T22a may be equal to T22. Alternatively, if UI element 5 stops moving after letting go or throwing, T22a may be greater than T22. At this time, the displacement of the finger in the dragging direction is SF2. The displacement of UI element 5 in the dragging direction is S20. The displacement of UI elements 3, 4, 7, and 8 with a distance of 1 in the dragging direction is S21. The displacement of UI elements 2, 6, and 9 with a distance of 2 in the dragging direction is S22. Displacement SF2 is greater than displacement S20, displacement S20 is greater than displacement S21, and displacement S21 is greater than displacement S22. At this time, UI element 5 stops moving, while UI elements 3, 4, 7, 8 with a distance of 1 and UI elements 2, 6, 9 with a distance of 2 continue to move with an animation effect controlled by a predefined curve (e.g., an elastic force curve). Compared with T21, the spacing between UI element 5 and UI elements 3, 4, 7, 8 with a distance of 1 in the dragging direction increases. The spacing between UI elements 3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the dragging direction decreases. In addition, the spacing between UI elements 3, 4, 7, 8 with a distance of 1 and UI elements 2, 6 with a distance of 2 in the opposite direction of the dragging direction in the dragging direction increases.

[0236] At T23, the distance between UI element 5 and UI elements 3, 4, 7, 8 with a distance of 1 in the dragging direction is reduced. In addition, the distance between UI elements 3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the dragging direction is reduced. In addition, the distance between UI elements 3, 4, 7, 8 with a distance of 1 and UI elements 2, 6 with a distance of 2 in the opposite direction of the dragging direction in the dragging direction is increased.

[0237] At T24, the displacement of UI element 5 in the dragging direction remains at S20. UI elements 3, 4, 7, 8 with a distance of 1 move a displacement of S20 in the dragging direction and stop moving. The displacement of UI elements 2, 6, 9 with a distance of 2 in the dragging direction has not yet reached S20, and continue to move with an animation effect controlled by a predefined curve. Compared with T23, the spacing in the dragging direction between UI elements 3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the dragging direction increases. In addition, the spacing in the dragging direction between UI elements 3, 4, 7, 8 with a distance of 1 and UI elements 2, 6 with a distance of 2 in the opposite direction of the dragging direction decreases.

[0238] At T25, the displacement of UI element 5 and UI elements 3, 4, 7, and 8 with a distance of 1 in the dragging direction is maintained at S20. UI elements 2, 6, and 9 with a distance of 2 move in the dragging direction by a displacement of S20 and stop moving. Thus, the drag linkage is completed.

[0239] In reference Figures 16A-17B In the described scenario, after the dragging stops, the UI element 5 stops moving. However, the UI element 5 can also continue to move a distance after the dragging stops. In some embodiments, the distance can be determined based on the friction model as described above. Whether the UI element 5 continues to move after the dragging stops is configurable by the electronic device and the user. For example, if the electronic device is configured to allow continued movement after letting go or throwing and sliding, the UI element 5 can continue to move. Otherwise, the UI element 5 will stop moving as the dragging stops.

[0240] Fig.18A A schematic diagram showing an example of a scene 1800A in which a UI element completely follows the movement of a hand according to an embodiment of the present disclosure. Fig.18B A schematic diagram showing an example of a displacement-time curve 1800B of a scene in which a UI element completely follows the movement of a hand according to an embodiment of the present disclosure.

[0241] like Fig.18A and 18B As shown, at T31, UI element 5 is dragged. At T11a, UI element 5 begins to move following the drag of the finger. In some embodiments, if UI element 5 begins to move when the drag occurs, T31a may be equal to T31. Alternatively, if UI element 5 begins to move after the drag occurs, T31a may be greater than T31. In addition, in addition to the dragged UI element 5, other UI elements (e.g., UI elements 2-4 and 6-9) also move in tandem. It should be understood that for clarity, other UI elements are shown as beginning to move at the same time as UI element 5. However, as described above, other UI elements may begin to move after their respective delay times.

[0242] At T32, the user lets go or throws, in which case, the dragging 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 dragging ends, T32a may be equal to T32. Alternatively, if UI element 5 moves with an animation effect controlled by a predefined curve after dragging ends, T32a may be greater than T32. At this point, the displacement of UI element 5 in the dragging direction is SF3. The displacement of UI elements 3, 4, 7, and 8 with a distance of 1 in the dragging direction is S31. The displacement of UI elements 2, 6, and 9 with a distance of 2 in the dragging direction is S32. Displacement SF3 is greater than displacement S31, and displacement S31 is greater than displacement S32. In addition, UI elements 3, 4, 7, and 8 with a distance of 1 and UI elements 2, 6, and 9 with a distance of 2 also continue to move with the animation effect of a predefined curve. Compared with T31, the spacing between UI element 5 and UI elements 3, 4, 7, 8 with a distance of 1 in the dragging direction increases. The spacing between UI elements 3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the dragging direction decreases. In addition, the spacing between UI elements 3, 4, 7, 8 with a distance of 1 and UI elements 2, 6 with a distance of 2 in the opposite direction of the dragging direction in the dragging direction increases.

[0243] At T33, the distance between UI element 5 and UI elements 3, 4, 7, 8 with a distance of 1 in the dragging direction increases. The distance between UI elements 3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the dragging direction decreases. In addition, the distance between UI elements 3, 4, 7, 8 with a distance of 1 and UI elements 2, 6 with a distance of 2 in the opposite direction of the dragging direction increases in the dragging direction.

[0244] At T34, all UI elements continue to move with the animation effect controlled by the predefined curve. Compared with T33, the spacing between UI element 5 and UI elements 3, 4, 7, and 8 with a distance of 1 in the dragging direction is reduced. The spacing between UI elements 3, 4, 7, and 8 with a distance of 1 and UI element 9 with a distance of 2 in the dragging direction is increased. In addition, the spacing between UI elements 3, 4, 7, and 8 with a distance of 1 and UI elements 2 and 6 with a distance of 2 in the opposite direction of the dragging direction in the dragging direction is reduced.

[0245] At T35, all UI elements move a displacement S30 in the dragging direction and stop moving. The distance in the dragging direction between the displacement S30 at the position where the movement stops and the displacement SF3 at the position where the hand is released or thrown can be determined based on the friction model as described above. Thus, the drag linkage is completed.

[0246] Further, in some embodiments, if the UI element continues to move after the dragging stops, the UI element may rebound a certain distance. As described above, in the underdamped state, the displacement of the spring oscillates between positive and negative values ​​over time. Therefore, the elastic force curve in the underdamped state can be used to control the rebound of the UI element.

[0247] It should be understood that Figures 18A-18B In the figure, UI elements are shown as being allowed to overlap each other, for example, at time T32-T34, UI element 8 overlaps UI element 9. 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 of the underdamped state. When overlap is not allowed, the movement of the UI element follows the elastic force curve of the overdamped state. Further, whether any two UI elements overlap may also 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 generally do not overlap. And when the relative movement amplitude of the two UI elements is large, the UI elements may overlap.

[0248] Fig.19A A schematic diagram showing an example of a scene 1900A in which a UI element completely follows the movement of a hand according to an embodiment of the present disclosure. Fig.19B A schematic diagram showing an example of a displacement-time curve 1900B of a scene in which a UI element moves completely with a hand according to an embodiment of the present disclosure.

[0249] like Fig.19A and 19B As shown, at T41, UI element 5 is dragged. At T41a, UI element 5 begins to move following the drag of the finger. In some embodiments, if UI element 5 begins to move when the drag occurs, T41a may be equal to T41. Alternatively, if UI element 5 begins to move after the drag occurs, T41a may be greater than T41. In addition, in addition to the dragged UI element 5, other UI elements (e.g., UI elements 2-4 and 6-9) also move in tandem. It should be understood that for clarity, other UI elements are shown as beginning to move at the same time as UI element 5. However, as described above, other UI elements may begin to move after their respective delay times.

[0250] At T42, the user lets go or throws, in which case, the dragging 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 dragging ends, T42a may be equal to T42. Alternatively, if UI element 5 moves with an animation effect controlled by a predefined curve after dragging ends, T42a may be greater than T42. At this point, the displacement of UI element 5 in the dragging direction is SF4. The displacement of UI elements 3, 4, 7, and 8 with a distance of 1 in the dragging direction is S41. The displacement of UI elements 2, 6, and 9 with a distance of 2 in the dragging direction is S42. Displacement SF4 is greater than displacement S41, and displacement S41 is greater than displacement S42. In addition, UI elements 3, 4, 7, and 8 with a distance of 1 and UI elements 2, 6, and 9 with a distance of 2 also continue to move with the animation effect of a predefined curve. Compared with T41, the spacing between UI element 5 and UI elements 3, 4, 7, 8 with a distance of 1 in the dragging direction increases. The spacing between UI elements 3, 4, 7, 8 with a distance of 1 and UI element 9 with a distance of 2 in the dragging direction decreases. In addition, the spacing between UI elements 3, 4, 7, 8 with a distance of 1 and UI elements 2, 6 with a distance of 2 in the opposite direction of the dragging direction in the dragging direction increases.

[0251] At T43, UI element 5 moves displacement S40 in the dragging direction and starts rebounding. In some embodiments, the distance between displacement S40 in the dragging direction at the rebound position and displacement SF4 in the dragging direction at the release or throw position can be determined based on the friction model as described above.

[0252] At T44 , the UI element 9 with a distance of 2 moves a displacement of S40 in the dragging direction and also starts to rebound.

[0253] At T45, all UI elements rebound in the dragging direction by a displacement of SF4 and stop moving, thereby completing the drag linkage.

[0254] It should be understood that although UI element 5 is shown as rebounding before UI elements 3, 4, 7, and 8 with a distance of 1, and UI elements 3, 4, 7, and 8 with a distance of 1 are shown as rebounding before UI elements 2, 6, and 9 with a distance of 2, all UI elements can rebound together. For example, UI element 5 can stop moving to wait for other UI elements to move displacement S40, and then start rebounding together. In addition, although all UI elements are shown as rebounding to a release or throw position, all UI elements can rebound more or less, and the embodiments of the present disclosure are not limited thereto.

[0255] Deep linkage

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

[0257] Thus, the connection between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be highlighted. Compared with traditional animations with a single animation effect and each UI element being independent and unconnected, the embodiments of the present disclosure can make the animation effect more in line with physical laws and take into account real usage scenarios and user usage habits, thereby significantly improving the user experience.

[0258] The following will refer to the attached Fig. 20 Figures 33 to 33 describe some example embodiments of deep linkage.

[0259] Deep linkage can occur in a UI having any suitable regular or irregular layout, and the UI elements in the UI can have any suitable size and shape. For example, deep linkage can occur in a UI such as Figures 3A-3C In the UI300A-300C shown.

[0260] A UI element in a UI can be pressed. For example, when a user desires to perform an operation associated with a UI element, the user can press the UI element. As an example, when a user desires to enter an application represented by a UI element, open a menu associated with a UI element, etc., the user can press the UI element. When a press at a UI element is detected, the UI element can change, for example, the UI element can be scaled to present a press action in the depth direction. For example, the UI element can be reduced to appear farther away in the depth direction. Alternatively, the UI element can be enlarged to appear closer in the depth direction. In the following, scaling will be described using scaling down a UI element as an example. However, it should be understood that scaling can also be enlarging a UI element.

[0261] Fig. 20 2000 is a schematic diagram showing an example of a UI element changing when pressed according to some embodiments of the present disclosure. Fig. 20 As shown, when a press at a UI element is detected, the UI element can be scaled down to appear farther away in the depth direction.

[0262] The change of UI elements can conform to the surface pressure model. In the surface pressure model, the pressure at each part of the UI element (e.g., each pixel or each part divided in any other appropriate way) is the same. That is, no matter which part of the UI element is pressed (e.g., whether pressing in the center of the UI element or pressing on the edge of the UI element), the pressure is the same for all parts of the UI element. Therefore, no matter which part of the UI element is pressed, the change of the UI element will be the same.

[0263] Fig.21 21 is a schematic diagram showing an example of changes 2100 of a UI element when pressed at different positions according to some embodiments of the present disclosure. Fig.21 As shown, regardless of whether a press is detected at the center of the UI element or at the edge of the UI element, the UI element can be scaled down by the same amount to appear farther away in the depth direction.

[0264] In addition, if Fig.21 As shown, after the UI element is reduced, the pressed position may no longer be within the range of the reduced UI element. In this case, since the pressed position is still within the range of the UI element before reduction, or any other appropriate range, the press can continue to be detected as a press on the UI element. Alternatively, since the pressed position is no longer within the range of the reduced UI element, the press will not be detected as a press on the UI element. In this case, the press can be considered to be over.

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

[0266] Fig. 22 FIG. 2 is a schematic diagram showing an example of a change 2200 of a UI element at different pressing forces according to some embodiments of the present disclosure. Fig. 22 As shown, when the pressing force is large, the UI element can be shrunk by a larger margin to present a greater degree of distance in the depth direction. In some embodiments, the UI element can even be shrunk to disappear from the UI, that is, shrunk to a size of 0, so as to present the maximum degree of distance in the depth direction. In contrast, when the pressing force is small, the UI element can be shrunk by a smaller margin to present a smaller degree of distance in the depth direction.

[0267] However, the embodiments of the present disclosure are not limited thereto. The scaling of the UI element in response to different pressing forces is configurable by the electronic device or the user. For example, when the pressing force is large, the UI element can be reduced by a smaller amount, and when the pressing force is small, the UI element can be reduced by a larger amount.

[0268] Furthermore, in an electronic device, performing a change in the depth direction based entirely on the actual force of pressing may require a high level of user requirements and may require the electronic device to be equipped with relevant hardware. Therefore, in some embodiments, the pressing time may be used to simulate or replace the pressing force. For example, if the pressing time is longer, it can be considered that the pressing force is greater, and thus the change in the depth direction is greater.

[0269] Fig.23 FIG. 2 is a schematic diagram showing an example of a change 2300 of a UI element at different press durations according to some embodiments of the present disclosure. Fig.23 As shown, when the duration of the pressing is long, the UI element can be shrunk by a larger margin to present a greater degree of distance in the depth direction. In some embodiments, the UI element can even be shrunk to disappear from the UI, that is, shrunk to a size of 0, thereby presenting the maximum degree of distance in the depth direction. In contrast, when the duration of the pressing is short, the UI element can be shrunk by a smaller margin to present a smaller degree of distance in the depth direction.

[0270] However, the embodiments of the present disclosure are not limited thereto. The scaling of the UI element in response to different pressing durations is configurable by the electronic device or the user. For example, when the pressing duration is long, the UI element may be reduced by a smaller amount, and when the pressing duration is short, the UI element may be reduced by a larger amount.

[0271] In addition, in some embodiments, in order to further make the change of UI elements conform to natural laws and user usage habits, the magnitude of the change may depend on the size of the UI element. For example, intuitively, the same press may be difficult to press a larger UI element, while a smaller UI element may be pressed more easily. In this case, a larger UI element may be less affected by the press, while a smaller UI element may be more affected by the press.

[0272] Fig.24 FIG. 24 is a schematic diagram showing an example of a change 2400 of a UI element at different sizes according to some embodiments of the present disclosure. Fig.24 As shown, when the size of the UI element is large, the UI element can be reduced by a larger margin to present a greater degree of distance in the depth direction. In contrast, when the size of the UI element is small, the UI element can be reduced by a smaller margin to present a smaller degree of distance in the depth direction.

[0273] However, the embodiments of the present disclosure are not limited thereto. The scaling of UI elements at different sizes is configurable by the electronic device or the user. For example, in order to make the size of the scaled UI elements more balanced, larger UI elements may be more affected by pressing, while smaller UI elements may be less affected by pressing. To this end, when the size of the UI element is large, the UI element may be reduced by a smaller amount, and when the size of the UI element is small, the UI element may be reduced by a larger scaling amount to present a smaller degree of distance in the depth direction.

[0274] In addition, in some embodiments, in order to improve the user experience, the amplitude that the UI element can be scaled can be limited so that the UI element can only be scaled within the allowed amplitude range. For example, the amplitude range can be any appropriate range, such as 10%-90% of the size of the UI element, 100 pixels-10,000 pixels, or 2%-50% of the screen ratio. As an example, assume that the amplitude range is 10%-90% of the size of the UI element. In this case, no matter how much pressure is pressed or how long the pressing lasts, the pressed UI element can only be reduced to 10% of its original size at most, and it is impossible to disappear from the screen.

[0275] In the above, the scaling of the pressed UI element is described in detail. As mentioned above, in deep linkage, the pressed target UI element can affect other UI elements that are not pressed. Specifically, in deep linkage, triggering the animation effect of the target UI element can jointly trigger the animation effects of one or more other UI elements, or even other UI elements in the entire UI, so that other UI elements are affected by the target UI element. For example, in deep linkage, when the target UI element is pressed during a duration, in addition to the scaling of the target UI element over time, other UI elements can also be scaled by a corresponding amplitude, thereby visually presenting a linked scaling. Therefore, in the following, reference will be made to Fig.25 Figure 33 describes the depth linkage in detail.

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

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

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

[0279] In block 2530, in response to detecting a press at the first UI element that is maintained for a duration, each of the N UI elements on the screen is scaled. N is a positive integer between 1 and M-1. Thus, the press is visually indicated in tandem.

[0280] Fig.26 FIG. 2 is a schematic diagram showing an example of deep linkage 2600 of N UI elements according to an embodiment of the present disclosure. Fig.26 As shown, UI element 5 is pressed during a duration, so that UI element 5 scales over time to present a pressing effect in the depth direction. In addition, other UI elements on the screen (e.g., UI elements 1 to 4, and 6 to 13) are also scaled with different amplitudes over time in response to the pressing to present a pressing effect in the depth direction. Thus, the pressing is visually presented in a coordinated manner. For clarity, Fig.26 Only the deep linkage of UI elements 1-13 in UI 300A is shown. It should be understood that deep linkage can occur at any at least two UI elements in any UI, for example, at any at least two UI elements in UIs 300A-300C.

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

[0282] In addition, in some embodiments, a UI element that intersects the impact area can be considered to be within the impact area. Alternatively, in the case where the impact area is a circle with a predetermined radius, if the distance between the UI element and the first UI element is less than the predetermined radius of the impact area, the UI element can be considered to be within the impact area.

[0283] Fig. 27 FIG. 2 is a schematic diagram showing an example of an influence area 2700 of a UI element according to an embodiment of the present disclosure. Fig. 27 As shown, since UI elements 3, 4, 7, and 8 are within the influence area 2710 of UI element 5, UI elements 3, 4, 7, and 8 will be scaled in conjunction with UI element 5. In addition, since UI elements 1, 2, 6, and 9-13 are not within the influence area 2710 of UI element 5, UI elements 1, 6, and 9-13 will not be scaled in conjunction with UI element 5.

[0284] Return to reference Fig.25 , in order to make N UI elements scale with corresponding amplitudes, the distance between the first UI element and each of the N UI elements can be determined. As described above, in some embodiments, the distance can be divided into multiple distance levels according to the range of the distance. For example, the operated UI element itself can be at distance level 0, and the linked UI elements can be at distance levels 1, 2, 3 according to their corresponding distances from the operated UI element... UI elements at the same distance level can be regarded as having the same distance. Thus, by using distance levels, the linkage of UI elements can be simplified, so that UI elements at the same distance level are linked in the same way, thereby improving the unity and coordination of the linkage. However, it should be understood that in the linkage, the distance itself can also be used, so that the UI elements are more accurately linked. In the following, distance levels are interchangeably referred to as distances.

[0285] In the above, reference has been made to Figure 10-14B A method of determining the distance between the first UI element and the second UI element among the N UI elements has been described, and thus a description thereof is omitted here.

[0286] Return to reference Fig.25 After determining the distance between the first UI element and the second UI element, the magnitude of scaling the second UI element may be determined based on the distance. For example, if the distance between the first UI element and the second UI element is larger, the magnitude of scaling the second UI element may be smaller, thereby visually indicating that the impact of the press on the distant UI element is reduced. Alternatively, if the distance between the first UI element and the second UI element is larger, the magnitude of scaling the second UI element may also be larger, thereby visually indicating that the impact of the press on the distant UI element is increased.

[0287] In some embodiments, in order to determine the amplitude of scaling the second UI element, the first amplitude of scaling of the first UI element in response to pressing can be determined. In some embodiments, the first amplitude of scaling of the first UI element can be determined based on various factors associated with the first UI element. These factors may include, but are not limited to, the size of the first UI element, the amplitude range in which the first UI element can change, the duration of the press, and the predetermined pressing force. In the above, the effects of these factors on the scaling amplitude of the UI element are described in detail, so their description is omitted here.

[0288] Then, the magnitude of the second UI element to be scaled in response to the press can be determined based on the first magnitude and the distance between the first UI element and the second UI element. How to conduct the magnitude of scaling the first UI element to the second UI element, thereby obtaining the magnitude of scaling the second UI element, can be achieved using the conduction method described in detail above. The difference is that in deep linkage, x in conduction equations (7) and (8) is n represents the scaling magnitude of the linked scaling UI element (eg, the second UI element), and x represents the scaling magnitude of the pressed UI element (eg, the first UI element). Therefore, the description thereof is omitted here.

[0289] Therefore, since the scaling amplitude of the second UI element is determined by the scaling amplitude of the first UI element and the distance between the second UI element and the first UI element, deep linkage that is intuitive, natural and in line with user usage habits can be achieved.

[0290] 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 can be larger, so that the size of the scaled UI elements on the screen are closer, thus being more visually coordinated. Alternatively, if the second UI element is larger, the amplitude of scaling the second UI element can be smaller, so that the size difference of the scaled UI elements on the screen is greater. To this end, in some embodiments, the amplitude by which the second UI element is scaled in response to pressing can be determined based on the first amplitude, the distance, and the size of the second UI element.

[0291] 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 considered to determine the amplitude of scaling the second UI element. For example, the larger the size of the first UI element, the greater the linkage effect it may produce, so the animation effect of scaling the second UI element may be proportional to the size of the first UI element. To this end, in some embodiments, the amplitude of scaling the second UI element can be determined based on the first amplitude, the distance, and the size of the first UI element.

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

[0293] Return to reference Fig.25 After determining the magnitude of scaling the second UI element, the second UI element can be scaled by the magnitude to visually indicate that the second UI element is scaled as the first UI element is pressed. For each of the N UI elements, each can be scaled by its own magnitude to visually indicate the pressing on the entire screen or a portion of the screen, thereby presenting a pressing linkage.

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

[0295] In addition, in some embodiments, in order to better present the conduction of the animation effect and improve the user experience, the first UI element and the second UI element do not start scaling at the same time. For example, the first UI element can start scaling when the press occurs, and the second UI element can start scaling after the press occurs for a period of time. To this end, in some embodiments, a delay time can be determined based on the distance between the first UI element and the second UI element, and the second UI element is scaled in response to the delay time after the press occurs. Further, in some embodiments, a delay coefficient can be determined, and the delay time is determined based on the distance and the delay coefficient. For example, the delay time can be the quotient of the distance divided by the delay coefficient. The delay coefficient can be configurable by the electronic device and the user.

[0296] Fig.29 FIG. 2 is a schematic diagram showing an example of a delay time 2900 according to an embodiment of the present disclosure. Fig.29 As shown, the first UI element with a distance of 0 starts to scale when the press occurs, the UI element with a distance of 1 scales later than the first UI element, the UI element with a distance of 2 scales later than the UI element with a distance of 1, and the UI element with a distance of 3 scales later than the UI element with a distance of 2.

[0297] Fig.30 FIG. 3 is a schematic diagram showing an example of scaling 3000 of a UI element with a delay time according to the present disclosure. Fig.30 As shown, UI element 5 with a distance of 0 starts to scale at time T51 when the press occurs, UI elements 3, 4, 7, and 8 with a distance of 1 start to scale at the subsequent time T52, UI elements 2, 4, 6, and 9 with a distance of 2 start to scale at a later time T53, and UI elements 1, 10-13 with a distance of 3 start to scale at the latest T54.

[0298] In addition, in some embodiments, the speed of scaling of the UI element can be controlled by a predefined curve whose amplitude varies with time. For example, the predefined curve can be a Bezier curve or an elastic force curve. In the case of the elastic force curve, the speed of scaling can be controlled by controlling the damping coefficient and the stiffness coefficient of the spring. In the case of the Bezier curve, the speed of scaling can be controlled by controlling the coordinates of at least one of at least one control point of the Bezier curve.

[0299] Furthermore, in some embodiments, in order to improve the user experience, the linked scaled UI element can also be moved toward the pressed UI element. Specifically, N UI elements can be moved toward the first UI element to further visually highlight the press. For example, the magnitude of the displacement can depend on at least one of the distance between the linked scaled UI element and the pressed UI element, the duration of the press, the size of the second UI element, and the size of the first UI element. To this end, in some embodiments, the displacement of moving the second UI element can be determined based on the distance between the first UI element and the second UI element, the duration of the press, the size of the first UI element, and / or the size of the second UI element.

[0300] Then, the second UI element can be moved by the displacement in a direction from the second UI element to the first UI element. For example, the second UI element can be moved by the displacement in a direction from the second reference point of the second UI element to the first reference point of the first UI element. The visual effect of this is that the second UI element is attracted to the first UI element. It should be understood that the embodiments of the present disclosure are not limited to this. For example, the second UI element can also be moved by the displacement in the opposite direction (for example, from the first reference point of the first UI element to the direction of the second reference point of the second UI element). The visual effect of this is that the second UI element is repelled by the first UI element.

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

[0302] In addition, in some embodiments, after the pressing ends (for example, after the user lifts the finger off the screen), the scaled UI element can be restored. Specifically, the pressed UI element and the N UI elements that are linked to the scaling can be restored. To this end, in some embodiments, the scaled second UI element can be restored to the second UI element before scaling. The recovery process can be the inverse process of scaling, so its detailed description is omitted here.

[0303] Fig.32A FIG. 3 is a schematic diagram showing an example of restoration 3200A of a UI element according to an embodiment of the present disclosure. Fig.32A As shown, the scaled UI elements (eg, UI elements 1-13) are restored to their initial sizes before scaling.

[0304] 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 can be reset. Specifically, the N UI elements moved toward the pressed UI element can be reset. To this end, in some embodiments, the second UI element can be restored from the position after the move to the position before the move.

[0305] Fig.32B FIG. 3 is a schematic diagram showing an example of restoration 3200B of a UI element with displacement according to an embodiment of the present disclosure. Fig.32B As shown, the moved and scaled UI elements (eg, UI elements 1-13) are restored to their positions before moving and their initial sizes before scaling.

[0306] In some embodiments, the recovery of zooming or the recovery of movement may have a rebound effect. For example, with respect to the recovery of zooming, after the user releases the grip, the size of the UI element may first increase to a size larger than the initial size, and then decrease to the initial size. In addition, with respect to the recovery of movement, after the user releases the grip, the linked moving 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.

[0307] Figures 33A-33B Schematic diagrams respectively show examples of a restored size-time curve 3300A and a displacement-time curve 3300B of a UI element with a rebound effect according to an embodiment of the present disclosure.

[0308] Regarding zoom rebound, such as Fig.33A As shown, at T61, UI element 5 is pressed and reduced. In addition, other UI elements (eg, UI elements 1-4, 6-13) are also reduced in tandem.

[0309] At T62, the user lets go. At this time, UI element 5 is reduced to 0.5 times its initial size. In addition, UI elements with a distance of 1 (e.g., UI elements 3, 4, 7, 8) are reduced in linkage, but the reduction is smaller than UI element 5. In addition, UI elements with a distance of 2 (e.g., UI elements 2, 6, 9) are also reduced in linkage, but the reduction is smaller than the UI elements with a distance of 1. Further, UI elements with a distance of 3 (e.g., UI elements 1, 10-13) are also reduced in linkage, but the reduction is smaller than the UI elements with a distance of 2.

[0310] During T62 and T63, UI elements begin to scale back.

[0311] At T63, the size of UI element 5 increases to 1.2 times the initial size. In addition, the UI elements with a distance of 1 (e.g., UI elements 3, 4, 7, 8) increase in tandem, but the increase is less than that of UI element 5. In addition, the UI elements with a distance of 2 (e.g., UI elements 2, 6, 9) also increase in tandem, but the increase is less than that of the UI elements with a distance of 1. Further, the UI elements with a distance of 3 (e.g., UI elements 1, 10-13) also increase in tandem, but the increase is less than that of the UI elements with a distance of 2.

[0312] In T64, the sizes of all UI elements are restored to their original sizes.

[0313] In addition, regarding mobile rebound, such as Fig.33B As shown, at T71 , UI element 5 is pressed and other UI elements move toward UI element 5 .

[0314] At T72, the user lets go. At this time, the displacement of the UI elements with a distance of 1 (e.g., UI elements 3, 4, 7, 8) moving toward UI element 5 is -1. In addition, the UI elements with a distance of 2 (e.g., UI elements 2, 6, 9) also move toward UI element 5, but the displacement amplitude is smaller than the UI elements with a distance of 1. Further, the UI elements with a distance of 3 (e.g., UI elements 1, 10-13) also move toward UI element 5, but the displacement amplitude is smaller than the UI elements with a distance of 2.

[0315] During T72 and T73, UI elements start to move back.

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

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

[0318] It should be understood that Figures 33A-33B The scaled sizes (e.g., 0.5 times, 1.2 times) and moved displacements (e.g., displacement -1, displacement 0.7) in are only examples, and the UI elements can be scaled smaller or moved with any appropriate displacement. Figures 33A-33B The rebound effect is shown as rebounding only once, but a rebound effect with multiple rebounds can be achieved. The number of rebounds can be any appropriate number of rebounds, and the present disclosure is not limited thereto. In some embodiments, the rebound amplitude of the multiple rebounds can decrease over time.

[0319] Figures 33C-33D Schematic diagrams respectively show examples of a restored size-time curve 3300C and a displacement-time curve 3300D of a UI element having a rebound effect of multiple rebounds with reduced rebound amplitude according to an embodiment of the present disclosure.

[0320] like Fig.33C As shown, the UI elements are restored to their initial sizes after multiple rebounds, wherein the rebound scaling of the UI element with a distance of 0 (e.g., UI element 5) is greater than that of the UI element with a distance of 1 (e.g., UI elements 3, 4, 7, 8). The rebound scaling of the UI element with a distance of 1 is greater than that of the UI element with a distance of 2 (e.g., UI elements 2, 6, 9). The rebound scaling of the UI element with a distance of 2 is greater than that of the UI element with a distance of 3 (e.g., UI elements 1, 10-13).

[0321] Similarly, if Fig.33D As shown, the UI elements return to their initial positions after multiple rebounds, wherein the displacement amplitude of the rebound of the UI element with a distance of 0 (e.g., UI element 5) is greater than that of the UI element with a distance of 1 (e.g., UI elements 3, 4, 7, 8). The displacement amplitude of the rebound of the UI element with a distance of 1 is greater than that of the UI element with a distance of 2 (e.g., UI elements 2, 6, 9). The displacement amplitude of the rebound of the UI element with a distance of 2 is greater than that of the UI element with a distance of 3 (e.g., UI elements 1, 10-13).

[0322] Further, in some embodiments, the rebound effect may also be controlled by a predefined curve (eg, elastic force curve, Bezier curve, etc.). For example, these UI elements may scale rebound or move rebound with an animation effect controlled by a predefined curve.

[0323] Pressure linkage

[0324] Embodiments of the present disclosure relate to the linkage of UI elements in a UI in animation effects of pressing, also referred to as pressure linkage. In pressure linkage, a pressed target UI element can affect other UI elements that are not pressed. Specifically, in pressure linkage, the animation effect that triggers the target UI element can jointly trigger the animation effects of one or more other UI elements, or even other UI elements in the entire UI, so that other UI elements are affected by the target UI element. For example, in pressure linkage, when pressing a target UI element, in addition to the target UI element presenting a pressing effect with an animation effect, other UI elements can also present a pressing effect with corresponding animation effects, thereby visually presenting a linked press.

[0325] Thus, the connection between the animation effects of different UI elements can be strengthened, and the relationship between independent UI elements can be highlighted. Compared with traditional animations with a single animation effect and each UI element being independent and unconnected, the embodiments of the present disclosure can make the animation effect more in line with physical laws and take into account real usage scenarios and user usage habits, thereby significantly improving the user experience.

[0326] The following will refer to the attached Figure 34 to Figure 4 6 describes some example embodiments of pressure linkage.

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

[0328] A UI element in a UI can be pressed. For example, when a user desires to perform an operation associated with a UI element, the user can press the UI element. As an example, when a user desires to enter an application represented by a UI element, open a menu associated with a UI element, etc., the user can press the UI element. In the case where a press at a UI element is detected, the UI element can change with an animation effect, for example, the UI element can visually move position in a seesaw manner relative to the pressed position (hereinafter alternatively referred to as rotation), or visually recess or protrude relative to the pressed position to present a pressing action. In this case, the change in the UI element can 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 other parts.

[0329] In some embodiments, the UI element can be considered as a rigid body. In this case, when a press at the UI element is detected, the UI element can visually move position relative to the pressed position in a seesaw manner to present a press effect.

[0330] Fig.34 3400 is a schematic diagram showing an example of a change in a UI element as a rigid body when pressed according to some embodiments of the present disclosure. Fig.34 As shown, when a press is detected at a UI element, the UI element may change from an initial shape 3410 with an animation effect to visually move the position in a seesaw manner relative to the pressed position. For example, when the pressed position is on the left side of the UI element, the UI element visually rotates to the left around its reference point (indicated by "+"), thereby changing to shape 3420. The changed shape 3420 is similar to a seesaw with the left side pressed down and the right side tilted up. In addition, when the pressed position is on the right side of the UI element, the UI element visually rotates to the right around its reference point, thereby changing to shape 3430. The changed shape 3430 is similar to a seesaw with the left side tilted up and the right side pressed down.

[0331] In this case, the UI element can be regarded as a seesaw connected to springs on both sides, and pressing the UI element can be regarded as pressing the spring on one side and stretching the spring on the other side, thereby achieving an overall animation effect of the UI element rotating around its reference point.

[0332] Fig.35 Schematic diagrams showing examples of compression and extension 3500 of a spring simulating compression of a UI element according to some embodiments of the present disclosure. 3510 shows the springs on both sides in an initial state. 3520 shows that when the pressed position is on the left side of the UI element, the spring on the left side is compressed and the spring on the right side is extended. 3530 shows that when the pressed position is on the right side of the UI element, the spring on the right side is compressed and the spring on the left side is extended.

[0333] In this case, the spring model can be expressed by the following equation (9):

[0334]

[0335] Wherein L represents the horizontal distance between the pressed position and the reference point of the UI element, c represents the straight-line distance between the pressed position and the reference point, and k' represents the elastic coefficient of the spring.

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

[0337]

[0338] Where k' represents the elastic coefficient of the spring, x' represents the deformation of the spring, g' represents the damping coefficient of the spring, T represents the time when the deformation occurs, and m' represents the size of the UI element.

[0339] In addition, in some embodiments, the UI element can be regarded as a non-rigid body. In this case, when a press at the UI element is detected, the UI element can be recessed or protruded relative to the pressed position visually to present a press effect.

[0340] Fig.36 FIG. 3 is a schematic diagram showing an example of a change 3600 of a UI element as a non-rigid body when pressed according to some embodiments of the present disclosure. Fig.36 As shown, the UI element can be viewed as a grid diagram. When a press at a UI element is detected, the initial UI element 3610 can change with an animation effect to visually recess or protrude relative to the pressed position. For example, the coordinates of the grid within the initial UI element 3610 can change, thereby changing to a UI element 3620 that is recessed relative to the pressed position. In addition, in some embodiments, the color (e.g., hue, brightness, saturation, etc.) of the UI element can also change to highlight the press. For example, the initial UI element 3610 can also change to a UI element 3630 that is recessed relative to the pressed position and has a darker color. It should be understood that color changes can also be applied to UI elements that are rigid bodies.

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

[0342] Hereinafter, the embodiment of the present disclosure will be described by taking the UI element visually moving in a seesaw manner relative to the pressed position as an example. However, it should be understood that the UI element can also change in other ways, such as visually being concave or protruding relative to the pressed position.

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

[0344] Fig.37 FIG. 3 is a schematic diagram showing an example of a change 3700 of a UI element at different pressing forces according to some embodiments of the present disclosure. Fig.37 As shown, when the pressing force is large, the UI element can change (e.g., rotate) with a larger amplitude. In contrast, when the pressing force is small, the UI element can change with a smaller amplitude. However, the embodiments of the present disclosure are not limited to this. The way in which the UI element changes in response to different pressing forces is configurable by the electronic device or the user. For example, when the pressing force is large, the UI element can change with a smaller amplitude, and when the pressing force is small, the UI element can change with a larger amplitude.

[0345] Furthermore, in an electronic device, a change based entirely on the actual force of pressing may be demanding on the user and may require the electronic device to be equipped with relevant hardware. Therefore, in some embodiments, the pressing time may be used to simulate or replace the pressing force. For example, if the pressing time is longer, it can be considered that the pressing force is greater, and thus the change is greater.

[0346] Fig.38 FIG. 38 is a schematic diagram showing an example of a change 3800 of a UI element at different press durations according to some embodiments of the present disclosure. Fig.38 As shown, when the duration of pressing is long, the UI element can change (e.g., rotate) with a larger amplitude. In contrast, when the duration of pressing is short, the UI element can change with a smaller amplitude.

[0347] However, the embodiments of the present disclosure are not limited thereto. The manner in which the UI element changes in response to different pressing durations is configurable by the electronic device or the user. For example, when the pressing duration is long, the UI element may change with a smaller amplitude, while when the pressing duration is short, the UI element may change with a larger amplitude.

[0348] In addition, in some embodiments, in order to further make the change of UI elements conform to natural laws and user usage habits, the magnitude of the change may depend on the size of the UI element. For example, intuitively, the same press may be difficult to press a larger UI element, while a smaller UI element may be pressed more easily. In this case, a larger UI element may be less affected by the press, while a smaller UI element may be more affected by the press.

[0349] Fig.39 FIG. 39 is a schematic diagram showing an example of changes 3900 of UI elements at different sizes according to some embodiments of the present disclosure. Fig.39 As shown, when the size of the UI element is large, the UI element can change with a larger amplitude. In contrast, when the size of the UI element is small, the UI element can change with a smaller amplitude.

[0350] However, the embodiments of the present disclosure are not limited thereto. The way in which the UI elements change at different sizes is configurable by the electronic device or the user. For example, when the size of the UI element is large, the UI element may change with a smaller amplitude, and when the size of the UI element is small, the UI element may change with a larger amplitude.

[0351] In addition, in some embodiments, in order to improve the user experience, the amplitude that the UI element can change can be limited so that the UI element can only change within the allowed amplitude range. For example, the amplitude range can be any appropriate range, such as the rotation angle of the UI element is between 0-60 degrees, the grayscale of the color change of the UI element is between 10%-50%, or the coordinate change of the grid within the UI element is between 100-10000 pixels. As an example, assume that the amplitude range is that the rotation angle of the UI element is between 0-60 degrees. In this case, no matter how large the predetermined pressing force is and how long the pressing lasts, the pressed UI element can only rotate 60 degrees around the reference point at most, and cannot be rotated more significantly.

[0352] In the above, the changes of the pressed UI element are described in detail. As mentioned above, in pressure linkage, the pressed target UI element can affect other UI elements that are not pressed. Specifically, in pressure linkage, the animation effect that triggers the target UI element can jointly trigger the animation effects of one or more other UI elements, or even other UI elements in the entire UI, so that other UI elements are affected by the target UI element. For example, in pressure linkage, when the target UI element is pressed during a duration, in addition to the target UI element changing with an animation effect, other UI elements may also change with corresponding animation effects, thereby visually presenting a linked press. Therefore, in the following, reference will be made to Figure 40 to Figure 4 6 Describe the pressure linkage in detail.

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

[0354] In block 4010, M user interface UI elements are displayed on a screen of an electronic device. M is a positive integer greater than 1. For example, the M UI elements may be UI elements 1 to 13.

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

[0356] In block 4030, in response to detecting a press at the first UI element, each of the N UI elements on the screen is changed with a corresponding animation effect. N is a positive integer between 1 and M-1. Thus, the press is visually indicated in a linked manner.

[0357] In some embodiments, the direction in which the N UI elements change relative to the pressed position may be a direction from each of the N UI elements to the pressed position. In some embodiments, the direction may be a direction from a 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 of the change of the N elements, that is, the pressed position is visually indicated as the center of the press. Fig.41 FIG. 4 is a schematic diagram showing an example of pressure linkage 4000 of N UI elements according to an embodiment of the present disclosure. Fig.41 As shown, UI element 5 is pressed, causing UI element 5 to rotate to present a pressing effect. In addition, other UI elements on the screen (e.g., UI elements 1 to 4, and 6 to 13) also rotate with different amplitudes relative to the position of the pressing in response to the pressing to present a pressing effect. Thus, a coordinated pressing is visually presented.

[0358] Alternatively, the direction in which the N UI elements change relative to the pressed position may be the same as the direction in which the pressed UI element changes. Fig.42 FIG. 4 is a schematic diagram showing another example of pressure linkage 4000 of N UI elements according to an embodiment of the present disclosure. Fig.42 As shown, UI element 5 is pressed, so that UI element 5 rotates to present a pressing effect. In addition, other UI elements on the screen (e.g., UI elements 1 to 4, and 6 to 13) also rotate in different amplitudes in the same direction as UI element 5 in response to the pressing to present a pressing effect. In this case, the reference point of the change of the N elements is its own reference point. Thus, the pressing is presented in a linked manner visually.

[0359] For clarity, Figure 41-42 Only pressure linkage of UI elements 1-13 in UI 300A is shown. It should be understood that pressure linkage may occur at any at least two UI elements in any UI, for example, at any at least two UI elements in UIs 300A-300C.

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

[0361] In addition, in some embodiments, a UI element that intersects the impact area can be considered to be within the impact area. Alternatively, in the case where the impact area is a circle with a predetermined radius, if the distance between the UI element and the first UI element is less than the predetermined radius of the impact area, the UI element can be considered to be within the impact area.

[0362] Fig.43 FIG. 4 is a schematic diagram showing an example of an influence area 4300 of a UI element according to an embodiment of the present disclosure. Fig.43 As shown, since UI elements 3, 4, 7, and 8 are within the influence area 4310 of UI element 5, UI elements 3, 4, 7, and 8 will change in tandem with UI element 5. In addition, since UI elements 1, 2, 6, and 9-13 are not within the influence area 4310 of UI element 5, UI elements 1, 6, and 9-13 will not change in tandem with UI element 5.

[0363] Return to reference Fig.40 , in order to make N UI elements change with corresponding animation effects, the distance between the first UI element and each of the N UI elements can be determined. As described above, in some embodiments, the distance can be divided into multiple distance levels according to the range of the distance. For example, the operated UI element itself can be at distance level 0, and the linked UI elements can be at distance levels 1, 2, 3 according to their corresponding distances from the operated UI element... UI elements at the same distance level can be regarded as having the same distance. Thus, by using distance levels, the linkage of UI elements can be simplified, so that UI elements at the same distance level are linked in the same way, thereby improving the unity and coordination of the linkage. However, it should be understood that in the linkage, the distance itself can also be used, so that the UI elements are more accurately linked. In the following, distance levels are interchangeably referred to as distances.

[0364] In the above, reference has been made to Figure 10-14B A method of determining the distance between the first UI element and the second UI element among the N UI elements has been described, and thus a description thereof is omitted here.

[0365] Return to reference Fig.40 After determining the distance between the first UI element and the second UI element, the animation effect of the change of the second UI element can be determined based on the distance. For example, if the distance between the first UI element and the second UI element is larger, the magnitude of the change of the second UI element can be smaller, thereby visually indicating that the impact of pressing on the distant UI element is smaller. Alternatively, if the distance between the first UI element and the second UI element is larger, the magnitude of the change of the second UI element can also be larger, thereby visually indicating that the impact of pressing on the distant UI element is larger.

[0366] In some embodiments, in order to determine the magnitude of the change in the second UI element, the first magnitude of the change in the first UI element in response to pressing can be determined. In some embodiments, the first magnitude of the change in the first UI element can be determined based on various factors associated with the first UI element. These factors may include, but are not limited to, the size of the first UI element, the position of the first reference point of the first UI element, the range of magnitudes in which the first UI element can change, the position of the press, the duration of the press, and the predetermined pressing force. In the above, the effects of these factors on the magnitude of the change in the UI element are described in detail, so their description is omitted here.

[0367] Then, the amplitude of the change of 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. How to transmit the amplitude of the change of the first UI element to the second UI element, so as to obtain the amplitude of the change of the second UI element, can be achieved by using the transmission method described in detail above. The difference is that in the pressure linkage, x in the transmission equations (7) and (8) is n represents the change amplitude of the linked changing UI element (eg, the second UI element), and x represents the change amplitude of the pressed UI element (eg, the first UI element). Therefore, the description thereof is omitted here.

[0368] Therefore, since the magnitude of the change in the second UI element is determined by the magnitude of the change in the first UI element and the distance between the second UI element and the first UI element, intuitive, natural, and user-friendly pressure linkage can be achieved.

[0369] In addition, in some embodiments, the size of the second UI element may also affect the animation effect of the change in 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 change in the second UI element. For example, if the second UI element is larger, the magnitude of the change in the second UI element may be larger. Alternatively, if the second UI element is larger, the magnitude of the change in the second UI element may be smaller. To this end, in some embodiments, the magnitude of the change in the second UI element in response to pressing can be determined based on the first magnitude, the distance, and the size of the second UI element.

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

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

[0372] Return to reference Fig.40 After determining the animation effect of the change of the second UI element, the second UI element can be changed with the animation effect to visually indicate that the second UI element changes as the first UI element is pressed. For N UI elements, each can be changed with its own animation effect to visually indicate the pressing on the entire screen or a part of the screen, thereby presenting the pressing linkage.

[0373] Fig.44 FIG. 4 is a schematic diagram showing an example of a change 4400 of a UI element based on distance according to an embodiment of the present disclosure. Fig.44 As shown, the UI elements with a distance of 0 (e.g., UI element 5 itself) change more than the UI elements with a distance of 1 (e.g., UI elements 3, 4, 7, 8), the UI elements with a distance of 1 change more than the UI elements with a distance of 2 (e.g., UI elements 2, 6, 9), and the UI elements with a distance of 2 change more than the UI elements with a distance of 3 (e.g., UI elements 1, 10-13).

[0374] In addition, in some embodiments, in order to better present the conduction of the animation effect and improve the user experience, the first UI element and the second UI element do not begin to change at the same time. For example, the first UI element may begin to change when the pressing occurs, and the second UI element may begin to change after the pressing occurs for a period of time. To this end, in some embodiments, a delay time can be determined based on the distance between the first UI element and the second UI element, and the second UI element is changed in response to the delay time after the pressing occurs. Further, in some embodiments, a delay coefficient can be determined, and the delay time is determined based on the distance and the delay coefficient. For example, the delay time can be the quotient of the distance divided by the delay coefficient. The delay coefficient can be configurable by the electronic device and the user.

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

[0376] In addition, in some embodiments, the speed at which the UI element changes can be controlled by a predefined curve whose amplitude changes over time. For example, the predefined curve can be a Bezier curve or an elastic force curve. In the case of an elastic force curve, the speed of the change can be controlled by controlling the damping coefficient and stiffness coefficient of the spring. In the case of a Bezier curve, the speed of the change can be controlled by controlling the coordinates of at least one of at least one control point of the Bezier curve.

[0377] In addition, in some embodiments, after the pressing ends (for example, after the user lifts the finger off the screen), the changed UI element can be restored. Specifically, the pressed UI element and the N UI elements that change in linkage can be restored. To this end, in some embodiments, the changed second UI element can be restored to the second UI element before the change. The restoration process can be the reverse process of the change, so its detailed description is omitted here.

[0378] Fig. 46 shows a schematic diagram of an example of restoration 4600 of UI elements according to an embodiment of the present disclosure. As shown in Fig. 46, the UI elements (eg, UI elements 1-13) that have undergone changes are all restored to their pre-change forms.

[0379] In some embodiments, the restoration of the change may have a rebound effect. For example, after the user lets go, the UI element may change from the left side being pressed down and the right side being tilted up, to the left side being tilted up and the right side being pressed down, and then changing back to the initial shape. That is, after the user lets go, the UI element visually presents an effect of flipping and then restoring.

[0380] Fig.46B A schematic diagram showing an example of a restored angle-time curve 4600B of a UI element with a rebound effect according to an embodiment of the present disclosure is shown.

[0381] like Fig.46B As shown, at T91, UI element 5 is pressed and changes. For example, UI element 5 is pressed on the left side, thereby rotating around its reference point. Specifically, UI element 5 is pressed down on the left side, while the right side is tilted up. In addition, other UI elements (e.g., UI elements 1-4, 6-13) also change in conjunction.

[0382] At T92, the user lets go. At this time, the angle of rotation of UI element 5 is -60°. In addition, UI elements with a distance of 1 (e.g., UI elements 3, 4, 7, 8) rotate in tandem, but the rotation amplitude is smaller than that of UI element 5. In addition, UI elements with a distance of 2 (e.g., UI elements 2, 6, 9) also rotate in tandem, but the rotation amplitude is smaller than that of UI elements with a distance of 1. Further, UI elements with a distance of 3 (e.g., UI elements 1, 10-13) also rotate in tandem, but the rotation amplitude is smaller than that of UI elements with a distance of 2.

[0383] During T92 and T93, UI elements start to rotate and rebound.

[0384] At T93, the angle of rotation rebound of UI element 5 is 45°. In addition, UI elements with a distance of 1 (e.g., UI elements 3, 4, 7, 8) are linked to rotate and rebound, but the rotation rebound amplitude is smaller than that of UI element 5. In addition, UI elements with a distance of 2 (e.g., UI elements 2, 6, 9) are also linked to rotate and rebound, but the rotation rebound amplitude is smaller than that of UI elements with a distance of 1. Further, UI elements with a distance of 3 (e.g., UI elements 1, 10-13) are also linked to rotate and rebound, but the rotation rebound amplitude is smaller than that of UI elements with a distance of 2.

[0385] At T94, all UI elements are restored to their original shapes. In other words, the rotation angles of all UI elements are restored to 0°.

[0386] It should be understood that Fig.46B The rotation angles in are examples only, and UI elements can be changed in any appropriate mode. Fig.46B The rebound effect is shown as rebounding only once, but a rebound effect with multiple rebounds can be achieved. The number of rebounds can be any appropriate number of rebounds, and the present disclosure is not limited thereto. In some embodiments, the rebound amplitude of the multiple rebounds can decrease over time.

[0387] Fig.46C A schematic diagram showing an example of a recovery angle-time curve 4600C of a UI element having a rebound effect of multiple rebounds with reduced rebound amplitude according to an embodiment of the present disclosure.

[0388] like Fig.46C As shown, the UI elements return to their initial shapes after multiple rebounds, wherein the rebound rotation amplitude (e.g., rotation angle) of the UI element with a distance of 0 (e.g., UI element 5) is greater than that of the UI element with a distance of 1 (e.g., UI elements 3, 4, 7, 8). The rebound rotation amplitude of the UI element with a distance of 1 is greater than that of the UI element with a distance of 2 (e.g., UI elements 2, 6, 9). The rebound rotation amplitude of the UI element with a distance of 2 is greater than that of the UI element with a distance of 3 (e.g., UI elements 1, 10-13).

[0389] Further, in some embodiments, the rebound effect may also be controlled by a predefined curve (eg, an elastic force curve, a Bezier curve, etc.). For example, these UI elements may rebound with animation effect changes controlled by a predefined curve.

[0390] The following introduces the linkage animation implementation principle and system architecture proposed in the embodiments of the present disclosure.

[0391] Fig.47 FIG4700 shows an animation implementation principle diagram according to an embodiment of the present disclosure. As described above, animation is essentially to display UI or UI elements in real time based on a refresh rate. Due to the principle of human visual persistence, the user feels that the picture is moving. Fig.47 As shown, the animation changes from the initial state of the animation to the final state of the animation after the animation time. In this transformation process, the animation can be controlled by the animation type and the animation transformation form. For example, the animation type can include displacement animation, rotation animation, scaling animation and transparent animation, etc. The animation transformation form can be controlled by controllers such as interpolators and estimators. Such controllers can be used to control the speed of transforming the animation during the animation time.

[0392] Specifically, the interpolator is used to set the change logic of the animation attribute value from the initial state to the final state, thereby controlling the rate of animation change, so that the animation can change at one or more rates such as uniform speed, acceleration, deceleration, parabolic rate, etc.

[0393] In some embodiments, the electronic device 100 can set the change logic of the animation attribute value according to the system interpolator or the custom interpolator (such as the elastic force interpolator, the friction force interpolator). When the animation is running, when the electronic device 100 determines that the animation attribute value has changed according to the above change logic, the image frame is drawn based on the above animation attribute value and the view is refreshed.

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

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

[0396] The parameter endPos represents the relative displacement, that is, the difference between the initial position and the static position of the spring. In some embodiments, endPos may represent the relative displacement of the UI element.

[0397] The parameter velocity indicates the initial velocity. In some embodiments, velocity may indicate the initial velocity of the UI element.

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

[0399] Table 1

[0400] < / canvas> < / video> Animation Properties valueThreshold ROTATION / ROTATION_X / ROTATION_Y 1 / 10 ALPHA 1 / 256 SCALE_X / SCALE_Y 1 / 500 TRANSLATION_Y / TRANSLATION_X 1

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

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

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

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

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

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

[0407] animator.start(); / / Run animation".

[0408] In some embodiments, the electronic device 100 customizes a friction interpolator. As an example, the function code of the friction interpolator can be expressed as "FlingInterpolator (float initVelocity, float friction)". In which initVelocity represents the initial velocity and friction represents the friction.

[0409] As an example, the specific code of the animation class using the friction interpolator can be expressed as follows:

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

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

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

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

[0414] In some embodiments, the electronic device 100 can set the animation time (Duration) and the starting position by itself; or call the engine model to obtain the animation time (Duration) and the ending position, and then set them to the animation class (Animator class).

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

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

[0417] As an example, the code for setting the parameter valueThreshold can be expressed as "com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#setValueThreshold".

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

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

[0420] "TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCALE_X, SCALE_Y, ROTATION, ROTATION_X, ROTATION_Y, X, Y, Z, ALPHA, SCROLL_X, SCROLL_Y", the electronic device 100 can also customize the implementation of the ViewProperty interface.

[0421] As an example, the specific code using the spring engine animation class can be expressed as follows:

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

[0423] animation.start();"

[0424] In some embodiments, the code using the friction engine animation class can be expressed as: "FlingAnimation(Kobject,FloatPropertyCompat <k>property,float initVelocity,float friction)".

[0425] As an example, the specific code using the friction animation class can be expressed as follows:

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

[0427] animation.start();".

[0428] Fig.48 FIG. 4 is a schematic diagram showing a system framework 4800 for implementing a "linked" animation effect capability or function according to an embodiment of the present disclosure. or The overall architecture of the desktop and UI framework is implemented, including the mainstream 4-layer logic processing, and the data processing process is presented to the user from the bottom up. Users mainly use and experience the dynamic effect function at the application layer. In the embodiment of the present disclosure, the interactive relationship between the desktop and the UI framework is as follows: Fig.48 Specifically, Fig.48 As shown, 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. A UI element operation 4814 may be implemented on the desktop 4812. The UI element operation 4814 may include, for example, a drag operation, a press operation, a deep press operation, etc. The application framework layer 4830 may include a system service 4832 and an extended service 4834. The system service 4832 may include various system services, such as Service 4833. The extended service 4834 may include various extended services, such as SDK 4835. The hardware abstraction layer (HAL) 4850 may include HAL 3.0 4852 and an algorithm Algo 4854. The kernel layer 4870 may include a driver 4872 and a physical device 4874. The physical device 4874 can provide the original parameter stream to the driver 4872, and the driver 4872 can provide the functional processing parameter stream to the physical device 4874. Fig.48 As further shown, a UI framework 4820 for implementing linkage animation 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 linkage animation 4825. The linkage animation 4825 may then be provided to the UI element operation 4814 of the application layer 4810.

[0429] Fig.49 FIG. 1 is a schematic diagram showing the relationship between the application side and the UI framework side involved in the "linked" animation effect capability or function according to an embodiment of the present disclosure. Fig.49 As shown, the application side 4910 may include a desktop 4915, and the UI elements on the desktop 4915 may implement operations such as dragging, pressing, and deep pressing. The UI framework side 4950 may include a UI framework animation 4952, and the UI framework animation 4952 may implement a linkage animation capability 4954, and the linkage animation capability 4954 may be implemented through methods such as AAR format 4951, JAR format 4953, and system interface 4955. The application side 4910 may call the "linked" animation effect capability or function provided by the UI framework side 4950 through methods such as integration 4930 and calling 4940. Through the interaction between the application side 4910 and the UI framework side 4950, the embodiments of the present disclosure implement a new type of linkage "animation effect", which connects originally independent UI elements (e.g., icons, cards, controls, etc.).

[0430] Fig.50 Schematic diagram showing the specific description of three ways of realizing the "linked" animation effect capability or function according to an embodiment of the present disclosure. Fig.50 As shown, the relationship 5001 between the AAR format 4951 and the system of the electronic device 100 is: the AAR format 4951 is packaged with capabilities in binary mode, and provides capabilities for application-side integration in the system. The version rhythm can be freely controlled without following the system. The relationship 5003 between the JAR format 4953 and the system of the electronic device 100 is: the JAR format 4953 is packaged with capabilities in binary mode, and provides capabilities for all components in the system. The version rhythm can be freely controlled without following the system. The relationship 5005 between the system interface 4955 and the system of the electronic device 100 is: the system interface 4955 is the interface of the framework layer in the system version, and provides capabilities for all components in the system, and follows the system upgrade. The focus of the present disclosure is the realization of the linkage dynamic effect capability. Among them, integration is the way of AAR and JAR, and calling is the way of system interface. The scene is not limited, but the way of displaying the capabilities is inconsistent. In other words, the functions of the various methods described in the present disclosure can be implemented through AAR format files, JAR format files and / or the system interface of the electronic device 100. In this way, the capability or function of "linked" animation effects can be simply and conveniently implemented and provided to applications of electronic devices, such as desktops.< / k> < / k> < / k> < / videoview> < / imgview> < / textview>

Claims

1. A graphical interface display method, include: Displaying M user interface UI elements on the screen of the electronic device, where M is a positive integer greater than 1; Detecting a press on a first UI element of the M UI elements; In response to the pressing, each of the N UI elements on the screen is changed with a corresponding animation effect, where N is a positive integer between 1 and M-1, wherein the N UI elements are changed with the corresponding animation effect comprises: Determine a distance between the first UI element and a second UI element among the N UI elements; Determining an animation effect of a change in the second UI element based on the distance and the position of the pressing in the UI; and causing the second UI element to change with the animation effect to visually indicate the pressing; Determining the animation effect includes: determining a first magnitude of a change in the first UI element in response to the pressing; and Based on the first magnitude, the distance, and the location of the press in the UI, a magnitude of a change in the second UI element in response to the press is determined.

2. The method according to claim 1, wherein determining the distance include: Determine a first reference point of the first UI element and a second reference point of the second UI element; as well as The distance between the first reference point and the second reference point is determined as the distance.

3. The method according to claim 1, wherein determining the distance include: Determine a first reference point of the first UI element; Determine, from a plurality of circles with respective radii and centered at the first reference point, a target circle that intersects with the second UI element and has the smallest radius; as well as The radius of the target circle is determined as the distance.

4. The method according to claim 1, wherein determining the distance include: Determine 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; and The distance is determined based on any of the following: At least one of the lateral spacing and the longitudinal spacing, or At least one of the horizontal distance and the vertical distance, and a direction from a second reference point of the second UI element to a first reference point of the first UI element.

5. The method according to any one of claims 1 to 4, further comprising: include: determining an influence area of ​​the first UI element based on a size of the first UI element; as well as The UI elements within the affected area among the M UI elements are determined as the N UI elements.

6. The method according to any one of claims 1 to 4, further comprising: include: M-1 UI elements other than the first UI element among the M UI elements are determined as the N UI elements.

7. The method according to any one of claims 1 to 4, wherein the animation effect include: visually shifting position in a seesaw manner relative to said position of said pressing, or A visual depression or protrusion relative to the location of the depression.

8. The method according to any one of claims 1 to 4, wherein the magnitude of the change of the second UI element in response to the press is determined based on the first magnitude, the distance, and the position of the press in the UI. include: A magnitude of a change in the second UI element in response to the press is determined based on at least one of a size of the second UI element and a size of the first UI element, the first magnitude, the distance, and a location of the press in the UI.

9. The method of claim 8, wherein the first magnitude of the change of the first UI element is determined based on at least one of the following associated with the first UI element: the size of the first UI element, The position of the first reference point of the first UI element, The range of amplitudes within which the first UI element can change, the position of the pressing, the duration of the compressions, and Predetermined pressing force.

10. The method according to any one of claims 1 to 4, wherein the second UI element is caused to change include: determining a delay time based on the distance; as well as In response to the delay time elapsing after the pressing occurs, the second UI element is changed.

11. The method according to any one of claims 1 to 4, wherein the second UI element is caused to change include: A speed at which the second UI element changes in response to the press is determined based on a predefined curve of magnitude versus time. The method according to claim 11 , wherein the predefined curve is a Bezier curve or an elastic force curve.

13. The method according to any one of claims 1 to 4, further comprising: include: The changed second UI element is restored to the second UI element.

14. The method according to any one of claims 1 to 4, wherein the method is implemented by at least one of an AAR format file, a JAR format file, and a system interface.

15. An electronic device, It is characterized in that include: A processor, and a memory storing instructions, wherein when the instructions are executed by the processor, the electronic device executes the method according to any one of claims 1 to 14.

16. A computer-readable storage medium, It is characterized in that The computer-readable storage medium stores instructions, which, when executed by an electronic device, cause the electronic device to perform the method according to any one of claims 1 to 14.

17. A computer program product, It is characterized in that The computer program product comprises instructions which, when executed by an electronic device, cause the electronic device to perform the method according to any one of claims 1 to 14.

Images