CN113568549A - 图形界面显示方法、电子设备、介质以及程序产品 - Google Patents

Abstract

本公开的实施例提供了一种图形界面显示方法、电子设备、存储介质以及程序产品。在该方法中，电子设备在屏幕上显示M个用户界面UI元素。电子设备检测到作用于第一UI元素的操作。响应于该操作，电子设备使屏幕上的N个UI元素中的每个UI元素产生受到“吸引力”或“排斥力”的动画效果。在产生动画效果时，电子设备确定第二UI元素将在第一方向上移动的目标距离。电子设备使第二UI元素从起始位置沿第一方向以目标距离进行第一移动。在第一移动之后，电子设备使第二UI元素沿与第一方向相反的第二方向进行第二移动，以复位到起始位置。如此，本公开的实施例展现出符合自然规律的动态效果，与用户生活体验更加一致，加强了电子设备的生命力和人性化程度。

Description

图形界面显示方法、电子设备、介质以及程序产品

技术领域

本公开总体上涉及信息技术领域，并且更特别地涉及一种图形界面显示方法、电子设备、计算机可读存储介质、以及计算机程序产品。

背景技术

随着信息技术的发展，越来越多的电子设备被配备有各种类型的屏幕。因此，电子设备的屏幕上的用户界面(user interface，UI)或图形界面(graphic interface，GUI)的整体显示效果及风格成为影响用户体验的重要因素。在UI框架的构建中，动画效果已经成为不可分割的一部分。随着智能电话等电子设备的性能提高，电子设备的UI动画效果也随之发展。高刷新率、高渲染度、高复杂度的动画效果逐渐出现。然而，电子设备的屏幕上的UI动画效果还存在进一步改进的空间，以提供更良好的用户体验。

发明内容

本公开的实施例涉及一种用于实现UI元素之间存在“吸引力”或“排斥力”的动画效果的技术方案，并且具体提供了一种图形界面显示方法、电子设备、计算机可读存储介质、以及计算机程序产品。

在本公开的第一方面，提供了一种图形界面显示方法。在该方法中，电子设备在屏幕上显示M个用户界面UI元素，M为大于1的正整数。电子设备检测到作用于M个UI元素中的第一UI元素的操作。响应于对第一UI元素的操作，电子设备使屏幕上的N个UI元素中的每个UI元素产生动画效果，N为1与M-1之间的正整数。在产生动画效果时，电子设备确定N个UI元素中的第二UI元素将在第一方向上移动的目标距离，第一方向是从第二UI元素指向第一UI元素的方向或是从第一UI元素指向第二UI元素的方向。电子设备使第二UI元素从起始位置沿第一方向以目标距离进行第一移动。电子设备在第一移动之后，使第二UI元素沿与第一方向相反的第二方向进行第二移动，以复位到起始位置。以此方式，本公开的实施例实现了UI元素之间具有“引力”的动画效果，展现出符合自然规律的动态效果，与用户生活体验更加一致，加强了电子设备的生命力和人性化程度。在一些实施例中，取决于***设置或用户设置，或者取决于***作的第一UI元素的操作持续的时间长度，第二UI元素可以进行多次第一位移和第二位移。也就是说，第二UI元素可以按照循环的方式在第一方向上执行第一移动，在第二方向上执行第二移动，然后再在第一方向上执行第一移动，再在第二方向上执行第二移动，如此循环往复。在一些实施例中，第二UI元素在每次循环中在第一方向上的第一移动中的目标距离可以保持不变或逐渐减小。

在一些实现方式中，为了确定目标距离，电子设备可以确定第二UI元素的尺寸，确定第二UI元素与第一UI元素之间的距离，以及基于尺寸和距离来确定目标距离。以此方式，UI元素受到其他UI元素的“吸引力”或“排斥力”作用的大小可以取决于UI元素本身的大小和两个UI元素之间的距离，从而符合于自然界中的引力大小规律，由此进一步提升用户体验。

在一些实现方式中，为了基于尺寸和距离来确定目标距离，电子设备可以使目标距离随着尺寸增大而增大并且随着距离增大而减小。以此方式，UI元素本身的大小越大，两个UI元素之间的距离越小，UI元素受到其他UI元素的“吸引力”或“排斥力”作用的大小也就越大，从而符合于自然界中的引力大小规律，由此进一步提升用户体验。

在一些实现方式中，为了确定第二UI元素与第一UI元素之间的距离，电子设备可以确定第一UI元素的第一中心点，确定第二UI元素的第二中心点，以及确定第一中心点与第二中心点之间的直线距离，作为第二UI元素与第一UI元素之间的距离。以此方式，两个UI元素之间的距离可以按照直接明了的方式确定为两个UI元素中心点之间的距离，从而提高电子设备确定UI元素之间距离的确定方式的一致性，简化电子设备的计算过程。

在一些实现方式中，为了确定第二UI元素与第一UI元素之间的距离，电子设备可以确定第一UI元素的第一中心点，确定以第一中心点为圆心的具有各自半径的多个圆，确定第二UI元素与多个圆中的至少一个圆相交，以及将至少一个圆中半径最小的圆的半径确定为第二UI元素与第一UI元素之间的距离。以此方式，电子设备可以更简单和方便地确定UI元素之间的距离，并且使得UI元素之间的距离具有更高的一致性，从而简化基于距离的后续处理和计算过程。

在一些实现方式中，为了确定第二UI元素与第一UI元素之间的距离，电子设备可以确定第一UI元素与第二UI元素之间的横向间距，确定第一UI元素与第二UI元素之间的纵向间距，以及基于横向间距和纵向间距中的至少一者和第一方向来确定第二UI元素与第一UI元素之间的距离。以此方式，电子设备可以基于UI元素之间的间距来确定UI元素之间的距离，从而提高距离确定方式的灵活性和合理性，特别是在UI元素之间的间距基本保持一致的场景中。

在一些实现方式中，电子设备还可以基于第一UI元素的尺寸来确定第一UI元素的影响区域，以及将M个UI元素中在影响区域内的UI元素确定为N个UI元素。以此方式，电子设备可以将UI元素的“引力”影响范围设置为适当的大小，从而可以在保持“引力”动画效果符合自然规律的同时，减少电子设备在实现“引力”动画效果时的计算量，节省计算资源。

在一些实现方式中，电子设备还可以将M个UI元素中除了第一UI元素以外的M-1个UI元素确定为N个UI元素。以此方式，电子设备可以无需设置UI元素的“引力”影响范围，从而可以在保持“引力”动画效果符合自然规律的同时，简化“引力”动画效果的相关设置。

在一些实现方式中，第一移动持续的第一时长、第二移动持续的第二时长、以及第一移动和第二移动持续的总时长中的至少一个可以是可配置的。以此方式，电子设备的用户可以按照偏好来设置“引力”动画效果的时间长短，从而进一步改进用户体验。

在一些实现方式中，第二UI元素在第一移动和第二移动中的至少一者期间的移动的动画效果可以基于位移随时间变化的预定义曲线来确定。以此方式，电子设备可以基于位移随时间变化的预定义曲线来方便地控制UI元素的移动，使得“引力”动画效果更符合用户的使用习惯，从而进一步改进用户体验。

在一些实现方式中，预定义曲线可以为贝塞尔曲线或弹性力曲线。以此方式，电子设备可以基于贝塞尔曲线或弹性力曲线来方便地控制UI元素的移动，使得“引力”动画效果更加符合用户在生活中对于“吸引力”和“排斥力”的习惯认知，从而进一步改进用户体验。

在一些实现方式中，第一移动和第二移动中的至少一个可以包括变加速直线运动。以此方式，电子设备可以基于自然界的物体在引力作用下的加速运动规律，来实现UI元素的第一移动和第二移动，使得“引力”动画效果更加符合自然规律和用户在生活中的习惯认知，从而进一步改进用户体验。

在一些实现方式中，为了使第二UI元素进行第一移动，电子设备可以确定对第一UI元素的操作被执行的第一时间点，基于预定速度和第二UI元素与第一UI元素之间的距离，确定开始第一移动的第二时间点与第一时间点之间的延迟，基于第一时间点和延迟来确定第二时间点，以及在第二时间点使第二UI元素开始第一移动。以此方式，电子设备的UI可以在视觉上呈现“引力”作用的联动，也即，“吸引力”或“排斥力”造成的移动随着距离进行传播，使得UI的动画效果更符合用户的使用习惯，从而进一步改进用户体验。

在一些实现方式中，对第一UI元素的操作包括使第一UI元素与第二UI元素交换位置，上述的目标距离是第一目标距离，为了产生动画效果，电子设备还可以将第二UI元素从初始位置移动到起始位置，起始位置是第一UI元素的初始位置；在第二UI元素到达起始位置之后并且在第一移动之前，确定第二UI元素将在第三方向上移动的第二目标距离，第三方向是从第二UI元素指向第三UI元素的方向或是从第三UI元素指向第二UI元素的方向；在第一移动之前，使第二UI元素从起始位置沿第三方向以第二目标距离进行第三移动；以及在第三移动之后并且在第一移动之前，使第二UI元素沿与第三方向相反的第四方向进行第四移动，以复位到起始位置。以此方式，尽管第二UI元素没有被直接操作，但是第二UI元素由于需要与第一UI元素交换位置而来到新位置，从而受到其他UI元素的“引力”作用。因此，电子设备可以更加充分和全面地展现出UI元素之间具有“引力”的动画效果，从而进一步提升用户体验。

在一些实现方式中，为了产生动画效果，电子设备还可以在第一移动和第二移动中的至少一者期间缩小或放大第二UI元素的尺寸。以此方式，电子设备可以更加多样化地展现出UI元素之间具有“引力”的动画效果，从而进一步提升用户体验。

在一些实现方式中，第一方向可以从第二UI元素的第二中心点指向第一UI元素的第一中心点、或者可以从第一中心点指向第二中心点。以此方式，电子设备可以准确且一致地确定出两个UI元素之间的“吸引力”或“排斥力”的方向，从而提高实现“引力”动画效果的准确度和效率。

在一些实现方式中，对第一UI元素的操作可以包括以下至少一项：点击、移动、与其他UI元素合并、展开、以及删除。以此方式，电子设备可以在与UI元素相关的几乎所有的操作中实现“引力”动画效果，从而在更多的操作场景中提升用户体验。

在一些实现方式中，第一方面的图形界面显示方法的功能可以通过AAR格式文件、JAR格式文件和电子设备的***接口中的至少一者来实现。以此方式，“引力”动画效果的能力或功能可以简单和方便地被实现并提供给电子设备的应用程序，例如桌面。

在本公开的第二方面，提供了一种电子设备。电子设备包括处理器以及存储有指令的存储器。指令在被处理器执行时使得电子设备执行根据第一方面及其实现方式的任一方法。

在本公开的第三方面，提供了一种计算机可读存储介质。计算机可读存储介质存储有指令，指令在被电子设备执行时使得电子设备执行第一方面及其实现方式的任一方法。

在本公开的第四方面，提供了一种计算机程序产品。计算机程序产品包括指令，指令在被电子设备执行时使得电子设备执行第一方面及其实现方式的任一方法。

应当理解，发明内容部分中所描述的内容并非旨在限定本公开的关键或重要特征，亦非用于限制本公开的范围。本公开的其他特征通过以下的描述将变得容易理解。

附图说明

通过参考附图阅读下文的详细描述，本公开的实施例的上述以及其他目的、特征和优点将变得容易理解。在附图中，以示例性而非限制性的方式示出了本公开的若干实施例。

图1示出了可以实现本公开的实施例的一种电子设备的硬件结构的示意图。

图2示出了根据本公开的实施例的图形界面显示方法的示例处理过程的流程图。

图3A至图3J示出了根据本公开的实施例的在UI元素被点击的场景中所产生的“引力”动画效果的示意图。

图4A和图4B示出了根据本公开的实施例的“引力”动画效果中的UI元素的第一移动的第一方向和第二移动的第二方向的示意图。

图5示出了根据本公开的实施例的“引力”动画效果中的受到“吸引力”影响的UI元素在进行第一移动和第二移动的过程中在不同时刻的位置的示意图。

图6示出了根据本公开的实施例的“引力”动画效果的动画过程和相关控制逻辑的示意图。

图7A示出了根据本公开的实施例的UI元素的位移随时间变化的预定义曲线为贝塞尔曲线的示意图。

图7B示出了根据本公开的实施例的UI元素的位移随时间变化的预定义曲线为反比例曲线的示意图。

图7C示出了根据本公开的实施例的UI元素的位移随时间变化的预定义曲线为临界阻尼弹性力曲线的示意图。

图7D示出了根据本公开的实施例的UI元素的位移随时间变化的预定义曲线为欠阻尼弹性力曲线的示意图。

图7E至图7H示出了根据本公开的实施例的受到“引力”影响的三个UI元素的不同位移时间变化曲线的比较的示意图。

图8示出了根据本公开的实施例的用于确定受到第一UI元素的“吸引力”或“排斥力”影响的第二UI元素进行第一移动的目标距离的示例处理过程的流程图。

图9示出了根据本公开的实施例的确定受到第一UI元素的“吸引力”或“排斥力”影响的第二UI元素的尺寸的示意图。

图10A和图10B分别示出了根据本公开的实施例的确定UI元素之间的距离的两种示例方式的示意图。

图11示出了根据本公开的实施例的基于中心点来确定第一UI元素与第二UI元素之间的距离的示例处理过程的流程图。

图12示出了根据本公开的实施例的基于中心点来确定第一UI元素与第二UI元素之间的距离的示意图。

图13示出了根据本公开的实施例的基于半径来确定第一UI元素与第二UI元素之间的距离的示例处理过程的流程图。

图14示出了根据本公开的实施例的基于半径来确定第一UI元素与第二UI元素之间的距离的示意图。

图15A和图15B示出了根据本公开的实施例的在基于半径确定UI元素之间的距离的情况下UI元素之间的整体传导方式的示意图。

图16示出了根据本公开的实施例的基于间距来确定第一UI元素与第二UI元素之间的距离的示例处理过程的流程图。

图17A至图17F示出了根据本公开的实施例的基于间距来确定第一UI元素与第二UI元素之间的距离的示意图。

图18A至图18C示出了根据本公开的实施例的在UI元素具有有限的“引力”范围的场景中所产生的“引力”动画效果的示意图。

图19A示出了根据本公开的实施例的基于“引力”传播速度来确定UI元素的“引力”动画效果开始的时间点的示例处理过程的流程图。

图19B至图19E示出了根据本公开的实施例的在考虑到“引力”传播延迟的情况下受到“引力”影响的三个UI元素的不同位移时间变化曲线的比较的示意图。

图20A至图20D示出了根据本公开的实施例在UI元素被移动并且与另一UI元素交换位置的场景中所产生的“引力”动画效果的示意图。

图21示出了根据本公开的实施例的在UI元素交换位置的场景中，先到达新位置的UI元素受到其他UI元素的“引力”作用而产生“引力”动画效果的示例处理过程的流程图。

图22A至图22D示出了根据本公开的实施例的在UI元素交换位置的场景中，先到达新位置的UI元素受到其他UI元素的“引力”作用而产生“引力”动画效果的示意图。

图23A至图23D示出了根据本公开的实施例在UI元素被移动并且与另一UI元素合并的场景中所产生的“引力”动画效果的示意图。

图24A至图24D示出了根据本公开的实施例在UI元素被删除的场景中所产生的“引力”动画效果的示意图。

图25A至图25D示出了根据本公开的实施例在UI元素被展开的场景中所产生的“引力”动画效果的示意图。

图26示出了根据本公开的实施例的“引力”动画效果相关联的UI框架动效与***桌面之间的关系的示意图。

图27示出了本公开的实施例的“引力”动画效果能力或功能可以被应用到的其他应用场景的示意图。

图28示出了根据本公开的实施例的用于实现“引力”动画效果能力或功能的***框架的示意图。

图29示出了根据本公开的实施例的“引力”动画效果能力或功能所涉及到的应用侧和UI框架侧之间的关系的示意图。

图30示出了根据本公开的实施例的“引力”动画效果能力或功能实现的三种方式的具体说明的示意图。

图31示出了根据本公开的实施例的用于实现“引力”动画效果的动效能力侧的类图关系的示意图。

图32示出了根据本公开的实施例的应用侧和动效能力侧用于实现“引力”动画效果的操作时序图。

图33示出了根据本公开的实施例的用于调整“引力”动画效果的参数的界面的示意图。

贯穿所有附图，相同或者相似的参考标号被用来表示相同或者相似的组件。

具体实施方式

下文将参考附图中示出的若干示例性实施例来描述本公开的原理和精神。应当理解，描述这些具体的实施例仅是为了使本领域的技术人员能够更好地理解并实现本公开，而并非以任何方式限制本公开的范围。在以下描述和权利要求中，除非另有定义，否则本文中使用的所有技术和科学术语具有与所属领域的普通技术人员通常所理解的含义。

如本文所使用的，术语“包括”及其类似用语应当理解为开放性包含，即“包括但不限于”。术语“基于”应当理解为“至少部分地基于”。术语“一个实施例”或“该实施例”应当理解为“至少一个实施例”。术语“第一”、“第二”等等可以指代不同的或相同的对象，并且仅用于区分所指代的对象，而不暗示所指代的对象的特定空间顺序、时间顺序、重要性顺序，等等。在一些实施例中，取值、过程、所选择的项目、所确定的项目、设备、装置、手段、部件、组件等被称为“最佳”、“最低”、“最高”、“最小”、“最大”，等等。应当理解，这样的描述旨在指示可以在许多可使用的功能选择中进行选择，并且这样的选择不需要在另外的方面或所有方面比其他选择更好、更低、更高、更小、更大或者以其他方式优选。如本文所使用的，术语“确定”可以涵盖各种各样的动作。例如，“确定”可以包括运算、计算、处理、导出、调查、查找(例如，在表格、数据库或另一数据结构中查找)、查明等。此外，“确定”可以包括接收(例如，接收信息)、访问(例如，访问存储器中的数据)等。再者，“确定”可以包括解析、选择、选取、建立等。

在本文中使用的术语“UI”表示用户与应用程序或操作***进行交互和信息交换的接口，它实现信息的内部形式与用户可以接受形式之间的转换。例如，应用程序的UI是通过java、可扩展标记语言(extensible markup language，XML)等特定计算机语言编写的源代码，UI源代码在电子设备上经过解析，渲染，最终呈现为用户可以识别的内容，比如图片、文字、按钮等UI元素。

在某些实施例中，UI中的UI元素的属性和内容是通过标签或者节点来定义的，比如XML通过<Textview>、<ImgView>、<VideoView>等节点来规定UI所包含的UI元素。一个节点对应UI中一个UI元素或属性，节点经过解析和渲染之后呈现为用户可视的内容。此外，很多应用程序，比如混合应用(hybrid application)的UI中通常还包含有网页。网页可以理解为内嵌在应用程序UI中的一个特殊的UI元素，网页是通过特定计算机语言编写的源代码，例如超文本标记语言(hyper text markup language，HTML)，层叠样式表(cascadingstyle sheets，CSS)，java脚本(JavaScript，JS)等，网页源代码可以由浏览器或与浏览器功能类似的网页显示组件加载和显示为用户可识别的内容。网页所包含的具体内容也是通过网页源代码中的标签或者节点来定义的，比如HTML通过<p>、<img>、<video>、<canvas>来定义网页的元素和属性。在本文中使用的术语“UI元素”包括但不限于：窗口(window)、滚动条(scrollbar)、表格视图(tableview)、按钮(button)、菜单栏(menu bar)、文本框(textbox)、导航栏、工具栏(toolbar)、图像(image)、静态文本(tatictext)、部件(Widget)等可视的UI元素。

在一些实施例中，UI元素还可以包括控件(control)。控件可以是对数据和方法的封装，控件可以有自己的属性和方法，属性是控件数据的简单访问者，方法则是控件的一些简单可见的功能。控件是用户界面的基本元素。例如，控件的类型可以包括但不限于：用户界面控件(用于开发构建用户界面的控件，如针对视窗、文本框、按钮、下拉式菜单等界面元素的控件)、图表控件(用于开发图表的控件，可以实现数据可视化等)、报表控件(用与开发报表的控件，实现报表的浏览查看、设计、编辑、打印等功能)、表格控件(用于开发表格(CELL)的控件，实现网格中数据处理和操作的功能)等。本申请实施例中控件的类型还可以包括：复合控件(将现有的各种控件组合起来，形成一个新的控件，集中多种控件的性能)、扩展控件(根据现有控件派生出一个新的控件，为现有控件增加新的性能或者更改现有控件的性能)、自定义控件等。

在一些实施例中，UI元素还可以包括页面模块。根据页面中控件的布局和属性，可以将页面划分为多个连续的页面模块。一个页面模块可以承载图片、文本、操作按钮、链接、动画、声音、视频等中的一或多种信息类型。一个页面模块可以呈现为一或多个控件的集合，也可以呈现为一张卡片，也可以呈现为卡片以及其他控件的集合。例如，页面模块可以呈现为主界面上的一个图标、图库中一张图片、负一屏中的一张卡片等等。本申请实施例中，不同页面模块可以有重叠，也可以没有重叠。本申请实施例中，页面模块也可以简称为模块。其中，卡片可以提供一种比应用程序(application，APP)更细粒度的服务能力，以可交互的卡片形式直接将用户最关心的服务或内容展示给用户，卡片可以嵌入各种APP或交互场景中，更好的满足用户需求。将一个应用的图片、文本、操作按钮、链接等多种元素整合到一张卡片，该卡片可以关联该应用的一个或者多个用户界面，用户通过在卡片上执行操作(例如点击操作)，可以实现显示界面跳转至对应应用的用户界面。采用卡片式的布局，可以对不同内容区分显示，使得显示界面内容的呈现更加直观，也使得用户可以更容易更准确地针对不同内容进行操作。

在本公开的实施例中描述的一些流程中，包含了按照特定顺序出现的多个操作或步骤，但是应该理解，这些操作或步骤可以不按照其在本公开的实施例中出现的顺序来执行或并行执行，操作的序号仅用于区分开各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作或步骤可以按顺序执行或并行执行，并且这些操作或步骤可以进行组合。

在诸如Android和iOS的移动操作***中，动画本质上是基于刷新率实时显示用户界面UI或UI元素。由于人类的视觉暂留原理，使得用户感觉画面是运动的。动画从动画的初态在经过动画时间之后变换为动画的终态。在这个变换过程中，动画可以由动画类型和动画变换形式进行控制。例如，动画类型可以包括位移动画、旋转动画、缩放动画和透明动画等。而动画变换形式可以由插值器和估值器等控制器进行控制。这样的控制器可以用于在动画时间期间控制对动画进行变换的速度。

然而，传统上，动画仅仅是简单的动画效果的组合，使得动画效果单一，不符合物理规律，并且没有考虑真实使用场景和用户使用***衡、捕获、扩散、汇聚等子特征。本公开的实施例主要就是针对引力场的效果，构建引力动效的能力。在不同的控件、图标、页面之间，加强了彼此之间的联系，突出了各个独立个体之间的关系，加强用户体验。自然界的引力场理论在动效领域的完美呈现，进一步证明了人因理论研究的重要性，也使得有屏幕的终端设备的展现出符合自然规律的动态效果。用户在使用设备的过程中，也更加符合生活体验，加强了设备的生命力和人性化。下文将参考附图来描述本公开的一些说明性实施例。

图1示出了可以实施本公开的实施例的一种电子设备100的硬件结构的示意图。如图1所示，电子设备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)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器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)接口等。

I2C接口是一种双向同步串行总线，包括一根串行数据线(serial data line，SDA)和一根串行时钟线(derail clock line，SCL)。在一些实施例中，处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K、充电器、闪光灯、摄像头193等。例如，处理器110可以通过I2C接口耦合触摸传感器180K，使处理器110与触摸传感器180K通过I2C总线接口通信，实现电子设备100的触摸功能。

I2S接口可以用于音频通信。在一些实施例中，处理器110可以包含多组I2S总线。处理器110可以通过I2S总线与音频模块170耦合，实现处理器110与音频模块170之间的通信。在一些实施例中，音频模块170可以通过I2S接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。

PCM接口也可以用于音频通信，将模拟信号抽样、量化和编码。在一些实施例中，音频模块170与无线通信模块160可以通过PCM总线接口耦合。在一些实施例中，音频模块170也可以通过PCM接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。所述I2S接口和所述PCM接口都可以用于音频通信。

UART接口是一种通用串行数据总线，用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中，UART接口通常被用于连接处理器110与无线通信模块160。例如，处理器110通过UART接口与无线通信模块160中的蓝牙模块通信，实现蓝牙功能。在一些实施例中，音频模块170可以通过UART接口向无线通信模块160传递音频信号，实现通过蓝牙耳机播放音乐的功能。

MIPI接口可以被用于连接处理器110与显示屏194、摄像头193等***器件。MIPI接口包括摄像头串行接口(camera serial interface，CSI)、显示屏串行接口(displayserial interface，DSI)等。在一些实施例中，处理器110和摄像头193通过CSI接口通信，实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信，实现电子设备100的显示功能。

GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号，也可被配置为数据信号。在一些实施例中，GPIO接口可以用于连接处理器110与摄像头193、显示屏194、无线通信模块160、音频模块170、传感器模块180等。GPIO接口还可以被配置为I2C接口、I2S接口、UART接口、MIPI接口等。

USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口、Micro USB接口、USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与***设备之间传输数据。也可以用于连接耳机，通过耳机播放音频。该接口还可以用于连接其他电子设备，例如AR设备等。

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

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

电源管理模块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的至少部分模块被设置在同一个器件中。

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A、受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器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可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯***(GSM)、通用分组无线服务(GPRS)、码分多址接入(CDMA)、宽带码分多址(WCDMA)、时分码分多址(TD-SCDMA)、长期演进(long termevolution，LTE)、5G以及后续演进标准、BT、GNSS、WLAN、NFC、FM、和/或IR技术等。其中GNSS可以包括全球卫星定位***(GPS)、全球导航卫星***(GLONASS)、北斗卫星导航***(BDS)、准天顶卫星***(QZSS)和/或星基增强***(SBAS)。

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

显示屏194用于显示图像，视频等。显示屏194包括显示面板。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。

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

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

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

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

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的软件***可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本公开的实施例以分层架构的一种移动操作***为例，示例性说明电子设备100的软件结构。

图2示出了根据本公开的实施例的图形界面显示方法的示例处理过程200的流程图。在一些实施例中，处理过程200可以由电子设备100来实现，例如可以由电子设备100的处理器110或处理单元配合其他组件(例如，显示屏194)来实现。在其他实施例中，处理过程200也可以由具有屏幕以显示UI元素的其他设备来实现。为了便于说明，将以电子设备100执行处理过程200为例，并且参考图3A至图3J、图4A至图4B和图5来论述处理过程200，其中图3A至图3J示出了根据本公开的实施例的在UI元素被点击的场景中所产生的“引力”动画效果的示意图。

同时参考图2和图3A，在图2的框210处，电子设备100在其屏幕300上显示M个用户界面UI元素，M为大于1的正整数。需要说明的是，屏幕300可以是图1中描绘的显示屏194的示例。在图3A的示例中，屏幕300上显示了以6行4列的方式排列的M＝24个UI元素，其中第一行包括UI元素311至314，第二行包括UI元素321至324，第三行包括UI元素331至334，第四行包括UI元素341至344，第五行包括UI元素351至354，并且第六行包括UI元素361至364。需要说明的是，尽管图3A的示例中示出了以规律方式排列的特定数目的UI元素，但是本公开的实施例不限于此，而是等同地适用于以任何规律的或非规律的方式布置的任何数目的UI元素的场景。此外，需要注意的是，尽管图3A的示例中将M个UI元素示出为尺寸基本相同，但是本公开的实施例不限于此，而是等同地适用于M个UI元素中的一个或多个UI元素具有不同尺寸的场景。

同时参考图2和图3B，在图2的框220处，电子设备100检测到作用于M个UI元素中的第一UI元素的操作。例如，在图3B的示例中，电子设备100可以检测到作用于24个UI元素311至364中的UI元素343的操作。在本公开的实施例中，为了描述的便利，***作的UI元素也可以称为“第一UI元素”。因此，在图3B的示例中，***作的UI元素343也可以称为第一UI元素343。具体地，如图3B所描绘的，电子设备100的用户可以使用手部370来点击UI元素343，例如以启动UI元素343所对应的应用程序。在下文中，将以点击操作作为针对UI元素的操作的示例来描述本公开的实施例的“引力”动画效果。然而，应当理解，本公开的实施例不限于点击操作，而是可以等同地或类似地适用于与UI元素有关的任何其他操作，诸如移动UI元素的操作、将UI元素与其他UI元素合并的操作、展开UI元素的操作、以及删除UI元素的操作，等等。与这些操作有关的根据本公开的实施例的“引力”动画效果将在后文参考图20A至图20D、图22A至图22D、图23A至图23D、图24A至图24D、图25A至图25D进一步被描述。

在图2的框230处，响应于对UI元素343的操作，电子设备100使屏幕300上的N个UI元素中的每个UI元素产生“引力”动画效果，也即受到UI元素343的“吸引力”或“排斥力”而产生移动的动画效果，其中N为1与M-1之间的正整数。也就是说，至少有一个UI元素可以受到UI元素343的“吸引力”或“排斥力”，而至多有M-1个UI元素可以受到UI元素343的“吸引力”或“排斥力”。换言之，在一些实施例中，除了***作的UI元素343本身之外，屏幕300上的所有其他的UI元素都可以受到UI元素343的影响而产生“引力”动画效果。在这种情况下，电子设备100可以将M个UI元素中除了UI元素343以外的M-1个UI元素确定为将会产生“引力”动画效果的N个UI元素。以此方式，电子设备100可以无需专门设置UI元素343的“引力”影响范围，从而可以在保持“引力”动画效果符合自然规律的同时，简化“引力”动画效果的相关设置。在其他实施例中，电子设备100还可以基于***作的UI元素343的“引力”影响区域来确定需要产生动画效果的N个UI元素。后文将参考图18A至图18C来描述这样的实施例。

在本公开的实施例中，被用户操作的UI元素可以被认为其“引力”平衡状态被用户的操作“打破”，从而将会对其他UI元素产生“吸引力”或“排斥力”，或者将会受到其他UI元素的“吸引力”或“排斥力”。在一些实施例中，***作的UI元素对其他UI元素的“引力”作用表现为“吸引力”还是“排斥力”可以是预定的，也可以是可设置的。类似地，***作的UI元素受到其他UI元素的“引力”作用表现为“吸引力”还是“排斥力”也可以是预定的，或者可以是可设置的。在***作的UI元素的“引力”作用表现为“吸引力”的情况下，受到“引力”作用影响的其他UI元素将会首先从起始位置朝向***作的UI元素进行移动，然后再在相反的方向上远离***作的UI元素进行移动，从而回到起始位置。在***作的UI元素的“引力”作用表现为“排斥力”的情况下，受到“引力”作用影响的其他UI元素将会首先从起始位置远离***作的UI元素进行移动，然后再在相反的方向上朝向***作的UI元素进行移动，从而回到起始位置。在本公开的上下文中，受到“引力”作用影响的UI元素首先进行的朝向或远离***作的UI元素的位移将称为“第一位移”或“第一移动”，而受到“引力”作用影响的UI元素随后进行的返回到起始位置的位移将被称为“第二位移”或“第二移动”。此外，“第一位移”或“第一移动”的方向将被称为“第一方向”，而“第二位移”或“第二移动”的方向将被称为“第二方向”。下文将首先参考图3B至图3J，以UI元素343***作并且对其他UI元素产生“吸引力”为例，来描述本公开的实施例的“引力”动画效果的一种示例。然后，将参考图5来详细描述一个UI元素受到***作的UI元素的“吸引力”的影响而产生引力动画效果的细节。

如图3C所示，为了实现本公开的实施例的“引力”动画效果，在电子设备100检测到用户对UI元素343的点击操作之后，假定UI元素343对其他UI元素的“引力”作用被设置为“吸引力”，那么电子设备100可以首先使屏幕300上的N个UI元素(在图3C的示例中是24-1＝23个)沿着指向UI元素343的方向(也即第一方向)进行移动。例如，在图3C的示例中，如虚线箭头所指示的，UI元素311可以沿着指向UI元素343的方向311-d1移动，UI元素312可以沿着指向UI元素343的方向312-d1移动，UI元素313可以沿着指向UI元素343的方向313-d1移动，UI元素314可以沿着指向UI元素343的方向314-d1移动，UI元素321可以沿着指向UI元素343的方向321-d1移动，UI元素322可以沿着指向UI元素343的方向322-d1移动，UI元素323可以沿着指向UI元素343的方向323-d1移动，UI元素324可以沿着指向UI元素343的方向324-d1移动。

类似地，如虚线箭头所指示的，UI元素331可以沿着指向UI元素343的方向331-d1移动，UI元素332可以沿着指向UI元素343的方向332-d1移动，UI元素333可以沿着指向UI元素343的方向333-d1移动，UI元素334可以沿着指向UI元素343的方向334-d1移动，UI元素341可以沿着指向UI元素343的方向341-d1移动，UI元素342可以沿着指向UI元素343的方向342-d1移动，UI元素344可以沿着指向UI元素343的方向344-d1移动。类似地，如虚线箭头所指示的，UI元素351可以沿着指向UI元素343的方向351-d1移动，UI元素352可以沿着指向UI元素343的方向352-d1移动，UI元素353可以沿着指向UI元素343的方向353-d1移动，UI元素354可以沿着指向UI元素343的方向354-d1移动，UI元素361可以沿着指向UI元素343的方向361-d1移动，UI元素362可以沿着指向UI元素343的方向362-d1移动，UI元素363可以沿着指向UI元素343的方向363-d1移动，并且UI元素364可以沿着指向UI元素343的方向364-d1移动。

在一些实施例中，某个UI元素指向UI元素343的方向可以是指该UI元素上的任何一点指向UI元素343上的任何一点的方向。例如，在图3C的示例中，UI元素344指向UI元素343的方向344-d1可以是指UI元素344上的任何一点指向UI元素343的方向。以此方式，电子设备100可以仅需要确定两个UI元素之间的大概方向，从而可以简化电子设备100在确定“引力”作用方向时的操作。在其他实施例中，某个UI元素指向UI元素343的方向可以是指该UI元素上的中心点指向UI元素343的中心点的方向。也就是说，在UI元素受到***作的UI元素的“吸引力”或“排斥力”的情况下，产生的第一移动的第一方向从受影响的UI元素的中心点指向***作的UI元素的中心点，或者从***作的UI元素的中心点指向受影响的UI元素的中心点。例如，在图3C的示例中，UI元素344指向UI元素343的方向344-d1可以是指UI元素344的中心点指向UI元素343的中心点的方向。以此方式，电子设备100可以准确且一致地确定出两个UI元素之间的“吸引力”或“排斥力”的方向，从而提高实现“引力”动画效果的准确度和效率。下文参考图4A和图4B来进一步描述这样的实施例。

图4A和图4B示出了根据本公开的实施例的“引力”动画效果中的UI元素的第一移动的第一方向和第二移动的第二方向的示意图。图4A示出了***作的UI元素的“引力”作用为“吸引力”的示例场景。如图4A所示，右下方的十字图形示意性地表示***作的UI元素的放大的中心点，其在本文中也可以称为发生中心点410。在UI元素是应用图标的场景中，当针对应用图标的删除、拖拽释放、合并文件夹、卡片展开等事件发生时，该UI元素的中心点就是吸引力或者排斥力的发生中心点。另外，在图4A中，左上方的十字图形示意性地表示受到***作的UI元素的引力影响的另一UI元素的放大的中心点，其在本文中也可以称为元素中心点420。在“引力”动画效果被设置为“吸引力”的情况下，UI元素被“吸引”的方向，也即产生第一位移的第一方向将从元素中心点420指向发生中心点410。也就是说，在“吸引力”的作用下，UI元素的第一移动的第一方向为每个受到影响的UI元素的中心点指向***作的UI元素的中心点的矢量方向。类似地，图4B示出了***作的UI元素的“引力”作用为“排斥力”的示例场景。如图4B所示，右下方的十字图形示意性地表示发生中心点410，而左上方的十字图形示意性地表示元素中心点420。在“引力”动画效果被设置为“排斥力”的情况下，UI元素被“排斥”的方向，也即产生第一位移的第一方向将从发生中心点410指向元素中心点420。也就是说，在“排斥力”的作用下，UI元素的第一移动的第一方向为***作的UI元素的中心点指向每个受到影响的UI元素的中心点的矢量方向。

如图3D所示，UI元素311可以具有中心点311-o，UI元素312可以具有中心点312-o，UI元素313可以具有中心点313-o，UI元素314可以具有中心点314-o，UI元素321可以具有中心点321-o，UI元素322可以具有中心点322-o，UI元素323可以具有中心点323-o，并且UI元素324可以具有中心点324-o。类似地，UI元素331可以具有中心点331-o，UI元素332可以具有中心点332-o，UI元素333可以具有中心点333-o，UI元素334可以具有中心点334-o，UI元素341可以具有中心点341-o，UI元素342可以具有中心点342-o，UI元素343可以具有中心点343-o，并且UI元素344可以具有中心点344-o。类似地，UI元素351可以具有中心点351-o，UI元素352可以具有中心点352-o，UI元素353可以具有中心点353-o，UI元素354可以具有中心点354-o，UI元素361可以具有中心点361-o，UI元素362可以具有中心点362-o，UI元素363可以具有中心点363-o，并且UI元素364可以具有中心点364-o。因此，在图3D的示例中，受“引力”作用影响的UI元素344指向***作的UI元素343的方向344-d1可以是指从UI元素344的中心点344-o指向UI元素343的中心点343-o的方向344-d1，也即UI元素344的第一移动的第一方向将是方向344-d1。也就是说，假设UI元素343的“引力”作用表现为“吸引力”，那么在UI元素343***作之后，UI元素344可以首先在朝向UI元素343的第一方向344-d1上进行第一移动，然后将在相反的方向上进行第二移动以返回起始位置。同样地，屏幕300上的其他UI元素被UI元素343“吸引”所进行的第一移动的第一方向和第二移动的第二方向也可以类似地确定。

在图3E中，使用十字符号表示每个UI元素的中心点的当前位置，也即受影响的UI元素产生引力动画效果之后的中心点位置，并且使用小黑点来表示每个UI元素在产生引力动画效果之前的中心点的起始位置。例如，为了示意的清楚性，图3E中仅标记出了UI元素344的中心点的当前位置344-o和中心点的起始位置344-1。如图3E所示，由于受到***作的UI元素343的“吸引力”影响，UI元素344的中心点已经沿着指向UI元素343的中心点343-o的第一方向344-d1进行第一移动，也即从中心点的起始位置344-1移动到中心点的当前位置344-o。类似地，如图3E所示，每个其他受到UI元素343影响的UI元素的中心点均沿着指向UI元素343的中心点343-o的各自的第一方向进行了各自的第一移动。需要说明的是，在完成了各自的第一移动之后，受到“引力”影响的各个UI元素将会在与第一方向相反的第二方向上返回到起始位置。例如，在图3E的示例中，UI元素344在完成了第一方向344-d1上的第一移动之后，将在第一方向344-d1相反的第二方向上回到起始位置。如图3F进一步示出的，在图3F中示出的时刻，UI元素344已经完成了第二移动并且回到起始位置，从而表示UI元素344中心点当前位置的十字符号与表示中心点初始位置的小黑点重合。类似地，每个其他受到UI元素343的“引力”影响的UI元素也均完成了各自的第二位移而返回到各自的初始位置。需要说明的是，尽管图3E和图3F的示例中描绘了受到“引力”影响的UI元素进行一次第一位移和一次第二位移，但是本公开的实施例不限于此。在其他实施例中，取决于***设置或用户设置，或者取决于***作的UI元素的操作持续的时间长度，受到“引力”影响的UI元素可以进行多次第一位移和第二位移。也就是说，受到“引力”影响的UI元素可以按照循环的方式在第一方向上执行第一移动，在第二方向上执行第二移动，然后再在第一方向上执行第一移动，再在第二方向上执行第二移动，如此循环往复。在一些实施例中，受到“引力”影响的UI元素在每次循环中在第一方向上的第一移动中的目标距离可以保持不变或逐渐减小。

在上文参考图3A至图3F描述的示例中，屏幕300上显示的是规则排列的尺寸相同的多个UI元素。应当理解的是，本公开的实施例提出的“吸引力”或“排斥力”的动画效果不限于规则排列的大小相同的多个UI元素，而是等同地或类似地适用于以任何方式排列的具有不同大小的多个UI元素。下文参考图3G至图3J来描述这样的示例。如图3G所示，电子设备100在屏幕300上显示M个UI元素，例如，在负一屏中显示的各种UI元素。在图3G的示例中，M＝13，也即UI元素381至UI元素393共13个UI元素，它们具有不同的大小，其中UI元素385最大、UI元素381次之，UI元素384再次之，UI元素382、383、386、387、388、389、390、391、392和393最小。电子设备100检测到作用于M个UI元素中的第一UI元素的操作。例如，在图3B的示例中，如图3G进一步示出的，电子设备100可以检测到作用于M＝13个UI元素381至393中的UI元素385的操作。具体地，电子设备100的用户可以使用手部370来点击UI元素385，例如以启动UI元素385所对应的操作或服务。在下文中，将以点击操作作为针对UI元素的操作的示例来描述本公开的实施例的“引力”动画效果。然而，应当理解，本公开的实施例不限于点击操作，而是可以等同地或类似地适用于与UI元素有关的任何其他操作，诸如移动UI元素的操作、将UI元素与其他UI元素合并的操作、展开UI元素的操作、以及删除UI元素的操作，等等。

响应于对UI元素385的操作，电子设备100使屏幕300上的N个UI元素中的每个UI元素产生“引力”动画效果，也即受到UI元素385的“吸引力”或“排斥力”而产生移动的动画效果，其中N为1与M-1之间的正整数。在图3G至图3J的示例中，假定N＝M-1＝12并且“引力”被设置为“吸引力”，也即，除了UI元素385本身以外，其他的全部UI元素都受到UI元素385的“吸引力”。如图3H所示，为了实现本公开的实施例的“引力”动画效果，在电子设备100检测到用户对UI元素385的点击操作之后，电子设备100可以首先使屏幕300上的其他12个UI元素沿着指向UI元素385的方向(也即第一方向)进行移动。例如，在图3H的示例中，如虚线箭头所指示的，UI元素381可以沿着指向UI元素385的方向381-d1移动，UI元素382可以沿着指向UI元素385的方向382-d1移动，UI元素383可以沿着指向UI元素385的方向383-d1移动，UI元素384可以沿着指向UI元素385的方向384-d1移动，UI元素386可以沿着指向UI元素385的方向386-d1移动，UI元素387可以沿着指向UI元素385的方向387-d1移动，UI元素388可以沿着指向UI元素385的方向388-d1移动，UI元素389可以沿着指向UI元素385的方向389-d1移动。UI元素390可以沿着指向UI元素385的方向390-d1移动，UI元素391可以沿着指向UI元素385的方向391-d1移动，UI元素392可以沿着指向UI元素385的方向392-d1移动，并且UI元素393可以沿着指向UI元素385的方向393-d1移动。在图3H的示例中，某个UI元素指向UI元素385的方向可以是指该UI元素上的中心点指向UI元素343的中心点的方向。但是，需要说明的是，在其他实施例中，某个UI元素指向UI元素385的方向可以是指该UI元素上的任何一点指向UI元素385上的任何一点的方向。

在图3I中，使用十字符号表示每个UI元素的中心点的当前位置，也即受影响的UI元素产生引力动画效果之后的中心点位置，并且使用小黑点来表示每个UI元素在产生引力动画效果之前的中心点的起始位置。如图3I所示，由于受到***作的UI元素385的“吸引力”影响，UI元素381的中心点已经沿着指向UI元素385的中心点的第一方向进行第一移动，也即从中心点的起始位置移动到中心点的当前位置。类似地，如图3I所示，每个其他受到UI元素385影响的UI元素的中心点均沿着指向UI元素385的中心点的各自的第一方向进行了各自的第一移动。需要说明的是，在完成了各自的第一移动之后，受到“引力”影响的各个UI元素将会在与第一方向相反的第二方向上返回到起始位置。例如，在图3I的示例中，UI元素381在完成了第一方向上的第一移动之后，将在第一方向相反的第二方向上回到起始位置。如图3J进一步示出的，在图3J中示出的时刻，UI元素381已经完成了第二移动并且回到起始位置，从而表示UI元素381中心点当前位置的十字符号与表示中心点初始位置的小黑点重合。类似地，每个其他受到UI元素385的“引力”影响的UI元素也均完成了各自的第二位移而返回到各自的初始位置。需要说明的是，尽管图3I和图3J的示例中描绘了受到“引力”影响的UI元素进行一次第一位移和一次第二位移，但是本公开的实施例不限于此。在其他实施例中，取决于***设置或用户设置，或者取决于***作的UI元素的操作持续的时间长度，受到“引力”影响的UI元素可以进行多次第一位移和第二位移。也就是说，受到“引力”影响的UI元素可以按照循环的方式在第一方向上执行第一移动，在第二方向上执行第二移动，然后再在第一方向上执行第一移动，再在第二方向上执行第二移动，如此循环往复。在一些实施例中，受到“引力”影响的UI元素在每次循环中在第一方向上的第一移动中的目标距离可以保持不变或逐渐减小。下文将参考图5来详细描述一个UI元素受到***作的UI元素的“吸引力”的影响而产生引力动画效果的细节。

图5示出了根据本公开的实施例的“引力”动画效果中的受到“吸引力”影响的UI元素在进行第一移动和第二移动的过程中在不同时刻的位置的示意图。在图5的示例中，假设UI元素343为***作的第一UI元素，并且UI元素344是受到UI元素343的“吸引力”作用影响的第二UI元素。同时参考图2和图5，在图2的框232处，电子设备100确定受到***作的第一UI元素343影响的N个UI元素中的第二UI元素344将在第一方向上移动的目标距离D0。在图5的示例中，第一方向是从第二UI元素344指向第一UI元素343的方向。当然，在其他实施例中，如果第一UI元素343的“引力”作用被设置为“排斥力”，那么第二UI元素344的第一位移的第一方向可以是从第一UI元素343指向第二UI元素344的方向。需要说明的是，电子设备100可以采用任何适当的方式来确定受“引力”作用影响的UI元素344在第一移动中需要移动的目标距离D0。在一些实施例中，电子设备100可以将所有受到第一UI元素343的“引力”作用影响的UI元素的第一移动的目标距离设置为相同。以此方式，电子设备100用于实现“引力”动画效果的处理可以被简化。在其他实施例中，电子设备100可以基于产生“引力”作用的UI元素的尺寸、受到“引力”作用的UI元素的尺寸、和/或两个UI元素之间的距离来确定受影响的UI元素在第一移动中的目标距离。在另外的实施例中，由于产生“引力”作用的某个特定UI元素对于其他受影响的UI元素而言是相同的，所以在产生多个受影响的UI元素的整体“引力”动画效果时，在电子设备100确定每个受影响的UI元素的第一移动的目标距离的大小时，可以不考虑产生“引力”作用的UI元素的尺寸。例如，在图5的示例中，电子设备100可以基于第二UI元素344的尺寸和第二UI元素344到第一UI元素343的距离这两个因素，来确定第二UI元素344在第一方向上的第一移动的目标距离D0。后文将参考图8、图9以及图10A和图10B来进一步描述这样的实施例。

在图2的框234处，电子设备100使第二UI元素344从起始位置p1沿第一方向以目标距离D0进行第一移动。也就是说，在图5的示例中，第二UI元素344的第一移动是指UI元素344从起始位置p1开始沿第一方向进行移动，直至到达与起始位置p1的距离为目标距离D0的目标位置p2。更具体地，如图5所示，在进行第一移动期间，第二UI元素344在时间t1处位于起始位置p1并且开始进行第一移动；在时间t2处，第二UI元素344沿着第一方向移动了距离D1；在时间t3处，第二UI元素344沿着第一方向移动了距离D2；在时间t4处，第二UI元素344沿着第一方向移动了目标距离D0而到达目标位置p2。在图2的框236处，在第二UI元素344完成从起始位置p1到目标位置p2的第一移动之后，电子设备100使第二UI元素344沿与第一方向相反的第二方向进行第二移动，以复位到起始位置p1。也就是说，在图5的示例中，第二UI元素344的第二移动是指第二UI元素344从目标位置p2开始沿第二方向进行移动，直至回到起始位置p1。更具体地，如图5所示，在第一移动之后的第二移动期间，在时间t5处，第二UI元素344从位置p2沿着第二方向移动了距离D3；在时间t6处，第二UI元素344沿着第二方向移动了距离D4；在时间t7处，第二UI元素344沿着第二方向移动了目标距离D0而回到起始位置p1。

在一些实施例中，第二UI元素344的第一移动持续的第一时长、第二移动持续的第二时长、和/或第一移动和第二移动持续的总时长是可配置的。以此方式，电子设备100的用户可以按照偏好来设置“引力”动画效果的时间长短，从而进一步改进用户体验。在一些实施例中，在产生第二UI元素344的“引力”动画效果时，电子设备100可以在第一移动和/或第二移动期间缩小或放大第二UI元素344的尺寸。以此方式，电子设备100可以更加多样化地展现出UI元素之间具有“引力”的动画效果，从而进一步提升用户体验。另外，如前文描述的，本公开的实施例可以模仿自然界中的物体之间存在的“引力”作用，而在自然界中，受到一个物体的引力作用的另一物体将会在引力的作用下进行变加速直线运动。因此，在一些实施例中，第二UI元素344的第一移动和/或第二移动可以包括变加速直线运动。也就是说，上文描述的各个移动距离D1至D4与各个时刻t1至t7之间的关系可以根据变加速直线运动的位移时间曲线来确定。以此方式，电子设备100可以基于自然界的物体在引力作用下的加速运动规律，来实现UI元素的第一移动和第二移动，使得“引力”动画效果更加符合自然规律和用户在生活中的习惯认知，从而进一步改进用户体验。在其他实施例中，为了使得“引力”动画效果更符合用户日常的使用习惯，电子设备100可以基于位移随时间变化的预定义曲线，来确定第二UI元素344在第一移动和/或第二移动期间的移动的动画效果。也就是说，电子设备100可以基于位移随时间变化的预定义曲线来确定第二UI元素344在第一移动和/或第二移动中的运动细节，诸如在某个具体时刻运动到哪个具***置，也即，上文描述的各个移动距离D1至D4与各个时刻t1至t7之间的关系，等等。以此方式，电子设备100可以基于位移随时间变化的预定义曲线来方便地控制UI元素的移动，使得“引力”动画效果更符合用户的使用习惯，从而进一步改进用户体验。后文将参考图6、图7A和图7B来详细描述这样的实施例。

通过示例处理过程200，本公开的实施例实现了UI元素之间具有“引力”的动画效果，展现出符合自然规律的动态效果，与用户生活体验更加一致，加强了电子设备100的生命力和人性化程度。例如，如果不存在“引力”动画效果，当UI元素(例如，图标)排列完成之后，UI元素的显示效果就比较单一，每个图标都是独立呈现的，没有相互的联系，不符合自然规律。相比之下，在实现了本公开的实施例提供的引力动画效果之后，单个图标的效果可以影响整个页面，并且每个图标之间是有潜在联系的，就像UI元素之间存在“万有引力”一样，将它们联系在一起。例如，UI元素的相关的移动、合并、删除、展开等操作的动画效果将更加符合自然规律，更加的人性化，提升了与用户的交流。更一般地说，本公开的实施例提出了一种新型动画效果的实现方案，主要提供了引力动画效果的实现模型，实现了引力理论的动画效果实现，使得用户可以更好地体验UI元素的功能。更特别地，本公开的实施例可以基于引力公式，实现引力动画效果模型；可以针对UI元素(例如，图标)的不同操作场景，实现吸引力、排斥力以及黑洞吸附等引力场景的动效；可以建立引力场，构建整个特征动画效果的基础；并且还可以将基础动画效果开放给三方应用，从而建立生态。

图6示出了根据本公开的实施例的“引力”动画效果的动画过程和相关控制逻辑的示意图。在通常的电子设备的操作***中，例如在当前主流的安卓***和IOS***中，动画本质上就是根据刷新率实时显示当前的界面或者控件，利用人类的视觉暂留原理，使得用户感觉所显示的画面就是运动的。因此，如图6所示，电子设备100可以首先确定“引力”动画的初态610和“引力”动画的终态620。另外，电子设备100可以确定从“引力”动画的初态610变换到“引力”动画的终态620的过程持续的动画时间605。再者，电子设备100还可以确定“引力”动画类型630和“引力”动画变换形式640。例如，“引力”动画类型630可以包括UI元素的位移动画632、缩放动画634、旋转动画636、透明动画638等，而“引力”动画变换形式640可以通过插值器642和644来控制，例如在固定的动画时间605里进行相关变换速度的控制，等等。

在本公开的实施例中，为了实现“引力”的动画效果，主要是涉及到“引力”动画类型630中的位移动画632，但是应当理解，其他的“引力”动画类型也可以可能的。如上文描述的，本公开的实施例中的“引力”动画效果产生的位移动画效果可以是UI元素先朝向某一个方向移动，然后再以相反的方向复位。两段动画可以分别定义时长和插值器，应用侧可以按需进行调节。如上文提到的，在一些实施例中，电子设备100可以基于位移随时间变化的预定义曲线来确定第二UI元素344在第一移动和/或第二移动期间的移动的动画效果。关于此，需要说明的是，根据人因研究，针对不同UI元素的不同移动阶段可以使用不同的插值器和时间，从而达成不一样的动画效果。应理解，电子设备100可以采用已知的或未来发现的任何适当的位移时间曲线来控制第二UI元素344在第一移动和/或第二移动期间的移动细节。在一些实施例中，电子设备100可以选择使用贝塞尔曲线或弹性力曲线作为第二UI元素344的第一位移和/或第二位移的预定义曲线。例如，电子设备100可以使用二阶贝塞尔曲线来控制第二UI元素344的第一位移，并且使用弹性力曲线来控制第二UI元素344的第二位移，或者反之亦然。当然，在其他实施例中，电子设备100也可以使用贝塞尔曲线或弹性力曲线之一来控制第一位移和第二位移两者。以此方式，电子设备100可以基于贝塞尔曲线或弹性力曲线来方便地控制UI元素的移动，使得“引力”动画效果更加符合用户在生活中对于“吸引力”和“排斥力”的习惯认知，从而进一步改进用户体验。下文将参考图7A来描述电子设备100基于二阶贝塞尔曲线来控制第二UI元素344的第一位移的示例，并且参考图7B来描述电子设备100基于弹性力曲线来控制第二UI元素344的第二位移的示例。

图7A示出了根据本公开的实施例的UI元素的位移随时间变化的预定义曲线为贝塞尔曲线的示意图。在图7A示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)。在一些实施例中，用于控制UI元素移动的插值器可以使用常见的曲线插值器，例如在图7A的示例中，此前在图5中描绘的第二UI元素344的第一移动的位移时间曲线710可以是二阶贝塞尔曲线。具体地，电子设备100可以通过选择二阶贝塞尔曲线的两个二阶的点，从而达到UI元素344的不同移动效果。以此方式，位移时间曲线与时间的相互配合将会产生运动的韵律感。电子设备100调整位移时间曲线可以使UI元素实现加速和减速，而不是以恒定的速率移动。一般而言，贝塞尔曲线主要应用于固定的场景下点击操作页面切换间的运动匹配。以下为在特定的构建平台中的贝塞尔曲线的9种不同节奏的相关参数，图7A示出的曲线710可以是下列9种贝塞尔曲线之一。需要说明的是，尽管在本公开的上下文中以二阶贝塞尔曲线作为位移时间曲线描述了一些示例，但是本公开的实施例不限于此，而是可以等同地将任何曲线形式作为位移时间曲线来实现UI元素的移动(例如，第一移动和第二移动之一或两者)。例如，这样的曲线形式包括但不限于一阶贝塞尔曲线、三阶或更高阶贝塞尔曲线、其他已知的或未来发现的其他曲线形式、或者甚至是直线。

在上述9种不同节奏中，跟随用户的手部滑动的贝塞尔曲线可以适当尝试40-60、33-33可以是跟随手速的贝塞尔曲线，而70-80是节奏较强的曲线，可用于凸显趣味性场景。根据上述分析，第二UI元素344的第一移动的插值器可以选择贝塞尔曲线，具体的坐标可以根据的“引力”动画效果的所设置的各种参数来分析得出。此外，需要说明的是，本公开的实施例的贝塞尔曲线的两个点的坐标可以任意确定，不限于以上9种曲线，两个点坐标可以是(x1，y1)、(x2，y2)，其中x1、y1、x2和y2可以是0到1之间的数值，一般可以取一位小数。应当理解，尽管图7A中将本公开的实施例的位移时间曲线710示例性地描绘为二阶贝塞尔曲线，但是本公开的实施例不限于此，而是等同地适用于其他阶数的贝塞尔曲线和任何其他的曲线。同时参考图5和图7A，在UI元素344从起始位置p1到目标位置p2的第一移动中，电子设备100可以基于位移时间曲线710，确定UI元素344在t1时刻的移动距离为0，在t2时刻的移动距离为D1，在t3时刻的移动距离为D2，并且在t4时刻的移动距离为目标距离D0。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线710上确定出UI元素344在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344，从而可以实现UI元素344进行第一移动的动画效果。

图7B示出了根据本公开的实施例的UI元素的位移随时间变化的预定义曲线为反比例曲线的示意图。在图7B示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)。在图7B的示例中，此前在图5中描绘的第二UI元素344的第一移动的位移时间曲线720可以是反比例曲线，也即随着时间的推移，第二UI元素344在单位时间内移动的距离越来越小。同时参考图5和图7B，在UI元素344从起始位置p1到目标位置p2的第一移动中，电子设备100可以基于位移时间曲线720，确定UI元素344在t1时刻的移动距离为0，在t2时刻的移动距离为D1，在t3时刻的移动距离为D2，并且在t4时刻的移动距离为目标距离D0。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线720上确定出UI元素344在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344，从而可以实现UI元素344进行第一移动的动画效果。

图7C示出了根据本公开的实施例的UI元素的位移随时间变化的预定义曲线为临界阻尼弹性力曲线的示意图。在图7C的示例中，图5中描绘的UI元素344的第二移动的位移时间曲线730为弹性力曲线，例如，临界阻尼的弹性力曲线。一般地，弹性力曲线在不同的操作场景可以使用不同的状态，也即，临界阻尼、欠阻尼和过阻尼。在不同的阻尼状态下，位移时间的弹性力曲线可以是不一样的。具体地，三种情况如下：阻尼的平方等于4倍的质量乘以刚性，这是临界阻尼。进一步地，如果阻尼大就是过阻尼，刚性大就是欠阻尼。特别地，阻尼的平方小于4倍质量乘以刚性为欠阻尼，而阻尼的平方大于4倍的质量乘以刚性为过阻尼。在图7C示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)。应当理解，尽管图7C中将本公开的实施例的位移时间曲线730示例性地描绘为临界阻尼弹性力曲线，但是本公开的实施例不限于此，而是等同地适用于任何其他的曲线。同时参考图5和图7C，在UI元素344从目标位置p2回到起始位置p1的第二移动中，电子设备100可以基于位移时间曲线730，确定UI元素344在t4时刻的移动距离为0，在t5时刻的移动距离为D3，在t6时刻的移动距离为D4，并且在t7时刻的移动距离为目标距离D0。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线730上确定出UI元素344在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344，从而可以实现UI元素344进行第二移动的动画效果。

在弹性力模型的具体实现中，弹性引擎基于胡克定律下的阻尼振动公式如下：

f＝ma (公式1)，

其中f表示振动过程中的受力，m表示质量，a表示加速度，k表示弹性***(刚性)，x表示弹簧形变量，g表示阻力系数(阻尼)，并且t表示时间。在具体的设置中，电子设备100的用户只需要确定需要产生的弹簧形变量x(也即第二移动的距离)，其余的参数可以是可调参数。在一些实施例中，通过人因研究可以给出这些可调参数的相关推荐值，以供应用进行使用，当然应用也可以按需自定义地设置这些可调参数。

在一些实施例中，弹性引擎插值器的相关设置可以如下。

代码类的实现

1.SpringInterpolator(float stiffness,float damping)

2.SpringInterpolator(float stiffness,float damping,float endPos)

3.SpringInterpolator(float stiffness,float damping,float endPos,floatvelocity)

4.SpringInterpolator(float stiffness,float damping,float endPos,floatvelocity,float valueThreshold)

调用距离：

1.PhysicalInterpolatorBase interpolator＝new SpringInterpolator(400F,40F,200F,2600F,1F)；

2.ObjectAnimator animator＝ObjectAnimator.ofFloat(listView,“translationY”,0,346)

3.animator.setDuration(interpolator.getDuration())；

4.animator.setInterpolator(interpolator)；

5.animator.start()；

弹性力引擎动画类

动画类实例：

1.PringAnimation(K object,FloatPropertyCompat<K>property,floatstiffness,float damping,float startValue,float endValue,float velocity)

2.SpringAnimation(K object,FloatPropertyCompat<K>property,floatstiffness,float damping,float endValue,float velocity)

动画类调用实例：

1.SpringAnimation animation＝SpringAnimation(listView,DynamicAnimation.TRANSLATION_Y,400F,40F,0,1000F)；

2.animation.start()；

图7D示出了根据本公开的实施例的UI元素的位移随时间变化的预定义曲线为欠阻尼弹性力曲线的示意图。在图7D的示例中，图5中描绘的UI元素344的第二移动的位移时间曲线740为弹性力曲线，例如，欠阻尼的弹性力曲线。在图7D示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)。应当理解，尽管图7D中将本公开的实施例的位移时间曲线740示例性地描绘为欠阻尼弹性力曲线，但是本公开的实施例不限于此，而是等同地适用于任何其他的曲线。同时参考图5和图7D，在UI元素344从目标位置p2回到起始位置p1的第二移动中，电子设备100可以基于位移时间曲线740，确定UI元素344在t4时刻的移动距离为0，在t5时刻的移动距离为D3，在t6时刻的移动距离为D4，并且在t7时刻的移动距离为目标距离D0。需要特别之处的是，与图7C中示出的临界阻尼弹性力曲线不同，图7D中的欠阻尼弹性力曲线740可以具有“往复”的效果。例如，根据时间位移曲线740，UI元素344在t45时刻之前的某个时刻就已经到达了目标距离D0，并且继续沿着第二方向移动超过目标距离D0，然后再向第一方向移动。例如，在图7D中的时刻t45，UI元素344移动的距离是D45，其大于目标距离D0。类似地，在时刻t55和t65，UI元素344在第二方向上的移动距离D55和D65均大于目标距离D0。换言之，在位移时间曲线为欠阻尼弹性力曲线740的情况下，UI元素344将沿着第二方向从目标位置p2回到起始位置p1，然后在第二方向上移动超过起始位置p1，然后再以起始位置p1为中心进行来回的“往复”运动，直到最后停在起始位置p1。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线740上确定出UI元素344在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344，从而可以实现UI元素344进行第二移动的动画效果。

图7E至图7H示出了根据本公开的实施例的受到“引力”影响的三个UI元素的不同位移时间变化曲线的比较的示意图。具体地，图7E示出了在上文参考图3C至图3F描述的示例中的UI元素344、UI元素324和UI元素311三个UI元素在受到UI元素343的“引力”影响下的第一移动的位移时间曲线均为贝塞尔曲线的示意图。图7F示出了在上文参考图3C至图3F描述的示例中的UI元素344、UI元素324和UI元素311三个UI元素在受到UI元素343的“引力”影响下的第一移动的位移时间曲线均为反比例曲线的示意图。图7G示出了在上文参考图3C至图3F描述的示例中的UI元素344、UI元素324和UI元素311三个UI元素在受到UI元素343的“引力”影响下的第二移动的位移时间曲线均为临界阻尼弹性力曲线的示意图。图7H示出了在上文参考图3C至图3F描述的示例中的UI元素344、UI元素324和UI元素311三个UI元素在受到UI元素343的“引力”影响下的第二移动的位移时间曲线均为欠阻尼弹性力曲线的示意图。需要说明的是，图7E至图7H以示例性的方式描绘了三个UI元素的位移时间曲线，以说明不同UI元素在相同UI元素的“引力”影响下的第一位移和第二位移可以分别具有不同的位移时间曲线。图3C至图3F中描绘的受到UI元素343的“引力”影响的其他UI元素的第一位移和第二位移可以具有类似的位移时间曲线。

在图7E示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)，此前在图5中描绘的第二UI元素344的第一移动的位移时间曲线710可以是二阶贝塞尔曲线，UI元素324的第一移动的位移时间曲线712可以是二阶贝塞尔曲线，并且UI元素311的第一移动的位移时间曲线714也可以是二阶贝塞尔曲线。注意，贝塞尔曲线710、712和714可以具有不同的参数。例如，在相同的时间t4处，因为UI元素344与***作的UI元素343的距离最近，所以UI元素344可以具有最大的目标距离D0-344。因为UI元素324与***作的UI元素343的距离比UI元素344远，所以UI元素344可以具有比UI元素344的目标距离D0-344小的目标距离D0-324。因为UI元素311与***作的UI元素343的距离比UI元素323远，所以UI元素311可以具有比UI元素324的目标距离D0-324小的目标距离D0-311。同时参考图3C至图3E和图7E，在t1时刻，UI元素344、324和311在UI元素343的“引力”作用下，开始准备进行各自的第一移动。在t2时刻，UI元素344、324和311在各自的第一方向上移动距离D1-344、D1-324和D1-311。在t3时刻，UI元素344、324和311在各自的第一方向上移动距离D2-344、D2-324和D2-311。在t4时刻，UI元素344、324和311在各自的第一方向上移动目标距离D0-344、D0-324和D0-311。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线710、712、714上确定出UI元素344、324和311在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344、324和311，从而可以实现UI元素344、324和311进行各自的第一移动的动画效果。还需要说明的是，尽管在图7E的示例中将UI元素344、324和311各自的第一移动示出为同时开始且同时结束，但是这仅是示例性的，无意以任何方式限制本公开的范围。在其他实施例中，UI元素344、324和311各自的第一移动可以在不同的时间开始和/或在不同的时间结束。例如，这可能是在考虑UI元素343的“引力”传播的速度的情况下，后文将参考图19来进一步描述这样的实施例。

在图7F示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)，此前在图5中描绘的第二UI元素344的第一移动的位移时间曲线720可以是反比例曲线，UI元素324的第一移动的位移时间曲线722可以是反比例曲线，并且UI元素311的第一移动的位移时间曲线724也可以是反比例曲线。注意，反比例曲线720、722和724可以具有不同的参数。例如，在相同的时间t4处，因为UI元素344与***作的UI元素343的距离最近，所以UI元素344可以具有最大的目标距离D0-344。因为UI元素324与***作的UI元素343的距离比UI元素344远，所以UI元素344可以具有比UI元素344的目标距离D0-344小的目标距离D0-324。因为UI元素311与***作的UI元素343的距离比UI元素323远，所以UI元素311可以具有比UI元素324的目标距离D0-324小的目标距离D0-311。同时参考图3C至图3E和图7F，在t1时刻，UI元素344、324和311在UI元素343的“引力”作用下，开始准备进行各自的第一移动。在t2时刻，UI元素344、324和311在各自的第一方向上移动距离D1-344、D1-324和D1-311。在t3时刻，UI元素344、324和311在各自的第一方向上移动距离D2-344、D2-324和D2-311。在t4时刻，UI元素344、324和311在各自的第一方向上移动目标距离D0-344、D0-324和D0-311。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线720、722、724上确定出UI元素344、324和311在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344、324和311，从而可以实现UI元素344、324和311进行各自的第一移动的动画效果。还需要说明的是，尽管在图7F的示例中将UI元素344、324和311各自的第一移动示出为同时开始且同时结束，但是这仅是示例性的，无意以任何方式限制本公开的范围。在其他实施例中，UI元素344、324和311各自的第一移动可以在不同的时间开始和/或在不同的时间结束。

在图7G示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)，此前在图5中描绘的第二UI元素344的第二移动的位移时间曲线730可以是临界阻尼弹性力曲线，UI元素324的第二移动的位移时间曲线732可以是临界阻尼弹性力曲线，并且UI元素311的第二移动的位移时间曲线734也可以是临界阻尼弹性力曲线。注意，临界阻尼弹性力曲线730、732和734可以具有不同的参数。例如，在相同的时间t7处，因为UI元素344与***作的UI元素343的距离最近，所以UI元素344可以具有最大的目标距离D0-344。因为UI元素324与***作的UI元素343的距离比UI元素344远，所以UI元素344可以具有比UI元素344的目标距离D0-344小的目标距离D0-324。因为UI元素311与***作的UI元素343的距离比UI元素323远，所以UI元素311可以具有比UI元素324的目标距离D0-324小的目标距离D0-311。同时参考图3E至图3F和图7G，在t4时刻，UI元素344、324和311在UI元素343的“引力”作用下，已经完成了各自的第一移动，开始准备进行各自的第二移动。在t5时刻，UI元素344、324和311在各自的第二方向上移动距离D3-344、D3-324和D3-311。在t6时刻，UI元素344、324和311在各自的第二方向上移动距离D4-344、D4-324和D4-311。在t7时刻，UI元素344、324和311在各自的第二方向上移动目标距离D0-344、D0-324和D0-311。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线730、732、734上确定出UI元素344、324和311在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344、324和311，从而可以实现UI元素344、324和311进行各自的第一移动的动画效果。还需要说明的是，尽管在图7G的示例中将UI元素344、324和311各自的第二移动示出为同时开始且同时结束，但是这仅是示例性的，无意以任何方式限制本公开的范围。在其他实施例中，UI元素344、324和311各自的第二移动可以在不同的时间开始和/或在不同的时间结束。

在图7H示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)，此前在图5中描绘的第二UI元素344的第二移动的位移时间曲线740可以是欠阻尼弹性力曲线，UI元素324的第二移动的位移时间曲线742可以是欠阻尼弹性力曲线，并且UI元素311的第二移动的位移时间曲线744也可以是欠阻尼弹性力曲线。注意，欠阻尼弹性力曲线740、742和744可以具有不同的参数。例如，在相同的时间t7处，因为UI元素344与***作的UI元素343的距离最近，所以UI元素344可以具有最大的目标距离D0-344。因为UI元素324与***作的UI元素343的距离比UI元素344远，所以UI元素344可以具有比UI元素344的目标距离D0-344小的目标距离D0-324。因为UI元素311与***作的UI元素343的距离比UI元素323远，所以UI元素311可以具有比UI元素324的目标距离D0-324小的目标距离D0-311。同时参考图3E至图3F和图7H，在t4时刻，UI元素344、324和311在UI元素343的“引力”作用下，已经完成了各自的第一移动，开始准备进行各自的第二移动。在t5时刻，UI元素344、324和311在各自的第二方向上移动距离D3-344、D3-324和D3-311。在t6时刻，UI元素344、324和311在各自的第二方向上移动距离D4-344、D4-324和D4-311。在t7时刻，UI元素344、324和311在各自的第二方向上移动目标距离D0-344、D0-324和D0-311。注意，在图7H示出的示例中，UI元素344、324和311将会基于各自的欠阻尼弹性力曲线的位移时间曲线，而在各自的起始位置进行来回的“往复”运动。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线730、732、734上确定出UI元素344、324和311在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344、324和311，从而可以实现UI元素344、324和311进行各自的第一移动的动画效果。还需要说明的是，尽管在图7G的示例中将UI元素344、324和311各自的第二移动示出为同时开始且同时结束，但是这仅是示例性的，无意以任何方式限制本公开的范围。在其他实施例中，UI元素344、324和311各自的第二移动可以在不同的时间开始和/或在不同的时间结束。

如上文提到的，在一些实施例中，电子设备100可以基于第二UI元素344的尺寸和第二UI元素344到第一UI元素343的距离这两个因素，来确定第二UI元素344在第一方向上的第一移动的目标距离D0。下文将参考图8、图9以及图10A和图10B来描述这样的实施例。

图8示出了根据本公开的实施例的用于确定受到第一UI元素的“吸引力”或“排斥力”影响的第二UI元素进行第一移动的目标距离的示例处理过程800的流程图。在一些实施例中，处理过程800可以由电子设备100来实现，例如可以由电子设备100的处理器110或处理单元配合其他组件(例如，显示屏194)来实现。在其他实施例中，处理过程800也可以由具有屏幕以显示UI元素的其他设备来实现。为了便于说明，将以电子设备100执行处理过程800为例，参考图9、图10A和图10B来论述处理过程800。图9示出了根据本公开的实施例的确定受到第一UI元素的“吸引力”或“排斥力”影响的第二UI元素的尺寸的示意图。图10A和图10B分别示出了根据本公开的实施例的确定UI元素之间的距离的两种示例方式的示意图。

在图8的框810处，电子设备100可以确定第二UI元素344的尺寸。例如，在图9的示例中，由于第二UI元素344大致是矩形的形状，所以电子设备100可以确定第二UI元素344两条边910和920的长度，然后再基于面积计算公式得出第二UI元素344的尺寸或大小。在一些实施例中，第二UI元素344的两条边910和920的长度可以采用像素数目为单位，因此第二UI元素344的尺寸或大小可以采用像素的数目来表示。在其他实施例中，电子设备100可以使用任何适合的单位来度量第二UI元素344的两条边910和920的长度，进而度量第二UI元素344的尺寸或大小。例如，第二UI元素344的尺寸或大小可以采用平方毫米为单位来度量。需要说明的是，尽管图9中示意性地说明了电子设备100如何确定常见的规则矩形形状的第二UI元素344的尺寸，但是本公开的实施例不限于此，而是可以类似地适用于任何规则或不规则形状的UI元素。

在图8的框820处，电子设备100可以确定第二UI元素344与第一UI元素343之间的距离。需要说明的是，在本公开的实施例中，电子设备100可以采用各种不同的方式来确定两个UI元素之间的距离。在一些实施例中，电子设备100可以先确定两个UI元素各自的参考点，然后确定两个参考点之间的距离，作为两个UI元素之间的距离。例如，在图10A的示例中，电子设备100可以确定第一UI元素343的参考点1010的位置，并且可以确定第二UI元素344的参考点1020的位置。然后，电子设备100可以确定参考点1010与参考点1020之间的距离1015，作为第一UI元素343与第二UI元素344之间的距离。需要说明的是，UI元素的参考点的选择可以基于预定的规则。例如，在图10A的示例中，UI元素的参考点被确定为UI元素左下角的角点。应理解，UI元素的参考点可以按照任何适当的规则来选取，只要两个UI元素之间的距离可以合理地被确定。例如，由于每个UI元素(例如，图标)的大小可能存在不一致的情况，在一些实施例中，电子设备100可以使用UI元素的中心点作为参考点，后文中将参考图11和图12来详细描述这样的实施例。然而，在实际的使用时，参考点的选择可以不作限定，而是可以由应用自由设定。在另一些实施例中，两个UI元素之间的最接近的两个点之间的距离可以被确定为两个UI元素之间的距离。例如，在图10B的示例中，由于第一UI元素343和第二UI元素344基本上是规则的矩形形状，并且两者存在平行的边，所以它们之间的最接近的两个点之间距离即为两条相邻边之间的距离1025。应理解，尽管图10B的示例以示意性地方式描绘了两个规则形状的UI元素的最接近的两个点之间的距离，但是本公开的实施例不限于此，而是等同地适用于具有任何相同形状或不同形状的两个UI元素。此外，在其他实施例中，两个UI元素之间的距离还可以采用各种其他的方式来确定，例如基于参考圆的半径来确定UI元素之间的距离，或者基于UI元素之间的间距来确定UI元素之间的距离，等等。后文将参考图11至图17A-图17E来描述这些实施例。

在图8的框830处，基于第二UI元素344的尺寸和第二UI元素344与第一UI元素343之间的距离，电子设备100可以确定第二UI元素344在第一移动中需要移动的目标距离。一般地，电子设备100可以使目标距离与第二UI元素344的尺寸和两个UI元素的距离具有任何适当的关系，只要可以体现出第一UI元素343对第二UI元素344的“吸引力”或“排斥力”的作用。在一些实施例中，电子设备100可以使目标距离随着第二UI元素344的尺寸增大而增大。也就是说，第二UI元素344越大，则第二UI元素344受到第一UI元素343的“吸引力”或“排斥力”越大。这与自然世界中的引力规律是相符的，因为第二UI元素344越大，可以认为第二UI元素344的“质量”越大，因此将受到更大的“引力”作用。另一方面，电子设备100可以使目标距离随着两个UI元素之间的距离增大而减小。换句话说，第二UI元素344离第一UI元素343越近，则第二UI元素344受到第一UI元素343的“吸引力”或“排斥力”越大。这也与自然世界中的引力规律相符，因为自然界的“引力”作用随着物体之间的距离减小而增大。以此方式，UI元素本身的大小越大，两个UI元素之间的距离越小，UI元素受到其他UI元素的“吸引力”或“排斥力”作用的大小也就越大，从而符合于自然界中的引力大小规律，由此进一步提升用户体验。

在一些实施例中，第一位移和第二位移的动画效果的幅度，也就是移动的距离与该UI元素与吸引力或者排斥力发生点的距离成反比。更具体地，本公开的实施例可以借用万有引力的模型，也即：

两个物体之间的万有引力大小与它们各自的质量和距离有关。因为本公开的实施例主要针对的是用户体验UX界面上使用的UI元素、图形、图标或者控件，所以可以认为一般情况下UI元素的质量和大小是成正比的。假设某一UI元素的大小为R，距离为r，则其“质量”可以认为是：

M＝K*R＝K*r (公式4)。

这样，基于上述的引力模型以及本公开的实施例的推导公式，可以得出两个UI元素之间的吸引力或排斥力与两个UI元素的距离和受影响的UI元素大小之间的关系如下：

F＝K*(R*R)/(r*r) (公式5)。

通过简化，即可得出吸引力或排斥力与受影响的UI元素的大小成正比，与两个UI元素之间的距离成反比，例如：

F＝K*R/r (公式6)。

进一步研究相关的参数K的细致意义，受影响的UI元素的位移的幅度可以通过以下的公式进行计算得到：

该公式是通过人因研究而得出，其中0.1和0.8可以作为固定常量，该公式是最接近引力效果的。此外，a是常量，其默认值可以是10，当然用户可以进行调节设定。需要说明的是，基于上文的公式4和公式7得出的位移时间曲线将类似于前文参考图7B和图7F描述的反比例曲线。在一些实施例中，电子设备100可以使用该公式来计算UI元素在“引力”动画效果中的位移动画的最终位置。当然，在其他实施例中，电子设备100也可以使受“引力”影响的第二UI元素344的移动的目标距离随着第二UI元素344的尺寸增大而减小，随着两个UI元素之间的距离增大而增大，或者具有任何其他的函数变化关系。尽管这样的函数变化关系可能与自然界中的引力规律不符，但是也可以给用户带来全新的用户体验。通过示例处理过程800，UI元素受到其他UI元素的“吸引力”或“排斥力”作用的大小可以取决于UI元素本身的大小和两个UI元素之间的距离，从而符合于自然界中的引力大小规律，由此进一步提升用户体验。

如上文提到的，在本公开的实施例中，除了上文描述的距离确定方式之外，两个UI元素之间的距离还可以采用各种其他的方式来确定。下文将参考图11至图17A至图17F来描述另外三种UI元素之间的距离确定方式。

图11示出了根据本公开的实施例的基于中心点来确定第一UI元素与第二UI元素之间的距离的示例处理过程1100的流程图。在一些实施例中，处理过程1100可以由电子设备100来实现，例如可以由电子设备100的处理器110或处理单元配合其他组件(例如，显示屏194)来实现。在其他实施例中，处理过程1100也可以由具有屏幕以显示UI元素的其他设备来实现。为了便于说明，将以电子设备100执行处理过程1100为例，参考图12来论述处理过程1100。图12示出了根据本公开的实施例的基于中心点来确定第一UI元素与第二UI元素之间的距离的示意图。

同时参考图11和图12，在图11的框1110处，电子设备100可以确定第一UI元素343的第一中心点343-o。需要说明的是，在一些实施例中，UI元素的中心点可以是指几何学意义上的重心，或者是指将UI元素考虑成密度均匀的物体情况下物理学意义上的重心。在其他实施例中，UI元素的中心点也可以是指以任何其他方式被定义的代表UI元素“中心”的中心点。在图12的示例中，电子设备100可以基于第一UI元素343的几何形状来确定出第一中心点343-o在屏幕300(图12未示出)上的坐标位置或像素位置，等等。在图11的框1120处，电子设备100可以确定第二UI元素344的第二中心点344-o。例如，以类似的方式，电子设备100可以基于第二UI元素344的几何形状来确定出第二中心点344-o在屏幕300(图12未示出)上的坐标位置或像素位置，等等。在图11的框1130处，电子设备100可以确定第一中心点343-o与第二中心点344-o之间的直线距离1200，作为第一UI元素343与第二UI元素344之间的距离。例如，基于第一中心点343-o和第二中心点344-o各自的坐标位置或像素位置，电子设备100可以确定出两个中心点之间的直线距离。通过处理过程1100，两个UI元素之间的距离可以按照直接明了的方式确定为两个UI元素中心点之间的距离，从而提高电子设备100确定UI元素之间距离的确定方式的一致性，简化电子设备100的计算过程。

图13示出了根据本公开的实施例的基于半径来确定第一UI元素与第二UI元素之间的距离的示例处理过程1300的流程图。在一些实施例中，处理过程1300可以由电子设备100来实现，例如可以由电子设备100的处理器110或处理单元配合其他组件(例如，显示屏194)来实现。在其他实施例中，处理过程1300也可以由具有屏幕以显示UI元素的其他设备来实现。为了便于说明，将以电子设备100执行处理过程1300为例，参考图14来论述处理过程1300。图14示出了根据本公开的实施例的基于半径来确定第一UI元素与第二UI元素之间的距离的示意图。

同时参考图13和图14，在图13的框1310处，电子设备100可以确定第一UI元素343的第一中心点343-o。如上文提到的，在一些实施例中，第一UI元素343的第一中心点343-o可以是指几何学意义上的第一UI元素343的重心，或者是指将第一UI元素343考虑成密度均匀的物体情况下在物理学意义上的重心。在其他实施例中，第一UI元素343的第一中心点343-o也可以是指以任何其他方式被定义的代表第一UI元素343“中心”的中心点。在图14的示例中，电子设备100可以基于第一UI元素343的几何形状来确定出第一中心点343-o在屏幕300(图14未示出)上的坐标位置或像素位置，等等。

在图13的框1320处，电子设备100可以确定以第一中心点343-o为圆心的具有各自半径的多个圆。例如，在图14描绘的示例中，电子设备100可以确定具有半径r1的第一圆1410、具有半径r2的第二圆1420、具有半径r3的第三圆1430、具有半径r4的第四圆1440、以及具有半径r5的第五圆1450。需要说明的是，在一些实施例中，各个圆(例如，圆1410至圆1450)的半径之间的差可以是相等的，也即r1至r5可以形成等差数列。以此方式，电子设备100生成各个圆的处理过程可以被简化。当然，在其他实施例中，电子设备100也可以根据用户的设置或者取决于UI元素不同排布方式而将各个圆(例如，圆1410至圆1450)的半径之间的差设置为不相等，也即r1至r5不形成等差数列。如此，生成各个圆的灵活性和各个圆对场景的适应性可以得到提高。

在图13的框1330处，电子设备100可以确定第二UI元素344与多个圆(例如，圆1410至圆1450)中的至少一个圆相交。例如，在图14描绘的示例中，电子设备100可以确定第二UI元素344与第一圆1410相交。需要说明的是，在一些实施例中，某个UI元素并不总是仅与一个圆相交。例如，在图14的示例中，UI元素352与第一圆1410和第二圆1420两者相交，并且UI元素354也与第一圆1410和第二圆1420两者相交。在图13的框1340处，电子设备100可以将与第二UI元素344相交的至少一个圆中半径最小的圆的半径确定为第二UI元素344与第一UI元素343之间的距离。例如，在图14的示例中，由于第二UI元素344仅与第一圆1410相交，所以电子设备100可以将第一圆1410的半径r1确定为第二UI元素344与第一UI元素343之间的距离。又例如，对于UI元素352和UI元素354，由于它们与第一圆1410和第二圆1420两者相交，因此电子设备100可以确定这两个圆中半径较小的圆为第一圆1410。然后，电子设备100可以确定UI元素352或UI元素354与第一UI元素343之间的距离为第一圆1410的半径r1。通过处理过程1300，电子设备100可以更简单和方便地确定两个UI元素之间的距离，并且使得UI元素之间的距离具有更高的一致性，从而简化基于距离的后续处理和计算过程。

图15A和图15B示出了根据本公开的实施例的在基于半径确定UI元素之间的距离的情况下UI元素之间的整体传导方式的示意图。在图15A和图15B的示例中，UI元素以带有填充图案的圆形表示，例如，UI元素1510。UI元素周围的线框1505用于示意性地示出UI元素的布置方式。如图15A和图15B所示，假设第3行第4列的UI元素***作，电子设备100可以确定以该UI元素为中心的五个圆，分别以索引1至5来表示。在本公开的实施例的基于半径的“引力”动画效果的联动方式中，如图15A和图15B所示，半径方式的联动是以圆形方式进行展开的。例如，半径可以想象成以波纹形式运动，中心点可以按照波纹的方式确定传导之间的关系。相关的UI元素(例如，图标)只要与某一个圆相交，那么该UI元素就按照该半径的传导编号进行运动。如果UI元素(例如，图标)和任何一个圆都不相交，那么可以通过UI元素之间的距离来找出满足该距离的最小半径。整体的传导方式的确定如图15B所示，物理参数的传递可以通过以下等式表示：

stiffness＝stiffness*(n+1)^-0.18，damping＝damping*(n+1)^-0.18，n＝index-0 (公式8)，

其中“stiffness”表示UI元素的位移时间变化曲线为弹性力曲线的情况下的弹性力曲线的刚性，“damping”表示UI元素的位移时间变化曲线为弹性力曲线的情况下的弹性力曲线的阻尼。动画回调可以表示为：onUpdate(x,y,index)，根据0节点的运动计算出编号index的x、y位移。此外，具有不同index的UI元素之间的“引力”动画效果联动传递的Delta时间差可以基于“引力”传播的速度来确定，后文将参考图19来进一步描述有关“引力”传播速度的实施例。

图16示出了根据本公开的实施例的基于间距来确定第一UI元素与第二UI元素之间的距离的示例处理过程1600的流程图。在一些实施例中，处理过程1600可以由电子设备100来实现，例如可以由电子设备100的处理器110或处理单元配合其他组件(例如，显示屏194)来实现。在其他实施例中，处理过程1600也可以由具有屏幕以显示UI元素的其他设备来实现。为了便于说明，将以电子设备100执行处理过程1600为例，参考图17A至图17F来论述处理过程1600。图17A至图17F示出了根据本公开的实施例的基于间距来确定第一UI元素与第二UI元素之间的距离的示意图。

在图16的框1610处，电子设备100可以确定第一UI元素与第二UI元素之间的横向间距。在本公开的上下文中，UI元素之间的间距可以是指两个UI元素的相邻的两个边框之间的距离。因此，横向间距可以是指两个UI元素在相对于屏幕300的横向方向上的边框距离，而纵向间距可以是指两个UI元素在相对于屏幕300的纵向方向上的边框距离。在图17A的示例中，由于UI元素343与UI元素344是相对于屏幕300水平排列的，所以电子设备100可以确定UI元素343与UI元素344之间的横向间距为1710。在图17B的示例中，由于UI元素343与UI元素353是相对于屏幕300竖直排列的，所以电子设备100可以确定UI元素343与UI元素353之间的横向间距为0。在图17C的示例中，由于UI元素343与UI元素354是相对于屏幕300斜向排列的，所以电子设备100可以确定UI元素343与UI元素344之间的横向间距为1710。

在图16的框1620处，电子设备100可以确定第一UI元素与第二UI元素之间的纵向间距。例如，在图17A的示例中，由于UI元素343与UI元素344是相对于屏幕300水平排列的，所以电子设备100可以确定UI元素343与UI元素344之间的纵向间距为0。在图17B的示例中，由于UI元素343与UI元素353是相对于屏幕300竖直排列的，所以电子设备100可以确定UI元素343与UI元素353之间的纵向间距为1720。在图17C的示例中，由于UI元素343与UI元素354是相对于屏幕300斜向排列的，所以电子设备100可以确定UI元素343与UI元素344之间的纵向间距为1720。

在图16的框1630处，电子设备100可以基于横向间距1710和纵向间距1720中的至少一者和第二UI元素的第一移动的第一方向，来确定第二UI元素与第一UI元素之间的距离。例如，在图17A的示例中，由于UI元素343与UI元素344之间的横向距离为1710，纵向距离为0，而UI元素344朝向或远离UI元素343的第一移动的第一方向344-d1(在图17A中是远离UI元素343的方向)与屏幕300的横向方向是平行的，所以电子设备100可以确定UI元素343与UI元素344之间距离即为两者的横向距离1710。类似地，在图17B的示例中，由于UI元素343与UI元素353之间的横向距离为0，纵向距离为1720，而UI元素353朝向(未示出)或远离UI元素343的第一移动的第一方向353-d1(在图17B中是远离UI元素343的方向)与屏幕300的纵向方向是平行的，所以电子设备100可以确定UI元素343与UI元素353之间距离即为两者的纵向距离1720。需要说明的是，在图17A和图17B的示例中，如果UI元素的第一移动的第一方向并不与屏幕300的横向方向或纵向方向平行，那么电子设备100可以将横向距离1710(图17A)或纵向距离1720(图17B)在第一方向上的投影确定为两个UI元素之间的距离。

在图17C的示例中，由于UI元素343与UI元素354之间的横向距离1710和纵向距离1720均不为0，并且UI元素354朝向或远离UI元素343的第一移动的第一方向354-d1(在图17C中是远离UI元素343的方向)不与屏幕300的横向方向或纵向方向平行。在这种情况下，UI元素343与UI元素354之间的距离可以通过横向距离1710和纵向距离1720基于第一方向354-d1的投影来确定。作为一种示例，如图17D所示，基于横向距离1710和纵向距离1720的大小，电子设备100可以确定出以横向距离1710和纵向距离1720为两条直角边的直角三角形，该直角三角形具有斜边1725。然后，基于UI元素354的第一位移的第一方向354-d1，电子设备100可以在直角三角形内确定出UI元素343与UI元素354之间的距离1730。在具体的投影计算方式中，电子设备100可以根据第一方向354-d1与水平方向的夹角或者与竖直方向的夹角，利用三角函数的原理，计算出在第一方向354-d1上的距离。

在图17D的示例中，在基于第一方向354-d1的投影计算过程中，同时利用了横向距离1710和纵向距离1720。在其他实施例中，电子设备100可以根据第一方向354-d1的具体指向而仅使用横向距离1710和纵向距离1720之一，来确定UI元素343与UI元素354之间的距离。例如，如图17E所示，电子设备100可以确定第一方向354-d1是更接近于屏幕300的水平方向还是竖直方向。如果第一方向354-d1更接近于水平方向，则电子设备100可以仅使用横向距离1710来确定UI元素343与UI元素354之间的距离。另一方面，如果第一方向354-d1更接近于竖直方向，则电子设备100可以仅使用纵向距离1720来确定UI元素343与UI元素354之间的距离。在图17E的示例中，假设第一方向354-d1更接近于水平方向，则基于与横向距离1710垂直的辅助线1712，电子设备100可以确定UI元素343与UI元素354之间的距离为1740。另外，假设第一方向354-d1更接近于竖直方向，则基于与纵向距离1720垂直的辅助线1722，电子设备100可以确定UI元素343与UI元素354之间的距离为1750。这样的计算方式在本文中也可以称为分段计算方式，也即按照横向间距和纵向间距和不同的方向进行不同的分段计算。更一般地说，电子设备100可以确定第一方向与水平方向和竖直方向之间的夹角，如果第一方向更偏向水平方向和竖直方向中的某一方向，就可以按照该方向来计算距离。例如，在第一方向更接近竖直方向时，可以按照与竖直方向有关的三角函数来计算弦边长度，也即距离。相反，在第一方向更接近水平方向时，可以按照与水平方向有关的三角函数来计算弦边长度，也即距离。

在上文参考图17A至图17E描述的示例中，受到“引力”作用影响的UI元素的第一移动的第一方向被用作参考方向，然后基于UI元素之间的横向间距和纵向间距之一或二者来确定两个UI元素之间的距离。然而，本公开的实施例不限于此，而是等同地适用于以任意方向作为参考方向，然后基于UI元素之间的横向间距和纵向间距之一或二者来确定两个UI元素之间的距离。例如，在一些实施例中，在基于横向间距和/或纵向间距来确定UI元素之间的距离的过程中，用于替代上文描述的UI元素的第一方向的参考方向可以包括但不限于，横向方向(例如，相对于屏幕300)、竖直方向(例如，相对于屏幕300)、或者某个固定的方向(例如，相对于屏幕300)，等等。

本公开的实施例提出的基于间距的UI元素距离的计算方式可以更广泛地使用在不同大小的UI元素以相同间距布置的场景中。例如，在图17F的示例中，电子设备100的屏幕上可以显示各种尺寸的UI元素，例如，UI元素1760、UI元素1762、UI元素1764、UI元素1766等，其中UI元素1764最大，UI元素1760次之，UI元素1762再次之，UI元素1766最小。尽管UI元素1760至1766具有不同的大小，但是它们之间的横向间距1775和纵向间距1765可以是相同的。在图17F的示例中，所谓的间距可以是两个UI元素(例如，卡片)或者其他控件之间的边框的距离。但是，在考虑不同的第一方向的情况下，在同一种UI元素布局中，UI元素之间的间距可能不一样。以第一方向为投影方向，通过上文介绍的投影计算方式可以直接计算出所有UI元素(例如，控件)之间的间距。在通常的场景中，横向运动的距离即为横向间距1775，纵向运动的距离即为纵向间距1765。但是，在横向间距和纵向间距不规则的场景，每一个UI元素(例如，控件)的横向间距和纵向间距可能是不一样的，这个间距值可以是UI元素被布局时就确定的，并且可以跟随当前UI元素(例如，控件)的属性。当横向间距和纵向间距确定了之后，每个第一方向上的距离都可以根据这两个间距来计算。此外，在间距确定了之后，基于弹性运动的原理，电子设备100可以按需进行UI元素动画效果的链式联动。在链式联动的过程中，所有的参数都是可以调节的。整个传导公式可以按照各种相关的参数计算而得出的值进行UI元素的引力的相关的运动。通过示例处理过程1600，电子设备100可以基于UI元素之间的间距来确定UI元素之间的距离，从而提高距离确定方式的灵活性和合理性，特别是在UI元素之间的间距基本保持一致的场景中。

如上文提到的，在一些实施例中，电子设备100的用户所操作的第一UI元素可以并不是对屏幕300上的所有UI元素都存在“引力”作用，也即存在“吸引力”或“排斥力”，而是存在一定的“引力”影响范围。以此方式，电子设备100可以将UI元素的“引力”影响范围设置为适当的大小，从而可以在保持“引力”动画效果符合自然规律的同时，减少电子设备100在实现“引力”动画效果时的计算量，节省计算资源。如本文中使用的，UI元素的“吸引力”或“排斥力”的影响范围(或影响区域)也可以称为引力范围、引力作用范围、引力影响范围，等等。应理解，UI元素的引力范围可以是具有任何形状的区域。在一些实施例中，UI元素的引力范围可以是一个以UI元素为中心的圆形区域。该设置符合于自然界的规律，因为在自然界中，物体的引力范围通常认为是以物体为中心的球体。当然，在一些实施例中，取决于用户的偏好或者具体的应用场景，UI元素的引力范围也可以被设置为其他规则的形状(例如，正方形)或不规则的形状，从而提高引力范围设置的灵活性。在一些实施例中，电子设备100可以将每个UI元素的引力范围设置为相同的，这样可以简化电子设备100关于UI元素的引力范围的计算过程。在其他实施例中，电子设备100可以根据UI元素的尺寸大小来设置UI元素的引力范围。以此方式，UI元素的“引力”作用范围的大小更加符合自然界的规律，因为在自然界中，在假定物体具有均匀密度的情况下，体积越大的物体对周围的物体将具有更大的引力。下文将参考图18A至图18C来进一步描述这样的实施例。图18A至图18C示出了根据本公开的实施例的在UI元素具有有限的“引力”范围的场景中所产生的“引力”动画效果的示意图。

具体地，电子设备100可以基于***作的第一UI元素的尺寸来确定第一UI元素的影响区域。例如，在图18A的示例中，假设UI元素343是***作的第一UI元素，则电子设备100可以根据UI元素343的尺寸来确定UI元素343具有影响区域(也即，引力范围)1800。也就是说，以吸引力或者排斥力的发生中心点为圆心，半径R范围内的UI元素将受到UI元素343的“引力”影响，电子设备100可以针对这些UI元素来实现位移动画，以模拟吸引力或者排斥力效果。例如，半径R可以与UI元素自身的尺寸大小有关，越大的UI元素R可以越大。在一些实施例中，UI元素的引力影响范围可以表示为(min，max)。也就是说，UI元素的大小可以认为是与“引力”范围的大小成正比，也即，可以推导出UI元素的“质量”与其“引力”范围成正比。引力影响范围的上下限的具体数值可以由应用侧进行设定，距***作的UI元素的中心点的距离需要在这个区间内才会产生引力动画效果。在图18A描绘的示例中，UI元素343的影响区域1800被描绘为以UI元素343的中心点343-o为圆心半径为R的圆形区域。然后，电子设备100可以将屏幕300上的M个(在该示例中为24个)UI元素中在影响区域1800内的UI元素确定为将会受到UI元素343的“引力”作用影响的N个UI元素。例如，在图18A的示例中，在影响区域1800内的UI元素包括UI元素332、UI元素333、UI元素334、UI元素342、UI元素344、UI元素352、UI元素353和UI元素354。

如图18B所示，小黑点表示在UI元素343的影响区域1800内的UI元素332、UI元素333、UI元素334、UI元素342、UI元素344、UI元素352、UI元素353和UI元素354在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图18B示出的时刻，UI元素343周围的UI元素332、UI元素333、UI元素334、UI元素342、UI元素344、UI元素352、UI元素353和UI元素354已经在朝向UI元素343的第一方向上移动了各自的目标距离，之后将开始在远离UI元素343的第二方向返回各自的起始位置。如图18C所示，小黑点表示UI元素343周围的UI元素332、UI元素333、UI元素334、UI元素342、UI元素344、UI元素352、UI元素353和UI元素354在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图18C示出的时刻，在影响区域1800内的UI元素343周围的UI元素332、UI元素333、UI元素334、UI元素342、UI元素344、UI元素352、UI元素353和UI元素354已经完成了远离UI元素343的第二移动而返回到各自的起始位置。相比之下，在UI元素343的影响区域1800之外的各个UI元素，包括UI元素311至314、UI元素321至324、UI元素331、UI元素341、UI元素351、以及UI元素361至364将不会受到UI元素343的“引力”影响，从而在“引力”动画效果期间可以保持不动。

图19示出了根据本公开的实施例的基于“引力”传播速度来确定UI元素的“引力”动画效果开始的时间点的示例处理过程1900的流程图。在一些实施例中，处理过程1900可以由电子设备100来实现，例如可以由电子设备100的处理器110或处理单元配合其他组件(例如，显示屏194)来实现。在其他实施例中，处理过程1900也可以由具有屏幕以显示UI元素的其他设备来实现。为了便于说明，将以电子设备100执行处理过程1900为例，参考图3B至图3D来论述处理过程1900。

同时参考图3B和图19，在图19的框1902处，为了使第二UI元素344进行第一移动，电子设备100可以确定针对UI元素343的操作被执行的第一时间点T1。例如，电子设备100可以记录用户操作UI元素343的时间点。在图19的框1904处，基于预定速度s(例如，UI元素343的“引力”作用的传播速度)和第二UI元素与***作的第一UI元素343之间的距离D，电子设备100可以确定第二UI元素开始第一移动的第二时间点T2与第一时间点T1之间的延迟T2-T1＝Delay，例如该延迟可以计算如下：

Delay＝D/s(公式9)。

在图3D的示例中，假设第二UI元素是UI元素343，那么电子设备100可以确定与UI元素343相关联的第二时间点T2与第一时间点T1之间的延迟Delay-344为中心点343-o与中心点344-o之间的距离除以预定速度s。又例如，在图3D的示例中，假设第二UI元素是UI元素311，那么电子设备100可以确定与UI元素311相关联的第二时间点T2与第一时间点T1之间的延迟Delay-311为中心点311-o与中心点344-o之间的距离除以预定速度s。应明白，由于中心点311-o与中心点344-o之间的距离大于中心点343-o与中心点344-o之间的距离，所以延迟Delay-311将会大于延迟Delay-344。

在框1906处，电子设备100可以基于第一时间点T1和延迟Delay来确定第二UI元素开始第一移动的第二时间点T2。例如，在图3D的示例中，电子设备100可以将第一时间点T1加上延迟Delay-344，从而得出UI元素343开始进行第一移动的第二时间点T2-344。类似地，在图3D的示例中，电子设备100可以将第一时间点T1加上延迟Delay-311，从而得出UI元素311开始进行第一移动的第二时间点T2-311。应明白，由于延迟Delay-311大于延迟Delay-344，所以UI元素311的第二时间点T2-311将会晚于UI元素343的第二时间点T2-344。在框1908处，电子设备100可以在第二时间点T2使第二UI元素开始第一移动。例如，在图3D的示例中，电子设备100可以使UI元素343在第二时间点T2-344开始进行第一移动。类似地，在图3D的示例中，电子设备100可以使UI元素311在第二时间点T2-311开始进行第一移动。应理解，由于UI元素311的第二时间点T2-311晚于UI元素343的第二时间点T2-344，所以UI元素311将会比UI元素343较晚地开始进行“引力”动画效果。也就是说，本公开的实施例的“引力”动画效果开始的时间点可以是与受影响的UI元素与***作的UI元素之间的距离r成反比的，另外定义波的传输速度为s，应用侧可以自行调节。在这种情况下，第一波运动的UI元素(也即，在***作的UI元素的影响范围内距离中心点最近的UI元素，假设距中心点的距离为r0)可以没有延时，r0也是可调参数，由应用侧确定。其他受影响的UI元素(例如，距***作的UI元素的中心点的距离r)的延时可以是：

delay＝(r-r0)/s(公式10)。

通过示例处理过程1900，电子设备100的UI可以在视觉上呈现“引力”作用的联动，也即，“吸引力”或“排斥力”造成的移动随着距离进行传播，使得UI的动画效果更符合用户的使用习惯，从而进一步改进用户体验。

图19B至图19E示出了根据本公开的实施例的在考虑到“引力”传播延迟的情况下受到“引力”影响的三个UI元素的不同位移时间变化曲线的比较的示意图。具体地，图19B示出了在上文参考图3C至图3F描述的示例中的UI元素344、UI元素324和UI元素311三个UI元素在受到UI元素343的“引力”影响下，在考虑到“引力”传播延迟的情况下的第一移动的位移时间曲线均为贝塞尔曲线的示意图。图19C示出了在上文参考图3C至图3F描述的示例中的UI元素344、UI元素324和UI元素311三个UI元素在受到UI元素343的“引力”影响下，在考虑到“引力”传播延迟的情况下的的第一移动的位移时间曲线均为反比例曲线的示意图。图19D示出了在上文参考图3C至图3F描述的示例中的UI元素344、UI元素324和UI元素311三个UI元素在受到UI元素343的“引力”影响下，在考虑到“引力”传播延迟的情况下的第二移动的位移时间曲线均为临界阻尼弹性力曲线的示意图。图19E示出了在上文参考图3C至图3F描述的示例中的UI元素344、UI元素324和UI元素311三个UI元素在受到UI元素343的“引力”影响下，在考虑到“引力”传播延迟的情况下的第二移动的位移时间曲线均为欠阻尼弹性力曲线的示意图。需要说明的是，图19B至图19E以示例性的方式描绘了三个UI元素的位移时间曲线，以说明不同UI元素在相同UI元素的“引力”影响下的第一位移和第二位移可以分别具有不同的位移时间曲线，并且开始第一移动或第二移动的时间之间具有时间差或延迟。图3C至图3F中描绘的受到UI元素343的“引力”影响的其他UI元素的第一位移和第二位移可以具有类似的位移时间曲线和延迟。

在图19B示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)，此前在图5中描绘的第二UI元素344的第一移动的位移时间曲线1910可以是二阶贝塞尔曲线，UI元素324的第一移动的位移时间曲线1912可以是二阶贝塞尔曲线，并且UI元素311的第一移动的位移时间曲线1914也可以是二阶贝塞尔曲线。注意，贝塞尔曲线1910、1912和1914可以具有不同的参数。例如，因为UI元素344与***作的UI元素343的距离最近，所以UI元素344可以具有最大的目标距离D0-344，并且第一移动具有最早的开始时间t19-1。因为UI元素324与***作的UI元素343的距离比UI元素344远，所以UI元素344可以具有比UI元素344的目标距离D0-344小的目标距离D0-324，并且第一移动的开始时间t19-2晚于UI元素344的第一移动的开始时间t19-1。因为UI元素311与***作的UI元素343的距离比UI元素323远，所以UI元素311可以具有比UI元素324的目标距离D0-324小的目标距离D0-311，并且第一移动的开始时间t19-3晚于UI元素324的第一移动的开始时间t19-2。同时参考图3C至图3E和图19B，在t19-1时刻，UI元素344在UI元素343的“引力”作用下，开始准备进行第一移动。在t19-2时刻，UI元素324在UI元素343的“引力”作用下，开始准备进行第一移动。在t19-3时刻，UI元素344、324和311在各自的第一方向上移动距离D1-344、D1-324和D1-311(在图19B的示例中为0，因为此时UI元素311尚未开始第一移动)。在t19-4时刻，UI元素311在UI元素343的“引力”作用下，开始准备进行第一移动。在t19-5时刻，UI元素344、324和311在各自的第一方向上移动距离D2-344、D2-324和D2-311。在t19-6时刻，UI元素344在第一方向上移动目标距离D0-344。在t19-7时刻，UI元素324在第一方向上移动目标距离D0-324。在t19-8时刻，UI元素311在第一方向上移动目标距离D0-311。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线1910、1912、1914上确定出UI元素344、324和311在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344、324和311，从而可以实现UI元素344、324和311进行各自的第一移动的动画效果。

在图19C示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)，此前在图5中描绘的第二UI元素344的第一移动的位移时间曲线1920可以是反比例曲线，UI元素324的第一移动的位移时间曲线1922可以是反比例曲线，并且UI元素311的第一移动的位移时间曲线1924也可以是反比例曲线。注意，反比例曲线1920、1922和1924可以具有不同的参数。例如，因为UI元素344与***作的UI元素343的距离最近，所以UI元素344可以具有最大的目标距离D0-344，并且第一移动具有最早的开始时间t19-1。因为UI元素324与***作的UI元素343的距离比UI元素344远，所以UI元素344可以具有比UI元素344的目标距离D0-344小的目标距离D0-324，并且第一移动的开始时间t19-2晚于UI元素344的第一移动的开始时间t19-1。因为UI元素311与***作的UI元素343的距离比UI元素323远，所以UI元素311可以具有比UI元素324的目标距离D0-324小的目标距离D0-311，并且第一移动的开始时间t19-3晚于UI元素324的第一移动的开始时间t19-2。同时参考图3C至图3E和图19C，在t19-1时刻，UI元素344在UI元素343的“引力”作用下，开始准备进行第一移动。在t19-2时刻，UI元素324在UI元素343的“引力”作用下，开始准备进行第一移动。在t19-3时刻，UI元素311在UI元素343的“引力”作用下，开始准备进行第一移动。在t19-4时刻，UI元素344、324和311在各自的第一方向上移动距离D1-344、D1-324和D1-311。在t19-5时刻，UI元素344、324和311在各自的第一方向上移动距离D2-344、D2-324和D2-311。在t19-6时刻，UI元素344在第一方向上移动目标距离D0-344。在t19-7时刻，UI元素324在第一方向上移动目标距离D0-324。在t19-8时刻，UI元素311在第一方向上移动目标距离D0-311。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线1920、1922、1924上确定出UI元素344、324和311在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344、324和311，从而可以实现UI元素344、324和311进行各自的第一移动的动画效果。

在图19D示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)，此前在图5中描绘的第二UI元素344的第二移动的位移时间曲线1930可以是临界阻尼弹性力曲线，UI元素324的第二移动的位移时间曲线1932可以是临界阻尼弹性力曲线，并且UI元素311的第二移动的位移时间曲线1934也可以是临界阻尼弹性力曲线。在图19D的示例中，假设UI元素344、324和311各自的第一移动具有相同的持续时间，因此各自的第二移动的开始时间之间的延迟将与各自的第一移动的开始时间之间的延迟相同。注意，临界阻尼弹性力曲线1930、1932和1934可以具有不同的参数。例如，因为UI元素344与***作的UI元素343的距离最近，所以UI元素344可以具有最大的目标距离D0-344，并且第二移动具有最早的开始时间t19-9。因为UI元素324与***作的UI元素343的距离比UI元素344远，所以UI元素344可以具有比UI元素344的目标距离D0-344小的目标距离D0-324，并且第二移动的开始时间t19-10晚于UI元素344的第一移动的开始时间t19-9。因为UI元素311与***作的UI元素343的距离比UI元素323远，所以UI元素311可以具有比UI元素324的目标距离D0-324小的目标距离D0-311，并且第二移动的开始时间t19-11晚于UI元素324的第一移动的开始时间t19-10。同时参考图3E至图3F和图19D，在t19-9时刻，UI元素344在UI元素343的“引力”作用下，已经完成第一移动，开始准备进行第二移动。在t19-10时刻，UI元素324在UI元素343的“引力”作用下，已经完成第一移动，开始准备进行第二移动。在t19-11时刻，UI元素311在UI元素343的“引力”作用下，已经完成第一移动，开始准备进行第二移动。在t19-12时刻，UI元素344、324和311在各自的第二方向上移动距离D1-344、D1-324和D1-311。在t19-13时刻，UI元素344、324和311在各自的第二方向上移动距离D2-344、D2-324和D2-311。在t19-14时刻，UI元素344在第二方向上移动目标距离D0-344。在t19-15时刻，UI元素324在第二方向上移动目标距离D0-324。在t19-16时刻，UI元素311在第二方向上移动目标距离D0-311。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线1930、1932、1934上确定出UI元素344、324和311在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344、324和311，从而可以实现UI元素344、324和311进行各自的第二移动的动画效果。

在图19E示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)，此前在图5中描绘的第二UI元素344的第二移动的位移时间曲线1940可以是欠阻尼弹性力曲线，UI元素324的第二移动的位移时间曲线1942可以是欠阻尼弹性力曲线，并且UI元素311的第二移动的位移时间曲线1944也可以是欠阻尼弹性力曲线。在图19E的示例中，假设UI元素344、324和311各自的第一移动具有相同的持续时间，因此各自的第二移动的开始时间之间的延迟将与各自的第一移动的开始时间之间的延迟相同。注意，欠阻尼弹性力曲线1940、1942和1944可以具有不同的参数。例如，因为UI元素344与***作的UI元素343的距离最近，所以UI元素344可以具有最大的目标距离D0-344，并且第二移动具有最早的开始时间t19-9。因为UI元素324与***作的UI元素343的距离比UI元素344远，所以UI元素344可以具有比UI元素344的目标距离D0-344小的目标距离D0-324，并且第二移动的开始时间t19-10晚于UI元素344的第一移动的开始时间t19-9。因为UI元素311与***作的UI元素343的距离比UI元素323远，所以UI元素311可以具有比UI元素324的目标距离D0-324小的目标距离D0-311，并且第二移动的开始时间t19-11晚于UI元素324的第一移动的开始时间t19-10。同时参考图3E至图3F和图19E，在t19-9时刻，UI元素344在UI元素343的“引力”作用下，已经完成第一移动，开始准备进行第二移动。在t19-10时刻，UI元素324在UI元素343的“引力”作用下，已经完成第一移动，开始准备进行第二移动。在t19-11时刻，UI元素311在UI元素343的“引力”作用下，已经完成第一移动，开始准备进行第二移动。在t19-12时刻，UI元素344、324和311在各自的第二方向上移动距离D1-344、D1-324和D1-311。在t19-13时刻，UI元素344、324和311在各自的第二方向上移动距离D2-344、D2-324和D2-311。在t19-14时刻，UI元素344在第二方向上移动目标距离D0-344。在t19-15时刻，UI元素324在第二方向上移动目标距离D0-324。在t19-16时刻，UI元素311在第二方向上移动目标距离D0-311。注意，在图19E示出的示例中，UI元素344、324和311将会基于各自的欠阻尼弹性力曲线的位移时间曲线，而在各自的起始位置进行来回的“往复”运动。需要说明的是，在具体的实现中，电子设备100可以根据屏幕300的刷新频率所对应的时间间隔在位移时间曲线1940、1942、1944上确定出UI元素344、324和311在每个时刻所在的位置，然后在不同的时刻在屏幕300上的对应位置处显示UI元素344、324和311，从而可以实现UI元素344、324和311进行各自的第二移动的动画效果。需要说明的是，在图19E的示例中，由于受到UI元素343的“引力”作用影响的其他UI元素(例如UI元素344、324和311等)可以根据具有不同参数(例如，不同的开始时间，不同的目标距离等)的欠阻尼弹性力曲线来进行第二移动(在一些实施例中，也可以根据欠阻尼弹性力曲线进行第一移动)，所以在这些UI元素进行“引力”动画效果期间，特别是在进行多次来回“往复”运动期间，这些UI元素可能发生“重叠”，也即一个UI元素可能会覆盖另外的一个或多个UI元素。在一些实施例中，如果不期望在UI元素的“引力”动画效果期间发生UI元素的“重叠”，则电子设备100可以选择类似图19B至图19D中描绘的位移时间曲线来控制UI元素的“引力”动画效果。还需要说明的是，更一般地，不限于图19E的示例，在本公开的一些实施例中，受到“引力”影响的各个UI元素的第一移动的目标距离(也即，移动幅度)是可设置的，所以在某些设置的情况下，在多个UI元素进行“引力”动画效果期间可能会发生UI元素的重叠。本公开的实施例并不排除这样的UI元素重叠。换句话说，不论UI元素在进行“引力”动画效果期间是否发生重叠，都应当认为落在本公开的实施例的范围之内。

如上文指出的，本公开的实施例提出的“引力”动画效果不限于在上文描述的UI元素被点击的示例操作场景，而是可以适用于对UI元素的各种其他操作的场景。例如，在一些实施例中，对第一UI元素的操作可以包括点击操作、移动操作、与其他UI元素合并操作、展开操作、删除操作，等等。以此方式，电子设备可以在与UI元素相关的几乎所有的操作中实现“引力”动画效果，从而在更多的操作场景中提升用户体验。下文将参考图20A至图20D、图21、图22A至图22D来描述UI元素被移动，并且与其他UI元素交换位置的示例场景中的“引力”动画效果。然后，将参考图23A至图23D来描述UI元素与其他UI元素合并的示例场景中的“引力”动画效果。接着，将参考图24A至图24D来描述UI元素被删除的示例场景中的“引力”动画效果。最后，将参考图25A至图25D来描述UI元素被展开的示例场景中的“引力”动画效果。

图20A至图20D示出了根据本公开的实施例在UI元素被移动并且与另一UI元素交换位置的场景中所产生的“引力”动画效果的示意图。如图20A所示，电子设备100的用户的手部370按住UI元素343，然后将UI元素343拖动到位于UI元素343的上方的UI元素333的附近。如图20B所示，响应于用户的手部370对UI元素343的操作，UI元素343与UI元素333交换位置。也就是说，在用户对UI元素343的上述操作之后，UI元素343将移动到UI元素333之前的位置，而UI元素333将移动到UI元素343之前的位置。更具体地，在图20A至图20D描绘的示例中，UI元素333最初位于第3行第3列的初始位置，而UI元素343最初位于第4行第3列的初始位置。如本文中使用的，“初始位置”可以是指在用户对UI元素的操作之前，UI元素最初所位于的位置，其有别于上文描述的“引力”动画效果被触发时UI元素所位于的“起始位置”。

在图20B中，UI元素343已经完成与UI元素333的位置交换，因此UI元素343目前位于第3行第3列，而UI元素333位于第4行第3列。此时，由于***作的UI元素343来到了新的位置，所以可以想象为此前的“引力”平衡状态被“打破”，从而将对周围的UI元素产生“引力”作用。具体地，在图20A至图20D描绘的示例中，UI元素343来到新位置之后对周围的UI元素产生的“引力”作用可以被设置为“排斥力”。也就是说，UI元素343周围的UI元素将首先在远离UI元素343的第一方向上进行第一位移，然后将在朝向UI元素343的第二方向上进行第二位移，从而返回到各自的起始位置。更具体地，UI元素311将沿着远离UI元素343的第一方向311-d1进行第一移动，UI元素312将沿着远离UI元素343的第一方向312-d1进行第一移动，UI元素313将沿着远离UI元素343的第一方向313-d1进行第一移动，UI元素314将沿着远离UI元素343的第一方向314-d1进行第一移动。类似地，UI元素321将沿着远离UI元素343的第一方向321-d1进行第一移动，UI元素322将沿着远离UI元素343的第一方向322-d1进行第一移动，UI元素323将沿着远离UI元素343的第一方向323-d1进行第一移动，UI元素324将沿着远离UI元素343的第一方向324-d1进行第一移动。

类似地，UI元素331将沿着远离UI元素343的第一方向331-d1进行第一移动，UI元素332将沿着远离UI元素343的第一方向332-d1进行第一移动，UI元素334将沿着远离UI元素343的第一方向334-d1进行第一移动。类似地，UI元素341将沿着远离UI元素343的第一方向341-d1进行第一移动，UI元素342将沿着远离UI元素343的第一方向342-d1进行第一移动，UI元素333将沿着远离UI元素343的第一方向333-d1进行第一移动，UI元素344将沿着远离UI元素343的第一方向344-d1进行第一移动。类似地，UI元素351将沿着远离UI元素343的第一方向351-d1进行第一移动，UI元素352将沿着远离UI元素343的第一方向352-d1进行第一移动，UI元素353将沿着远离UI元素343的第一方向353-d1进行第一移动，UI元素354将沿着远离UI元素343的第一方向354-d1进行第一移动。类似地，UI元素361将沿着远离UI元素343的第一方向361-d1进行第一移动，UI元素362将沿着远离UI元素343的第一方向362-d1进行第一移动，UI元素363将沿着远离UI元素343的第一方向363-d1进行第一移动，UI元素364将沿着远离UI元素343的第一方向364-d1进行第一移动。

在图20B的示例中，由于各个UI元素的大小是相同的，因此每个UI元素受到UI元素343的“引力”影响的大小(也即，第一移动的目标距离或幅度)可以随着UI元素与UI元素343的距离增大而减小。具体地，在图20B的示例中，假设UI元素之间的横向间距和纵向间距是相等的。因此，UI元素323、332、334与UI元素343的距离最近，因此第一移动的目标距离最大。UI元素322、324、342、344与UI元素343的接近程度次之(也即，距离更大)，因此第一移动的目标距离也次之。UI元素313、331、353与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素312、314、321、341、352和354与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素311和351与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素363与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素362和364与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素361距离UI元素343的距离最远，因此第一移动的目标距离也最小。需要说明的是，具体到每个UI元素在第一移动中的目标距离的大小，可以基于该UI元素与产生“引力”影响的UI元素之间的距离来确定，而两个UI元素之间的距离可以按照前文参考图8至图17F中描述的任何一种距离计算方式来确定。

例如，如图20C所示，小黑点表示除了UI元素343之外的各个UI元素在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图20C示出的时刻，除了UI元素343之外的各个UI元素已经在远离UI元素343的第一方向上移动了各自的目标距离，之后将在朝向UI元素343的第二方向上返回各自的起始位置。在图20C的示例中，由于各个UI元素的尺寸是相同的，所以某个UI元素受到UI元素343的“排斥力”的大小(也即目标距离的大小)可以取决于与该UI元素与UI元素343之间的距离。因此，如图20C中示意性地示出的，在各自的第一移动中，UI元素343周围的UI元素将根据与UI元素343的距离远近而具有不同的移动距离。例如，UI元素323比UI元素313更接近于UI元素343，所以UI元素323可以比UI元素313移动更大的目标距离。如图20D所示，小黑点表示除了UI元素343之外的各个UI元素在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图20D示出的时刻，除了UI元素343之外的各个UI元素已经完成了朝向UI元素343的第二移动而返回到各自的起始位置。

在一些实施例中，UI元素333可能将早于UI元素343达到新位置，也即当UI元素333到达第4行第3列的新位置时，UI元素343可能还未到达第3行第3列的新位置。在这样的情况下，到达新位置的UI元素333可以认为是“引力”平衡被打破的UI元素，因此将会受到周围其他UI元素的“引力”作用。例如，在UI元素333到达新位置之后，并且在UI元素343尚未到达新位置之前，UI元素333可以受到周围某个UI元素的“吸引力”而产生“引力”动画效果。下文将参考图21以及图22A至图22D来描述这样的实施例。当然，在UI元素333到达新位置之后，并且在UI元素343尚未到达新位置之前，UI元素333的“引力”本公开的实施例的“引力”动画效果不限于UI元素333受到周围某个UI元素的“吸引力”，而也可能是受到周围某个UI元素的“排斥力”、受到周围多个UI元素的“吸引力”或“排斥力”、或者可以是对周围的UI元素产生“吸引力”或“排斥力”，等等。

图21示出了根据本公开的实施例的在UI元素交换位置的场景中，先到达新位置的UI元素受到其他UI元素的“引力”作用而产生“引力”动画效果的示例处理过程2100的流程图。在一些实施例中，处理过程2100可以由电子设备100来实现，例如可以由电子设备100的处理器110或处理单元配合其他组件(例如，显示屏194)来实现。在其他实施例中，处理过程2100也可以由具有屏幕以显示UI元素的其他设备来实现。为了便于说明，将以电子设备100执行处理过程2100为例，参考图22A至图22D来论述处理过程2100。

图22A至图22D示出了根据本公开的实施例的在UI元素交换位置的场景中，先到达新位置的UI元素受到其他UI元素的“引力”作用而产生“引力”动画效果的示意图。需要说明的是，图22A至图22D描绘的场景在时间上处于上文描述的图20A与图20B之间。也就是说，图22A至图22D的场景发生在UI元素333已经到达新位置(也即UI元素343之前的位置)，并且UI元素343尚未到达新位置(也即UI元素333之前的位置)的这段时间期间。因此，如果将UI元素333考虑为图2的示例过程200中的第二UI元素，那么示例过程200中针对第二UI元素333的“引力”动画效果的目标距离指的是图20C中描绘的移动距离，下文中将称为第一目标距离。在图20A至20D描绘的“引力”动画效果之外，针对UI元素333的“引力”动画效果还将包括图22A至图22D描绘的“引力”动画效果。

同时参考图21和图22A，在图21的框2110处，电子设备100可以将第二UI元素333从初始位置移动到起始位置，起始位置可以是第一UI元素343的初始位置。例如，在图22A的示例中，第一UI元素343的初始位置是第4行第3列，而第二UI元素333的初始位置是第3行第3列。在电子设备100的用户使用手部370发起第一UI元素343与第二UI元素333的位置交换过程之后，第二UI元素333已经达到新位置第4行第3列，但是第一UI元素343还没有到达新位置第3行第3列。此时，由于第二UI元素333来到了新的位置，所以可以想象为第二UI元素333此前的“引力”平衡状态被“打破”，从而将受到周围的UI元素产生的“引力”作用。作为示例，如图22B所示，第二UI元素333将会受到下方的UI元素353的“吸引力”而产生“引力”动画效果。为了描述的便利，对第二UI元素333产生“引力”作用的UI元素353可以以称为第三UI元素。需要说明的是，尽管图22B中描绘的是下方的UI元素353对第二UI元素333产生“吸引力”，但是这仅是示意性的，无意以任何方式限制本公开的范围。在其他实施例中，对第二UI元素333的“吸引力”或“排斥力”可以来自于其他一个或多个UI元素，或者也可以是第二UI元素333对其他一个或多个UI元素产生“吸引力”或“排斥力”。

同时参考图21和图22B，在图21的框2120处，在第二UI元素333到达图22B中描绘的第一移动的起始位置(在该示例中为第4行第3列)之后，并且在开始远离第一UI元素343的第一移动之前，电子设备100可以确定第二UI元素333将在第三方向333-d3上移动的第二目标距离。在该示例中，第三方向333-d3是从第二UI元素333指向第三UI元素353的方向，也即第二UI元素333受到第三UI元素353的“吸引力”。在其他实施例中，第三方向333-d3也可以是从第三UI元素353指向第二UI元素333的方向，也即第二UI元素333受到第三UI元素353的“排斥力”。应理解，电子设备100可以按照前文描述的用于确定第一目标距离的相同或类似方式来确定第二目标距离，此处将不再赘述。

同时参考图21和图22C，在图21的框2130处，在第二UI元素333远离第一UI元素343的第一移动(例如，在图20C中描绘)之前，电子设备100可以使第二UI元素333从起始位置(例如，第4行第3列)沿第三方向333-d3以第二目标距离进行第三移动。例如，在图22C的示例中，由于第三方向333-d3是从第二UI元素333指向第三UI元素353的，所以第二UI元素333可以朝向第三UI元素353进行第三移动。如图22C所示，小黑点表示第二UI元素333在“引力”动画效果开始之前所在的起始位置，而十字符号表示第二UI元素333的当前位置。

同时参考图21和图22D，在图21的框2040处，在第二UI元素333的第三移动(例如，朝向第三UI元素353的移动)之后，并且在第二UI元素333的第一移动(例如，图20C中描绘的远离第一UI元素343的移动)之前，电子设备100可以使第二UI元素333沿与第三方向333-d3相反的第四方向(例如，远离第三UI元素353的方向)进行第四移动，以复位到起始位置(例如，第4行第3列)。如图22D所示，在第二UI元素333完成朝向第三UI元素353的第三移动和远离第三UI元素353的第四移动之后，第一UI元素343可能仍然没有到达新位置(例如，第3行第3列)。例如，这可能是因为用户的手部370保持对第一UI元素343的拖动操作而未放开。在这样的情况下，在一些实施例中，电子设备100可以使第二UI元素333重复地进行多次第三移动和第四移动，直到第一UI元素343到达新位置(例如，第3行第3列)。通过示例过程2100，尽管第二UI元素333没有被直接操作，但是第二UI元素333由于需要与第一UI元素343交换位置而来到新位置，从而受到其他UI元素(例如，第三UI元素353)的“引力”作用。因此，电子设备100可以更加充分和全面地展现出UI元素之间具有“引力”的动画效果，从而进一步提升用户体验。

图23A至图23D示出了根据本公开的实施例在UI元素被移动并且与另一UI元素合并的场景中所产生的“引力”动画效果的示意图。如图23A所示，电子设备100的用户的手部370按住UI元素343，然后将UI元素343拖动到与UI元素343的上方的UI元素333重叠。如图23B所示，响应于用户的手部370对UI元素343的操作，UI元素343与UI元素333开始进行UI元素合并(例如，产生一个新的文件夹)的动画效果。此时，由于***作的UI元素343与UI元素333开始合并，所以可以想象为此前的“引力”平衡状态被“打破”，从而将对周围的UI元素产生“引力”作用。具体地，在图23A至图23D描绘的示例中，UI元素343开始与UI元素333合并时对周围的UI元素产生的“引力”作用可以被设置为“排斥力”。也就是说，UI元素343周围的UI元素将首先在远离UI元素343的第一方向上进行第一位移，然后将在朝向UI元素343的第二方向上进行第二位移，从而返回到各自的起始位置。更具体地，UI元素311将沿着远离UI元素343的第一方向311-d1进行第一移动，UI元素312将沿着远离UI元素343的第一方向312-d1进行第一移动，UI元素313将沿着远离UI元素343的第一方向313-d1进行第一移动，UI元素314将沿着远离UI元素343的第一方向314-d1进行第一移动。类似地，UI元素321将沿着远离UI元素343的第一方向321-d1进行第一移动，UI元素322将沿着远离UI元素343的第一方向322-d1进行第一移动，UI元素323将沿着远离UI元素343的第一方向323-d1进行第一移动，UI元素324将沿着远离UI元素343的第一方向324-d1进行第一移动。

类似地，UI元素331将沿着远离UI元素343的第一方向331-d1进行第一移动，UI元素332将沿着远离UI元素343的第一方向332-d1进行第一移动，UI元素334将沿着远离UI元素343的第一方向334-d1进行第一移动。类似地，UI元素341将沿着远离UI元素343的第一方向341-d1进行第一移动，UI元素342将沿着远离UI元素343的第一方向342-d1进行第一移动，UI元素344将沿着远离UI元素343的第一方向344-d1进行第一移动。类似地，UI元素351将沿着远离UI元素343的第一方向351-d1进行第一移动，UI元素352将沿着远离UI元素343的第一方向352-d1进行第一移动，UI元素353将沿着远离UI元素343的第一方向353-d1进行第一移动，UI元素354将沿着远离UI元素343的第一方向354-d1进行第一移动。类似地，UI元素361将沿着远离UI元素343的第一方向361-d1进行第一移动，UI元素362将沿着远离UI元素343的第一方向362-d1进行第一移动，UI元素363将沿着远离UI元素343的第一方向363-d1进行第一移动，UI元素364将沿着远离UI元素343的第一方向364-d1进行第一移动。

在图23B的示例中，由于各个UI元素的大小是相同的，因此每个UI元素受到UI元素343的“引力”影响的大小(也即，第一移动的目标距离或幅度)可以随着UI元素与UI元素343的距离增大而减小。具体地，在图23B的示例中，假设UI元素之间的横向间距和纵向间距是相等的。因此，UI元素323、332、334与UI元素343的距离最近，因此第一移动的目标距离最大。UI元素322、324、342、344与UI元素343的接近程度次之(也即，距离更大)，因此第一移动的目标距离也次之。UI元素313、331、353与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素312、314、321、341、352和354与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素311和351与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素363与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素362和364与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素361距离UI元素343的距离最远，因此第一移动的目标距离也最小。需要说明的是，具体到每个UI元素在第一移动中的目标距离的大小，可以基于该UI元素与产生“引力”影响的UI元素之间的距离来确定，而两个UI元素之间的距离可以按照前文参考图8至图17F中描述的任何一种距离计算方式来确定。

例如，如图23C所示，小黑点表示除了UI元素343和333之外的各个UI元素在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图23C示出的时刻，除了UI元素343和UI元素333之外的各个UI元素已经在远离UI元素343的第一方向上移动了各自的目标距离，之后将在朝向UI元素343的第二方向返回各自的起始位置。在图23C的示例中，由于各个UI元素的尺寸是相同的，所以某个UI元素受到UI元素343的“排斥力”的大小(也即目标距离的大小)可以取决于与该UI元素与UI元素343之间的距离。因此，如图23C中示意性地示出的，UI元素343周围的UI元素将根据与UI元素343的距离远近而具有不同的移动距离。例如，UI元素323比UI元素313更接近于UI元素343，所以UI元素323可以比UI元素313移动更大的目标距离。如图23D所示，小黑点表示除了UI元素343和UI元素333之外的各个UI元素在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图23D示出的时刻，除了UI元素343和UI元素333之外的各个UI元素已经完成了朝向UI元素343的第二移动而返回到各自的起始位置。此外，如图23D进一步示出的，UI元素343和UI元素333已经完成了合并动画，形成了新的UI元素335。例如，新UI元素335可以是包括UI元素343和UI元素333两者的文件夹。

图24A至图24D示出了根据本公开的实施例在UI元素被删除的场景中所产生的“引力”动画效果的示意图。如图24A所示，电子设备100的用户可以执行操作以删除UI元素343，因此UI元素343开始进行以圆形形状逐渐变小直到消失的删除动画效果。需要说明的是，图24A至图24D中描绘的UI元素343被删除时的删除动画效果仅是示意性的，无意以任何方式限制本公开的范围。本公开的实施例也等同地适用于UI元素被删除时的任何删除动画效果。如图24B所示，响应于用户对UI元素343的删除操作，UI元素343开始变为较小的圆形UI元素343并且不断地缩小。此时，由于***作的UI元素343正在逐渐变小并且消失，所以可以想象为UI元素343此前的“引力”平衡状态被“打破”，从而将对周围的UI元素产生“引力”作用。具体地，在图24A至图24D描绘的示例中，UI元素343开始变小和消失时对周围的UI元素产生的“引力”作用可以被设置为“吸引力”。也就是说，UI元素343周围的UI元素将首先在朝向UI元素343的第一方向上进行第一移动，然后将在远离UI元素343的第二方向上进行第二移动，从而返回到各自的起始位置。更具体地，在各个UI元素的第一移动中，UI元素311将沿着朝向UI元素343的第一方向311-d1进行第一移动，UI元素312将沿着朝向UI元素343的第一方向312-d1进行第一移动，UI元素313将沿着朝向UI元素343的第一方向313-d1进行第一移动，UI元素314将沿着朝向UI元素343的第一方向314-d1进行第一移动。类似地，UI元素321将沿着朝向UI元素343的第一方向321-d1进行第一移动，UI元素322将沿着朝向UI元素343的第一方向322-d1进行第一移动，UI元素323将沿着朝向UI元素343的第一方向323-d1进行第一移动，UI元素324将沿着朝向UI元素343的第一方向324-d1进行第一移动。

类似地，UI元素331将沿着朝向UI元素343的第一方向331-d1进行第一移动，UI元素332将沿着朝向UI元素343的第一方向332-d1进行第一移动，UI元素333将沿着朝向UI元素343的第一方向333-d1进行第一移动，UI元素334将沿着朝向UI元素343的第一方向334-d1进行第一移动。类似地，UI元素341将沿着朝向UI元素343的第一方向341-d1进行第一移动，UI元素342将沿着朝向UI元素343的第一方向342-d1进行第一移动，UI元素344将沿着朝向UI元素343的第一方向344-d1进行第一移动。类似地，UI元素351将沿着朝向UI元素343的第一方向351-d1进行第一移动，UI元素352将沿着朝向UI元素343的第一方向352-d1进行第一移动，UI元素353将沿着朝向UI元素343的第一方向353-d1进行第一移动，UI元素354将沿着朝向UI元素343的第一方向354-d1进行第一移动。类似地，UI元素361将沿着朝向UI元素343的第一方向361-d1进行第一移动，UI元素362将沿着朝向UI元素343的第一方向362-d1进行第一移动，UI元素363将沿着朝向UI元素343的第一方向363-d1进行第一移动，UI元素364将沿着朝向UI元素343的第一方向364-d1进行第一移动。

在图24B的示例中，由于各个UI元素的大小是相同的，因此每个UI元素受到UI元素343的“引力”影响的大小(也即，第一移动的目标距离或幅度)可以随着UI元素与UI元素343的距离增大而减小。具体地，在图24B的示例中，假设UI元素之间的横向间距和纵向间距是相等的。因此，UI元素333、342、344和353与UI元素343的距离最近，因此第一移动的目标距离最大。UI元素332、334、352和354与UI元素343的接近程度次之(也即，距离更大)，因此第一移动的目标距离也次之。UI元素323、341、363与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素322、324、331、351、362和364与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素321和361与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素313与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素312和314与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素311距离UI元素343的距离最远，因此第一移动的目标距离也最小。需要说明的是，具体到每个UI元素在第一移动中的目标距离的大小，可以基于该UI元素与产生“引力”影响的UI元素之间的距离来确定，而两个UI元素之间的距离可以按照前文参考图8至图17F中描述的任何一种距离计算方式来确定。

例如，如图24C所示，小黑点表示除了UI元素343之外的各个UI元素在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图24C示出的时刻，除了UI元素343之外的各个UI元素已经完成了各自的第一移动，而在朝向UI元素343的第一方向上移动了各自的目标距离，之后将在远离UI元素343的第二方向上返回各自的起始位置。在图24C的示例中，由于各个UI元素的尺寸是相同的，所以某个UI元素受到UI元素343的“吸引力”的大小(也即目标距离的大小)可以取决于与该UI元素与UI元素343之间的距离。因此，如图24C中示意性地示出的，UI元素343周围的UI元素将根据与UI元素343的距离远近而具有不同的移动距离。例如，UI元素323比UI元素313更接近于UI元素343，所以UI元素323可以比UI元素313移动更大的目标距离。此外，如图24C进一步示出的，已经变为圆形的UI元素343相比于图24B描绘的时刻进一步缩小。如图24D所示，小黑点表示除了UI元素343之外的各个UI元素在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图24D示出的时刻，除了UI元素343之外的各个UI元素已经完成了各自的第二移动，也即，远离UI元素343移动而返回到各自的起始位置。此外，如图24D进一步示出的，UI元素343已经完全消失，以表示其已经被删除。

图25A至图25D示出了根据本公开的实施例在UI元素被展开的场景中所产生的“引力”动画效果的示意图。如图25A所示，电子设备100的用户的手部370可以执行操作以展开UI元素343。例如，展开UI元素343的操作可能包括长按UI元素343，以打开与UI元素343有关的可供用户选择或查看的菜单，并且然后在打开的菜单中选择或查看展开的菜单。因此，UI元素343开始进行展开菜单的动画效果。需要说明的是，图25A至图25D中描绘的UI元素343被展开时的展开动画效果仅是示意性的，无意以任何方式限制本公开的范围。本公开的实施例也等同地适用于UI元素被展开时的任何展开动画效果。如图25B所示，响应于用户对UI元素343的展开操作，UI元素343的位置处开始出现展开的UI元素345，并且UI元素345将会逐渐变大，最终覆盖UI元素343且可能覆盖的附近其他UI元素。此时，由于***作的UI元素343处正在出现新的UI元素345，所以可以想象为此前的“引力”平衡状态被“打破”，从而将对周围的UI元素产生“引力”作用。具体地，在图25A至图25D描绘的示例中，UI元素343处开始出现UI元素345时对周围的UI元素产生的“引力”作用可以被设置为“排斥力”。也就是说，UI元素343周围的UI元素将首先在远离UI元素343的第一方向上进行第一移动，然后将在朝向UI元素343的第二方向上进行第二移动，从而返回到各自的起始位置。更具体地，在各个UI元素的第一移动中，UI元素311将沿着远离UI元素343的第一方向311-d1进行第一移动，UI元素312将沿着远离UI元素343的第一方向312-d1进行第一移动，UI元素313将沿着远离UI元素343的第一方向313-d1进行第一移动，UI元素314将沿着远离UI元素343的第一方向314-d1进行第一移动。类似地，UI元素321将沿着远离UI元素343的第一方向321-d1进行第一移动，UI元素322将沿着远离UI元素343的第一方向322-d1进行第一移动，UI元素323将沿着远离UI元素343的第一方向323-d1进行第一移动，UI元素324将沿着远离UI元素343的第一方向324-d1进行第一移动。

类似地，UI元素331将沿着远离UI元素343的第一方向331-d1进行第一移动，UI元素332将沿着远离UI元素343的第一方向332-d1进行第一移动，UI元素333将沿着远离UI元素343的第一方向333-d1进行第一移动，UI元素334将沿着远离UI元素343的第一方向334-d1进行第一移动。类似地，UI元素341将沿着远离UI元素343的第一方向341-d1进行第一移动，UI元素342将沿着远离UI元素343的第一方向342-d1进行第一移动，UI元素344将沿着远离UI元素343的第一方向344-d1进行第一移动。类似地，UI元素351将沿着远离UI元素343的第一方向351-d1进行第一移动，UI元素352将沿着远离UI元素343的第一方向352-d1进行第一移动，UI元素353将沿着远离UI元素343的第一方向353-d1进行第一移动，UI元素354将沿着远离UI元素343的第一方向354-d1进行第一移动。类似地，UI元素361将沿着远离UI元素343的第一方向361-d1进行第一移动，UI元素362将沿着远离UI元素343的第一方向362-d1进行第一移动，UI元素363将沿着远离UI元素343的第一方向363-d1进行第一移动，UI元素364将沿着远离UI元素343的第一方向364-d1进行第一移动。

在图25B的示例中，由于各个UI元素的大小是相同的，因此每个UI元素受到UI元素343的“引力”影响的大小(也即，第一移动的目标距离或幅度)可以随着UI元素与UI元素343的距离增大而减小。具体地，在图25B的示例中，假设UI元素之间的横向间距和纵向间距是相等的。因此，UI元素333、342、344和353与UI元素343的距离最近，因此第一移动的目标距离最大。UI元素332、334、352和354与UI元素343的接近程度次之(也即，距离更大)，因此第一移动的目标距离也次之。UI元素323、341、363与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素322、324、331、351、362和364与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素321和361与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素313与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素312和314与UI元素343的接近程度再次之(也即，距离更大)，因此第一移动的目标距离也再次之。UI元素311距离UI元素343的距离最远，因此第一移动的目标距离也最小。需要说明的是，具体到每个UI元素在第一移动中的目标距离的大小，可以基于该UI元素与产生“引力”影响的UI元素之间的距离来确定，而两个UI元素之间的距离可以按照前文参考图8至图17F中描述的任何一种距离计算方式来确定。

例如，如图25C所示，小黑点表示除了UI元素343之外的各个UI元素在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图25C示出的时刻，除了UI元素343之外的各个UI元素已经完成了各自的第一移动，而在远离UI元素343的第一方向上移动了各自的目标距离，之后将在朝向UI元素343的第二方向上返回各自的起始位置。在图25C的示例中，由于各个UI元素的尺寸是相同的，所以某个UI元素受到UI元素343的“排斥力”的大小(也即目标距离的大小)可以取决于与该UI元素与UI元素343之间的距离。因此，如图25C中示意性地示出的，UI元素343周围的UI元素将根据与UI元素343的距离远近而具有不同的移动距离。例如，UI元素323比UI元素313更接近于UI元素343，所以UI元素323可以比UI元素313移动更大的目标距离。此外，如图25C进一步示出的，已经展开的UI元素345可能覆盖UI元素343以及周边的UI元素344、UI元素353和UI元素354，而使得这些UI元素不可见。如图25D所示，小黑点表示除了UI元素343之外的各个UI元素在“引力”动画效果开始之前所在的起始位置，而十字符号表示各个UI元素的当前位置。也就是说，在图25D示出的时刻，除了UI元素343之外的各个UI元素已经完成了各自的第二移动，也即，朝向UI元素343移动而返回到各自的起始位置。此外，如图25D进一步示出的，已经完全展开的UI元素345可能覆盖UI元素343以及周边的UI元素344、UI元素353和UI元素354，而使得这些UI元素不可见。

图26示出了根据本公开的实施例的“引力”动画效果相关联的UI框架动效与***桌面之间的关系的示意图。如图26所示，UI框架动效2602可以提供引力动效能力2604。引力动效能力2604可以采用AAR形式2606、JAR形式2608和***接口2610。桌面2614可以对UI元素实现各种操作，例如移动操作2616、合并操作2618、展开操作2620、删除操作2622和其他操作2624。桌面2614可以通过集成2612的方式来使用UI框架动效2602提供的引力动效能力2604。尽管图26中未示出，但是桌面2614也可以通过调用(例如，***接口2610)的方式来使用UI框架动效2602提供的引力动效能力2604。也就是说，UI框架可以采用AAR、JAR、***接口的形式来提供“引力”动画效果的能力，桌面2614集成之后可以应用在领域内需要的各种场景。需要说明的是，尽管本公开的实施例主要以桌面的场景为例，但是UI框架主要提供“引力”动画效果的能力，所以“引力”动画效果可以实现在除了桌面以外的任何其他适当的场景中。

具体地，本公开的使用场景可以包括将排列好的UI元素(例如，图标)相联系的任何场景，只要是多个UI元素针对某个UI元素***作进行响应的场景都可以支持引力动效。比较常见的场景可以包括桌面中各种图标的操作，比如移动、合并、删除、展开等，可能的操作不限于上述的列举项，如果将来桌面提供针对UI元素的其他的功能或操作，也同样可以使用本公开的实施例提供的“引力”动画效果的能力。在这方面，需要说明的是，电子设备的***桌面一般属于应用层，其可以集成或者调用UI框架的能力。UI框架的对外的能力体现一般分为3种，其中平台能力一般包含AAR方式和JAR包的方式，这两种方式都是将代码封装好，提供给应用集成，它可以不属于某一个层次，一般可以是在应用中集成使用，跟随应用层一起。而***能力一般包含***接口，它属于应用程序框架层，可以是提供给上面应用的各种服务或者能力。

图27示出了本公开的实施例的“引力”动画效果能力或功能可以被应用到的其他应用场景的示意图。如图27所示，本公开的实施例提供的是一种能力，不限定具体的使用场景，各种类型的场景都可以使用。例如，这样的场景可以包括但不限于图库中的图片的列表2710，应用市场中的滑动列表2720，负一屏的卡片移动展开操作2730，以及多任务的卡片联动场景2740，等等。

图28示出了根据本公开的实施例的用于实现“引力”动画效果能力或功能的***框架2800的示意图。在一些实施例中，UI框架的动效能力的是基于电子设备的操作***(例如，安卓或者鸿蒙)的整体架构来实现的，可以包含主流的4层的逻辑处理，数据处理的流程从底层往上呈现给用户。用户可以主要在应用层使用和体验动效的功能。在本公开的实施例中，桌面和UI框架的能力交互关系如图28所描绘。具体地，如图28所示，***框架2800可以包括应用程序层2810、应用程序框架层2830、硬件抽象层2850、以及内核层2870。应用程序层2810可以包括桌面2812。桌面2812上可以实现图标操作2814。图标操作2814例如可以包括移动操作、合并操作、展开操作、删除操作和其他操作。应用程序框架层2830可以包括***服务2832和扩展服务2834。***服务2832可以包括各种***服务，例如Service 2833。扩展服务2834可以包括各种扩展服务，例如HwSDK 2835。硬件抽象层(HAL)2850可以包括HAL 3.0 2852和算法Algo 2854。内核层2870可以包括驱动2872和物理设备2874。物理设备2874可以向驱动2872提供原始参数流，而驱动2872可以向物理设备2874提供功能处理参数流。如图28进一步示出的，用于实现引力动效2825的UI框架2820可以实现在应用程序层2810与应用程序框架层2830之间。UI框架2820可以包括平台能力2822和***能力2824，两者可以用于提供引力动效2825。引力动效2825进而可以提供给应用程序层2810的图标操作2814。

图29示出了根据本公开的实施例的“引力”动画效果能力或功能所涉及到的应用侧和UI框架侧之间的关系的示意图。如图29所示，应用侧2910可以包括桌面2915，桌面2915上的UI元素可以实现移动2912、合并2914、展开2916、删除2918、其他2920等等操作。UI框架侧2950可以包括UI框架动效2952，UI框架动效2952可以实现引力动效能力2954，引力动效能力2954可以通过AAR格式2951、JAR格式2953和***接口2955等方式来实现。应用侧2910可以通过集成2930和调用2940等方式来调用UI框架侧2950提供的“引力”动画效果能力或功能。通过应用侧2910和UI框架侧2950之间的交互，本公开的实施例实现了新型的引力“动画效果”，使得原本独立的UI元素(例如，图标)联系起来。

图30示出了根据本公开的实施例的“引力”动画效果能力或功能实现的三种方式的具体说明的示意图。如图30所示，AAR格式2951与电子设备100的***之间的关系3001为：AAR格式2951是以二进制方式的能力打包的，提供给***中应用侧集成的能力，可以自由控制版本节奏，不跟随***。JAR格式2953与电子设备100的***之间的关系3003为：JAR格式2953是以二进制方式的能力打包的，提供给***中所有部件的能力，可以自由控制版本节奏，不跟随***。***接口2955与电子设备100的***之间的关系3005为：***接口2955是***版本中的框架层的接口，提供给***中所有部件的能力，跟随***升级。更具体地，集成方式可以是指AAR和JAR包的方式，调用方式可以是指***接口的方式。因此，本公开的实施例应用的场景是不限于任何特定场景的，只是“引力”动画效果的能力的展现方式可能不一致。也就是说，本公开在前文描述的各种方法的功能可以通过AAR格式文件、JAR格式文件和/或电子设备100的***接口来实现。以此方式，“引力”动画效果的能力或功能可以简单和方便地被实现并提供给电子设备的应用程序，例如桌面。

在本公开的实施例中，接口设计与方案实现包括实现引力模型能力的设计与实现。以下是引力模型能力的设计与实现的一种示例。

相关参数的意义如下表所示：

图31示出了根据本公开的实施例的用于实现“引力”动画效果的动效能力侧的类图关系的示意图。如图31所示，动效能力侧可以包括GravityAnimator类3110，GravityAnimator类3110可以包括GravityField类3120，并且GravityField类3120可以包括GravityAsteroid类3122、GravityAsteroid类3124、……、GravityAsteroid类3126。更一般地，应用侧的布局设计可以任意自由地组合。在图31示出的动效能力侧的类图关系中，GravityAnimator类3110可以是整个引力的动画类，GravityField类3110可以相当于是整个引力场景的区域，而GravityAsteroid类3122至3126可以相当于是每个引力场中的所有UI元素。

图32示出了根据本公开的实施例的应用侧和动效能力侧用于实现“引力”动画效果的操作时序图。如图32所示，应用侧3210可以包括GravityDemo类3212和View类3214，而动效能力侧3250可以包括GravityAnimator类3110、GravityField类3120和GravityAsteroid类3122。具体地，应用侧可以组织图形的示意，功能能力侧可以提供具体能力。各个操作的时序图如图32所描绘。操作流程可以包括：首先，在第一步骤中，在初始化时传入父布局，向所有被影响的UI元素(也称为子元素)设置监听回调。然后，在第二步骤中，向android.view.Choreographer中注册回调，每一帧更新每个受影响元素位置。接着，在第三步骤中，每一帧根据时间计算插值器的值，计算当前时刻当前元素的位置，通过第一步骤中的回调传给子元素。此后，在第四步骤中，子元素在回调中更新位置。

对接接口的示例设计可以如下表所示：

具体的使用说明如下：

1、通过构造函数创建引力动画GravityAnimator

mGravityAnimator＝new GravityAnimator(pos,mViewContainer,GRAVITATION)；

2、设置引力动画、恢复动画的插值器、时长等参数

mGravityAnimator.setImpactRadius(800)；

mGravityAnimator.setDuration(150)；

mGravityAnimator.setResetDuration(300)；

mGravityAnimator.setInterpolator(PathInterpolatorCompat.create(0.4,0,1,))；

mGravityAnimator.setResetInterpolator(new SpringInterpolator(mStiffness,mDamping))；

3、设置动画***等参数

4、调用start启动动画

mGravityAnimator.start()；

图33示出了根据本公开的实施例的用于调整“引力”动画效果的参数的界面的示意图。如图33所示，在用户触发了电子设备100的“引力”动画效果的参数设置功能之后，电子设备100可以在屏幕300上显示用于调整电子设备100的“引力”动画效果的设置区域3310。在设置区域3310中，用户可以设置“引力”动画效果是否为“正向”，也即表现为***作的UI元素对其他UI元素的“吸引力”。如果“引力”动画效果被设置为“正向”被打开，那么进行“引力”动画效果的UI元素将首先被另一UI元素吸引，然后再返回到起始位置。相比之下，如果“引力”动画效果被设置为“正向”被关闭，那么进行“引力”动画效果的UI元素将首先被另一UI元素排斥，然后再返回到起始位置。另外，用户还可以在设置区域3310中设置“引力”动画效果是否包括“删除”操作，设置引力速度(也即引力传播速度)、引力范围、引力时长(也即第一移动的时长)、恢复时长(也即第二移动的时长)、用于确定目标距离的振幅系数、相关的控制点的位置、恢复刚性(也即第二移动的位移时间曲线为使用弹性力曲线时的参数)、恢复阻尼(也即第二移动的位移时间曲线为使用弹性力曲线时的参数)，等等。应当理解，图33中描绘的设置区域3310中的具体内容仅是示意性的，无意以任何方式限制本公开的内容。在其他实施例中，电子设备100向用户提供的“引力”动画效果的设置区域中可以设置与“引力”动画效果有关的任何其他参数。也就是说，由于“引力”动画效果的各种参数都是可以调整的，所以本公开的实施例提供了自调节验证的功能，将所有的参数都由用户或者应用自己来进行设定，查看效果，并进行调节。

本公开的实施例的对象编辑方法可以应用于多种电子设备。示例性的，该电子设备例如可以为：移动手机、平板电脑(Tablet Personal Computer)、数码相机、个人数字助理(personal digital assistant，简称PDA)、导航装置、移动上网装置(Mobile InternetDevice，MID)、可穿戴式设备(Wearable Device)、以及其他能够进行对象编辑的设备等。此外，本公开的实施例的对象编辑方案不仅可以作为输入法的一个功能，也可以作为电子设备的操作***的一个功能而实施。

在上述实施例中，可以全部或部分的通过软件，硬件，固件或者其任意组合来实现。当使用软件程序实现时，可以全部或部分地以计算机程序产品的形式出现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本公开的实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。该可用介质可以是磁性介质，(例如，软盘，硬盘、磁带)、光介质(例如，DVD)或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。

一般而言，本公开的各种示例实施例可以在硬件或专用电路、软件、逻辑，或其任何组合中实施。某些方面可以在硬件中实施，而其他方面可以在可以由控制器、微处理器或其他计算设备执行的固件或软件中实施。例如，在一些实施例中，本公开的各种示例(例如方法、装置或设备)可以部分或者全部被实现在计算机可读介质上。当本公开的实施例的各方面被图示或描述为框图、流程图或使用某些其他图形表示时，应理解此处描述的方框、装置、***、技术或方法可以作为非限制性的示例在硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备，或其某些组合中实施。

本公开还提供了存储在非瞬态计算机可读存储介质上的至少一种计算机程序产品。计算机程序产品包括计算机可执行指令，计算机可执行指令诸如包括在目标的物理或者虚拟处理器上的器件中执行的程序模块中，用以执行上文关于图4、图14和图15描述的示例方法或示例过程400、1400和1500。一般而言，程序模块可以包括例程、程序、库、对象、类、组件、数据结构等，其执行特定的任务或者实现特定的抽象数据结构。在各实施例中，程序模块的功能可以在所描述的程序模块之间合并或者分割。用于程序模块的计算机可执行指令可以在本地或者分布式设备内执行。在分布式设备中，程序模块可以位于本地和远程存储介质二者中。

用于实现本公开的方法的程序代码可以用一种或多种编程语言编写。这些计算机程序代码可以提供给通用计算机、专用计算机或其他可编程的数据处理装置的处理器，使得程序代码在被计算机或其他可编程的数据处理装置执行的时候，引起在流程图和/或框图中规定的功能/操作被实施。程序代码可以完全在计算机上、部分在计算机上、作为独立的软件包、部分在计算机上且部分在远程计算机上或完全在远程计算机或服务器上执行。在本公开的上下文中，计算机程序代码或相关数据可以由任何适当的载体来承载，以使设备、装置或处理器能够执行上文描述的各种过程和操作。载体的示例包括信号、计算机可读介质，等等。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如DVD)、或者半导体介质(例如固态硬盘)等。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，该流程可以由计算机程序来指令相关的硬件完成，该程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法实施例的流程。而前述的存储介质包括：ROM或随机存储记忆体RAM、磁碟或者光盘等各种可存储程序代码的介质。计算机可读介质可以是计算机可读信号介质或计算机可读存储介质。计算机可读介质可以包括但不限于电子的、磁的、光学的、电磁的、红外的或半导体***、装置或设备，或其任何合适的组合。机器可读存储介质的更详细示例包括带有一根或多根导线的电气连接、便携式计算机磁盘、硬盘、随机存储存取器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或闪存)、光纤、便携式压缩盘只读存储器(CD-ROM)、光存储设备、磁存储设备，或其任何合适的组合。

另外，尽管操作以特定顺序被描绘，但这并不应该理解为要求此类操作以示出的特定顺序或以相继顺序完成，或者执行所有图示的操作以获取期望结果。在某些情况下，多任务或并行处理会是有益的。同样地，尽管上述论述包含了某些特定的实施细节，但这并不应解释为限制任何发明或权利要求的范围，而应解释为对可以针对特定发明的特定实施例的描述。本说明书中在分离的实施例的上下文中描述的某些特征也可以整合实施在单个实施例中。反之，在单个实施例的上下文中描述的各种特征也可以分离地在多个实施例或在任何合适的子组合中实施。

尽管已经以特定于结构特征和/或方法动作的语言描述了主题，但是应当理解，所附权利要求中限定的主题并不限于上文描述的特定特征或动作。相反，上文描述的特定特征和动作是作为实现权利要求的示例形式而被公开的。以上描述的各种示例和过程可以独立于彼此使用，或者可以按各种方式来组合。不同的组合和子组合旨在落入本公开的范围内，并且某些步骤或过程可以在一些实现中被省略。以上所述，仅为本公开的实施例的具体实施方式，但本公开的实施例的保护范围并不局限于此，任何在本公开的实施例揭露的技术范围内的变化或替换，都应涵盖在本公开的实施例的保护范围之内。因此，本公开的实施例的保护范围应以所述权利要求的保护范围为准。

Claims (21)

1.一种图形界面显示方法，包括：

在电子设备的屏幕上显示M个用户界面UI元素，M为大于1的正整数；

检测到作用于所述M个UI元素中的第一UI元素的操作；

响应于所述操作，使所述屏幕上的N个UI元素中的每个UI元素产生动画效果，N为1与M-1之间的正整数，其中产生所述动画效果包括：

确定所述N个UI元素中的第二UI元素将在第一方向上移动的目标距离，所述第一方向是从所述第二UI元素指向所述第一UI元素的方向或是从所述第一UI元素指向所述第二UI元素的方向；

使所述第二UI元素从起始位置沿所述第一方向以所述目标距离进行第一移动；以及

在所述第一移动之后，使所述第二UI元素沿与所述第一方向相反的第二方向进行第二移动，以复位到所述起始位置。

2.根据权利要求1所述的方法，其中确定所述目标距离包括：

确定所述第二UI元素的尺寸；

确定所述第二UI元素与所述第一UI元素之间的距离；以及

基于所述尺寸和所述距离来确定所述目标距离。

3.根据权利要求2所述的方法，其中基于所述尺寸和所述距离来确定所述目标距离包括：

使所述目标距离随着所述尺寸增大而增大并且随着所述距离增大而减小。

4.根据权利要求2所述的方法，其中确定所述距离包括：

确定所述第一UI元素的第一中心点；

确定所述第二UI元素的第二中心点；以及

确定所述第一中心点与所述第二中心点之间的直线距离，作为所述距离。

5.根据权利要求2所述的方法，其中确定所述距离包括：

确定所述第一UI元素的第一中心点；

确定以所述第一中心点为圆心的具有各自半径的多个圆；

确定所述第二UI元素与所述多个圆中的至少一个圆相交；以及

将所述至少一个圆中半径最小的圆的半径确定为所述距离。

6.根据权利要求2所述的方法，其中确定所述距离包括：

确定所述第一UI元素与所述第二UI元素之间的横向间距；

确定所述第一UI元素与所述第二UI元素之间的纵向间距；以及

基于所述横向间距和所述纵向间距中的至少一者和所述第一方向来确定所述距离。

7.根据权利要求1至6中任一项所述的方法，还包括：

基于所述第一UI元素的尺寸来确定所述第一UI元素的影响区域；以及

将所述M个UI元素中在所述影响区域内的UI元素确定为所述N个UI元素。

8.根据权利要求1至6中任一项所述的方法，还包括：

将所述M个UI元素中除所述第一UI元素以外的M-1个UI元素确定为所述N个UI元素。

9.根据权利要求1至8中任一项所述的方法，其中所述第一移动持续的第一时长、所述第二移动持续的第二时长、以及所述第一移动和所述第二移动持续的总时长中的至少一个是可配置的。

10.根据权利要求1至9中任一项所述的方法，其中所述第二UI元素在所述第一移动和所述第二移动中的至少一者期间的移动的动画效果基于位移随时间变化的预定义曲线来确定。

11.根据权利要求10所述的方法，其中所述预定义曲线为贝塞尔曲线或弹性力曲线。

12.根据权利要求1至11中任一项所述的方法，其中所述第一移动和所述第二移动中的至少一个包括变加速直线运动。

13.根据权利要求1至12中任一项所述的方法，其中使所述第二UI元素进行所述第一移动包括：

确定所述操作被执行的第一时间点；

基于预定速度和所述第二UI元素与所述第一UI元素之间的距离，确定开始所述第一移动的第二时间点与所述第一时间点之间的延迟；

基于所述第一时间点和所述延迟来确定所述第二时间点；以及

在所述第二时间点使所述第二UI元素开始所述第一移动。

14.根据权利要求1至13中任一项所述的方法，其中所述操作包括使所述第一UI元素与所述第二UI元素交换位置，所述目标距离是第一目标距离，产生所述动画效果还包括：

将所述第二UI元素从初始位置移动到所述起始位置，所述起始位置是所述第一UI元素的初始位置；

在所述第二UI元素到达所述起始位置之后并且在所述第一移动之前，确定所述第二UI元素将在第三方向上移动的第二目标距离，所述第三方向是从所述第二UI元素指向第三UI元素的方向或是从所述第三UI元素指向所述第二UI元素的方向；

在所述第一移动之前，使所述第二UI元素从所述起始位置沿所述第三方向以所述第二目标距离进行第三移动；以及

在所述第三移动之后并且在所述第一移动之前，使所述第二UI元素沿与所述第三方向相反的第四方向进行第四移动，以复位到所述起始位置。

15.根据权利要求1至14中任一项所述的方法，其中产生所述动画效果还包括：

在所述第一移动和所述第二移动中的至少一者期间缩小或放大所述第二UI元素的尺寸。

16.根据权利要求1至15中任一项所述的方法，其中所述第一方向从所述第二UI元素的第二中心点指向所述第一UI元素的第一中心点、或者从所述第一中心点指向所述第二中心点。

17.根据权利要求1至16中任一项所述的方法，其中所述操作包括以下至少一项：点击、移动、与其他UI元素合并、展开、以及删除。

18.根据权利要求1至17中任一项所述的方法，其中所述方法的功能通过AAR格式文件、JAR格式文件和所述电子设备的***接口中的至少一者来实现。

19.一种电子设备，包括：处理器、以及存储有指令的存储器，所述指令在被所述处理器执行时使得所述电子设备执行根据权利要求1至18中任一项所述的方法。

20.一种计算机可读存储介质，所述计算机可读存储介质存储有指令，所述指令在被电子设备执行时使得所述电子设备执行根据权利要求1至18中任一项所述的方法。

21.一种计算机程序产品，所述计算机程序产品包括指令，所述指令在被电子设备执行时使得所述电子设备执行根据权利要求1至18中任一项所述的方法。

Images