A method for realizing drag shadow animation effect and related equipment

Abstract

An embodiment of the present application provides a method for implementing a drag shadow animation effect and related devices. The method may include: detecting a drag instruction for one or more controls via a drag point; in response to the drag instruction, controlling the one or more controls to follow the drag point; obtaining the drag coordinates and corresponding drag information of the one or more controls as they follow the drag point; calculating, based on the drag information, an offset corresponding to the drag shadow of the one or more controls, the drag shadow being an image of the one or more controls as they follow the drag point; and controlling the display of the drag shadow based on the offset and the drag coordinates. Implementing the embodiment of the present application can optimize the drag shadow movement effect.

Description

Technical Field

[0001] The present application relates to the technical field of terminal devices, and in particular to a method for implementing a drag shadow animation effect and related devices. Background Art

[0002] Currently, when dragging a control (such as an image, application window, document, text, etc. on an electronic device), the control's drag shadow can move with the movement of the touch point or mouse, where the drag shadow is the image of the control displayed on the display. In this process, the electronic device's drag process listens for input events. Whenever it hears a touch movement event (such as a drag event) for the control, it redraws the control's corresponding drag shadow at the coordinate point reported by the touch movement event, thereby achieving the effect of the drag shadow following the touch movement.

[0003] However, when dragging a control (for example, when dragging an image with a mouse), the positional relationship between the drag shadow and the mouse remains fixed. For example, the drag shadow always stays in sync with the mouse, which results in a jerky drag shadow movement. Furthermore, because the drag shadow movement effect is actually achieved by creating a Surface Control and then continuously setting the coordinates of the drag shadow through surface control transactions (Surface Control Transaction SetPosition) when it detects touch events, traditional animation effects (such as fade-in and fade-out) that are directly applied to the drag shadow are not applicable.

[0004] Therefore, how to optimize the drag shadow movement effect during the drag event so that the movement effect of the drag shadow is not too abrupt when the control is dragged is an urgent problem to be solved. Summary of the Invention

[0005] The embodiments of the present application provide a method for implementing a drag shadow animation effect and related devices to optimize the drag shadow movement effect.

[0006] In a first aspect, an embodiment of the present application provides a method for implementing a drag shadow animation effect, which may include:

[0007] Detecting a drag instruction for one or more controls through a drag point; controlling the one or more controls to follow the movement of the drag point in response to the drag instruction; obtaining the drag coordinates and corresponding drag information of the one or more controls in the process of following the movement of the drag point, the drag information including one or more of the drag speed, the drag acceleration, and the curvature change rate of the drag trajectory; calculating the offset corresponding to the drag shadow of the one or more controls based on the drag information, the drag shadow being the image of the one or more controls in the process of following the movement of the drag point; controlling the display of the drag shadow based on the offset and the drag coordinates.

[0008] According to the technical solution described in the first aspect, the embodiments of the present application achieve the effect of separating the drag shadow from the drag point during dragging by setting the drag shadow offset. Various animation effects can also be achieved by dynamically setting the offset. For example, by dynamically increasing the offset as the acceleration of the touch point increases, a damping animation effect is achieved during dragging; when the touch point begins to move, the drag shadow has not yet followed the touch point, and then gradually catches up with the inertia of the touch point, etc. In addition, because the embodiments of the present application only set the offset of the drag shadow corresponding to the dragged control, the drag control will still be distributed to the touch point position, which will not affect the original distribution process of the drag event of the drag control.

[0009] In one possible implementation, calculating the offset corresponding to the drag shadow of the one or more controls based on the drag information includes: calculating the offset corresponding to the drag shadow of the one or more controls based on a preset drag strategy based on the drag information, wherein the preset drag strategy includes a correspondence between the drag information and the offset. In an embodiment of the present application, by dynamically determining the offset based on the current drag information using a pre-set preset drag strategy, various animation effects can be achieved during the dragging process.

[0010] In one possible implementation, the drag information includes the drag speed; and the preset drag strategy includes the drag speed being proportional to the offset value. In an embodiment of the present application, by pre-setting the preset drag strategy and dynamically increasing the offset value according to the drag speed, the animation effect of the drag shadow during the dragging process can be optimized, so that the shadow does not move abruptly.

[0011] In one possible implementation, the drag information includes the drag acceleration; and the preset drag strategy includes the drag acceleration being proportional to the offset value. In an embodiment of the present application, by pre-setting the preset drag strategy and dynamically increasing the offset value according to the drag acceleration, the animation effect of the drag shadow during the dragging process can be optimized, so that the shadow does not move awkwardly.

[0012] In one possible implementation, the drag information includes the rate of change of the curvature of the drag trajectory; and the preset drag strategy includes calculating the offset value based on the rate of change of the curvature of the drag trajectory and a preset formula. In an embodiment of the present application, the preset drag strategy is used to calculate the offset of the drag shadow based on the rate of change of the curvature of the drag trajectory and a preset formula. The offset is dynamically increased as the curvature changes, thereby optimizing the animation effect of the drag shadow during the dragging process, making it less abrupt when moving.

[0013] In one possible implementation, the drag information includes a first display identifier and a second display identifier, wherein the first display identifier is used to identify the display screen of the first device, and the second display identifier is used to identify the display screen of the second device; the preset drag strategy includes: when the one or more controls enter the second device from the first device, the offset value corresponding to the drag shadow in the display screen of the first device gradually increases, and the offset value corresponding to the drag shadow in the display screen of the second device gradually decreases. For example: when shuttling devices, according to time changes (for example: reducing the offset value by a certain amount every millisecond), or according to spatial changes (for example: reducing the offset value by a certain amount every time the mouse moves 1 pixel), the effect of the center of the drag shadow gradually approaching the mouse pointer is achieved.

[0014] In one possible implementation, controlling the display of the drag shadow according to the offset and the drag coordinates includes: accumulating the drag coordinates and the offset to obtain the accumulated drag coordinates; and controlling the display of the drag shadow at the accumulated drag coordinates. In an embodiment of the present application, the drag coordinates are coordinates used to draw the drag shadow. When one or more controls follow the movement of the drag point, the moving path and moving direction during the movement can be obtained, and the drag coordinates can be determined based on the moving path. Drawing the drag shadow through coordinates will make the drag shadow more accurate, and the x and y coordinates used to draw the drag shadow introduce offsets offsetX and offsetY respectively. By changing the offsets, the movement effect of the drag shadow during the dragging process can be dynamically changed.

[0015] In one possible implementation, the method further includes: displaying the one or more controls and the drag shadow while the one or more controls follow the movement of the drag point. In the embodiment of the present application, by simultaneously displaying the controls and their corresponding drag shadows, the corresponding relationship between the dragged controls and their original positions can be intuitively observed, thereby improving the user experience.

[0016] In one possible implementation, the method further includes: displaying the drag shadow and not displaying the one or more controls while the one or more controls follow the movement of the drag point. In this embodiment of the present application, only the drag shadow corresponding to the control is displayed, so that not only the position of the control after being dragged can be observed, but also the effect of the control leaving its original position can be observed, thereby improving the user experience.

[0017] In a second aspect, an embodiment of the present application provides an electronic device, including a display screen, a memory, and one or more processors; the display screen and the memory are coupled to the one or more processors, the memory is used to store computer program code, the computer program code including computer instructions, and the one or more processors invoke the computer instructions to cause the electronic device to execute:

[0018] Detecting a drag command on one or more controls through a drag point;

[0019] In response to the drag instruction, controlling the one or more controls to move along with the drag point;

[0020] Obtaining the drag coordinates of the one or more controls and corresponding drag information during the process of following the drag point, where the drag information includes one or more of a drag speed, a drag acceleration, and a curvature change rate of the drag trajectory;

[0021] Calculating, based on the drag information, an offset corresponding to a drag shadow of the one or more controls, where the drag shadow is an image of the one or more controls moving along with the drag point;

[0022] The drag shadow display is controlled according to the offset and the drag coordinates.

[0023] In one possible implementation, the one or more processors call the computer instructions to enable the electronic device to specifically execute: according to the drag information, calculate the offset corresponding to the drag shadow of the one or more controls based on a preset drag strategy, and the preset drag strategy includes the correspondence between the drag information and the offset.

[0024] In a possible implementation, the drag information includes the drag speed; and the preset drag strategy includes the drag speed being proportional to the value of the offset.

[0025] In a possible implementation, the drag information includes the drag acceleration; and the preset drag strategy includes the drag acceleration being proportional to a value of the offset.

[0026] In a possible implementation, the drag information includes a curvature change rate of the drag track; and the preset drag strategy includes calculating a value of the offset according to the curvature change rate of the drag track and a preset formula.

[0027] In one possible implementation, the drag information includes a first display identifier and a second display identifier, the first display identifier is used to identify the display screen of the first device, and the second display identifier is used to identify the display screen of the second device; the preset drag strategy includes: when the one or more controls enter the second device from the first device, the offset value corresponding to the drag shadow in the display screen of the first device gradually increases, and the offset value corresponding to the drag shadow in the display screen of the second device gradually decreases.

[0028] In one possible implementation, the one or more processors call the computer instructions to enable the electronic device to specifically execute: accumulating the drag coordinates and the offset to obtain the accumulated drag coordinates; and controlling the drag shadow to be displayed at the accumulated drag coordinates.

[0029] In one possible implementation, the one or more processors are further configured to call the computer instructions to cause the electronic device to execute: displaying the one or more controls and the drag shadow while the one or more controls follow the movement of the drag point.

[0030] In one possible implementation, the one or more processors are further used to call the computer instructions to cause the electronic device to execute: while the one or more controls follow the movement of the drag point, the drag shadow is displayed and the one or more controls are not displayed.

[0031] In a third aspect, an embodiment of the present application provides a computer storage medium for storing computer software instructions used for a method for implementing a drag shadow animation effect provided in the first aspect above, which includes a program designed for executing the above aspect.

[0032] In a fourth aspect, an embodiment of the present application provides a computer program comprising instructions, which, when executed by a computer, enables the computer to execute the process executed by the method for implementing the drag shadow animation effect in the first aspect above.

[0033] It should be understood that the description of technical features, technical solutions, advantages or similar language in the specification does not imply that all features and advantages can be realized in any single embodiment. On the contrary, it is understood that the description of a feature or advantage means that a specific technical feature, technical solution or advantage is included in at least one embodiment. Therefore, the description of a technical feature, technical solution or advantage in this specification does not necessarily refer to the same embodiment. Furthermore, the technical features, technical solutions and advantages described in the following embodiments can also be combined in any appropriate manner. Those skilled in the art will understand that an embodiment can be implemented without one or more specific technical features, technical solutions or advantages of a specific embodiment. In other embodiments, additional technical features and advantages can also be identified in specific embodiments that do not embody all embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the background technology, the drawings required for use in the embodiments of the present application or the background technology will be described below.

[0035] Figure 1 This is a schematic diagram of a drag event flow provided in an embodiment of the present application.

[0036] Figure 2 This is a schematic diagram of dragging shadows provided in an embodiment of the present application.

[0037] Figure 3A This is a schematic diagram of a draggable control in an electronic device provided in an embodiment of the present application.

[0038] Figure 3B This is a schematic diagram of a draggable control in another electronic device provided in an embodiment of the present application.

[0039] Figure 3C This is a schematic diagram of a drag shadow displayed in an electronic device provided in an embodiment of the present application.

[0040] Figure 4A 1 is a schematic structural diagram of an electronic device 100 provided in an embodiment of the present application.

[0041] Figure 4B This is a software structure block diagram of an electronic device 100 provided in an embodiment of the present application.

[0042] Figure 5A It is a user interface displayed during the dragging process of a group of one or more controls provided in an embodiment of the present application.

[0043] Figure 5B This is another group of one or more controls provided by an embodiment of the present application that are displayed in the user interface during the dragging process.

[0044] Figure 6 This is a user interface of an electronic device provided in an embodiment of the present application.

[0045] Figure 7 This is a schematic diagram of the implementation process of a drag shadow animation effect provided in an embodiment of the present application.

[0046] Figure 8 This is a schematic diagram of the implementation process of another drag shadow animation effect provided in an embodiment of the present application.

[0047] Figure 9 This is a schematic diagram of achieving different offsets according to different drag speeds provided by the present application.

[0048] Figure 10 This is a schematic diagram of a dragging user interface for dragging a control provided in an embodiment of the present application.

[0049] Figure 11 This is another dragging user interface diagram for dragging a control provided in an embodiment of the present application.

[0050] Figure 12 This is a schematic diagram of a dragging user interface for dragging multiple controls provided in an embodiment of the present application.

[0051] Figure 13-15 This is a schematic diagram of a dragging user interface for dragging a control provided by an embodiment of the present application.

[0052] Figure 16 This is a user interface of a group of electronic devices provided in an embodiment of the present application.

[0053] Figure 17 This is another schematic diagram of the implementation process of the drag shadow animation effect provided in an embodiment of the present application.

[0054] Figures 18-20 This is another set of dragging user interface diagrams for dragging a control provided by an embodiment of the present application.

[0055] Figure 21 This is a flowchart of another method for implementing the drag shadow animation effect provided in an embodiment of the present application. DETAILED DESCRIPTION

[0056] The following describes the embodiments of the present application in conjunction with the accompanying drawings. The terms used in the implementation methods of the embodiments of the present application are only used to explain the specific embodiments of the present application and are not intended to limit the present application.

[0057] The terms used in the following examples of the present application are for the purpose of describing specific embodiments only and are not intended to limit the present application. As used in the specification and appended claims of the present application, the singular expressions "a," "an," "said," "above," "the," and "this" are intended to include plural expressions as well, unless the context clearly indicates otherwise. It should also be understood that the term "and / or" used in the present application refers to and encompasses any or all possible combinations of one or more of the listed items.

[0058] The following describes an electronic device, a user interface for such an electronic device, and embodiments for using such an electronic device. In some embodiments, the electronic device may be a portable electronic device that also includes other functions such as message management and / or message receiving and pushing functions, such as a mobile phone, a tablet computer, a wearable electronic device with wireless communication functions (such as a smart watch), etc. Exemplary embodiments of portable electronic devices include but are not limited to Or portable electronic devices with other operating systems. The above-mentioned portable electronic devices may also be other portable electronic devices, such as a laptop computer with a touch-sensitive surface or touch panel. It should also be understood that in some other embodiments, the above-mentioned electronic devices may not be portable electronic devices, but desktop computers, car computers, etc. with a touch-sensitive surface or touch panel. It is understandable that the embodiments of the present application are introduced with smartphones and computers as examples, but are not limited to smartphones and computers, and may also be other smart devices with communication functions, such as tablet computers, car computers, smart TVs, etc.

[0059] The term "user interface (UI)" in the specification, claims and drawings of this application refers to the media interface for interaction and information exchange between an application or operating system and a user, which realizes the conversion between the internal form of information and the form acceptable to the user. The user interface of an application is a source code written in a specific computer language such as Java and Extensible Markup Language (XML). The interface source code is parsed and rendered on the terminal device, and finally presented as content that the user can recognize, such as pictures, text, buttons and other controls. Controls, also known as widgets, are the basic elements of the user interface. Typical controls include toolbars, menu bars, text boxes, buttons, scroll bars, pictures and text. The properties and contents of controls in the interface are defined by tags or nodes, such as XML through <textview> 、 <imgview> 、 <videoview>The controls contained in the interface are specified by nodes such as <head> and <body>. A node corresponds to a control or attribute in the interface, and the node is presented as user-visible content after parsing and rendering. In addition, many applications, such as hybrid applications, usually also contain web pages in their interfaces. A web page, also known as a page, can be understood as a special control embedded in the application interface. A web page is a 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, such as HTML through <body>. 、 、 <video> 、 <canvas>To define the elements and attributes of a web page.

[0060] A common form of user interface is the graphical user interface (GUI), which refers to a user interface related to computer operations that uses graphics. It can be an icon, window, control, or other interface element displayed on the display of an electronic device. Controls can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets, and other visual interface elements.

[0061] First, in order to facilitate understanding of the embodiments of the present application, the technical problems that need to be solved by the embodiments of the present application are analyzed in detail below.

[0062] Currently, when you drag a control (such as an image, application window, document, text, etc. displayed on an electronic device), the control's drag shadow can move along with the touch point or mouse movement. Figure 1 , Figure 1 This is a schematic diagram of a drag event flow provided by an embodiment of the present application, such as Figure 1 As described, during this process, the drag process of the electronic device will listen to input events. Whenever a touch movement event (such as a drag event) for a control is heard, the drag shadow corresponding to the control will be redrawn at the coordinate point reported by the touch movement event to achieve the drag shadow following the touch movement effect.

[0063] Among them, whenever the drag process detects an input event for the control, for example, when the drag process detects a touch point or mouse move event (ACTION_MOVE) for the control, the drag process will distribute a drag position event (ACTION_DRAG_LOCATION) to the view control (View) of the current touch point or mouse coordinate point to notify the view control of the current touch point or mouse coordinate point that the drag is in progress. When the touch point disappears or the mouse is released, the drag process will detect an up event (ACTION_UP) and distribute a series of events such as a drag release event (ACTION_DROP) to the coordinate point corresponding to the current event to complete the drag.

[0064] However, please refer to the attached Figure 2 , Figure 2 This is a schematic diagram of a drag shadow provided by an embodiment of the present application. Figure 2 As shown, when dragging a control (for example, when dragging an image with a mouse), the positional relationship between the drag shadow and the mouse remains fixed. For example, the drag shadow always stays in sync with the mouse, which results in a jerky drag shadow movement. Furthermore, because the drag shadow movement effect is achieved by creating a Surface Control and then continuously setting the coordinates of the drag shadow through SurfaceControlTransaction SetPosition when it detects touch events, traditional animation effects (such as fade-in and fade-out) are not applicable.

[0065] Therefore, how can we optimize the drag shadow movement effect during a drag event so that the drag shadow's animation effect is less abrupt when dragging a control? By setting a drag shadow offset, the embodiment of the present application achieves a separation effect between the drag shadow and the drag coordinate point during dragging. Furthermore, by dynamically setting the offset, various animation effects can be achieved. For example, when the drag point moves quickly, increasing the offset achieves a high damping effect. When the drag point moves slowly, decreasing the offset achieves a low damping effect. When the drag point is stationary, there is no offset, achieving an effect where the drag shadow follows the touch coordinates. Another example: when a drag event is coming from another device, setting an offset so that the drag shadow is just hidden, then gradually reducing the offset to achieve a fade-in effect. When the drag event is moving away from another device, gradually increasing the offset until the drag shadow is just hidden, achieving a fade-out effect. Furthermore, since the embodiment of the present application only sets the drag shadow offset, it does not affect the original drag event distribution process; the drag event is still distributed to the touch point location.

[0066] Therefore, by implementing the method for realizing the drag shadow animation effect provided in the embodiment of the present application, the drag shadow movement effect can be optimized when a drag event occurs, so that when the control is dragged, the animation effect of the drag shadow movement effect is not too abrupt.

[0067] It should be noted that in the following embodiments of the present application, the one or more controls that can be dragged in the electronic device may include the following: pictures, text, documents, icons corresponding to various applications, and running windows corresponding to various applications, etc. Figure 3A , Figure 3A Schematic diagram of a draggable control in an electronic device provided by an embodiment of the present application. Figure 3A As shown, the picture 01 displayed on the display screen of the electronic device; or, when the electronic device is running an application, the application window 02, for example, a browser window running on the computer display screen; or, when the electronic device is running an application, the application icon 03 displayed on the display screen of the electronic device, for example, a document editing icon displayed on the computer display screen; or, when the electronic device is running an application, the image or text that can be dragged within the application. For example, please refer to the attached Figure 3B , Figure 3B This is a schematic diagram of another draggable control in an electronic device provided by an embodiment of the present application. Figure 3B As shown, in the email sending window running on the tablet display screen, the user can drag and drop a text message into the email application and send it to contact A: Petersmart@huawei.com.

[0068] It should also be noted that, in the following embodiments of the present application, the drag shadow corresponding to the control in the dragged one or more controls may include the following display forms in the electronic device: an image that is the same as the display image of the dragged one or more controls, an outline of the image of the dragged one or more controls, or a shadow used to indicate the one or more controls, etc. For example, please refer to the attached Figure 3C , Figure 3C Schematic diagram of a drag shadow displayed in an electronic device provided by an embodiment of the present application. Figure 3C As shown in (1), the image displayed by the control on the display screen is the same as the image displayed by dragging the shadow on the display screen; Figure 3C As shown in (2), the image displayed on the display screen by dragging the shadow is the outline of the image displayed on the display screen by the control; Figure 3C As shown in (3), the image displayed on the display screen when the shadow is dragged is the shadow of the image displayed by the control on the display screen.

[0069] Next, an exemplary electronic device involved in the embodiments of the present application is introduced.

[0070] Please refer to the attached Figure 4A , Figure 4A 17 is a structural diagram of an electronic device 100 provided in an embodiment of the present application, wherein 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, etc.

[0071] It should be understood that the structures illustrated in the embodiments of the present application do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0072] 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 memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or integrated into one or more processors.

[0073] The controller may be the nerve center and command center of the electronic device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0074] Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 110. If processor 110 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 110 latency, and thus improves system efficiency.

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

[0076] It is understood that the interface connection relationship between the modules illustrated in the embodiments of the present application is merely an illustrative illustration and does not constitute a structural limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may also adopt different interface connection methods from the above embodiments, or a combination of multiple interface connection methods.

[0077] The charging management module 140 is configured to receive charging input from a charger. The charger can be either a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 can receive charging input from the wired charger via the USB interface 130. In some wireless charging embodiments, the charging management module 140 can receive wireless charging input via the wireless charging coil of the electronic device 100. While charging the battery 142, the charging management module 140 can also provide power to the electronic device via the power management module 141.

[0078] 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 provides power to the processor 110, the internal memory 121, the external memory, the display 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 count, and battery health status (leakage, impedance). 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.

[0079] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

[0080] Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In other embodiments, the antennas can be used in conjunction with a tuning switch.

[0081] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G 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.

[0082] The modem processor may include a modulator and a demodulator. 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 provided in the same device as the mobile communication module 150 or other functional modules.

[0083] 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, frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, frequency modulate it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0084] 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), BT, GNSS, WLAN, NFC, FM, and / or IR technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a BeiDou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite-based augmentation system (SBAS).

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

[0086] Display screen 194 is used to display images, videos, and the like. Display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a MiniLED, a MicroLED, a Micro-OLED, or a quantum dot light-emitting diode (QLED). In some embodiments, electronic device 100 may include one or N display screens 194, where N is a positive integer greater than one.

[0087] The display screen 194 is used to display an exemplary user interface provided in the subsequent embodiments of this application. Detailed description of the user interface can be found below.

[0088] Specifically, in an embodiment of the present application, the display screen 194 may be used to display one or more controls, as well as an animation effect corresponding to a drag shadow when the one or more controls are dragged.

[0089] The electronic device 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.

[0090] The ISP processes data fed back by camera 193. For example, when taking a photo, the shutter is opened, and light is transmitted through the lens to the camera's photosensitive element. The light signal is converted into an electrical signal, which is then passed to the ISP for processing and converted into a visible image. The ISP can also perform algorithmic optimization on image noise, brightness, and skin tone. It can also optimize parameters such as exposure and color temperature of the captured scene. In some embodiments, the ISP can be located within camera 193.

[0091] 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 light signal into an electrical signal, and then passes the electrical signal to the ISP for conversion 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.

[0092] The digital signal processor is used to process digital signals. In addition to processing digital image signals, it can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0093] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. This allows electronic device 100 to play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, and MPEG4.

[0094] The NPU, or Neural-Network Processing Unit, draws on the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, to rapidly process input information and continuously self-learn. The NPU enables intelligent cognitive applications in electronic device 100, such as image recognition, face recognition, speech recognition, and text comprehension.

[0095] 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 via the external memory interface 120 to implement data storage functions. For example, files such as music and videos can be stored on the external memory card.

[0096] The internal memory 121 can be used to store computer executable program codes, which include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area can 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 can 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.

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

[0098] The audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. The audio module 170 can also be used to encode and decode audio signals. In some embodiments, the audio module 170 can be provided in the processor 110, or some functional modules of the audio module 170 can be provided in the processor 110.

[0099] The speaker 170A, also called a "speaker," is used to convert audio electrical signals into sound signals. The electronic device 100 can listen to music or make hands-free calls through the speaker 170A.

[0100] The receiver 170B, also called a "handset", is used to convert audio electrical signals into sound signals. When the electronic device 100 receives a call or voice message, the voice can be heard by placing the receiver 170B close to the human ear.

[0101] Microphone 170C, also known as "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can speak by putting their mouth close to the microphone 170C to input the sound signal into the microphone 170C. The electronic device 100 can be provided with at least one microphone 170C. In other embodiments, the electronic device 100 can be provided with two microphones 170C, which can not only collect sound signals but also realize noise reduction function. In other embodiments, the electronic device 100 can also be provided with three, four or more microphones 170C to realize sound signal collection, noise reduction, and identification of sound sources, and realize directional recording function, etc.

[0102] The headphone jack 170D is used to connect a wired headphone and can be the USB interface 130 or a 3.5mm open mobile terminal platform (OMTP) standard interface or a cellular telecommunications industry association of the USA (CTIA) standard interface.

[0103] Pressure sensor 180A is used to sense pressure signals and convert them into electrical signals. In some embodiments, pressure sensor 180A can be located on display screen 194. There are many types of pressure sensors 180A, such as resistive, inductive, and capacitive. A capacitive pressure sensor can include at least two parallel plates made of conductive material. When force is applied to pressure sensor 180A, the capacitance between the electrodes changes. Electronic device 100 determines the intensity of the pressure based on this change in capacitance. When a touch operation is applied to display screen 194, electronic device 100 detects the intensity of the touch operation based on pressure sensor 180A. Electronic device 100 can also calculate the touch location based on the detection signal from pressure sensor 180A. In some embodiments, touch operations applied to the same touch location but with different touch operation intensities can correspond to different operation instructions. For example, when a touch operation with an intensity less than a first pressure threshold is applied to a short message application icon, a command to view short messages is executed. When a touch operation with an intensity greater than or equal to the first pressure threshold is applied to a short message application icon, a command to create a new short message is executed.

[0104] The gyro sensor 180B may be used to determine the motion posture of the electronic device 100 .

[0105] The air pressure sensor 180C is used to measure air pressure.

[0106] The magnetic sensor 180D includes a Hall sensor.

[0107] Accelerometer 180E can detect the magnitude of acceleration of electronic device 100 in all directions (generally three axes). It can also detect the magnitude and direction of gravity when electronic device 100 is stationary. It can also be used to identify the electronic device's posture, enabling applications such as switching between landscape and portrait modes and pedometers.

[0108] The distance sensor 180F is used to measure distance.

[0109] The proximity light sensor 180G may include, for example, a light emitting diode (LED) and a light detector such as a photodiode.

[0110] The ambient light sensor 180L is used to sense the brightness of the ambient light.

[0111] The fingerprint sensor 180H is used to collect fingerprints. The electronic device 100 can use the collected fingerprint characteristics to implement fingerprint unlocking, access application locks, fingerprint photography, fingerprint call answering, etc.

[0112] The temperature sensor 180J is used to detect temperature. In some embodiments, the electronic device 100 uses the temperature detected by the temperature sensor 180J to execute a temperature processing strategy.

[0113] The touch sensor 180K is also called a "touch panel." The touch sensor 180K can be disposed on the display screen 194. The touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen." The touch sensor 180K is used to detect touch operations applied thereto or in the vicinity thereof. The touch sensor can transmit the detected touch operations to the application processor to determine the type of touch event. Visual output related to the touch operations can be provided via the display screen 194. In other embodiments, the touch sensor 180K can also be disposed on the surface of the electronic device 100, at a location different from that of the display screen 194.

[0114] For example: In an embodiment of the present application, the touch sensor 180K can detect a drag operation on one or more controls. The drag operation can be used to move the one or more controls from one position to another. Among them, the drag operation can be a move operation after a touch operation on one or more controls that exceeds a preset time, a move operation after a heavy pressure operation that exceeds a preset time, and the like. For example, a touch operation is performed on a control for a long time (exceeding a preset time), and in response to the touch operation, the control can be dragged to move. The user operation can also have other implementation forms, for example, it can also be an operation of moving after double-clicking one or more notification messages, and the like. The embodiment of the present application does not impose specific restrictions on this. For the specific implementation of the user operation, please refer to the detailed description of the subsequent method embodiments, which will not be repeated here.

[0115] For another example: In the embodiment of the present application, an external input device, such as a wired mouse, a wireless mouse, a Bluetooth mouse, or the like, can be connected via the universal serial bus (USB) interface 130, the wireless communication module 160, the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, and the like, and then a drag command can be input through the input device to control one or more controls to move from one position to another. For example: after clicking a control multiple times continuously or for a long time (exceeding a preset time) with the mouse, the control can be dragged to move. This user operation can also be implemented in other ways, for example: it can also be implemented by receiving a drag command from a Bluetooth input device to the control through a Bluetooth interface, so that the control moves, and so on.

[0116] For another example: In an embodiment of the present application, a user's gestures, voice commands, etc. can also be recognized through a camera, an infrared sensor, voice recognition, etc., and then a drag command input by the user can be received to control one or more controls to move from one position to another. For example: a user's gestures are recognized by a camera, and then a drag command of the user to one or more controls is recognized, and the control is dragged to move. This embodiment of the present application does not limit this. For the specific implementation of the user operation, please refer to the detailed description of the subsequent method embodiment, which will not be repeated here.

[0117] In an embodiment of the present application, the processor 110 can respond to a user operation on one or more controls and, when dragging one or more controls, set the offset of the drag shadow according to a certain strategy, so that when the one or more controls are dragged, the corresponding drag shadow's movement animation effect is not too abrupt, and does not affect the original distribution process of the drag event. The drag event will still be distributed to the drag point. The specific implementation of the user operation received by the electronic device can be referred to the relevant description of the subsequent embodiments and will not be repeated here.

[0118] In the embodiments of the present application, display screen 194 may be used to display an exemplary user interface provided in subsequent embodiments. A detailed description of the user interface is provided below. Specifically, display screen 194 may be used to display one or more controls, as well as an animation effect corresponding to a drag shadow when the one or more controls are dragged.

[0119] The bone conduction sensor 180M can obtain vibration signals. In some embodiments, the bone conduction sensor 180M can obtain vibration signals from the vibrating bones of the human body. The bone conduction sensor 180M can also contact the human pulse to receive blood pressure pulse signals. In some embodiments, the bone conduction sensor 180M can also be set in headphones to form bone conduction headphones. The audio module 170 can parse out voice signals based on the vibration signals of the vibrating bones of the human body obtained by the bone conduction sensor 180M to implement voice functions. The application processor can parse heart rate information based on the blood pressure pulse signals obtained by the bone conduction sensor 180M to implement heart rate detection functions.

[0120] The buttons 190 include a power button, a volume button, and the like. The buttons 190 may be mechanical buttons or touch buttons. The electronic device 100 may receive key inputs and generate key signal inputs related to user settings and function control of the electronic device 100.

[0121] Motor 191 can generate vibration prompts. Motor 191 can be used for incoming call vibration prompts, and can also be used for touch vibration feedback. For example, touch operations acting on different applications (such as taking pictures, audio playback, etc.) can correspond to different vibration feedback effects. For touch operations acting on different areas of the display screen 194, motor 191 can also correspond to different vibration feedback effects. Different application scenarios (for example: time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.

[0122] The indicator 192 may be an indicator light, which may be used to indicate the charging status, power level changes, messages, missed calls, notifications, etc.

[0123] The SIM card interface 195 is used to connect a SIM card. The SIM card can be connected to or disconnected from the electronic device 100 by inserting it into or removing it 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.

[0124] The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. This embodiment of the application takes the Android system of the layered architecture as an example to illustrate the software structure of the electronic device 100. Figure 4B , Figure 4B This is a software structure block diagram of an electronic device 100 provided in an embodiment of the present application.

[0125] It is understandable that the software structure block diagram illustrated in the embodiment of the present application does not constitute a specific limitation on the software structure block diagram of the electronic device 100.

[0126] A layered architecture divides software into several layers, each with distinct roles and responsibilities. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers: the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer.

[0127] The application layer can include a series of application packages.

[0128] like Figure 4B As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc.

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

[0130] like Figure 4B 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.

[0131] The window manager is used to manage window programs. The window manager can obtain the display size, determine whether there is a status bar, lock the screen, take screenshots, etc.

[0132] Content providers are used to store and retrieve data and make it accessible to applications. The data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0133] The view system includes visual controls, such as those for displaying text and images. The view system is used to build applications. A display interface can consist of one or more views. For example, a display interface containing a text notification icon might include a view for displaying text and a view for displaying images.

[0134] The phone manager is used to provide communication functions of the electronic device 100, such as management of call status (including answering, hanging up, etc.).

[0135] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0136] The Notification Manager allows applications to display notifications in the status bar. These messages can be displayed briefly and then disappear automatically without user interaction. For example, the Notification Manager is used to notify users of completed downloads and message reminders. The Notification Manager can also display notifications in the top status bar of the system as icons or scrolling text, such as notifications from background applications, or as dialog windows on the screen. Examples include text messages in the status bar, beeps, vibrations on electronic devices, and flashing indicator lights.

[0137] Android Runtime includes core libraries and a virtual machine. Android runtime is responsible for scheduling and management of the Android system.

[0138] The core library consists of two parts: one is the function that needs to be called by the Java language, and the other is the Android core library.

[0139] The application layer and application framework layer run in a virtual machine. The virtual machine executes Java files in the application layer and application framework layer as binary files. The virtual machine manages object lifecycles, stack management, thread management, security and exception management, and garbage collection.

[0140] The system library can include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0141] The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications.

[0142] The media library supports playback and recording of a variety of common 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, G.264, MP3, AAC, AMR, JPG, PNG, etc.

[0143] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0144] A 2D graphics engine is a drawing engine for 2D drawings.

[0145] 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.

[0146] like Figure 4B The software system shown involves application presentation using sharing capabilities (such as gallery, file manager), instant sharing module that provides sharing capabilities, print service (print service) and print spooler that provide printing capabilities, as well as the application framework layer that provides printing framework, WLAN service, Bluetooth service, and the kernel and bottom layer that provide WLAN Bluetooth capabilities and basic communication protocols.

[0147] The following describes the application scenarios involved in the embodiments of the present application and the user interface (UI) embodiments in the application scenarios. It should be noted that the user interface mentioned in the embodiments of the present application can be understood as a window for dragging one or more controls in the present application.

[0148] In the embodiment of the present application, the electronic device can respond to the drag operation (such as Figure 1 As shown), one or more controls displayed on the display screen are moved from one position to another. In this embodiment of the present application, there is no restriction on the display method of one or more controls and their corresponding drag shadows during the dragging process.

[0149] The following lists several ways of displaying one or more controls and their corresponding drag shadows: wherein the image of the drag shadow is consistent with the display image of the one or more controls being dragged.

[0150] (1) One or more controls are not displayed, and the corresponding drag shadow is displayed. Figure 5A , Figure 5A It is a user interface that displays a group of one or more controls during the dragging process provided by the embodiment of the present application. Figure 5A As shown in (1), the user drags the image on the computer desktop to the right with the mouse. Figure 5A As shown in (2), the user can observe the image of the dragged control, that is, the drag shadow moves with the movement of the drag point. During this process, the dragged control is not displayed on the display screen.

[0151] (2) One or more controls and their corresponding drag shadows are displayed together. Figure 5B , Figure 5B This is another set of one or more controls provided by the embodiment of the present application that are displayed during the dragging process. Figure 5B As shown in (1), the user drags the image on the computer desktop to the right with the mouse. Figure 5B As shown in (2), the user can observe the image of the dragged control, that is, the drag shadow moves with the movement of the drag point. During this process, the display image of the dragged control is still displayed at the original position on the display screen.

[0152] In order to optimize the drag shadow movement effect when a drag event occurs, so that the drag shadow movement animation effect is not too abrupt when the control is dragged, the following two embodiments are divided into two examples to illustrate the implementation methods of the drag shadow animation effect provided by several embodiments of the present application in different application scenarios.

[0153] (1) Example 1:

[0154] Application scenario 1: Drag operations within the same display screen.

[0155] Please refer to the attached Figure 6 , Figure 6 This is a user interface of an electronic device provided by an embodiment of the present application, such as Figure 6 As shown, the user interface of an electronic device held by a user includes an image 01 and various application icons 02. The application icons 02 include an application 03 that is obscured by the image 01. To open and run the application 03 obscured by the image 01, the user needs to move the image 01 from its current position so that the obscured application 03 is displayed in the user interface. Double-clicking or touching an application icon 02 opens and runs the application.

[0156] In application scenario 1, within the same display screen, the electronic device can detect a drag instruction acting on one or more controls in the user interface in the user interface, and in response to the drag instruction, move the one or more controls from one position to another, and according to a certain strategy, make the drag shadows of the one or more controls realize various animation effects during the dragging process.

[0157] The method provided in Example 1 is described below.

[0158] 1. Touch input and drag commands.

[0159] In the following embodiments of the present application, a drag instruction is a user operation on one or more controls using a drag point detected by the electronic device via the touch sensor 180K, indicating that the one or more controls are to be dragged from one location to another. For example, the user operation may be touching the one or more controls to move them, wherein the touch state may be maintained during the movement process and the touch state may be terminated when the control reaches the target location.

[0160] It should be noted that the embodiment of the present application does not limit the touch mode of the drag command. The touch mode may include but is not limited to the following: direct touch by the user, indirect touch by the user through a touch device (such as a stylus, touch gloves, etc.), etc.

[0161] In an embodiment of the present application, the electronic device can detect a drag instruction for one or more controls through a drag point; in response to the drag instruction, the one or more controls are controlled to follow the movement of the drag point, that is, a drag event is triggered. Then, the electronic device can obtain the drag coordinates and corresponding drag information of the one or more controls in the process of following the movement of the drag point, and the drag information includes one or more of the drag speed, the drag acceleration, and the curvature change rate of the drag trajectory; according to the drag information, the offset corresponding to the drag shadow of the one or more controls is calculated, and the drag shadow is the display image corresponding to the one or more controls; according to the offset and the drag coordinates, the display of the drag shadow is controlled. The drag coordinates can be the coordinates of the drag trajectory of one or more controls in the process of following the movement of the drag point. For example: obtain the coordinates corresponding to the drag point at each preset time interval in the process of following the movement of the drag point.

[0162] Please refer to the attached Figure 7 , compared with the above Figure 1 The drag event flow diagram shown in Figure 7 The drag event process shown in the figure can change the displacement of the drag shadow relative to the drag point by changing the offset. This can separate the drag shadow from the touch point to achieve the corresponding animation effect during the drag. Figure 7 As shown, the electronic device can monitor the drag process. First, the input module calls back the input event to the drag and drop control (Drag Drop Controller) to ensure that the input module sends each touch movement event to the drag and drop control through the callback function (equivalent to the correspondence between the drag information and the offset in the embodiment of the present application). Secondly, when the user operation triggers the touch movement event, the drag and drop control sends the x, y coordinates of the drag point to the drag state (Drag State), that is, the drag coordinates. The drag state can control the drag state of the drag shadow corresponding to one or more controls. Then, the electronic device is set to calculate the offset corresponding to the drag shadow of the one or more controls based on the drag information, and send the calculated offset to the drag state, so that the offset is accumulated with the x, y coordinates of the drag point to obtain new coordinates. Finally, the drag state sends the calculated new coordinates to the surface control (SurfaceControl) to set the coordinates of the drag shadow, so that various animation effects can be achieved by dynamically setting the offset.

[0163] For information about how an electronic device obtains the drag coordinates of one or more controls following the drag point and the corresponding drag information, please refer to the attached Figure 8 , Figure 8 This is a schematic diagram of the implementation process of another drag shadow animation effect provided in an embodiment of the present application.

[0164] Specifically, such as Figure 8 The drag event process shown in the figure can change the displacement of the drag shadow relative to the drag point by changing the offset. This can separate the drag shadow from the touch point to achieve the corresponding animation effect during the drag. Figure 8 As shown, compared with the above Figure 7 The schematic diagram of the implementation process of the drag shadow animation effect shown in the figure shows that the electronic device can always monitor the drag process. When the user continuously drags one or more controls, the electronic device can frequently and continuously monitor new movement events, calculate a new appropriate offset, and send the calculated new offset to the drag state, so that the new offset is accumulated with the x and y coordinates of the drag point to obtain new coordinates. Finally, the drag state sends the calculated new coordinates to the surface control (SurfaceControl) to set the coordinates of the drag shadow. This can set the coordinates of the drag shadow continuously according to continuous drag events, so that the drag shadow can achieve various animation effects.

[0165] It is understandable that the drag event of the entire drag command is distributed to the drag point. In other words, it can be considered that the dragged object (i.e., one or more controls) is still at the drag point (i.e., the touch point). However, the animation of the dragged object (i.e., the drag shadow) is offset according to the drag information. This gives the user a visual feedback of a damping effect.

[0166] It should be noted that before dragging one or more controls, it is necessary to first set a preset drag strategy so that the electronic device can calculate the offset corresponding to the drag shadow of the one or more controls based on the drag information, wherein the preset drag strategy includes the correspondence between the drag information and the offset. By pre-setting the preset drag strategy, the offset is dynamically determined according to the current push information, and various forms of animation effects can be achieved during the dragging process. Among them, the preset drag strategy includes the correspondence between the drag information and the offset, and the correspondence can be determined by querying a pre-stored mapping table or by a pre-stored calculation formula. For example: please refer to Table 1 below, which is a mapping relationship table provided in an embodiment of the present application, which is used to obtain the offset corresponding to the drag information based on the drag information.

[0167] Table 1: Pre-stored mapping relationship table

[0168] < / canvas> < / video> Offset value Drag speed range 1 Drag speed range 2 … Drag speed range Q Drag acceleration range 1 0 … … 5 Drag acceleration range 2 … … … … … … … … … Drag acceleration range P 5 … … 10

[0169] In Table 1 above, the drag acceleration interval indicates that the drag acceleration is divided into P intervals according to a certain strategy, and each interval has its corresponding offset. Similarly, the drag speed interval indicates that the drag speed is divided into Q intervals according to a certain strategy, and each interval has its corresponding offset. As shown in Table 1, when the drag speed of one or more controls is in the drag speed interval Q and the drag acceleration is in the drag acceleration interval P, the offset value of the one or more controls = 10. Therefore, the drag shadow of the one or more controls is displayed at a position that is offset 10 units in the opposite direction of the drag direction based on the original basis.

[0170] It is understood that the above table indicates an exemplary table in the embodiment of the present application and is not limited to the two-dimensional table. There are other types of pre-stored mapping tables for storing the correspondence between the drag information and the offset. The embodiment of the present application does not make specific limitations on this.

[0171] Optionally, the drag information includes the drag speed; the preset drag strategy includes the drag speed being proportional to the offset value. For example: when the drag point moves at high speed, the offset of the drag shadow in the opposite direction of the moving trajectory is greater than the offset of the drag shadow in the opposite direction of the moving trajectory when the drag point moves at low speed; in this way, a high damping effect can be achieved. The faster the speed, the greater the distance between the drag shadow and the drag point within a certain range. On the contrary, the slower the speed, the closer the distance between the drag shadow and the drag point within a certain range, until the drag point is stationary, the drag shadow has no offset, and the drag shadow is attached to the touch coordinate effect. This method of dynamically increasing the offset according to the drag speed can optimize the animation effect of the drag shadow during the dragging process, so that it is not stiff when moving. For example: Please refer to the attached Figure 9 , Figure 9 This is a schematic diagram of implementing different offsets according to different drag speeds provided by the present application. Using an external input device, for example, a mouse, drag a picture on the screen, where the position of the arrow on the screen is the position of the drag point. Figure 9 As shown, when the image is dragged from the left end to the right end, during the entire dragging process, the dragging speed at the starting position and the ending position is low, and the offset corresponding to the drag shadow is also small. The dragging speed at the middle position is high, and the offset corresponding to the drag shadow is also large.

[0172] Optionally, the drag information includes the drag acceleration; the preset drag strategy includes the drag acceleration being proportional to the value of the offset. For example: when the drag point accelerates, the offset in the opposite direction of the moving trajectory is gradually increased; in this way, a high damping effect can be achieved, that is, the inertial animation effect of the drag shadow following the moving trajectory of the drag point. When the drag point decelerates, the offset in the opposite direction of the moving trajectory is gradually reduced; in this way, a low damping effect can be achieved, that is, the inertial animation effect of the drag shadow gradually catching up with the drag point. When the drag point is stationary, there is no offset, and the drag shadow is attached to the touch coordinate effect. This method of dynamically increasing the offset can optimize the animation effect of the drag shadow so that it is not stiff when moving.

[0173] Optionally, the drag information includes the curvature change rate of the drag trajectory; the preset drag strategy includes calculating the offset value based on the curvature change rate of the drag trajectory and a preset formula. When the drag point drags one or more controls and the drag trajectory is a curve, the offset of the drag shadow can change with the change of the curve change rate. It should be noted that the preset formula can be used to map the magnitude of the curvature change rate and the offset value. For example: when the drag point curve change rate changes and accelerates the movement, the offset in the outward direction perpendicular to the tangent of the moving trajectory is gradually increased; in this way, a high damping effect of being thrown in and out can be achieved. This method of dynamically increasing the offset can optimize the animation effect of the drag shadow so that it is not stiff when moving.

[0174] Optionally, controlling the display of the drag shadow according to the offset and the drag coordinates includes: accumulating the drag coordinates and the offset to obtain the accumulated drag coordinates; and controlling the drag shadow to be displayed at the accumulated drag coordinates. It should be noted that the drag coordinates are coordinates used to draw the drag shadow. When one or more controls follow the movement of the drag point, the moving path and moving direction during the movement can be obtained, and the drag coordinates can be determined based on the moving path. For example: the drag point moves from point A to point B, and accordingly, the drag shadow can also move from point A to point B along the trajectory. Drawing the drag shadow through coordinates will make the drag shadow more accurate, and the x and y coordinates used to draw the drag shadow introduce offsets offsetX and offsetY respectively. By changing the offsets, the movement effect of the drag shadow during the dragging process can be dynamically changed.

[0175] Some UI embodiments implemented on the electronic device 100 are introduced below.

[0176] Based on the above scenario, please refer to the attached Figure 10 , Figure 10 This is a schematic diagram of a dragging user interface for dragging a control provided in an embodiment of the present application.

[0177] Specifically, the drag information is set to include the drag acceleration; the preset drag strategy includes the drag acceleration being proportional to the value of the offset. Figure 10 As shown, the user interface of the electronic device 100 held by the user includes a picture 01 and icons 02 of various applications. The icons 02 of various applications include application 03 which is blocked by the picture 01. The electronic device 100 receives the user's drag instruction for the picture 01. Figure 11 , Figure 11 This is another dragging user interface diagram for dragging a control provided by an embodiment of the present application. Figure 11 As shown in (1), when picture 01 is dragged, the drag shadow of picture 01 is offset from the drag point according to the drag speed, as shown in Figure 11 As shown in (2), after the picture 01 is dragged to the target position, the drag shadow also reaches the target position. At this time, the icon of the application 03 can be touched to open and run the application.

[0178] In this scenario, the electronic device 100 detects a rightward drag instruction for the image 01 through the drag point (i.e., the touch point where the user touches the display screen) through the touch sensor 180K (e.g., the touch sensor 180K recognizes that the user makes a rightward touch operation at the image 01 on the display screen and maintains the touch state with the image 01); in response to the rightward drag instruction, the electronic device 100 can control the image 01 to follow the drag point according to the recognized touch operation. Moreover, in the process of the image 01 following the movement of the drag point, the electronic device 100 obtains the drag coordinates and corresponding drag information of the image 01 following the movement of the drag point; the electronic device 100 calculates the offset corresponding to the drag shadow of the control based on the drag information, and controls the display of the drag shadow on the display screen based on the offset and the drag coordinates.

[0179] Please refer to the attached Figure 12 , Figure 12 This is a schematic diagram of a dragging user interface for dragging multiple controls provided in an embodiment of the present application.

[0180] Specifically, the drag information is set to include the drag acceleration; the preset drag strategy includes the drag acceleration being proportional to the value of the offset. Figure 12 As shown in FIG. 1 , the user's electronic device 100 displays icons 02 of various application programs in its user interface. The electronic device 100 receives a user's drag command for two icons in the icons 02 of various application programs. During the dragging of the two icons, the drag shadows of the two icons are offset from the drag point according to the drag speed, as shown in FIG. Figure 12 As shown in (2), after the picture 01 is dragged to the target position, the drag shadow also reaches the target position. At this time, the two icons can be clicked to open and run the application.

[0181] In this scenario, the electronic device 100 detects through the touch sensor 180K a rightward drag instruction of two icons in the icons 02 of various applications through a drag point (i.e., a touch point where the user touches the display screen) (e.g., the touch sensor 180K recognizes that the user has selected two icons in the icons 02 of various applications on the display screen, and performs a touch operation to move to the right and maintains a touch state with the picture 01); in response to the rightward drag instruction, the electronic device 100 can control the two icons in the icons 02 of various applications to move following the drag point according to the recognized touch operation. Moreover, in the process of the two icons in the icons 02 of various applications moving following the drag point, the electronic device 100 obtains the drag coordinates and corresponding drag information of the two icons in the icons 02 of various applications moving following the drag point; the electronic device 100 calculates the offset corresponding to the drag shadow of the one control based on the drag information, and controls the display of the drag shadow on the display screen based on the offset and the drag coordinates. In this process, two icons among the dragged icons 02 of various application programs and their corresponding drag shadows are displayed together on the display screen.

[0182] It should be noted that the implementation methods of the above application scenarios are only several exemplary implementation methods in the embodiments of the present application. The application scenarios in the embodiments of the present application include but are not limited to the above application scenarios.

[0183] 2. Enter the drag command through the input device.

[0184] In the following embodiments of the present application, a drag instruction is an instruction sent to an electronic device via an external input device connected to a universal serial bus (USB) interface 130, a wireless communication module 160, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, etc. When the electronic device receives a user operation on one or more controls, it is used to instruct to drag one or more controls from one position to another. For example, the user operation can be to touch one or more controls and then move them, wherein the touch state is maintained during the movement process and the touch is ended after reaching the target position.

[0185] It should be noted that the embodiments of the present application do not limit the implementation method of the input drag instruction. The input method may include, but is not limited to, the following: using a mouse to click a control multiple times continuously or for a long time (exceeding a preset time) and then dragging the control to move. The user operation may also be implemented in other forms, for example, receiving a drag instruction from a Bluetooth input device to the control through a Bluetooth interface, thereby moving the control, etc.

[0186] Specifically, in the embodiment of the present application, the method for implementing the drag shadow animation effect in the electronic device can refer to the above Figure 7-12 The relevant description of the illustrated embodiment will not be repeated in the embodiments of this application.

[0187] Some UI embodiments implemented on the electronic device 100 are introduced below.

[0188] Based on the above scenario, please refer to the attached Figure 13-15 , Figure 13-15 This is a schematic diagram of a dragging user interface for dragging a control provided by an embodiment of the present application.

[0189] Specifically, the drag information is set to include the drag speed; the preset drag strategy includes the drag speed being proportional to the value of the offset. Figure 13 As shown, there is a picture in the user interface of the electronic device 100 held by the user. The electronic device 100 receives the user's drag instruction for the picture. Figure 14 As shown in the figure, when the image is dragged, the drag shadow of the image is offset from the drag point according to the drag speed. Figure 15 As shown, Figure 15 The drag speed is greater than Figure 14 The drag speed shown in , so, as Figure 15 As shown, during the dragging process of the image, the drag shadow of the image is offset from the drag point according to the dragging speed. After the image is dragged to the target position, the drag shadow also reaches the target position.

[0190] As you can understand, when the drag point moves at high speed, a high damping effect is achieved by increasing the offset in the opposite direction of the movement trajectory, that is, the drag shadow follows the drag point's movement trajectory with an inertial animation effect. When the drag point moves at low speed, a low damping effect is achieved by reducing the offset in the opposite direction of the movement trajectory, that is, the drag shadow gradually catches up with the drag point with an inertial animation effect.

[0191] In this scenario, the electronic device 100 receives a drag command for the image through the input device (receives a click operation of the mouse on the image on the display screen to move to the right and maintains the click state with the image 01); in response to the right drag command, the electronic device 100 can control the image 01 to move along with the drag point according to the recognized user operation. Moreover, when the image 01 moves along with the drag point, the electronic device 100 obtains the drag coordinates and corresponding drag information of the image 01 as it moves along with the drag point; based on the drag information, the electronic device 100 calculates the offset corresponding to the drag shadow of the control, and controls the display of the drag shadow on the display according to the offset and the drag coordinates.

[0192] From the above Figure 5A-Figure 15 As can be seen from the description of the embodiment, by setting the drag shadow offset, the drag shadow is separated from the drag point during dragging. Furthermore, by dynamically setting the offset, various animation effects can be achieved. For example, by dynamically increasing the offset as the acceleration of the touch point increases, a damping animation effect can be achieved during dragging; by achieving an inertial effect where the drag shadow does not follow the touch point when the touch point begins to move, but then gradually catches up with the touch point. Furthermore, since the embodiment of the present application only sets the offset of the drag shadow corresponding to the dragged control, it does not affect the original distribution process of the drag event of the drag control, and the drag control will still be distributed to the touch point location.

[0193] (II) Example 2:

[0194] Application scenario 2: Drag operations on different display screens.

[0195] Please refer to the attached Figure 16 , Figure 16 This is a user interface of a group of electronic devices provided by the embodiment of the present application, such as Figure 6 As shown, the user has an image 01 in the user interface of an electronic device. Image 01 is currently displayed on one display screen (a first device), and the display screen to the right is another display screen (a second device). At this point, image 01 needs to be moved from the current display screen to the other display screen so that image 01 is displayed on the other display screen.

[0196] In application scenario 2, within different display screens, when the electronic device is dragged from one display screen to another in Figure 01, it can detect a drag instruction acting on one or more controls in the user interface, and in response to the drag instruction, move the one or more controls from one position to another, and according to a certain strategy, make the drag shadows of the one or more controls realize various animation effects during the dragging process.

[0197] The method provided in Example 1 is described below.

[0198] In the following embodiments of the present application, a drag instruction can be a user operation on one or more controls detected by the electronic device through the drag point through the touch sensor 180K, which is used to indicate that one or more controls are dragged from one position to another. For example, the user operation can be touching one or more controls to move, wherein the touch state can be maintained during the movement, and the touch is terminated after reaching the target position. The drag instruction can also be an instruction sent to the electronic device via an external input device connected to the universal serial bus (USB) interface 130, wireless communication module 160, antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, etc. When the electronic device receives a user operation on one or more controls, it is used to indicate that one or more controls are dragged from one position to another. For example, the user operation can be touching one or more controls and then moving them, wherein the touch state is maintained during the movement, and the touch is terminated after reaching the target position. It should be noted that the embodiments of the present application do not limit the implementation method of the drag instruction.

[0199] In the following embodiments of the present application, an electronic device may detect a drag instruction for one or more controls via a drag point; in response to the drag instruction, the electronic device may control the one or more controls to follow the drag point, i.e., trigger a drag event. The electronic device may then obtain the drag coordinates and corresponding drag information of the one or more controls as they follow the drag point; based on the drag information, calculate the offset corresponding to the drag shadow of the one or more controls, where the drag shadow is the display image corresponding to the one or more controls; and control the display of the drag shadow based on the offset and the drag coordinates.

[0200] Wherein, the drag information includes a first display identifier and a second display identifier, the first display identifier is used to identify the display screen of the first device, and the second display identifier is used to identify the display screen of the second device; the preset drag strategy includes: when the one or more controls enter the second device from the first device, the offset value corresponding to the drag shadow in the display screen of the first device gradually increases, and the offset value corresponding to the drag shadow in the display screen of the second device gradually decreases. For example: obtaining the drag information including the first display identifier and the second display identifier, then when shuttling devices, according to the time change (for example: reducing the offset value by a certain amount every millisecond) or according to the space change (for example: reducing the offset value by a certain amount every time the mouse moves 1 pixel), the strategy of gradually increasing the offset value corresponding to the drag shadow in the display screen of the first device and gradually reducing the offset value corresponding to the drag shadow in the display screen of the second device can be achieved, and the effect of gradually approaching the mouse pointer can be achieved.

[0201] It should be noted that the first device and the second device can be the same device, or two different electronic devices with which a communication connection is established, and this application does not make specific limitations. When the first device and the second device are the same device, the display screen of the first device and the display screen of the second device can be the main and sub-display screens of the same electronic device, such as the first display screen and the second display screen of a foldable screen mobile phone. When the first device and the second device are two different electronic devices with which a communication connection is established, the display screen of the first device and the display screen of the second device can be the display screens of two displays respectively connected to the same server.

[0202] Please refer to the attached Figure 17 , Figure 17 This is another implementation flow diagram of a drag shadow animation effect provided by an embodiment of the present application. Figure 7 The drag event flow diagram shown in Figure 17 The drag event process shown can change the displacement of the drag shadow relative to the drag point by changing the offset at each time point, thereby achieving the corresponding animation effect during the dragging period.

[0203] like Figure 17 As shown, the electronic device can monitor the drag process. First, the input module calls back the input event to the drag and drop controller to ensure that the input module sends each touch movement event to the drag and drop controller through the callback function. Secondly, when the user operation triggers the touch movement event, the drag and drop controller sends the x, y coordinates of the drag point to the drag state (DragState), that is, the drag coordinates. Compared with the above Figure 7 As shown in the flowchart of the implementation process of the drag shadow animation effect, the electronic device can monitor the drag process over time. When the user continuously drags one or more controls, the electronic device can periodically (every 1 millisecond) monitor new movement events, calculate a new appropriate offset, and send the calculated new offset to the drag state, so that the new offset is accumulated with the x and y coordinates of the drag point to obtain new coordinates. Finally, the drag state sends the calculated new coordinates to the surface control (SurfaceControl) to set the coordinates of the drag shadow. This can set the coordinates of the drag shadow continuously according to continuous drag events, so that the drag shadow can achieve various animation effects. Figure 17 The drag event flow shown can also change the displacement of the drag shadow relative to the drag point by changing the offset, thereby separating the drag shadow from the touch point to achieve the corresponding animation effect during the drag.

[0204] Some UI embodiments implemented on the electronic device 100 are introduced below.

[0205] Based on the above scenario, please refer to the attached Figures 18-20 , Figures 18-20 This is another set of dragging user interface diagrams for dragging a control provided by an embodiment of the present application.

[0206] Specifically, such as Figure 18 The display screen of the second device held by the user is shown. The electronic device 100 receives the user's drag command for the picture on the display screen corresponding to the first device, and needs to drag the picture from the display screen of the first device to the display screen of the second device. During the process of dragging the picture, when the cross-screen drag just occurs, the offset value is set to the width (or height) of the drag shadow, so that the drag shadow is just outside the edge of the screen and the user just can't see the drag shadow at this time. Figure 19 As shown, there is an offset between the drag speed and the drag point. That is, the center of the drag shadow can be gradually moved closer to the mouse pointer by changing the time (for example, reducing the offset value by a certain amount every millisecond) or by changing the space (for example, reducing the offset value by a certain amount every time the mouse moves 1 pixel). Figure 20 As shown, when the offset is reduced to 0, a gradual effect is completed. Figures 18-20 The process shown is reversed, which is a fade-out effect in the first device.

[0207] In this scenario, the electronic device 100 receives a drag instruction for the picture through the input device (receives a click operation of the mouse to move to the right on the picture on the display screen and maintains the click state with the picture 01); in response to the right drag instruction, the electronic device 100 can control the picture 01 to move following the drag point according to the recognized user operation. If the first display identifier and the second display identifier are obtained in the drag information, it means that the drag process is shuttled between devices, that is, displayed on different display screens. Moreover, in the process of picture 01 following the drag point shuttle, the electronic device 100 obtains the first display identifier and the second display identifier and the rest of the drag information, and calculates the offset corresponding to the drag shadow of the one control according to the strategy of gradually increasing the offset value corresponding to the drag shadow on the display screen of the first device and gradually decreasing the offset value corresponding to the drag shadow on the display screen of the second device, and controls the display of the drag shadow on different display screens according to the offset and the drag coordinates.

[0208] It should be noted that, for the remaining specific operation methods during the dragging process in Example 2, reference may be made to the relevant descriptions of the above embodiments.

[0209] The embodiment of the present application achieves a smooth drag shadow fade-in and fade-out effect through dynamic setting of the offset, providing users with a smoother and more natural multi-screen collaboration experience. For example, when a cross-screen drag just occurs, the offset value is set to the width (or height) of the drag shadow so that the drag shadow is just outside the edge of the screen. The user just can't see the drag shadow at this time. The center of the drag shadow can be gradually moved closer to the mouse pointer based on time changes (for example, reducing the offset value by a certain amount every millisecond) or based on spatial changes (for example, reducing the offset value by a certain amount every time the mouse moves 1 pixel).

[0210] It should also be noted that the implementation methods of the above application scenarios are only several exemplary implementation methods in the embodiments of this application. The application scenarios in the embodiments of this application include but are not limited to the above application scenarios.

[0211] See also Figure 21 , Figure 21 This is a flow chart of another method for implementing a drag shadow animation effect provided by an embodiment of the present application. This method can be applied to the above Figure 4A In the electronic device described in the embodiment, the electronic device 100 can be used to support and execute Figure 21 The method flow steps S301 to S305 are shown in FIG. Figure 21 The method may include the following steps S301 to S305 , which are described from the electronic device side.

[0212] Step S301: Detecting a drag instruction on one or more controls via a drag point.

[0213] Specifically, the electronic device detects a drag instruction for one or more controls through a drag point. After the electronic pen receives the user operation, it can detect that the user operation is a drag instruction for one or more controls. The drag point corresponds to the drag instruction. For example, when the drag instruction is a touch operation, the drag point is a touch point. It is understandable that the user operation can be an operation implemented by a touch operation, or an operation implemented by an input device, and this application does not specifically limit this.

[0214] Step S302: In response to the drag instruction, control one or more controls to move along with the drag point.

[0215] Specifically, the electronic device controls the one or more controls to move along with the drag point in response to the drag instruction. After the electronic device recognizes that the user operation is a drag instruction for one or more controls, it can control the one or more controls to move along with the drag point in response to the instruction.

[0216] Step S303: Obtain the drag coordinates and corresponding drag information of one or more controls in the process of following the movement of the drag point.

[0217] Specifically, the electronic device obtains the drag coordinates and corresponding drag information of one or more controls following the movement of the drag point, and the drag information includes one or more of the drag speed, drag acceleration, and curvature change rate of the drag trajectory. It is understandable that when one or more controls follow the movement of the drag point, the electronic device can obtain the drag coordinates, movement direction, movement trajectory, and drag information of the one or more controls following the movement of the drag point. The drag coordinates can be used to determine the coordinates of the drag shadow, the movement direction can determine the offset direction of the drag shadow relative to the drag coordinates, and the drag information can be used to determine the offset of the drag shadow.

[0218] Step S304: Calculate the offset corresponding to the drag shadow of one or more controls according to the drag information.

[0219] Specifically, the electronic device calculates the offset corresponding to the drag shadow of one or more controls based on the drag information. There is a corresponding relationship between the offset and the drag information, and the corresponding relationship can be implemented through a callback function. This embodiment of the present application does not specifically limit this.

[0220] Optionally, calculating the offset corresponding to the drag shadow of the one or more controls based on the drag information includes: calculating the offset corresponding to the drag shadow of the one or more controls based on a preset drag strategy based on the drag information, wherein the preset drag strategy includes a correspondence between the drag information and the offset. In an embodiment of the present application, by dynamically determining the offset based on the current drag information using a pre-set preset drag strategy, various animation effects can be achieved during the dragging process.

[0221] Optionally, the drag information includes the drag speed; the preset drag strategy includes the drag speed being proportional to the value of the offset. For example: when the drag point moves at high speed, the offset of the drag shadow in the opposite direction of the moving trajectory is greater than the offset of the drag shadow in the opposite direction of the moving trajectory when the drag point moves at low speed; in this way, a high damping effect can be achieved. The faster the speed, the greater the distance between the drag shadow and the drag point within a certain range. On the contrary, the slower the speed, the closer the distance between the drag shadow and the drag point within a certain range, until the drag point is stationary, the drag shadow has no offset, and the drag shadow is attached to the touch coordinates. This method of dynamically increasing the offset according to the drag speed can optimize the animation effect of the drag shadow during the dragging process, so that it is not stiff when moving. For example: through an external input device, taking a mouse as an example, drag a picture on the screen, where the position of the arrow on the screen is the position of the drag point. As shown in the above embodiment 1, when the picture is dragged from the left end to the right end, during the entire dragging process, the dragging speed at the starting position and the dragging speed at the ending position are lower, and the offset corresponding to the drag shadow is also smaller, while the dragging speed at the middle position is higher, and the offset corresponding to the drag shadow is also larger.

[0222] Optionally, the drag information includes the drag acceleration; the preset drag strategy includes the drag acceleration being proportional to the value of the offset. For example: when the drag point accelerates, the offset in the opposite direction of the moving trajectory is gradually increased; in this way, a high damping effect can be achieved, that is, the inertial animation effect of the drag shadow following the moving trajectory of the drag point. When the drag point decelerates, the offset in the opposite direction of the moving trajectory is gradually reduced; in this way, a low damping effect can be achieved, that is, the inertial animation effect of the drag shadow gradually catching up with the drag point. When the drag point is stationary, there is no offset, and the drag shadow is attached to the touch coordinate effect. This method of dynamically increasing the offset can optimize the animation effect of the drag shadow so that it is not stiff when moving.

[0223] Optionally, the drag information includes the curvature change rate of the drag trajectory; the preset drag strategy includes calculating the offset value based on the curvature change rate of the drag trajectory and a preset formula. When the drag point drags one or more controls and the drag trajectory is a curve, the offset of the drag shadow can change with the change of the curve change rate. It should be noted that the preset formula can be used to map the magnitude of the curvature change rate and the offset value. For example: when the drag point curve change rate changes and accelerates the movement, the offset in the outward direction perpendicular to the tangent of the moving trajectory is gradually increased; in this way, a high damping effect of being thrown in and out can be achieved. This method of dynamically increasing the offset can optimize the animation effect of the drag shadow so that it is not stiff when moving.

[0224] In one possible implementation, the drag information includes a first display identifier and a second display identifier, wherein the first display identifier is used to identify the display screen of the first device, and the second display identifier is used to identify the display screen of the second device; the preset drag strategy includes: when the one or more controls enter the second device from the first device, the offset value corresponding to the drag shadow in the display screen of the first device gradually increases, and the offset value corresponding to the drag shadow in the display screen of the second device gradually decreases. For example: when shuttling devices, according to time changes (for example: reducing the offset value by a certain amount every millisecond), or according to spatial changes (for example: reducing the offset value by a certain amount every time the mouse moves 1 pixel), the effect of the center of the drag shadow gradually approaching the mouse pointer is achieved.

[0225] Step S305: Control the display of the drag shadow according to the offset and the drag coordinates.

[0226] Specifically, the electronic device controls the display of the drag shadow based on the offset and the drag coordinates. It is understood that the electronic device can control the display of the drag shadow on the display screen based on a series of calculated coordinates to achieve various animation effects. By dynamically setting the offset, a smooth drag shadow damping animation effect is achieved. This is globally adaptable. Any drag and drop operation across the entire system can naturally achieve a smooth drag experience.

[0227] Optionally, controlling the display of the drag shadow according to the offset and the drag coordinates includes: accumulating the drag coordinates and the offset to obtain the accumulated drag coordinates; and controlling the drag shadow to be displayed at the accumulated drag coordinates. It should be noted that the drag coordinates are coordinates used to draw the drag shadow. When one or more controls follow the movement of the drag point, the moving path and moving direction during the movement can be obtained, and the drag coordinates can be determined based on the moving path. For example: the drag point moves from point A to point B, and accordingly, the drag shadow can also move from point A to point B along the trajectory. Drawing the drag shadow through coordinates will make the drag shadow more accurate, and the x and y coordinates used to draw the drag shadow introduce offsets offsetX and offsetY respectively. By changing the offsets, the movement effect of the drag shadow during the dragging process can be dynamically changed.

[0228] In one possible implementation, the method further includes: displaying the one or more controls and the drag shadow while the one or more controls follow the movement of the drag point. In the embodiment of the present application, by simultaneously displaying the controls and their corresponding drag shadows, the corresponding relationship between the dragged controls and their original positions can be intuitively observed, thereby improving the user experience.

[0229] In one possible implementation, the method further includes: displaying the drag shadow and not displaying the one or more controls while the one or more controls follow the movement of the drag point. In this embodiment of the present application, only the drag shadow corresponding to the control is displayed, so that not only the position of the control after being dragged can be observed, but also the effect of the control leaving its original position can be observed, thereby improving the user experience.

[0230] By setting a drag shadow offset, the embodiment of the present application achieves the effect of separating the drag shadow from the drag point during dragging. Furthermore, by dynamically setting the offset, various animation effects can be achieved. For example, by dynamically increasing the offset as the acceleration of the touch point increases, a damping animation effect can be achieved during dragging; an effect where the drag shadow does not follow the touch point when the touch point begins to move, but then gradually catches up with the inertia of the touch point, etc. Furthermore, since the embodiment of the present application only sets the offset of the drag shadow corresponding to the dragged control, it does not affect the original distribution process of the drag control's drag events; the drag control will still be distributed to the touch point location.

[0231] It should be noted that the description of steps S301 to S305 in the embodiment of the present application can be found in the above Figure 5A-Figure 20 The relevant description of the illustrated embodiment will not be repeated here.

[0232] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0233] It should be noted that for the aforementioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that this application is not limited by the order of the actions described, because according to this application, certain steps may be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily required by this application.

[0234] In the several embodiments provided in this application, it should be understood that the disclosed devices can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the above-mentioned units is only a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, and the indirect coupling or communication connection of devices or units can be electrical or other forms.

[0235] The units described above as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0236] In addition, the functional units in the embodiments of the present application may be integrated into a single processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0237] If the above-mentioned integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for enabling a computer device (which can be a personal computer, a server or a network device, etc., specifically a processor in a computer device) to execute all or part of the steps of the above-mentioned methods of each embodiment of the present application. Among them, the aforementioned storage medium may include: U disk, mobile hard disk, magnetic disk, optical disk, read-only memory (Read-Only Memory, abbreviated: ROM) or random access memory (Random Access Memory, abbreviated: RAM) and other media that can store program codes.

[0238] As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.< / videoview> < / imgview> < / textview>

Claims

1. A method for realizing a drag shadow animation effect, characterized in that: include: Detecting a drag command on one or more controls through a drag point; In response to the drag instruction, controlling the one or more controls to move along with the drag point; Obtaining the drag coordinates of the one or more controls and corresponding drag information during the movement of the one or more controls following the drag point, wherein the drag information includes multiple of the drag speed, the drag acceleration, and the curvature change rate of the drag trajectory; Calculating, based on the drag information, an offset in a direction opposite to the relative movement trajectory corresponding to a drag shadow of the one or more controls based on a preset drag strategy, the drag shadow being an image of the one or more controls following the movement of the drag point, the preset drag strategy including a correspondence between the drag information and the offset; Accumulate the drag coordinates and the offset to obtain accumulated drag coordinates; The drag shadow is controlled to be displayed at the accumulated drag coordinates.

2. The method according to claim 1, characterized in that The drag information includes the drag speed; the preset drag strategy includes the drag speed being proportional to the value of the offset.

3. The method according to claim 1, characterized in that The drag information includes the drag acceleration; the preset drag strategy includes the drag acceleration being proportional to the value of the offset.

4. The method according to claim 1, characterized in that The drag information includes a curvature change rate of the drag track; and the preset drag strategy includes calculating a value of the offset according to the curvature change rate of the drag track and a preset formula.

5. The method according to claim 1, characterized in that: The drag information includes a first display identifier and a second display identifier, the first display identifier is used to identify the display screen of the first device, and the second display identifier is used to identify the display screen of the second device; The preset drag strategy includes: When the one or more controls enter the second device from the first device, the offset value corresponding to the drag shadow in the display screen of the first device gradually increases, and the offset value corresponding to the drag shadow in the display screen of the second device gradually decreases.

6. The method according to any one of claims 1 to 5, characterized in that: The method further comprises: While the one or more controls follow the movement of the drag point, the one or more controls and the drag shadow are displayed.

7. The method according to any one of claims 1 to 5, characterized in that: The method further comprises: While the one or more controls follow the movement of the drag point, the drag shadow is displayed and the one or more controls are not displayed.

8. An electronic device comprising a display screen, a memory, and one or more processors; the display screen and the memory are coupled to the one or more processors, the memory is configured to store computer program code, the computer program code comprising computer instructions, and the one or more processors invoke the computer instructions to cause the electronic device to execute: Detecting a drag command on one or more controls through a drag point; In response to the drag instruction, controlling the one or more controls to move along with the drag point; Obtaining the drag coordinates of the one or more controls and corresponding drag information during the movement of the one or more controls following the drag point, wherein the drag information includes multiple of the drag speed, the drag acceleration, and the curvature change rate of the drag trajectory; Calculating, based on the drag information, an offset in a direction opposite to the relative movement trajectory corresponding to a drag shadow of the one or more controls based on a preset drag strategy, the drag shadow being an image of the one or more controls following the movement of the drag point, the preset drag strategy including a correspondence between the drag information and the offset; Accumulate the drag coordinates and the offset to obtain accumulated drag coordinates; The drag shadow is controlled to be displayed at the accumulated drag coordinates.

9. The electronic device according to claim 8, characterized in that: The drag information includes the drag speed; the preset drag strategy includes the drag speed being proportional to the value of the offset.

10. The electronic device according to claim 8, characterized in that: The drag information includes the drag acceleration; the preset drag strategy includes the drag acceleration being proportional to the value of the offset.

11. The electronic device according to claim 8, characterized in that: The drag information includes a curvature change rate of the drag track; and the preset drag strategy includes calculating a value of the offset according to the curvature change rate of the drag track and a preset formula.

12. The electronic device according to claim 8, characterized in that: The drag information includes a first display identifier and a second display identifier, the first display identifier is used to identify the display screen of the first device, and the second display identifier is used to identify the display screen of the second device; The preset drag strategy includes: When the one or more controls enter the second device from the first device, the offset value corresponding to the drag shadow in the display screen of the first device gradually increases, and the offset value corresponding to the drag shadow in the display screen of the second device gradually decreases.

13. The electronic device according to any one of claims 8 to 12, characterized in that: The one or more processors are further configured to call the computer instructions to cause the electronic device to execute: While the one or more controls follow the movement of the drag point, the one or more controls and the drag shadow are displayed.

14. The electronic device according to any one of claims 8 to 12, characterized in that: The one or more processors are further configured to call the computer instructions to cause the electronic device to execute: While the one or more controls follow the movement of the drag point, the drag shadow is displayed and the one or more controls are not displayed.

15. A computer-readable storage medium comprising instructions, characterized in that: When the instructions are executed on an electronic device, the electronic device is caused to execute the method according to any one of claims 1 to 7.

Images