CN114356186A - 一种拖动阴影动画效果的实现方法及相关设备 - Google Patents

Abstract

本申请实施例提供了一种拖动阴影动画效果的实现方法及相关设备，其中，一种拖动阴影动画效果的实现方法，可包括：检测到通过拖拽点对一个或多个控件的拖拽指令；响应于所述拖拽指令，控制所述一个或多个控件跟随所述拖拽点移动；获取所述一个或多个控件跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息；根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，所述拖动阴影为所述一个或多个控件跟随所述拖拽点移动过程中的图像；根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示。实施本申请实施例，可以优化拖动阴影移动效果。

Description

一种拖动阴影动画效果的实现方法及相关设备

技术领域

本申请涉及终端设备技术领域，尤其涉及一种拖动阴影动画效果的实现方法及相关设备。

背景技术

目前在电子设备上对控件(如：界面上的图片、应用窗口、文档、文字的等)进行拖拽时，控件的拖动阴影(drag shadow)是可以跟随触控点或者鼠标的移动而移动，其中，该拖动阴影是控件在显示屏上显示的图像。在该过程中，电子设备的拖拽进程会侦听输入事件，每当侦听到针对控件的触控移动事件(如，拖拽事件)时，会在触控移动事件上报的坐标点位置重绘控件对应的拖动阴影，以实现拖拽拖动阴影跟随触控移动效果。

但是在对控件进行拖拽操作时(如：当使用鼠标对图片进行拖拽时)，拖动阴影和鼠标的位置关系始终固定，例如：拖动阴影始终与鼠标保持同步，而这会导致拖动阴影的移动效果生硬。而且由于拖动阴影移动效果实际上是通过创建Surface Control，并在侦听到触控事件时，不断通过面控制事件设置坐标(Surface Control Transaction SetPosition)来设置拖动阴影的坐标的。所以，直接对拖动阴影设置传统的动画效果(如：渐入渐出的效果)并不适用。

因此，如何在拖动事件时，优化拖动阴影移动效果，使得在对控件进行拖动时，其拖动阴影的移动效果不太生硬，是亟待解决的问题。

发明内容

本申请实施例提供一种拖动阴影动画效果的实现方法及相关设备，以优化拖动阴影移动效果。

第一方面，本申请实施例提供了一种拖动阴影动画效果的实现方法，可包括：

检测到通过拖拽点对一个或多个控件的拖拽指令；响应于所述拖拽指令，控制所述一个或多个控件跟随所述拖拽点移动；获取所述一个或多个控件跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息，所述拖拽信息包括拖拽速度、拖拽加速度、拖拽轨迹的曲率变化率中的一个或多个；根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，所述拖动阴影为所述一个或多个控件跟随所述拖拽点移动过程中的图像；根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示。

根据第一方面所描述的技术方案，本申请实施例通过设置拖动阴影偏移量，实现了拖拽时，拖动阴影与拖拽点的分离效果，并且可以通过动态设置偏移量的方式，实现各种动画效果，例如：通过随着触控点移动的加速度增加，动态增加偏移量，实现拖拽时的阻尼动画效果；达到一种触控点开始移动时，拖动阴影还没有跟随触控点移动，随后逐渐跟上触控点的惯性效果等等。此外，由于本申请实施例只是设置被拖拽控件对应拖动阴影的偏移量，拖拽控件还是会被向触控点位置分发，不会影响拖拽控件的拖拽事件原有的分发流程。

在一种可能实现的方式中，所述根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，包括：根据所述拖拽信息，基于预设拖拽策略计算所述一个或多个控件的拖动阴影对应的偏移量，所述预设拖拽策略包括所述拖拽信息与所述偏移量的对应关系。在本申请实施例中，通过预先设置的预设拖拽策略，根据当前的推拽信息动态的确定偏移量，可以在拖动过程中实现各种动画效果。

在一种可能实现的方式中，所述拖拽信息包括所述拖拽速度；所述预设拖拽策略包括所述拖拽速度与所述偏移量的值成正比。在本申请实施例中，通过预先设置的预设拖拽策略，根据拖拽速度，动态增加偏移量的方式，可以优化在拖动过程中拖动阴影的动画效果，使得其在移动时不生硬。

在一种可能实现的方式中，所述拖拽信息包括所述拖拽加速度；所述预设拖拽策略包括所述拖拽加速度与所述偏移量的值成正比。在本申请实施例中，通过预先设置的预设拖拽策略，根据拖拽加速度，动态增加偏移量的方式，可以优化在拖动过程中拖动阴影的动画效果，使得其在移动时不生硬。

在一种可能实现的方式中，所述拖拽信息包括所述拖拽轨迹的曲率变化率；所述预设拖拽策略包括根据所述拖拽轨迹的曲率变化率和预设公式，计算所述偏移量的值。在本申请实施例中，通过预先设置的预设拖拽策略，根据所述拖拽轨迹的曲率变化率和预设公式，计算拖动阴影的偏移量，随着曲率的变化动态增加偏移量，可以优化在拖动过程中拖动阴影的动画效果，使得其在移动时不生硬。

在一种可能实现的方式中，所述拖拽信息包括第一显示标识和第二显示标识，所述第一显示标识用于识别第一设备的显示屏，所述第二显示标识用于识别第二设备的显示屏；所述预设拖拽策略包括：当所述一个或多个控件由所述第一设备进入所述第二设备时，在所述第一设备的显示屏中所述拖动阴影对应的偏移量的值逐渐增大，在所述第二设备的显示屏中所述拖动阴影对应的偏移量的值逐渐减小。例如：在穿梭设备时，根据时间变化(例如：每毫秒降低一定量的偏移量的值)，或根据空间变化(例如：鼠标每移动1像素降低一定量的偏移量的值)，以实现拖动阴影的中心逐渐靠近鼠标指针的效果。

在一种可能实现的方式中，所述根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示，包括：将所述拖拽坐标与所述偏移量进行累加，获得累加后的拖拽坐标；控制所述拖动阴影在所述累加后的拖拽坐标处显示。在本申请实施例中，拖拽坐标是用于绘制拖动阴影的坐标，在一个或多个控件跟随拖拽点移动时，可以获取该移动过程中的移动路径和移动方向，根据移动路径确定出该拖拽坐标。通过坐标绘制拖动阴影，会使得拖动阴影更准确，而且，绘制拖动阴影用的x、y坐标分别引入偏移量offsetX与偏移量offsetY，通过改变该偏移量，可以动态改变拖动阴影在拖动过程中的移动效果。

在一种可能实现的方式中，所述方法还包括：在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述一个或多个控件和所述拖动阴影。在本申请实施例中，同时显示控件以及其对应的拖动阴影，可以直观的观察到被拖动的控件与控件原来所处位置之间的对应关系，提升了用户体验。

在一种可能实现的方式中，所述方法还包括：在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述拖动阴影，不显示所述一个或多个控件。在本申请实施例中，仅仅显示控件其对应的拖动阴影，不仅可以观察到控件被拖动后的位置，还可以观察到控件离开原位置的效果，提升了用户体验。

第二方面，本申请实施例提供一种电子设备，包括显示屏、存储器、一个或多个处理器；所述显示屏、所述存储器与所述一个或多个处理器耦合，所述存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，所述一个或多个处理器调用所述计算机指令以使得所述电子设备执行：

检测到通过拖拽点对一个或多个控件的拖拽指令；

响应于所述拖拽指令，控制所述一个或多个控件跟随所述拖拽点移动；

获取所述一个或多个控件跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息，所述拖拽信息包括拖拽速度、拖拽加速度、拖拽轨迹的曲率变化率中的一个或多个；

根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，所述拖动阴影为所述一个或多个控件跟随所述拖拽点移动过程中的图像；

根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示。

在一种可能实现的方式中，所述一个或多个处理器调用所述计算机指令以使得所述电子设备具体执行：根据所述拖拽信息，基于预设拖拽策略计算所述一个或多个控件的拖动阴影对应的偏移量，所述预设拖拽策略包括所述拖拽信息与所述偏移量的对应关系。

在一种可能实现的方式中，所述拖拽信息包括所述拖拽速度；所述预设拖拽策略包括所述拖拽速度与所述偏移量的值成正比。

在一种可能实现的方式中，所述拖拽信息包括所述拖拽加速度；所述预设拖拽策略包括所述拖拽加速度与所述偏移量的值成正比。

在一种可能实现的方式中，所述拖拽信息包括所述拖拽轨迹的曲率变化率；所述预设拖拽策略包括根据所述拖拽轨迹的曲率变化率和预设公式，计算所述偏移量的值。

在一种可能实现的方式中，所述拖拽信息包括第一显示标识和第二显示标识，所述第一显示标识用于识别第一设备的显示屏，所述第二显示标识用于识别第二设备的显示屏；所述预设拖拽策略包括：当所述一个或多个控件由所述第一设备进入所述第二设备时，在所述第一设备的显示屏中所述拖动阴影对应的偏移量的值逐渐增大，在所述第二设备的显示屏中所述拖动阴影对应的偏移量的值逐渐减小。

在一种可能实现的方式中，所述一个或多个处理器调用所述计算机指令以使得所述电子设备具体执行：将所述拖拽坐标与所述偏移量进行累加，获得累加后的拖拽坐标；控制所述拖动阴影在所述累加后的拖拽坐标处显示。

在一种可能实现的方式中，所述一个或多个处理器还用于调用所述计算机指令以使得所述电子设备执行：在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述一个或多个控件和所述拖动阴影。

在一种可能实现的方式中，所述一个或多个处理器还用于调用所述计算机指令以使得所述电子设备执行：在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述拖动阴影，不显示所述一个或多个控件。

第三方面，本申请实施例提供一种计算机存储介质，用于储存为上述第一方面提供的一种拖动阴影动画效果的实现方法所用的计算机软件指令，其包含用于执行上述方面所设计的程序。

第四方面，本申请实施例提供了一种计算机程序，该计算机程序包括指令，当该计算机程序被计算机执行时，使得计算机可以执行上述第一方面中的拖动阴影动画效果的实现方法所执行的流程。

应当理解的是，说明书中对技术特征、技术方案、优点或类似语言的描述并不是暗示在任意的单个实施例中可以实现所有的特点和优点。相反，可以理解的是对于特征或优点的描述意味着在至少一个实施例中包括特定的技术特征、技术方案或优点。因此，本说明书中对于技术特征、技术方案或优点的描述并不一定是指相同的实施例。进而，还可以任何适当的方式组合以下各个实施例中所描述的技术特征、技术方案和优点。本领域技术人员将会理解，无需特定实施例的一个或多个特定的技术特征、技术方案或优点即可实现实施例。在其他实施例中，还可在没有体现所有实施例的特定实施例中识别出额外的技术特征和优点。

附图说明

为了更清楚地说明本申请实施例或背景技术中的技术方案，下面将对本申请实施例或背景技术中所需要使用的附图进行说明。

图1是本申请实施例提供的一种拖拽事件流程示意图。

图2是本申请实施例提供的一种拖动阴影示意图。

图3A是本申请实施例提供的一种电子设备中可拖拽控件示意图。

图3B是本申请实施例提供的另一种电子设备中可拖拽控件示意图。

图3C是本申请实施例提供的一种电子设备中显示的拖动阴影的示意图。

图4A是本申请实施例提供的一种电子设备100的结构示意图。

图4B是本申请实施例提供的一种电子设备100的软件结构框图。

图5A是本申请实施例提供的一组一个或多个控件在拖拽过程中显示的用户界面。

图5B是本申请实施例提供的另一组一个或多个控件在拖拽过程中显示的用户界面。

图6是本申请实施例提供的一种电子设备的用户界面。

图7是本申请实施例提供的一种拖动阴影动画效果的实现流程示意图。

图8是本申请实施例提供的另一种拖动阴影动画效果的实现流程示意图。

图9是本申请实施提供的一种根据不同拖动速度实现不同偏移量的示意图。

图10是本申请实施例提供的一种拖动一个控件的拖动用户界面示意图。

图11是本申请实施例提供的另一种拖动一个控件的拖动用户界面示意图。

图12是本申请实施例提供的一种拖动多个控件的拖动用户界面示意图。

图13-图15是本申请实施例提供的一组拖动一个控件的拖动用户界面示意图。

图16是本申请实施例提供的一组电子设备的用户界面。

图17是本申请实施例提供的又一种拖动阴影动画效果的实现流程示意图。

图18-图20是本申请实施例提供的另一组拖动一个控件的拖动用户界面示意图。

图21是本申请实施例提供的又一种拖动阴影动画效果的实现方法的流程示意图。

具体实施方式

下面结合本申请实施例中的附图对本申请实施例进行描述。本申请实施例的实施方式部分使用的术语仅用于对本申请的具体实施例进行解释，而非旨在限定本申请。

本申请以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括复数表达形式，除非其上下文中明确地有相反指示。还应当理解，本申请中使用的术语“和/或”是指并包含一个或多个所列出项目的任何或所有可能组合。

以下介绍了电子设备、用于这样的电子设备的用户界面、和用于使用这样的电子设备的实施例。在一些实施例中，电子设备可以是还包含其它功能诸如消息管理和/或消息接收与推送功能的便携式电子设备，诸如手机、平板电脑、具备无线通讯功能的可穿戴电子设备(如智能手表)等。便携式电子设备的示例性实施例包括但不限于搭载

或者其它操作系统的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备，诸如具有触敏表面或触控面板的膝上型计算机(Laptop)等。还应当理解的是，在其他一些实施例中，上述电子设备也可以不是便携式电子设备，而是具有触敏表面或触控面板的台式计算机、车载电脑等。可以理解的，本申请实施例以智能手机和电脑为例进行介绍，但是不限于智能手机和电脑，还可以是其他具备通讯功能的智能设备，如平板电脑、车载电脑、智能电视等等。

本申请的说明书和权利要求书及附图中的术语“用户界面(user interface，UI)”，是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。应用程序的用户界面是通过java、可扩展标记语言(extensible markup language，XML)等特定计算机语言编写的源代码，界面源代码在终端设备上经过解析，渲染，最终呈现为用户可以识别的内容，比如图片、文字、按钮等控件。控件(control)也称为部件(widget)，是用户界面的基本元素，典型的控件有工具栏(toolbar)、菜单栏(menu bar)、文本框(text box)、按钮(button)、滚动条(scrollbar)、图片和文本。界面中的控件的属性和内容是通过标签或者节点来定义的，比如XML通过<Textview>、<ImgView>、<VideoView>等节点来规定界面所包含的控件。一个节点对应界面中一个控件或属性，节点经过解析和渲染之后呈现为用户可视的内容。此外，很多应用程序，比如混合应用(hybrid application)的界面中通常还包含有网页。网页，也称为页面，可以理解为内嵌在应用程序界面中的一个特殊的控件，网页是通过特定计算机语言编写的源代码，例如超文本标记语言(hyper text markup language，HTML)，层叠样式表(cascading style sheets，CSS)，java脚本(JavaScript，JS)等，网页源代码可以由浏览器或与浏览器功能类似的网页显示组件加载和显示为用户可识别的内容。网页所包含的具体内容也是通过网页源代码中的标签或者节点来定义的，比如HTML通过<p>、<img>、<video>、<canvas>来定义网页的元素和属性。

用户界面常用的表现形式是图形用户界面(graphic user interface，GUI)，是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素，其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。

首先，为了便于理解本申请实施例，以下具体分析本申请实施例所需要解决的技术问题。

目前在电子设备上对控件(如：界面上显示的图片、应用窗口、文档、文字的等)进行拖拽时，控件的拖动阴影(drag shadow)是可以跟随触控点或者鼠标的移动而移动。请参考附图1，图1是本申请实施例提供的一种拖拽事件流程示意图，如图1所述，在该过程中，电子设备的拖拽进程会侦听输入事件，每当侦听到针对控件的触控移动事件(如，拖拽事件)时，会在触控移动事件上报的坐标点位置重绘控件对应的拖动阴影，以实现拖拽拖动阴影跟随触控移动效果。

其中，每当拖拽进程侦听到针对控件的输入事件时，例如：当拖拽进程侦听到触控点或鼠标针对控件的移动事件(ACTION_MOVE)时，拖拽进程会向当前触控点或鼠标坐标点的视图控件(View)分发拖拽位置事件(ACTION_DRAG_LOCATION)，以通知当前触控点或鼠标坐标点的视图控件拖拽正在进行。当触控点消失，或松开鼠标时，拖拽进程会侦听到抬起事件(ACTION_UP)，并向当前事件对应的坐标点分发拖拽释放事件(ACTION_DROP)等一系列事件以完成拖拽。

然而，请参考附图2，图2是本申请实施例提供的一种拖动阴影示意图。如图2所示，在对控件进行拖拽操作时(如：当使用鼠标对图片进行拖拽时)，拖动阴影和鼠标的位置关系始终固定，例如：拖动阴影始终与鼠标保持同步，而这会导致拖动阴影的移动效果生硬。而且由于拖动阴影移动效果实际上是通过创建面控制Surface Control，并在侦听到触控事件时，不断通过面控制事件设置坐标(SurfaceControlTransaction SetPosition)来设置拖动阴影的坐标的。所以，直接对拖动阴影设置传统的动画效果(如：渐入渐出的效果)并不适用。

因此，如何在拖动事件时，优化拖动阴影移动效果，使得在对控件进行拖动时，其拖动阴影的移动效果动画效果不太生硬。本申请实施例通过设置拖动阴影偏移量，实现了拖拽时，拖动阴影与拖拽坐标点的分离效果，并且可以通过动态设置偏移量的方式，实现各种动画效果。例如：当拖拽点快速移动时，通过增大偏移量的方式实现高阻尼效果。当拖拽点缓慢移动时，通过减小偏移量的方式实现低阻尼效果。当拖拽点静止时，无偏移量，实现拖动阴影跟随触控坐标效果。又例如：当拖拽事件从其他设备穿梭而来时，通过设置偏移量，使得拖动阴影恰好不显示，然后逐渐减小偏移量的方式实现渐入效果。当拖拽事件向其他设备穿梭而去时，通过逐渐增加偏移量，最终使得拖动阴影恰好不显示的方式实现渐出效果。此外，由于本申请实施例只是设置拖动阴影的偏移量，不会影响拖拽事件原有的分发流程，拖拽事件还是会被向触控点位置分发。

所以，实施本申请实施例提供的拖动阴影动画效果的实现方法，可以在拖动事件发生时，优化拖动阴影移动效果，使得在对控件进行拖动时，其拖动阴影的移动效果动画效果不太生硬。

需要说明的是，在本申请以下实施例中，电子设备中可以进行拖拽的一个或多个控件中的控件可以包括以下几种：图片，文字，文档、各类应用程序对应的图标，以及各类应用程序对应的运行窗口等可拖拽的对象。具体的，请参考附图3A，图3A是本申请实施例提供的一种电子设备中可拖拽控件示意图。如图3A所示，电子设备的显示屏幕中显示的图片01；或者，电子设备在运行应用程序的过程中，应用程序的窗口02，例如，电脑显示屏幕中运行的浏览器窗口；或者，电子设备的显示屏幕中显示的应用程序的图标03，例如，电脑显示屏幕中显示的文档编辑的图标；又或者，电子设备在运行应用程序的过程中，应用程序内可拖拽的图片或文字。例如，请参考附图3B，图3B是本申请实施例提供的另一种电子设备中可拖拽控件示意图。如图3B所示，平板显示屏幕中运行的邮件发送窗口中，用户可以拖拽文字消息至邮件的应用程序中，发送给联系人A：Petersmart@huawei.com。

还需要说明的是，在本申请以下实施例中，被拖拽的一个或多个控件中的控件对应的拖动阴影在电子设备中可以包括以下几种显示形式：与被拖拽的一个或多个控件的显示图像一样的图像，被拖拽的一个或多个控件的图像的轮廓，或者是用于指示一个或多个控件的阴影等等。例如，请参考附图3C，图3C是本申请实施例提供的一种电子设备中显示的拖动阴影的示意图。如图3C中(1)所示，控件在显示屏中显示的图像与拖动阴影在显示屏中显示的图像相同；如图3C中(2)所示，拖动阴影在显示屏中显示的图像是控件在显示屏中显示图像的轮廓；如图3C中(3)所示，拖动阴影在显示屏中显示的图像是控件在显示屏中显示图像的阴影。

接下来，介绍本申请实施例中涉及的示例性电子设备。

请参考附图4A，图4A是本申请实施例提供的一种电子设备100的结构示意图，其中，电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。

可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。

在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuitsound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purposeinput/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。

可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。

充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。

电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。

电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。

天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。

移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。

调制解调处理器可以包括调制器和解调器。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。

无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。

在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications，GSM)，通用分组无线服务(general packet radio service，GPRS)，码分多址接入(codedivision multiple access，CDMA)，宽带码分多址(wideband code division multipleaccess，WCDMA)，时分码分多址(time-division code division multiple access，TD-SCDMA)，长期演进(long term evolution，LTE)，BT，GNSS，WLAN，NFC，FM，和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system，GPS)，全球导航卫星系统(global navigation satellite system，GLONASS)，北斗卫星导航系统(bei dounavigation satellite system，BDS)，准天顶卫星系统(quasi-zenith satellitesystem，QZSS)和/或星基增强系统(satellite based augmentation systems，SBAS)。

电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emittingdiode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emittingdiode，FLED)，Miniled，MicroLed，Micro-OLED，量子点发光二极管(quantum dot lightemitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。

显示屏194用于显示本申请后续实施例提供的示例性用户界面。用户界面的具体描述可参考后文。

具体的，在本申请实施例中，显示屏194可用于显示一个或多个控件，以及该一个或多个控件被拖拽时对应拖动阴影的动画效果。

电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。

ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点，亮度，肤色进行算法优化。ISP还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。

摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或N个摄像头193，N为大于1的正整数。

数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。

视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1，MPEG2，MPEG3，MPEG4等。

NPU为神经网络计算处理单元(Neural-network Processing Unit)，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别，人脸识别，语音识别，文本理解等。

外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。

内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。

电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。

音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。

扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐，或收听免提通话。

受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时，可以通过将受话器170B靠近人耳接听语音。

麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中，电子设备100可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。

耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，OMTP)标准接口，美国蜂窝电信工业协会(cellular telecommunications industry association of the USA，CTIA)标准接口。

压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触控操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触控操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触控操作强度的触控操作，可以对应不同的操作指令。例如：当有触控操作强度小于第一压力阈值的触控操作作用于短消息应用图标时，执行查看短消息的指令。当有触控操作强度大于或等于第一压力阈值的触控操作作用于短消息应用图标时，执行新建短消息的指令。

陀螺仪传感器180B可以用于确定电子设备100的运动姿态。

气压传感器180C用于测量气压。

磁传感器180D包括霍尔传感器。

加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。

距离传感器180F，用于测量距离。

接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。

环境光传感器180L用于感知环境光亮度。

指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。

温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。

触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触控操作。触摸传感器可以将检测到的触控操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触控操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。

例如：在本申请实施例中，触摸传感器180K可以检测到针对一个或多个控件的拖拽操作。该拖拽操作可以用于将该一个或多个控件从一个位置移动到另一个位置。其中，该拖拽操作可以是，作用于一个或多个控件上的超过预设时间的触摸操作后的移动操作、超过预设时间的重压操作后的移动操作等等，例如：对一个控件进行长时间(超过预设时间)的触控操作，响应于该触控操作，可以拖拽该控件移动。该用户操作还可以有其他的实现形式，例如：还可以是作用于一条或多条通知消息的在双击后，进行移动的操作等等。本申请实施例对此不作具体的限制。该用户操作的具体实现，可参考后续方法实施例的详细描述，在此不赘述。

又例如：在本申请实施例中，还可以通过通用串行总线(universal serial bus，USB)接口130、无线通信模块160、天线1、天线2、移动通信模块150、无线通信模块160等等连接外部的输入设备，如有线鼠标，无线鼠标，蓝牙鼠标等输入设备，进而可以通过输入设备输入拖拽指令，控制一个或多个控件从一个位置移动到另一个位置。例如：通过鼠标对控件进行多次连续点击操作或长时间(超过预设时间)点击操作后，拖拽该控件移动。该用户操作还可以有其他的实现形式，例如：还可以是通过蓝牙接口，接收蓝牙输入设备对控件的拖拽指令，从而该控件进行移动的操作等等。

又例如：在本申请实施例中，还可以通过摄像头、红外传感器、语音识别等等识别用户的手势、语音指令等，进而可以接收用户输入拖拽指令，控制一个或多个控件从一个位置移动到另一个位置。例如：通过摄像头识别用户的手势，进而识别出用户对一个或多个控件的拖拽指令，拖拽该控件移动。本申请实施例对此不作限制。该用户操作的具体实现，可参考后续方法实施例的详细描述，在此不赘述。

在本申请实施例中，处理器110可以响应于针对一个或多个控件的用户操作，拖拽一个或多个控件时，并按照一定的策略设置拖动阴影的偏移量，使得在对一个或多个控件进行拖动时，其对应的拖动阴影的移动效果动画效果不太生硬，而且不会影响拖拽事件原有的分发流程，拖拽事件还是会被向拖拽点位置分发。其中，电子设备接收到的用户操作的具体实现，可参考后续实施例的相关描述，在此暂不赘述。

在本申请实施例中，显示屏194可用于显示后续实施例提供的示例性用户界面。用户界面的具体描述可参考后文。具体的，显示屏194可用于显示一个或多个控件，以及该一个或多个控件被拖拽时对应拖动阴影的动画效果。

骨传导传感器180M可以获取振动信号。在一些实施例中，骨传导传感器180M可以获取人体声部振动骨块的振动信号。骨传导传感器180M也可以接触人体脉搏，接收血压跳动信号。在一些实施例中，骨传导传感器180M也可以设置于耳机中，结合成骨传导耳机。音频模块170可以基于所述骨传导传感器180M获取的声部振动骨块的振动信号，解析出语音信号，实现语音功能。应用处理器可以基于所述骨传导传感器180M获取的血压跳动信号解析心率信息，实现心率检测功能。

按键190包括开机键，音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。

马达191可以产生振动提示。马达191可以用于来电振动提示，也可以用于触摸振动反馈。例如，作用于不同应用(例如拍照，音频播放等)的触控操作，可以对应不同的振动反馈效果。作用于显示屏194不同区域的触控操作，马达191也可对应不同的振动反馈效果。不同的应用场景(例如：时间提醒，接收信息，闹钟，游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。

指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。

SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口，N为大于1的正整数。SIM卡接口195可以支持Nano SIM卡，Micro SIM卡，SIM卡等。同一个SIM卡接口195可以同时插入多张卡。所述多张卡的类型可以相同，也可以不同。SIM卡接口195也可以兼容不同类型的SIM卡。SIM卡接口195也可以兼容外部存储卡。电子设备100通过SIM卡和网络交互，实现通话以及数据通信等功能。在一些实施例中，电子设备100采用eSIM，即：嵌入式SIM卡。eSIM卡可以嵌在电子设备100中，不能和电子设备100分离。

电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。请参考附图4B，图4B是本申请实施例提供的一种电子设备100的软件结构框图。

可以理解的是，本申请实施例示意的软件结构框图并不构成对电子设备100的软件结构框图具体限定。

分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。

应用程序层可以包括一系列应用程序包。

如图4B所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。

应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。

如图4B所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。

窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。

内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。

视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。

电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。

资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。

通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。

Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。

核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。

应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。

系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。

表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。

媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，G.264，MP3，AAC，AMR，JPG，PNG等。

三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。

2D图形引擎是2D绘图的绘图引擎。

内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。

如图4B所示的软件系统涉及到使用分享能力的应用呈现(如图库，文件管理器)，提供分享能力的即时分享模块，提供打印能力的打印服务(print service)和打印后台服务(print spooler)，以及应用框架层提供打印框架、WLAN服务、蓝牙服务，以及内核和底层提供WLAN蓝牙能力和基本通信协议。

下面介绍本申请实施例涉及的应用场景以及该应用场景下的用户界面(userinterface，UI)实施例。需要说明的是，本申请实施例中提到的用户界面可以理解为本申请中用于拖拽一个或多个控件的窗口。

在本申请实施例中，电子设备可以响应于拖拽操作(如图1所示)，将显示屏上显示的一个或多个控件从一个位置移动到另一个位置。其中，本申请实施例对拖拽过程中，一个或多个控件以及其对应的拖动阴影的显示方式不作限制。

下面列举几种一个或多个控件以及其对应的拖动阴影的显示方式：其中，拖动阴影的图像与被拖拽的一个或多个控件的显示图像一致。

(1)一个或多个控件不显示，对应的拖动阴影显示。参考附图5A，图5A是本申请实施例提供的一组一个或多个控件在拖拽过程中显示的用户界面。如图5A中(1)所示，用户通过鼠标对电脑桌面上的图片向右进行拖拽。如图5A中(2)所示，用户可以观察到被拖拽的控件的图像，即拖动阴影随着拖拽点的移动而移动，在该过程中被拖拽的控件不在显示屏中显示。

(2)一个或多个控件以及其对应的拖动阴影一起显示。参考附图5B，图5B是本申请实施例提供的另一组一个或多个控件在拖拽过程中显示的用户界面。如图5B中(1)所示，用户通过鼠标对电脑桌面上的图片向右进行拖拽。如图5B中(2)所示，用户可以观察到被拖拽的控件的图像，即拖动阴影随着拖拽点的移动而移动，在该过程中被拖拽的控件的显示图像仍在显示屏的原位置处显示。

为了在拖动事件发生时，优化拖动阴影移动效果，使得在对控件进行拖动时，其拖动阴影的移动效果动画效果不太生硬。下面分两个实施例，示例性的说明在不同应用场景下的几种本申请实施例提供的拖动阴影动画效果的实现方法。

(一)实施例1：

应用场景1：在同一个显示屏内进行拖拽操作。

请参考附图6，图6是本申请实施例提供的一种电子设备的用户界面，如图6所示，用户所持有的电子设备的用户界面中有一张图片01和各类应用程序的图标02。该各类应用程序的图标02包括被图片01遮挡住的应用程序03。用户为了打开并运行被图片01遮挡的应用程序03，需要将图片01从当前位置移，使得被遮挡的应用程序03在用户界面中显示。其中，双击或触摸各类应用程序的图标02可以打开并运行该应用程序。

在应用场景1中，在同一个显示屏内，电子设备在用户界面可以检测到作用于该用户界面中一个或多个控件的拖拽指令，并响应于该拖拽指令，将一个或多个控件动一个位置移动到另一个位置，并按照一定的策略使其该一个或多个控件的拖动阴影，在拖拽过程中实现各种动画效果。

下面描述实施例1提供的方法。

1、触控输入拖拽指令。

在本申请以下实施例中，拖拽指令为电子设备通过触摸传感器180K检测到的通过拖拽点对一个或多个控件的用户操作，用于指示将一个或多个控件从一个位置拖拽至另一个位置。例如，该用户操作可以为触控一个或多个控件进行移动，其中，在移动过程中可以一直保持触控状态，到达目标位置后结束该触控。

需要说明的是，本申请实施例并不对拖拽指令的触控方式做限定。该触控方式可以包括并不限于以下几种：用户直接触控、用户通过触控设备(如：触控笔、触控手套等)间接触控等等。

在本申请实施例中，电子设备可以检测到通过拖拽点对一个或多个控件的拖拽指令；响应于所述拖拽指令，控制所述一个或多个控件跟随拖拽点移动，即触发拖拽事件。然后，电子设备可以获取所述一个或多个控件跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息，所述拖拽信息包括拖拽速度、拖拽加速度、拖拽轨迹的曲率变化率中的一个或多个；根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，所述拖动阴影为所述一个或多个控件对应的显示图像；根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示。其中，该拖拽坐标可以为一个或多个控件跟随所述拖拽点移动过程中的拖拽轨迹的坐标。例如：获取跟随所述拖拽点移动过程中每经过预设时间间隔的拖拽点所对应的坐标。

请参考附图7，相较于上述图1所示的拖拽事件流程示意图，如图7所示拖拽事件流程，可以通过改变偏移量，来改变拖动阴影相对于拖拽点的位移。从而实现将拖动阴影与触控点分离，以实现相应的拖拽期间的动画效果。如图7所示，电子设备可以监听拖拽流程，首先该输入模块将输入事件回调至拖放控制(Drag Drop Controller)，以保证输入模块通过回调函数(相当于本申请实施例中的拖拽信息与偏移量的对应关系)，将每一次触控移动事件发送给拖放控制。其次，当用户操作出发了该触控移动事件时，拖放控制向拖动状态(Drag State)发送拖拽点的x，y坐标，即，拖拽坐标。其中该拖动状态可以控制一个或多个控件对应的拖动阴影的拖动状态。然后，电子设备设置根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，并将计算好的偏移量发送至拖动状态中，以使偏移量与拖拽点的x，y坐标累加，获得新的坐标。最后拖动状态将计算好的新的坐标发送至面控制(SurfaceControl)中设置拖动阴影的坐标，以使通过动态设置偏移量的方式，实现各种动画效果。

关于电子设备获取一个或多个控件跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息，请参考附图8，图8是本申请实施例提供的另一种拖动阴影动画效果的实现流程示意图。

具体的，如图8所示拖拽事件流程，可以通过改变偏移量，来改变拖动阴影相对于拖拽点的位移。从而实现将拖动阴影与触控点分离，以实现相应的拖拽期间的动画效果。如图8所示，相较于上述图7所示的拖动阴影动画效果的实现流程示意图，电子设备可以一直监听拖拽流程，在用户连续对一个或多个控件进行拖拽时，该电子设备可以频繁持续的通过监听新的移动事件，计算新的合适的偏移量，并将计算好的新的偏移量发送至拖动状态中，以使新的偏移量与拖拽点的x，y坐标累加，获得新的坐标。最后拖动状态将计算好的新的坐标发送至面控制(SurfaceControl)中设置拖动阴影的坐标，这种可以根据连续的拖拽事件，设置连续的设置拖动阴影的坐标，以使拖动阴影实现各种动画效果。

可以理解的是，该整个拖拽指令的拖拽事件的分发是向拖拽点位置分发的，即可以认为：被拖拽的对象(即，一个或多个控件)还是处于拖拽点(即，触控点)的位置，然而，被拖拽对象的动画表现(即，拖动阴影)，根据其拖拽信息，进行了偏移显示。进而，会给用户一种阻尼效果的视觉回馈。

需要说明的是，在拖拽一个或多个控件之前，还需要先设置预设拖拽策略以便电子设备根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，其中，所述预设拖拽策略包括所述拖拽信息与所述偏移量的对应关系。通过预先设置的预设拖拽策略，根据当前的推拽信息动态的确定偏移量，可以在拖动过程中实现各种形式的动画效果。其中，该预设拖拽策略包括所述拖拽信息与所述偏移量的对应关系，该对应关系既可以通过查询预先存储的映射表格确定，也可以通过预先存储的计算公式确定。例如：请参考下述表1，表1是本申请实施例提供的一种映射关系表，用于基于所述拖拽信息，获取与所述拖拽信息对应的偏移量。

表1：预存储的映射关系表

偏移量的值	拖拽速度区间1	拖拽速度区间2	…	拖拽速度区间Q
					拖拽加速度区间1	0	…	…	5
拖拽加速度区间2	…	…	…	…
					…	…	…	…	…
拖拽加速度区间P	5	…	…	10

在上述表1中，拖拽加速度区间表示，将拖拽加速度按照一定的策略分别分成P个区间，每个区间都有其对应的偏移量。同理，拖拽速度区间表示，将拖拽速度按照一定的策略分别分成Q个区间，每个区间都有其对应的偏移量。如：表1所示，当一个或多个控件的拖拽速度处于拖拽速度区间Q且拖拽加速度处于拖拽加速度区间P时，该一个或多个控件的偏移量的值＝10，因此，该一个或多个控件拖动阴影在原来的基础上向拖动方向的反方向偏移10个单位的位置处显示。

可以理解的是，上述表格指示本申请实施例中的一个示例性的表格，并不仅限于该二维表格，还有其他类型的预存储的映射关系表用于存储所述拖拽信息与所述偏移量的对应关系。本申请实施例对此并不作具体的限定。

可选的，所述拖拽信息包括所述拖拽速度；所述预设拖拽策略包括所述拖拽速度与所述偏移量的值成正比。例如：当拖拽点高速移动时，拖动阴影对移动轨迹反方向的偏移量大于拖拽点低速移动时，拖动阴影对移动轨迹反方向的偏移量；通过这种方式可以实现高阻尼效果。速度越快，在一定范围内拖动阴影与拖拽点之间的距离越大。相反速度越慢，在一定范围内拖动阴影与拖拽点之间的距离越近，直至拖拽点静止时，拖动阴影无偏移量，实现拖动阴影附加在触控坐标效果。这种根据拖拽速度，动态增加偏移量的方式，可以优化在拖动弄过程中拖动阴影的动画效果，使得其在移动时不生硬。例如：请参考附图9，图9是本申请实施提供的一种根据不同拖动速度实现不同偏移量的示意图。通过外部输入设备，以鼠标的为例拖拽屏幕中的一张图片，其中，屏幕中箭头处在的位置为拖拽点的位置。如图9所示，再将图片从左端拖动到右端时，在整个拖动过程中，起始位置的拖拽速度和终止位置的拖拽速度较低，其拖动阴影对应的偏移量也较小，中间位置的拖拽速度较高，其拖动阴影对应的偏移量也较大。

可选的，所述拖拽信息包括所述拖拽加速度；所述预设拖拽策略包括所述拖拽加速度与所述偏移量的值成正比。例如：当拖拽点加速移动时，逐渐增加对移动轨迹反方向的偏移量；通过这种方式可以实现高阻尼效果，即：拖动阴影跟随在拖拽点移动轨迹后方的惯性动画效果。当拖拽点减速移动时，逐渐减小对移动轨迹反方向的偏移量；通过这种方式实现低阻尼效果，即：拖动阴影逐渐追上拖拽点的惯性动画效果。当拖拽点静止时，无偏移量，实现拖动阴影附加在触控坐标效果。这种动态增加偏移量的方式，可以优化拖动阴影的动画效果，使得其在移动时不生硬。

可选的，所述拖拽信息包括所述拖拽轨迹的曲率变化率；所述预设拖拽策略包括根据所述拖拽轨迹的曲率变化率和预设公式，计算所述偏移量的值。当拖拽点拖拽一个或多个控件时期拖拽轨迹是曲线，则拖动阴影的偏移量可以随着曲线变化率的变化而变化。其中，需要说明的是，该预设公式可以用于映射曲率变化率的大小和偏移量的值。例如：当拖拽点曲线变化率变化加快移动时，逐渐增加与移动轨迹切线垂直向外方向的偏移量；通过这种方式可以实现甩入甩出的高阻尼效果。这种动态增加偏移量的方式，可以优化拖动阴影的动画效果，使得其在移动时不生硬。

可选的，所述根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示，包括：将所述拖拽坐标与所述偏移量进行累加，获得累加后的拖拽坐标；控制所述拖动阴影在所述累加后的拖拽坐标处显示。需要说明的是，拖拽坐标是用于绘制拖动阴影的坐标，在一个或多个控件跟随拖拽点移动时，可以获取该移动过程中的移动路径和移动方向，根据移动路径确定出该拖拽坐标。例如：拖拽点由A点移动到B点，相应的，拖动阴影也可以按照该轨迹从A点移动到B点。通过坐标绘制拖动阴影，会使得拖动阴影更准确，而且，绘制拖动阴影用的x、y坐标分别引入偏移量offsetX与偏移量offsetY，通过改变该偏移量，可以动态改变拖动阴影在拖动过程中的移动效果。

下面介绍电子设备100上实现的一些UI实施例。

基于前述场景，请参考附图10，图10是本申请实施例提供的一种拖动一个控件的拖动用户界面示意图。

具体的，设置所述拖拽信息包括所述拖拽加速度；所述预设拖拽策略包括所述拖拽加速度与所述偏移量的值成正比。如图10所示，用户所持有的电子设备100的用户界面中有一张图片01和各类应用程序的图标02。该各类应用程序的图标02包括被图片01遮挡住的应用程序03。电子设备100接收用户针对图片01的拖拽指令。其中，请参考附图11，图11是本申请实施例提供的另一种拖动一个控件的拖动用户界面示意图。如图11中(1)所示，在图片01被拖拽的过程中，图片01的拖动阴影，根据拖动速度的不同与拖拽点之间存在偏移，如图11中(2)所示，随着图片01被拖拽至目标位置后，拖动阴影也随后到达目标位置，此时，可以触控应用程序03的图标，进而可以打开并运行该应用程序。

在该场景下，电子设备100通过触摸传感器180K检测到通过拖拽点(即：用户触摸到显示屏的触控点)对图片01的向右的拖拽指令(如，触摸传感器180K识别出用户在显示屏中的图片01处做出向右移动触控操作并保持与图片01的触控状态)；响应于向右的拖拽指令，电子设备100可以根据识别到的触控操作，控制图片01跟随所述拖拽点移动。而且，在图片01跟随所述拖拽点移动过程中，电子设备100获取所述图片01跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息；电子设备100根据所述拖拽信息，计算所述一个控件的拖动阴影对应的偏移量，并根据所述偏移量和所述拖拽坐标，控制所述拖动阴影在显示屏中显示。

请参考附图12，图12是本申请实施例提供的一种拖动多个控件的拖动用户界面示意图。

具体的，设置所述拖拽信息包括所述拖拽加速度；所述预设拖拽策略包括所述拖拽加速度与所述偏移量的值成正比。如图12所示，用户所持有的电子设备100的用户界面中显示有各类应用程序的图标02。电子设备100接收用户针对各类应用程序的图标02中两个图标的拖拽指令。其中，在该两个图标被拖拽的过程中，两个图标的拖动阴影，根据拖动速度的不同与拖拽点之间存在偏移，如图12中(2)所示，随着图片01被拖拽至目标位置后，拖动阴影也随后到达目标位置，此时，可以该两个图标，进而可以打开并运行该应用程序。

在该场景下，电子设备100通过触摸传感器180K检测到通过拖拽点(即：用户触摸到显示屏的触控点)对各类应用程序的图标02中两个图标的向右的拖拽指令(如，触摸传感器180K识别出用户在显示屏中选中各类应用程序的图标02中两个图标，并做出向右移动触控操作并保持与图片01的触控状态)；响应于向右的拖拽指令，电子设备100可以根据识别到的触控操作，控制各类应用程序的图标02中两个图标跟随所述拖拽点移动。而且，在各类应用程序的图标02中两个图标跟随所述拖拽点移动过程中，电子设备100获取所述各类应用程序的图标02中两个图标跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息；电子设备100根据所述拖拽信息，计算所述一个控件的拖动阴影对应的偏移量，并根据所述偏移量和所述拖拽坐标，控制所述拖动阴影在显示屏中显示。其中在该过程中，被拖拽的各类应用程序的图标02中两个图标，以及器对应的拖动阴影一同在显示屏中显示。

需要说明的是，上述应用场景的实施方式的只是本申请实施例中的几种示例性的实施方式，本申请实施例中的应用场景包括但不仅限于以上应用场景。

2、通过输入设备输入拖拽指令。

在本申请以下实施例中，拖拽指令为通过通用串行总线(universal serial bus，USB)接口130、无线通信模块160、天线1、天线2、移动通信模块150、无线通信模块160等等连接外部的输入设备向电子设备发送的指令。当电子设备接收到对一个或多个控件的用户操作，用于指示将一个或多个控件从一个位置拖拽至另一个位置。例如，该用户操作可以为触控一个或多个控件后进行移动，其中，在移动过程中一直保持触控状态，到达目标位置后结束该触控。

需要说明的是，本申请实施例并不对输入的拖拽指令的实现方式做限定。该输入方式可以包括并不限于以下几种：通过鼠标对控件进行多次连续点击操作或长时间(超过预设时间)点击操作后，拖拽该控件移动。该用户操作还可以有其他的实现形式，例如：还可以是通过蓝牙接口，接收蓝牙输入设备对控件的拖拽指令，从而该控件进行移动的操作等等。

具体的，在本申请实施例中，电子设备中拖动阴影动画效果的实现方法可以对应参看上述图7-图12所示实施例的相关描述，本申请实施例对此不再赘述。

下面介绍电子设备100上实现的一些UI实施例。

基于前述场景，请参考附图13-图15，图13-图15是本申请实施例提供的一组拖动一个控件的拖动用户界面示意图。

具体的，设置所述拖拽信息包括所述拖拽速度；所述预设拖拽策略包括所述拖拽速度与所述偏移量的值成正比。如图13所示，用户所持有的电子设备100的用户界面中有一张图片。电子设备100接收用户针对图片的拖拽指令。其中，如图14所示，在图片被拖拽的过程中，图片的拖动阴影，根据拖动速度与拖拽点之间存在偏移。如图15所示，图15中的拖动速度大于图14中所示的拖动速度，因此，如图15所示，在图片被拖拽的过程中，图片的拖动阴影，根据拖动速度的不同与拖拽点之间存在偏移，随着图片被拖拽至目标位置后，拖动阴影也随后到达目标位置。

可以理解的，当拖拽点高速移动时，通过增加对移动轨迹反方向的偏移量的方式实现高阻尼效果，即：拖动阴影跟随在拖拽点移动轨迹后方的惯性动画效果。当拖拽点低速移动时，通过减小对移动轨迹反方向的偏移量的方式实现低阻尼效果，即：拖动阴影逐渐追上拖拽点的惯性动画效果。

在该场景下，电子设备100通过输入设备接收到对图片的拖拽指令(接收到鼠标对在显示屏中的图片处做出向右移动的点击操作并保持与图片01的点击状态)；响应于向右的拖拽指令，电子设备100可以根据识别到的用户操作，控制图片01跟随所述拖拽点移动。而且，在图片01跟随所述拖拽点移动过程中，电子设备100获取所述图片01跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息；电子设备100根据所述拖拽信息，计算所述一个控件的拖动阴影对应的偏移量，并根据所述偏移量和所述拖拽坐标，控制所述拖动阴影在显示屏中显示。

由上述图5A-图15所述实施例的相关描述可知，通过设置拖动阴影偏移量，实现了拖拽时，拖动阴影与拖拽点的分离效果，并且可以通过动态设置偏移量的方式，实现各种动画效果，例如：通过随着触控点移动的加速度增加，动态增加偏移量，实现拖拽时的阻尼动画效果；达到一种触控点开始移动时，拖动阴影还没有跟随触控点移动，随后逐渐跟上触控点的惯性效果等等。此外，由于本申请实施例只是设置被拖拽控件对应拖动阴影的偏移量，不会影响拖拽控件的拖拽事件原有的分发流程，拖拽控件还是会被向触控点位置分发。

(二)实施例2：

应用场景2：在不同显示屏内进行拖拽操作。

请参考附图16，图16是本申请实施例提供的一组电子设备的用户界面，如图6所示，用户所持有的电子设备的用户界面中有一张图片01。该图片01当前在一个显示屏(第一设备)中显示，右边的显示屏是另一个显示屏(第二设备)。此时，需要将图片01从当前所在的显示屏中，移动到另一个显示屏中，使得图片01在另一个显示屏中显示。

在应用场景2中，在不同显示屏内，电子设备在图片01从一个显示屏被拖拽到另一个显示屏的过程中时，可以检测到作用于该用户界面中一个或多个控件的拖拽指令，并响应于该拖拽指令，将一个或多个控件动一个位置移动到另一个位置，并按照一定的策略使其该一个或多个控件的拖动阴影，在拖拽过程中实现各种动画效果。

下面描述实施例1提供的方法。

在本申请以下实施例中，拖拽指令可以为电子设备通过触摸传感器180K检测到的通过拖拽点对一个或多个控件的用户操作，用于指示将一个或多个控件从一个位置拖拽至另一个位置。例如，该用户操作可以为触控一个或多个控件进行移动，其中，在移动过程中可以一直保持触控状态，到达目标位置后结束该触控。拖拽指令还可以为通过通用串行总线(universal serial bus，USB)接口130、无线通信模块160、天线1、天线2、移动通信模块150、无线通信模块160等等连接外部的输入设备向电子设备发送的指令。当电子设备接收到对一个或多个控件的用户操作，用于指示将一个或多个控件从一个位置拖拽至另一个位置。例如，该用户操作可以为触控一个或多个控件后进行移动，其中，在移动过程中一直保持触控状态，到达目标位置后结束该触控。需要说明的是，本申请实施例并不对拖拽指令的实现方式做任何限定。

在本申请以下实施例中，电子设备可以检测到通过拖拽点对一个或多个控件的拖拽指令；响应于所述拖拽指令，控制所述一个或多个控件跟随拖拽点移动，即触发拖拽事件。然后，电子设备可以获取所述一个或多个控件跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息；根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，所述拖动阴影为所述一个或多个控件对应的显示图像；根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示。

其中，所述拖拽信息包括第一显示标识和第二显示标识，所述第一显示标识用于识别第一设备的显示屏，所述第二显示标识用于识别第二设备的显示屏；所述预设拖拽策略包括：当所述一个或多个控件由所述第一设备进入所述第二设备时，在所述第一设备的显示屏中所述拖动阴影对应的偏移量的值逐渐增大，在所述第二设备的显示屏中所述拖动阴影对应的偏移量的值逐渐减小。例如：获取拖拽信息包括第一显示标识和第二显示标识，则可以在穿梭设备时，根据时间变化(例如：每毫秒降低一定量的偏移量的值)，或根据空间变化(例如：鼠标每移动1像素降低一定量的偏移量的值)，以实现、在所述第一设备的显示屏中所述拖动阴影对应的偏移量的值逐渐增大，在所述第二设备的显示屏中所述拖动阴影对应的偏移量的值逐渐减小的策略，并使得实现拖动阴影的中心逐渐靠近鼠标指针的效果。

需要说明的是，该第一设备和第二设备可以为同一个设备，还可以为进行建立有通信连接的两个不同的电子设备，本申请不作具体的限定。当第一设备和第二设备为同一个设备时，第一设备的显示屏和第二设备的显示屏可以是同一个电子设备的主副显示屏，如，折叠屏手机的第一显示屏和第二显示屏。当第一设备和第二设备为进行建立有通信连接的两个不同的电子设备时，第一设备的显示屏和第二设备的显示屏可以是分别于同于个服务器连接的两个显示器的显示屏。

请参考附图17，图17是本申请实施例提供的又一种拖动阴影动画效果的实现流程示意图。相较于上述图7所示的拖拽事件流程示意图，如图17所示拖拽事件流程，可以通过改变每个时间点的偏移量，来改变拖动阴影相对于拖拽点的位移，从而以实现相应的拖拽期间的动画效果。

如图17所示，电子设备可以监听拖拽流程，首先该输入模块将输入事件回调至拖放控制(Drag Drop Controller)，以保证输入模块通过回调函数，将每一次触控移动事件发送给拖放控制。其次，当用户操作出发了该触控移动事件时，拖放控制向拖动状态(DragState)发送拖拽点的x，y坐标，即，拖拽坐标。相较于上述图7所示的拖动阴影动画效果的实现流程示意图，电子设备可以跟随时间的推移监听拖拽流程，在用户连续对一个或多个控件进行拖拽时，该电子设备可以周期性(每1毫秒)的通过监听新的移动事件，计算新的合适的偏移量，并将计算好的新的偏移量发送至拖动状态中，以使新的偏移量与拖拽点的x，y坐标累加，获得新的坐标。最后拖动状态将计算好的新的坐标发送至面控制(SurfaceControl)中设置拖动阴影的坐标，这种可以根据连续的拖拽事件，设置连续的设置拖动阴影的坐标，以使拖动阴影实现各种动画效果。如图17所示拖拽事件流程，还可以通过改变偏移量，来改变拖动阴影相对于拖拽点的位移。从而实现将拖动阴影与触控点分离，以实现相应的拖拽期间的动画效果。

下面介绍电子设备100上实现的一些UI实施例。

基于前述场景，请参考附图18-图20，图18-图20是本申请实施例提供的另一组拖动一个控件的拖动用户界面示意图。

具体的，如图18所示的用户所持有的第二设备的显示屏，电子设备100接收用户针对第一设备对应的显示屏中图片的拖拽指令，需要将图片从第一设备的显示屏中拖拽至第二设备的显示屏中。在图片被拖拽的过程中，当跨屏拖拽刚刚发生时，设置offset值为拖动阴影的宽度(或高度)，使拖动阴影恰好在屏幕边缘外，用户此时恰好看不到拖动阴影。其中，如图19所示，根据拖动速度与拖拽点之间存在偏移。即，可以根据时间变化(例如：每毫秒降低一定量的偏移量offset值)，或根据空间变化(例如：鼠标每移动1像素降低一定量的偏移量offset值)，以实现拖动阴影的中心逐渐靠近鼠标指针的效果。如图20所示，当offset降低为0时，即完成了一次渐入效果。如果将上述图18-图20所示过程反过来，就是第一设备中的一次渐出效果。

在该场景下，电子设备100通过输入设备接收到对图片的拖拽指令(接收到鼠标对在显示屏中的图片处做出向右移动的点击操作并保持与图片01的点击状态)；响应于向右的拖拽指令，电子设备100可以根据识别到的用户操作，控制图片01跟随所述拖拽点移动。若在拖拽信息中获取到第一显示标识和第二显示标识，则说明该拖拽过程是进行了设备间穿梭，即在不同显示屏中显示。而且，在图片01跟随所述拖拽点穿梭过程中，电子设备100获取第一显示标识和第二显示标识以及其余的拖拽信息，并根据在所述第一设备的显示屏中所述拖动阴影对应的偏移量的值逐渐增大，在所述第二设备的显示屏中所述拖动阴影对应的偏移量的值逐渐减小的策略，计算所述一个控件的拖动阴影对应的偏移量，并根据所述偏移量和所述拖拽坐标，控制所述拖动阴影在不同显示屏中显示。

需要说明的是，剩余的关于实施例2中的拖拽过程中的具体的操作方式，其中，对应的还可以参考上述实施例的相关描述。

本申请实施例通过偏移量的动态设置，实现了流畅的拖动阴影渐入渐出效果，为用户带来了更加流畅自然的多屏协同体验。例如：当跨屏拖拽刚刚发生时，设置offset值为拖动阴影的宽度(或高度)，使拖动阴影恰好在屏幕边缘外，用户此时恰好看不到拖动阴影，可以根据时间变化(例如：每毫秒降低一定量的offset值)，或根据空间变化(例如：鼠标每移动1像素降低一定量的offset值)，以实现拖动阴影的中心逐渐靠近鼠标指针的效果。

还需要说明的是，上述应用场景的实施方式的只是本申请实施例中的几种示例性的实施方式，本申请实施例中的应用场景包括但不仅限于以上应用场景。

参见图21，图21是本申请实施例提供的又一种拖动阴影动画效果的实现方法的流程示意图，该方法可应用于上述图4A中所述的电子设备中，其中的电子设备100可以用于支持并执行图21中所示的方法流程步骤S301-步骤S305。下面将结合附图21从电子设备侧进行描述。该方法可以包括以下步骤S301-步骤S305。

步骤S301：检测到通过拖拽点对一个或多个控件的拖拽指令。

具体的，电子设备检测到通过拖拽点对一个或多个控件的拖拽指令。电子涉笔接收到用户操作后，可以检测出该用户操作为对一个或多个控件的拖拽指令。其中，拖拽点与拖拽指令相对应。例如：当拖拽指令为触控操作时，该拖拽点为触控点。可以理解的是，用户操作可以是通过触控操作实现的操作，或者，通过输入设备实现的操作，本申请对此不作具体限定。

步骤S302：响应于拖拽指令，控制一个或多个控件跟随拖拽点移动。

具体的，电子设备响应于拖拽指令，控制所述一个或多个控件跟随拖拽点移动。在电子设备识别出用户操作为对一个或多个控件的拖拽指令后，可以响应于该指令控制一个或多个控件跟随拖拽点移动。

步骤S303：获取一个或多个控件跟随拖拽点移动过程中的拖拽坐标以及对应的拖拽信息。

具体的，电子设备获取一个或多个控件跟随拖拽点移动过程中的拖拽坐标以及对应的拖拽信息，所述拖拽信息包括拖拽速度、拖拽加速度、拖拽轨迹的曲率变化率中的一个或多个。可以理解的，一个或多个控件跟随拖拽点移动过程中，电子设备可以获取一个或多个控件跟随拖拽点移动的拖拽坐标，移动方向，移动轨迹以及拖拽信息等等。该拖拽坐标可以用于确定拖动阴影的坐标，该移动方向可以确定拖动阴影相对于拖拽坐标的偏移方向，拖拽信息可以用于确定拖动阴影的偏移量。

步骤S304：根据拖拽信息，计算一个或多个控件的拖动阴影对应的偏移量。

具体的，电子设备根据拖拽信息，计算一个或多个控件的拖动阴影对应的偏移量。其中，该偏移量与拖拽信息存在对应关系，该对应关系可以通过回调函数实现。本申请实施例对此不作具体的限定。

可选的，所述根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，包括：根据所述拖拽信息，基于预设拖拽策略计算所述一个或多个控件的拖动阴影对应的偏移量，所述预设拖拽策略包括所述拖拽信息与所述偏移量的对应关系。在本申请实施例中，通过预先设置的预设拖拽策略，根据当前的推拽信息动态的确定偏移量，可以在拖动过程中实现各种动画效果。

可选的，所述拖拽信息包括所述拖拽速度；所述预设拖拽策略包括所述拖拽速度与所述偏移量的值成正比。例如：当拖拽点高速移动时，拖动阴影对移动轨迹反方向的偏移量大于拖拽点低速移动时，拖动阴影对移动轨迹反方向的偏移量；通过这种方式可以实现高阻尼效果。速度越快，在一定范围内拖动阴影与拖拽点之间的距离越大。相反速度越慢，在一定范围内拖动阴影与拖拽点之间的距离越近，直至拖拽点静止时，拖动阴影无偏移量，实现拖动阴影附加在触控坐标效果。这种根据拖拽速度，动态增加偏移量的方式，可以优化在拖动弄过程中拖动阴影的动画效果，使得其在移动时不生硬。例如：通过外部输入设备，以鼠标的为例拖拽屏幕中的一张图片，其中，屏幕中箭头处在的位置为拖拽点的位置。如上述实施例1所示，再将图片从左端拖动到右端时，在整个拖动过程中，起始位置的拖拽速度和终止位置的拖拽速度较低，其拖动阴影对应的偏移量也较小，中间位置的拖拽速度较高，其拖动阴影对应的偏移量也较大。

可选的，所述拖拽信息包括所述拖拽加速度；所述预设拖拽策略包括所述拖拽加速度与所述偏移量的值成正比。例如：当拖拽点加速移动时，逐渐增加对移动轨迹反方向的偏移量；通过这种方式可以实现高阻尼效果，即：拖动阴影跟随在拖拽点移动轨迹后方的惯性动画效果。当拖拽点减速移动时，逐渐减小对移动轨迹反方向的偏移量；通过这种方式实现低阻尼效果，即：拖动阴影逐渐追上拖拽点的惯性动画效果。当拖拽点静止时，无偏移量，实现拖动阴影附加在触控坐标效果。这种动态增加偏移量的方式，可以优化拖动阴影的动画效果，使得其在移动时不生硬。

可选的，所述拖拽信息包括所述拖拽轨迹的曲率变化率；所述预设拖拽策略包括根据所述拖拽轨迹的曲率变化率和预设公式，计算所述偏移量的值。当拖拽点拖拽一个或多个控件时期拖拽轨迹是曲线，则拖动阴影的偏移量可以随着曲线变化率的变化而变化。其中，需要说明的是，该预设公式可以用于映射曲率变化率的大小和偏移量的值。例如：当拖拽点曲线变化率变化加快移动时，逐渐增加与移动轨迹切线垂直向外方向的偏移量；通过这种方式可以实现甩入甩出的高阻尼效果。这种动态增加偏移量的方式，可以优化拖动阴影的动画效果，使得其在移动时不生硬。

在一种可能实现的方式中，所述拖拽信息包括第一显示标识和第二显示标识，所述第一显示标识用于识别第一设备的显示屏，所述第二显示标识用于识别第二设备的显示屏；所述预设拖拽策略包括：当所述一个或多个控件由所述第一设备进入所述第二设备时，在所述第一设备的显示屏中所述拖动阴影对应的偏移量的值逐渐增大，在所述第二设备的显示屏中所述拖动阴影对应的偏移量的值逐渐减小。例如：在穿梭设备时，根据时间变化(例如：每毫秒降低一定量的偏移量的值)，或根据空间变化(例如：鼠标每移动1像素降低一定量的偏移量的值)，以实现拖动阴影的中心逐渐靠近鼠标指针的效果。

步骤S305：根据偏移量和拖拽坐标，控制拖动阴影显示。

具体的，电子设备根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示。可以理解的是，电子设备根据计算好的一系列坐标，可以控制所述拖动阴影在显示屏中显示，以实现各种动画效果。通过偏移量的动态设置，实现了流畅的拖动阴影阻尼动画效果。具有全局适配性。在整个系统范围内的任何拖放操作都可以自然地获得流畅的拖拽体验。

可选的，所述根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示，包括：将所述拖拽坐标与所述偏移量进行累加，获得累加后的拖拽坐标；控制所述拖动阴影在所述累加后的拖拽坐标处显示。需要说明的是，拖拽坐标是用于绘制拖动阴影的坐标，在一个或多个控件跟随拖拽点移动时，可以获取该移动过程中的移动路径和移动方向，根据移动路径确定出该拖拽坐标。例如：拖拽点由A点移动到B点，相应的，拖动阴影也可以按照该轨迹从A点移动到B点。通过坐标绘制拖动阴影，会使得拖动阴影更准确，而且，绘制拖动阴影用的x、y坐标分别引入偏移量offsetX与偏移量offsetY，通过改变该偏移量，可以动态改变拖动阴影在拖动过程中的移动效果。

在一种可能实现的方式中，所述方法还包括：在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述一个或多个控件和所述拖动阴影。在本申请实施例中，同时显示控件以及其对应的拖动阴影，可以直观的观察到被拖动的控件与控件原来所处位置之间的对应关系，提升了用户体验。

在一种可能实现的方式中，所述方法还包括：在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述拖动阴影，不显示所述一个或多个控件。在本申请实施例中，仅仅显示控件其对应的拖动阴影，不仅可以观察到控件被拖动后的位置，还可以观察到控件离开原位置的效果，提升了用户体验。

本申请实施例通过设置拖动阴影偏移量，实现了拖拽时，拖动阴影与拖拽点的分离效果，并且可以通过动态设置偏移量的方式，实现各种动画效果，例如：通过随着触控点移动的加速度增加，动态增加偏移量，实现拖拽时的阻尼动画效果；达到一种触控点开始移动时，拖动阴影还没有跟随触控点移动，随后逐渐跟上触控点的惯性效果等等。此外，由于本申请实施例只是设置被拖拽控件对应拖动阴影的偏移量，不会影响拖拽控件的拖拽事件原有的分发流程，拖拽控件还是会被向触控点位置分发。

需要说明的是，本申请实施例中步骤S301-步骤S305相关描述可参见上述图5A-图20所示的实施例的相关描述，此处不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可能可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如上述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性或其它的形式。

上述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

上述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以为个人计算机、服务端或者网络设备等，具体可以是计算机设备中的处理器)执行本申请各个实施例上述方法的全部或部分步骤。其中，而前述的存储介质可包括：U盘、移动硬盘、磁碟、光盘、只读存储器(Read-Only Memory，缩写：ROM)或者随机存取存储器(Random Access Memory，缩写：RAM)等各种可以存储程序代码的介质。

以上所述，以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (20)

1.一种拖动阴影动画效果的实现方法，其特征在于，包括：

检测到通过拖拽点对一个或多个控件的拖拽指令；

响应于所述拖拽指令，控制所述一个或多个控件跟随所述拖拽点移动；

获取所述一个或多个控件跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息，所述拖拽信息包括拖拽速度、拖拽加速度、拖拽轨迹的曲率变化率中的一个或多个；

根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，所述拖动阴影为所述一个或多个控件跟随所述拖拽点移动过程中的图像；

根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示。

2.根据权利要求1所述方法，其特征在于，所述根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，包括：

根据所述拖拽信息，基于预设拖拽策略计算所述一个或多个控件的拖动阴影对应的偏移量，所述预设拖拽策略包括所述拖拽信息与所述偏移量的对应关系。

3.根据权利要求2所述方法，其特征在于，所述拖拽信息包括所述拖拽速度；所述预设拖拽策略包括所述拖拽速度与所述偏移量的值成正比。

4.根据权利要求2所述方法，其特征在于，所述拖拽信息包括所述拖拽加速度；所述预设拖拽策略包括所述拖拽加速度与所述偏移量的值成正比。

5.根据权利要求2所述方法，其特征在于，所述拖拽信息包括所述拖拽轨迹的曲率变化率；所述预设拖拽策略包括根据所述拖拽轨迹的曲率变化率和预设公式，计算所述偏移量的值。

6.根据权利要求2所述方法，其特征在于，所述拖拽信息包括第一显示标识和第二显示标识，所述第一显示标识用于识别第一设备的显示屏，所述第二显示标识用于识别第二设备的显示屏；所述预设拖拽策略包括：

当所述一个或多个控件由所述第一设备进入所述第二设备时，在所述第一设备的显示屏中所述拖动阴影对应的偏移量的值逐渐增大，在所述第二设备的显示屏中所述拖动阴影对应的偏移量的值逐渐减小。

7.根据权利要求1-6所述的任意一项方法，其特征在于，所述根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示，包括：

将所述拖拽坐标与所述偏移量进行累加，获得累加后的拖拽坐标；

控制所述拖动阴影在所述累加后的拖拽坐标处显示。

8.根据权利要求1-7所述的任意一项方法，其特征在于，所述方法还包括：

在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述一个或多个控件和所述拖动阴影。

9.根据权利要求1-7所述的任意一项方法，其特征在于，所述方法还包括：

在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述拖动阴影，不显示所述一个或多个控件。

10.一种电子设备，包括显示屏、存储器、一个或多个处理器；所述显示屏、所述存储器与所述一个或多个处理器耦合，所述存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，所述一个或多个处理器调用所述计算机指令以使得所述电子设备执行：

检测到通过拖拽点对一个或多个控件的拖拽指令；

响应于所述拖拽指令，控制所述一个或多个控件跟随所述拖拽点移动；

获取所述一个或多个控件跟随所述拖拽点移动过程中的拖拽坐标以及对应的拖拽信息，所述拖拽信息包括拖拽速度、拖拽加速度、拖拽轨迹的曲率变化率中的一个或多个；

根据所述拖拽信息，计算所述一个或多个控件的拖动阴影对应的偏移量，所述拖动阴影为所述一个或多个控件跟随所述拖拽点移动过程中的图像；

根据所述偏移量和所述拖拽坐标，控制所述拖动阴影显示。

11.根据权利要求10所述电子设备，其特征在于，所述一个或多个处理器调用所述计算机指令以使得所述电子设备具体执行：

根据所述拖拽信息，基于预设拖拽策略计算所述一个或多个控件的拖动阴影对应的偏移量，所述预设拖拽策略包括所述拖拽信息与所述偏移量的对应关系。

12.根据权利要求11所述电子设备，其特征在于，所述拖拽信息包括所述拖拽速度；所述预设拖拽策略包括所述拖拽速度与所述偏移量的值成正比。

13.根据权利要求11所述电子设备，其特征在于，所述拖拽信息包括所述拖拽加速度；所述预设拖拽策略包括所述拖拽加速度与所述偏移量的值成正比。

14.根据权利要求11所述电子设备，其特征在于，所述拖拽信息包括所述拖拽轨迹的曲率变化率；所述预设拖拽策略包括根据所述拖拽轨迹的曲率变化率和预设公式，计算所述偏移量的值。

15.根据权利要求11所述电子设备，其特征在于，所述拖拽信息包括第一显示标识和第二显示标识，所述第一显示标识用于识别第一设备的显示屏，所述第二显示标识用于识别第二设备的显示屏；所述预设拖拽策略包括：

当所述一个或多个控件由所述第一设备进入所述第二设备时，在所述第一设备的显示屏中所述拖动阴影对应的偏移量的值逐渐增大，在所述第二设备的显示屏中所述拖动阴影对应的偏移量的值逐渐减小。

16.根据权利要求10-15所述的任意一项电子设备，其特征在于，所述一个或多个处理器调用所述计算机指令以使得所述电子设备具体执行：

将所述拖拽坐标与所述偏移量进行累加，获得累加后的拖拽坐标；

控制所述拖动阴影在所述累加后的拖拽坐标处显示。

17.根据权利要求10-16所述的任意一项电子设备，其特征在于，所述一个或多个处理器还用于调用所述计算机指令以使得所述电子设备执行：

在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述一个或多个控件和所述拖动阴影。

18.根据权利要求10-16所述的任意一项电子设备，其特征在于，所述一个或多个处理器还用于调用所述计算机指令以使得所述电子设备执行：

在所述一个或多个控件跟随所述拖拽点移动过程中，显示所述拖动阴影，不显示所述一个或多个控件。

19.一种计算机可读存储介质，包括指令，其特征在于，当所述指令在电子设备上运行时，使得所述电子设备执行如权利要求1-9中任一项所述的方法。

20.一种计算机程序，其特征在于，所述计算机程序包括指令，当所述计算机程序被计算机执行时，使得所述计算机执行如权利要求1-9中任意一项所述的方法。

Images