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

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

Info

Publication number
CN115964106A
CN115964106A CN202210992582.0A CN202210992582A CN115964106A CN 115964106 A CN115964106 A CN 115964106A CN 202210992582 A CN202210992582 A CN 202210992582A CN 115964106 A CN115964106 A CN 115964106A
Authority
CN
China
Prior art keywords
elements
distance
electronic device
drag
determining
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202210992582.0A
Other languages
English (en)
Other versions
CN115964106B (zh
Inventor
卞超
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to CN202210992582.0A priority Critical patent/CN115964106B/zh
Publication of CN115964106A publication Critical patent/CN115964106A/zh
Application granted granted Critical
Publication of CN115964106B publication Critical patent/CN115964106B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本公开涉及一种图形界面显示方法、电子设备、计算机可读存储介质以及计算机程序产品。根据在此描述的图形界面显示方法，在电子设备的屏幕上显示M个用户界面UI元素，M为大于1的正整数。检测到作用于M个UI元素中的第一UI元素处的拖拽。响应于拖拽，使屏幕上的N个UI元素中的每个UI元素以相应动画效果移动，N为1与M‑1之间的正整数。使N个UI元素以相应动画效果移动包括：确定第一UI元素与UI中的第二UI元素之间的距离；基于距离确定移动第二UI元素的动画效果；以及使第二UI元素以动画效果移动，以从视觉上指示第二UI元素随着第一UI元素移动。以此方式，能够加强不同UI元素的动画效果之间的联系，突出各个独立UI元素之间的关系，使得UI的动画效果更符合用户的使用习惯，从而显著提高用户体验。

Description

图形界面显示方法、电子设备、介质以及程序产品
技术领域
本公开总体上涉及信息技术领域，并且更特别地涉及一种图形界面显示方法、电子设备、计算机可读存储介质以及计算机程序产品。
背景技术
随着信息技术的发展，各种类型的电子设备被配备有各种类型的屏幕。为此，屏幕上的用户界面(UI)的显示效果及风格成为影响用户体验的关键要素。动画已经成为UI中至关重要的一部分。随着智能电话等电子设备的性能提高，动画也随之发展。高刷新率、高渲染度、高复杂度的动画越来越多。因此，需要进一步改进动画的显示，以提高用户体验。
发明内容
根据本公开的一些实施例，提供了一种图形界面显示方法、电子设备、介质以及程序产品，能够加强不同UI元素的动画效果之间的联系，突出各个独立UI元素之间的关系，使得UI的动画效果更符合用户的使用习惯，从而显著提高用户体验。
在本公开的第一方面，提供了一种图形界面显示方法。根据第一方面的图形界面显示方法，在电子设备的屏幕上显示M个用户界面UI元素，M为大于1的正整数。检测到作用于M个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元素的影响区域；以及将M个UI元素中在影响区域内的UI元素确定为N个UI元素。以此方式，可以基于被拖拽的UI元素的尺寸来确定跟随该UI元素进行联动移动的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的动画效果更符合用户的使用习惯，从而显著提高用户体验。
在一些实现方式中，方法可以通过AAR格式文件、JAR格式文件和系统接口中的至少一者来实现。以此方式，可以简单和方便地实现具有联动移动的图形界面显示。
在本公开的第二方面，提供了一种电子设备。电子设备包括处理器以及存储有指令的存储器，其中指令在被处理器执行时使得电子设备执行根据第一方面及其实现方式的任一方法。
在本公开的第三方面，提供了一种计算机可读存储介质。计算机可读存储介质存储有指令，其中指令在被处理器执行时使得电子设备执行根据第一方面及其实现方式的任一方法。
在本公开的第四方面，提供了一种计算机程序产品。计算机程序产品包括指令，其中指令在被处理器执行时使得电子设备执行根据第一方面及其实现方式的任一方法。
附图说明
结合附图并参考以下详细说明，本公开各实现方式的特征、优点及其他方面将变得更加明显。在此以示例性而非限制性的方式示出了本公开的若干实现方式，在附图中：
图1A至1B示出了可以实施本公开的实施例的一种电子设备的硬件结构和软件结构的示意图。
图2示出了可以实施本公开的实施例的另一种电子设备的框图。
图3A-3C分别示出了根据本公开的一些实施例的示例UI的示意图。
图4示出了根据本公开的一些实施例的示例拖拽联动的示意图。
图5A和5B分别示出了根据本公开的一些实施例的摩擦力模型的示例速度时间曲线和示例位移时间曲线的示意图。
图6示出了根据本公开的一些实施例的移动位置受限和非受限的示例的示意图。
图7A-7C分别示出了根据本公开的一些实施例的临界阻尼状态、欠阻尼状态和过阻尼状态下的弹簧形变量x随时间t的曲线的示例的示意图。
图8示出了根据本公开的实施例的图形界面显示方法的流程图。
图9示出了根据本公开的实施例的UI元素的影响区域的示例的示意图。
图10示出了根据本公开的实施例的距离的确定的示例的示意图。
图11A-11C示出了根据本公开的实施例的距离的确定的示例的示意图。
图12示出了根据本公开的实施例的距离的确定的示例的示意图。
图13示出了根据本公开的实施例的距离的确定的示例的示意图。
图14A和14B示出了根据本公开的实施例的距离的确定的示例的示意图。
图15示出了根据本公开的实施例的延迟时间的示例的示意图。
图16A示出了根据本公开的实施例的UI元素完全跟手移动的场景的示例的示意图。
图16B示出了根据本公开的实施例的UI元素完全跟手移动的场景的位移时间曲线的示例的示意图。
图17A示出了根据本公开的实施例的UI元素不完全跟手移动的场景的示例的示意图。
图17B示出了根据本公开的实施例的UI元素不完全跟手移动的场景的位移时间曲线的示例的示意图。
图18A示出了根据本公开的实施例的UI元素完全跟手移动的场景的示例的示意图。
图18B示出了根据本公开的实施例的UI元素完全跟手移动的场景的位移时间曲线的示例的示意图。
图19A示出了根据本公开的实施例的UI元素完全跟手移动的场景的示例的示意图。
图19B示出了根据本公开的实施例的UI元素完全跟手移动的场景的位移时间曲线的示例的示意图。
图20示出了根据本公开的一些实施例的UI元素在被按压时的变化的示例的示意图。
图21示出了根据本公开的一些实施例的UI元素在不同位置处被按压时的变化的示例的示意图。
图22示出了根据本公开的一些实施例的UI元素在不同按压力时的变化的示例的示意图。
图23示出了根据本公开的一些实施例的UI元素在不同按压持续时间时的变化的示例的示意图。
图24示出了根据本公开的一些实施例的UI元素在不同尺寸时的变化的示例的示意图。
图25示出了根据本公开的实施例的图形界面显示方法的流程图。
图26示出了根据本公开的实施例的N个UI元素的深度联动的示例的示意图。
图27示出了根据本公开的实施例的UI元素的影响区域的示例的示意图。
图28示出了根据本公开的实施例的基于距离的UI元素的缩放的示例的示意图。
图29示出了根据本公开的实施例的延迟时间的示例的示意图。
图30示出了根据本公开的具有延迟时间的UI元素的缩放的示例的示意图。
图31示出了根据本公开的实施例的UI元素的移动的位移的示例的示意图。
图32A-32B分别示出了根据本公开的实施例的没有位移的UI元素的恢复和具有位移的UI元素的恢复的示例的示意图。
图33A-33B分别示出了根据本公开的实施例的具有回弹效果的UI元素的恢复的尺寸时间曲线和位移时间曲线的示例的示意图，并且图33C-33D分别示出了根据本公开的实施例的具有回弹幅度减小的多次回弹的回弹效果的UI元素的恢复的尺寸时间曲线和位移时间曲线的示例的示意图。
图34示出了根据本公开的一些实施例的作为刚体的UI元素在被按压时的变化的示例的示意图。
图35示出了根据本公开的一些实施例的模拟UI元素的按压的弹簧的按压和拉伸的示例的示意图。
图36示出了根据本公开的一些实施例的作为非刚体的UI元素在被按压时的变化的示例的示意图。
图37示出了根据本公开的一些实施例的UI元素在不同按压力时的变化的示例的示意图。
图38示出了根据本公开的一些实施例的UI元素在不同按压持续时间时的变化的示例的示意图。
图39示出了根据本公开的一些实施例的UI元素在不同尺寸时的变化的示例的示意图。
图40示出了根据本公开的实施例的图形界面显示方法的流程图。
图41示出了根据本公开的实施例的N个UI元素的压力联动的示例的示意图。
图42示出了根据本公开的实施例的N个UI元素的压力联动的另一示例的示意图。
图43示出了根据本公开的实施例的UI元素的影响区域的示例的示意图。
图44示出了根据本公开的实施例的基于距离的UI元素的变化的示例的示意图。
图45示出了根据本公开的实施例的延迟时间的示例的示意图。
图46A示出了根据本公开的实施例的UI元素的恢复的示例的示意图。
图46B示出了根据本公开的实施例的具有回弹效果的UI元素的恢复的角度时间曲线的示例的示意图。
图46C示出了根据本公开的实施例的具有回弹幅度减小的多次回弹的回弹效果的UI元素的恢复的角度时间曲线的示例的示意图。
图47示出了根据本公开的实施例的动画实现原理图。
图48示出了根据本公开的实施例的用于实现“联动”动画效果能力或功能的系统框架的示意图。
图49示出了根据本公开的实施例的“联动”动画效果能力或功能所涉及到的应用侧和UI框架侧之间的关系的示意图。
图50示出了根据本公开的实施例的“联动”动画效果能力或功能实现的三种方式的具体说明的示意图。
具体实施方式
下面将参照附图更详细地描述本公开的一些示例实现。虽然附图中显示了本公开的一些示例实现，然而，应该理解，可以以各种形式实现本公开而不应被这里阐述的示例实现所限制。相反，提供这些实现是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。
在本文中使用的术语“包括”及其变形表示开放性包括，即“包括但不限于”。除非特别申明，术语“或”表示“和/或”。术语“基于”表示“至少部分地基于”。术语“实施例”和“一些实施例”表示“至少一些实施例”。术语“第一”、“第二”等描述，是用于区分不同的对象等，其不代表先后顺序，也不限定“第一”和“第二”是不同的类型。
在本文中使用的术语“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元素。
在本公开的实施例中描述的一些流程中，包含了按照特定顺序出现的多个操作或步骤，但是应该理解，这些操作或步骤可以不按照其在本公开的实施例中出现的顺序来执行或并行执行，操作的序号仅用于区分开各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作或步骤可以按顺序执行或并行执行，并且这些操作或步骤可以进行组合。
在诸如Android和iOS的移动操作系统中，动画本质上是基于刷新率实时显示用户界面UI或UI元素。由于人类的视觉暂留原理，使得用户感觉画面是运动的。动画从动画的初态在经过动画时间之后变换为动画的终态。在这个变换过程中，动画可以由动画类型和动画变换形式进行控制。例如，动画类型可以包括位移动画、旋转动画、缩放动画和透明动画等。而动画变换形式可以由插值器和估值器等控制器进行控制。这样的控制器可以用于在动画时间期间控制对动画进行变换的速度。
然而，传统上，动画仅仅是简单的动画效果的组合，使得动画效果单一，不符合物理规律，并且没有考虑真实使用场景和用户使用习惯等。
为此，本公开的实施例提出了一种图形界面显示的新方案。本公开的实施例涉及UI中的UI元素在动画效果上的联动，包括拖拽联动、深度联动和压力联动。在联动中，被操作的目标UI元素可以影响没有被操作的其他UI元素。具体地，触发目标UI元素的动画效果可以联合地触发一个或多个其他UI元素、甚至整个UI中的其他UI元素的动画效果。
由此，可以加强不同UI元素的动画效果之间的联系，并且突出各个独立UI元素之间的关系。相比于动画效果单一、每个UI元素都是独立的且无联系的传统动画，本公开的实施例能够使得动画效果更符合物理规律，并且考虑到了真实使用场景和用户使用习惯，从而可以显著提高用户体验。
以下将参考附图1A至图46描述了本公开的一些示例实施例。
图1A示出了可以实施本公开的实施例的一种电子设备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/6G等无线通信的解决方案。移动通信模块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可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications，GSM)、通用分组无线服务(general packet radio service，GPRS)、码分多址接入(codedivision multiple access，CDMA)、宽带码分多址(wideband code division multipleaccess，WCDMA)、时分码分多址(time-division codedivision multiple access，TD-SCDMA)、长期演进(long term evolution，LTE)、5G以及后续演进标准、BT、GNSS、WLAN、NFC、FM、和/或IR技术等。其中GNSS可以包括全球卫星定位系统(global positioning system，GPS)、全球导航卫星系统(global navigation satellite system，GLONASS)、北斗卫星导航系统(beidou navigation satellite system，BDS)、准天顶卫星系统(quasi-zenithsatellite system，QZSS)和/或星基增强系统(satellite based augmentation systems，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的软件结构。
图1B是本公开的实施例的电子设备100的软件结构的示意图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，可以将操作系统分为四层，从上至下分别为应用程序层、应用程序框架层、操作系统运行时(runtime)和系统库、以及内核层。
应用程序层可以包括一系列应用程序包。如图1B所示，应用程序包可以包括相机、图库、日历、通话、地图、导航、WLAN、蓝牙、音乐、视频、短信息等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图1B所示，应用程序框架层可以包括窗口管理器、内容提供器、视图系统、电话管理器、资源管理器、通知管理器等。窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频、图像、音频、拨打和接听的电话、浏览历史和书签、电话簿等。视图系统包括可视控件，例如显示文字的控件，显示图像的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图像的视图。电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。资源管理器为应用程序提供各种资源，比如本地化字符串、图标、图像、布局文件、视频文件等。通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。
继续参考图1B，操作系统运行时包括核心库和虚拟机。操作系统运行时负责操作系统的调度和管理。核心库包含两部分，一部分是Java语言需要调用的功能函数，另一部分是操作系统的核心库。应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的Java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理、堆栈管理、线程管理、安全和异常的管理、以及垃圾回收等功能。系统库可以包括多个功能模块。例如，表面管理器(surface manager)、媒体库(Media Libraries)、三维图形处理库(例如OpenGL ES)、2D图形引擎(例如：SGL)等。
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如，MPEG4、H.264、MP3、AAC、AMR、JPG、PNG等。三维图形处理库用于实现三维图形绘图、图像渲染、合成、和图层处理等。2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动、摄像头驱动、音频驱动、传感器驱动。
图2示出了可以实施本公开的实施例的另一种电子设备200的框图。如图2所示，电子设备200可以是通用计算设备的形式。电子设备200的组件可以包括但不限于一个或多个处理器或处理单元210、存储器220、存储设备230、一个或多个通信单元240、一个或多个输入设备250以及一个或多个输出设备260。处理单元210可以是实际或虚拟处理器并且能够根据存储器220中存储的程序来执行各种处理。在多处理器系统中，多个处理单元并行执行计算机可执行指令，以提高电子设备200的并行处理能力。
电子设备200通常包括多个计算机存储介质。这样的介质可以是电子设备200可访问的任何可以获得的介质，包括但不限于易失性和非易失性介质、可拆卸和不可拆卸介质。存储器220可以是易失性存储器(例如寄存器、高速缓存、随机访问存储器(RAM))、非易失性存储器(例如，只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、闪存)或它们的某种组合。存储设备230可以是可拆卸或不可拆卸的介质，并且可以包括机器可读介质，诸如闪存驱动、磁盘或者任何其他介质，其可以能够用于存储信息和/或数据(例如用于训练的训练数据)并且可以在电子设备200内被访问。
电子设备200可以进一步包括另外的可拆卸/不可拆卸、易失性/非易失性存储介质。尽管未在图2中示出，可以提供用于从可拆卸、非易失性磁盘(例如“软盘”)进行读取或写入的磁盘驱动和用于从可拆卸、非易失性光盘进行读取或写入的光盘驱动。在这些情况中，每个驱动可以由一个或多个数据介质接口被连接至总线(未示出)。存储器220可以包括计算机程序产品225，其具有一个或多个程序模块，这些程序模块被配置为执行本公开的实施例的对象编辑方法或过程。
通信单元240实现通过通信介质与其他计算设备进行通信。附加地，电子设备200的组件的功能可以以单个计算集群或多个计算机器来实现，这些计算机器能够通过通信连接进行通信。因此，电子设备200可以使用与一个或多个其他服务器、网络个人计算机(PC)或者另一个网络节点的逻辑连接来在联网环境中进行操作。
输入设备250可以是一个或多个输入设备，例如鼠标、键盘、追踪球等。输出设备260可以是一个或多个输出设备，例如显示器、扬声器、打印机等。在本公开的实施例中，输出设备260可以包括具有触摸传感器的触摸屏，其可以接收用户的触摸输入。电子设备200还可以根据需要通过通信单元240与一个或多个外部设备(未示出)进行通信，外部设备诸如存储设备、显示设备等，与一个或多个使得用户与电子设备200交互的设备进行通信，或者与使得电子设备200与一个或多个其他计算设备通信的任何设备(例如，网卡、调制解调器等)进行通信。这样的通信可以经由输入/输出(I/O)接口(未示出)来执行。
应当理解，上文图1所示出的电子设备100和图2所示出的电子设备200仅仅是能够实施本公开的一个或多个实施例的两种示例电子设备，其不应当构成对本文所描述的实施例的功能和范围的任何限制。
拖拽联动
当前，为了更多和更好地显示的信息，电子设备的屏幕越来越大，屏幕上的UI的布局越来越复杂，并且UI元素在尺寸和形状上的差异也越来越大。在这种情况下，UI中存在以各种不规则布局排列的各种不规则UI元素。例如，在智能电话的负一屏、控制中心、应用市场、图库等中存在各种不规则的控件、卡片、图片以及封面等UI元素。
传统上，各种不规则的UI元素之间不存在动画效果的联动。也就是说，触发目标UI元素的动画效果并不会联合地触发一个或多个其他UI元素的动画效果。每个UI元素的动画效果都是独立的且无联系的。因此，传统的动画效果单一且死板，无法体现UI元素之间的关系。
本公开的实施例涉及UI中的UI元素在拖拽时的动画效果的联动，也被称为拖拽联动。在拖拽联动中，被拖拽的目标UI元素可以影响没有被拖拽的其他UI元素。具体地，在拖拽联动中，触发目标UI元素的动画效果可以联合地触发一个或多个其他UI元素、甚至整个UI中的其他UI元素的动画效果。例如，在拖拽联动中，在拖拽目标UI元素时，除了该目标UI元素随着拖拽以一动画效果移动之外，其他UI元素也可以以相应动画效果移动，从而在视觉上呈现联动地拖拽。
由此，可以加强不同UI元素的动画效果之间的联系，并且突出各个独立UI元素之间的关系。相比于动画效果单一、每个UI元素都是独立的且无联系的传统动画，本公开的实施例能够使得动画效果更符合物理规律，并且考虑到了真实使用场景和用户使用习惯，从而可以显著提高用户体验。
以下将参考附图3A至图19B描述拖拽联动的一些示例实施例。
图3A-3C示出了根据本公开的一些实施例的示例UI 300A至300C的示意图。在某些实施例中，UI元素可以具有不规则的尺寸和形状。例如，如图3A所示，UI 300A可以包括多个UI元素，例如UI元素1-13，其中UI元素1、2、4和5具有不同的尺寸和形状。进一步地，UI也可以具有不规则的局部。例如，如图3B所示，UI 300B中的UI元素16和18右侧空缺，即不存在UI元素。然而，本公开的实施例同样适用于规则的布局、尺寸和形状。例如，如图3C所示，UI300C具有规则的布局，并且UI 300C中的UI元素25-40都具有相同的尺寸和形状。应当理解，本公开的实施例适用于任何适当的规则或不规则的布局、尺寸和形状。
UI中的UI元素可以被拖拽。例如，在用户期望移动UI元素时，用户可以拖拽UI元素。作为示例，在用户期望改变UI元素在UI中的位置、将UI元素与另一UI元素合并、或者将UI元素放入工具栏或垃圾箱等时，用户可以拖拽UI元素。在检测到UI元素处的拖拽的情况下，UI元素可以以一动画效果移动，以在视觉上呈现拖拽动作。如上所述，在拖拽联动中，被拖拽的目标UI元素可以影响没有被拖拽的其他UI元素。具体地，在拖拽目标UI元素时，除了该目标UI元素随着拖拽以一动画效果移动之外，其他UI元素也可以以相应动画效果移动，从而在视觉上呈现联动地拖拽。
图4示出了根据本公开的一些实施例的示例拖拽联动400的示意图。如图4所示，在检测到UI元素3处的拖拽的情况下，UI元素3可以以一动画效果移动，以在视觉上呈现拖拽动作。除了UI元素3随着拖拽以一动画效果移动之外，其他UI元素2和4也可以以相应动画效果移动，从而在视觉上呈现联动地拖拽。为了清楚，图4仅示出了UI元素2-3的联动移动。应当理解，联动移动可以发生在任何UI中的任何至少两个UI元素处，例如，UI300A-300C中的任何至少两个UI元素处。
具体地，在时间T01检测到UI元素3处的拖拽，使UI元素3以及其他UI元素2和4移动。在时间T02，UI元素3与位于拖拽方向上的UI元素4的间距变小。间距可以表示两个UI元素的相应基准点之间的距离。在某些实施例中，UI元素的中心点可以被确定为UI元素的基准点。备选地，间距可以表示两个UI元素的相邻边界之间的距离。如图4所示，在某些实施例中，UI元素3甚至可以覆盖UI元素4的至少一部分。而UI元素3与位于拖拽方向相反方向上的UI元素2的间距变大。这意味着UI元素3的移动的速度大于UI元素2和4的速度。在时间T03，UI元素3与位于拖拽方向上的UI元素4的间距变大，而与位于拖拽方向相反方向上的UI元素2的间距变小。这意味着UI元素3的移动的速度小于UI元素2和4的速度。在时间T04，UI元素3以及其他元素2和4移动到预定距离，从而停止移动。在某些实施例中，预定距离可以基于摩擦力模型确定。在下文中，将详细描述基于摩擦力模型确定距离的方式，因此在此省略其描述。
以上描述了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元素将要移动的距离。该距离可以通过如下等式(1)和(2)确定：
其中ffriction表示摩擦力，其是电子设备或用户可配置的；t表示移动的时间；V0表示初速度，其是电子设备或用户可配置的，或者检测用户的拖拽的速度得到的；V(t)表示最终速度，由于UI元素的移动最终将停止，因此V(t)为0；e表示自然常数；S(t)表示UI元素将要移动的距离。应当理解，以上等式中的常数仅是示例，其是电子设备或用户可设置的。
由以上等式可知，通过等式(1)可以确定移动的时间t。由此，可以进一步地通过等式(2)确定距离S(t)。以此方式，可以容易地确定UI元素将要移动的距离。此外，由于等式中的各种参数(例如，摩擦力、初速度等)是可配置的，因此可以通过配置这些参数来影响UI元素将要移动的距离，从而提高动画效果的灵活性和用户体验。
符合摩擦力模型的UI元素的移动将满足摩擦力模型的速度时间曲线和位移时间曲线。图5A和5B分别示出了根据本公开的一些实施例的摩擦力模型的示例速度时间曲线500A和示例位移时间曲线500B的示意图。如图5A和5B所示，在仅受到摩擦力的情况下，UI元素的移动速度随时间减小为0，并且UI元素的移动距离随时间增大直至移动停止。
在上文中，描述了摩擦力因素如何控制UI元素停止移动。此外，UI元素能够被移动到的位置是否受到限制也可以控制UI元素在何处停止移动。
具体地，在某些实施例中，UI元素能够被移动到的位置是不受限制的。在这种情况下，基于摩擦力模型确定的距离即为UI元素将要移动的距离。然而，在某些实施例中，UI元素能够被移动到的位置是受限制的。换句话说，UI元素只能被移动到的预定位置。在这种情况下，虽然可以基于摩擦力模型确定UI元素将要移动的距离，但是如果UI元素在移动了该距离之后，并不位于预定位置处，则需要调整UI元素将要移动的距离，使得UI元素能够被移动到预定位置处。例如，可以将UI元素移动到与基于摩擦力模型确定的停止位置最近的预定位置处。由此，UI元素将要移动的距离可以基于摩擦力模型和预定位置两者共同确定。
图6示出了根据本公开的一些实施例的移动位置受限和非受限的示例600的示意图。如图6所示，在UI元素能够被移动到的位置是受限制的情况下，UI元素只能从屏幕610上的源位置620被移动到预定位置630。作为对照，在UI元素能够被移动到的位置不受限制的情况下，UI元素能够从屏幕610上的源位置620被移动到任意位置640。
进一步地，在某些实施例中，还可以对UI元素能够移动的范围进行限制。移动超过该范围的UI元素将被视为过界。该范围可以是任何适当范围。例如，该范围可以为与屏幕边界的距离小于屏幕尺寸的预定比例或预定像素(诸如10％或1000像素)的范围，或者从UI元素的源位置到目的地位置的距离小于屏幕尺寸的预定比例或预定像素(诸如50％或10000像素)的范围。由此，UI元素将要移动的距离还可以基于该范围来确定。
以上详细描述了摩擦力模型，在下文中将进一步描述弹性力模型。
UI元素的移动的位移随时间变化的曲线可以是符合弹性力模型的弹性力曲线。由于位移和时间可以确定速度，因此UI元素的移动的速度也遵循弹性力模型。为此，可以认为UI元素的移动可以模拟弹簧的运动规律。应当理解，这里为了描述弹性力模型，将UI元素的移动的位移随时间变化的曲线描述为弹性力曲线。然而，UI元素的移动的位移随时间变化的曲线也可以是任何适当预定义曲线，例如贝塞尔曲线。
弹性力模型可以基于胡克定律下的阻尼振动等式(3)和(4)：
f＝ma   (3)，
其中f表示弹簧在振动过程中(即移动中)受到的力，其可以是电子设备或用户可配置的；a表示移动的加速度；t表示移动的时间；k表示弹簧的弹性系数；x表示弹簧的形变量；g表示弹簧的阻尼系数；m表示UI元素的质量，在此可以将UI元素的尺寸等价于UI元素的质量。
弹性系数是弹簧单位形变量所需力的大小。弹性系数k越大，弹簧从最大振幅回到平衡位置的时间越短，反之越长。弹性系数k是电子设备或用户可配置的。在一些实施例中，弹性系数k的取值范围可以为1-999，弹性系数k的建议取值范围可以为150-400。
阻尼系数是弹簧在振动过程中的减震力(例如流体阻力、摩擦力等)的量化表征，上述减震力可以使得弹簧振幅逐渐减小直至停止在平衡位置。阻尼系数越大，弹簧越容易停在平衡位置，反之越不容易。阻尼系数g是电子设备或用户可配置的。在一些实施例中，阻尼系数g的取值范围可以为1-99。
此外，应当理解，如上所述，基于摩擦力模型可以确定UI元素将要移动的距离S(t)。在UI元素移动距离S(t)的情况下，S(t)可以被视为弹簧的形变量。因此，S(t)等于x。
弹性力模型具有三种阻尼状态，即临界阻尼状态、欠阻尼状态和过阻尼状态。临界阻尼符合如下等式(5)：
g2＝4×m×k   (5)，
其中g表示弹簧的阻尼系数；m表示UI元素的尺寸；k表示弹簧的弹性系数。
以临界阻尼为基准，如果阻尼大于临界阻尼，就是过阻尼状态，如果阻尼小于临界阻尼，就是欠阻尼状态。
不同的阻尼状态下，UI元素的位移时间曲线不同。图7A-7C分别示出了根据本公开的一些实施例的临界阻尼状态、欠阻尼状态和过阻尼状态下的弹簧形变量x随时间t的曲线700A-700C的示例的示意图。如图7A所示，临界阻尼状态下，弹簧以最平稳的速度在最短时间回到平衡位置后停止运动，不再振荡。如图7B所示，欠阻尼状态下，弹簧缓慢的经由多次振荡逐渐减小振幅，最后回到平衡位置。如图7C所示，过阻尼状态下，弹簧几乎没有振动，振幅逐渐减小，达到平衡位置。
如上所述，UI元素的移动的位移随时间变化的曲线可以是符合弹性力模型的弹性力曲线。为此，可以认为UI元素的移动可以模拟弹簧的运动规律，即UI元素的位移的变化规律可以模拟弹簧形变量的变化规律。通过调整阻尼系数和/或弹性系数，可以调整UI元素的位移的变化规律，使得UI元素模拟临界阻尼状态、过阻尼或欠阻尼状态的弹簧的运动规律。
进一步地，如上所述，可以基于被拖拽的UI元素的弹簧参数(例如弹性系数、阻尼系数)，利用将在下文中详细描述的传导方式，确定联动移动的其他UI元素的弹簧参数，从而在被拖拽的UI元素和联动移动的UI元素的移动过程中，基于每个UI元素各自的弹簧参数控制每个UI元素进行遵循弹性力模型的移动。由此，可以使得被拖拽的UI元素和联动移动的UI元素能够模拟具有不同弹簧参数的弹簧的运动规律，从而呈现拖拽方向上的UI元素间的间隔先减小后恢复(类似于弹簧先压缩后恢复)，而拖拽方向相反方向上的UI元素间的间隔先增大后恢复(类似于弹簧先拉伸后恢复)的动画效果，增加了对用户的拖拽动作的动态反馈。
某个联动移动的UI元素的动画效果是基于被拖拽的UI元素移动的动画效果以及被拖拽的UI元素与该联动移动的UI元素之间的距离确定的。由于联动移动的UI元素移动的动画效果随距离而变化，因此也可以认为其移动的动画效果随距离而传导。在某些实施例中，传导可以是非线性传导。备选地，传导也可以是线性传导。
例如，在非线性传导的情况下，联动移动的UI元素移动的动画效果可以通过如下等式(6)确定：
xn＝x×(n+1)-0.18×g   (6)，
其中xn表示联动移动的UI元素移动的动画效果；x表示被拖拽的UI元素移动的动画效果；n表示被拖拽的UI元素与联动移动的UI元素之间的距离；g表示传导系数，当传导系数为0时，联动移动的UI元素移动的动画效果与被拖拽的UI元素移动的动画效果相同；等式(6)中的常数仅为示例，其为电子设备或用户可配置的。
在UI元素的移动的位移随时间变化的曲线为弹性力曲线的情况下，移动的动画效果可以由阻尼系数和/或弹性系数来控制。因此x可以是基于阻尼系数和弹性系数中的至少一者来确定的。
例如，x可以是被拖拽的UI元素的弹性系数与阻尼系数的比值。在这种情况下，被拖拽的UI元素的弹性系数与阻尼系数的比值基于距离n传导至联动移动的UI元素，从而得到联动移动的UI元素的弹性系数与阻尼系数的比值xn。由此，可以将被拖拽的UI元素移动的动画效果基于距离传导至联动移动的UI元素。弹性系数与阻尼系数的比值越大，UI元素的移动之间的关联越弱，UI元素之间的弹簧特性和移动差异越大，可以被认为是弹簧“偏软”。反之，弹性系数与阻尼系数的比值越小，UI元素的移动之间的关联越强，UI元素之间的弹簧特性和移动差异越小，可以被认为是弹簧“偏硬”。
应当理解，x表示被拖拽的UI元素的弹性系数与阻尼系数的比值仅是示例。x可以是任何适当因素。作为另一示例，x可以是被拖拽的UI元素的弹性系数。作为再一示例，x也可以是被拖拽的UI元素的阻尼系数。
此外，虽然在上文中详细描述了弹性力曲线，但是UI元素移动的动画效果可以遵循任何适当预定曲线，例如贝塞尔曲线。取决于贝塞尔曲线的阶数，贝塞尔曲线可以具有对应于阶数的控制点。例如，在二阶贝塞尔曲线的情况下，贝塞尔曲线可以具有两个控制点。类似地，在一阶贝塞尔曲线的情况下，贝塞尔曲线可以具有一个控制点，而在三阶贝塞尔曲线的情况下，贝塞尔曲线可以具有三个控制点，以此类推。在UI元素的移动的位移随时间变化的曲线为贝塞尔曲线的情况下，可以通过贝塞尔曲线的至少一个控制点中的至少一者的坐标，来控制移动的动画效果。例如，在二阶贝塞尔曲线的情况下，可以通过二阶贝塞尔曲线的两个控制点中之一或两者，来控制移动的动画效果。因此，x可以是基于至少一个控制点中的至少一者的坐标来确定的。
以上详细描述了非线性传导，在线性传导的情况下，联动移动的UI元素移动的动画效果可以通过如下等式(7)确定：
xn＝x-g×n   (7)，
其中xn表示联动移动的UI元素移动的动画效果；x表示被拖拽的UI元素移动的动画效果；n表示被拖拽的UI元素与联动移动的UI元素之间的距离；g表示传导系数，当传导系数为0时，联动移动的UI元素移动的动画效果与被拖拽的UI元素移动的动画效果相同。
类似于非线性传导，在UI元素的移动的位移随时间变化的曲线为弹性力曲线的情况下，移动的动画效果可以由阻尼系数和/或弹性系数来控制。因此x可以是基于阻尼系数和弹性系数中的至少一者来确定的。在UI元素的移动的位移随时间变化的曲线为贝塞尔曲线的情况下，可以通过贝塞尔曲线至少一个控制点中的至少一者的坐标，来控制移动的动画效果。因此，x可以是基于至少一个控制点中的至少一者的坐标来确定的。
在上文中，详细描述了拖拽联动的原理。在下文中，将进一步描述利用该拖拽联动的原理控制UI元素进行联动移动的过程。
图8示出了根据本公开的实施例的图形界面显示方法800的流程图。应当理解，方法800可以由以上参考图1所描述的电子设备100或者参考图2所描述的电子设备200来执行。在此参考图3A的UI 300A描述方法800。然而，应当理解，UI 300A仅是示例，方法800可以适用于任何适当界面，包括但不限于UI 300B-300C。
在框810，在电子设备的屏幕上显示M个用户界面UI元素。M为大于1的正整数。例如，参见图9，M个UI元素可以是UI元素1至13。
在框820，检测到作用于M个UI元素中的第一UI元素处的拖拽。例如，第一UI元素可以是UI元素5。作用于第一UI元素的拖拽将使得第一UI元素以一动画效果移动，以呈现拖拽效果。
在框830，响应于作用于第一UI元素的拖拽，使屏幕上的N个UI元素中的每个UI元素以相应动画效果移动。N为1与M-1之间的正整数。由此，从视觉上指示联动地拖拽。
在某些实施例中，拖拽联动可以作用于屏幕上的所有UI元素。在这种情况下，可以将M个UI元素中除第一UI元素以外的M-1个UI元素确定为N个UI元素。备选地，拖拽联动可以仅作用于屏幕上的部分UI元素。在这种情况下，可以基于第一UI元素的尺寸来确定第一UI元素的影响区域，以及将M个UI元素中在影响区域内的UI元素确定为N个UI元素。例如，第一UI元素的尺寸越大，其影响区域可以越大。备选地，影响区域也可以随着尺寸缩小，本公开在此不受限制。例如，影响区域可以是以第一UI元素的基准点为中心、具有预定半径的圆。应当理解，影响区域可以是具有任何形状的任何适当区域，例如具有预定尺寸的矩形、菱形等。影响区域可以是由电子设备和用户可配置的，本公开在此不受限制。
此外，在某些实施例中，与影响区域相交的UI元素可以被认为在影响区域内。备选地，在影响区域为具有预定半径的圆的情况下，如果UI元素与第一UI元素的距离小于影响区域的预定半径，该UI元素可以被认为在影响区域内。
图9示出了根据本公开的实施例的UI元素的影响区域的示例的示意图。如图9所示，由于UI元素3、4、7、8在UI元素5的影响区域910内，因此UI元素3、4、7、8将随着UI元素5联动移动。此外，由于UI元素1、2、6、9-13不在UI元素5的影响区域910内，因此UI元素1、2、6、9-13不会随着UI元素5联动移动。
返回参考图8，为了使N个UI元素以相应动画效果移动，可以确定第一UI元素与N个UI元素中的每个UI元素之间的距离。在下文中，将描述如何确定第一UI元素与N个UI元素中的第二UI元素之间的距离。
在某些实施例中，可以根据距离所处于的范围，将距离划分为多个距离等级。例如被操作的UI元素本身可以处于距离等级0、联动的UI元素中的可以根据其与被操作的UI元素的相应距离而处于距离等级1、2、3……处于相同距离等级的UI元素可以被视为距离相同。由此，通过使用距离等级，可以简化UI元素的联动，使得处于相同距离等级的UI元素以相同方式联动，从而提高联动的统一性和协调性。然而，应当理解，在联动中，也可以使用距离本身，从而使得UI元素更精确地联动。在下文中，距离等级可互换地被称为距离。
图10示出了根据本公开的实施例的距离的确定的示例1000的示意图。如图10所示，在某些实施例中，可以确定第一UI元素(例如，UI元素5)的第一基准点和第二UI元素(例如，UI元素2)的第二基准点。在图10中，每个UI元素的基准点由“+”所示。在某些实施例中，UI元素的中心点可以被确定为UI元素的基准点。备选地，UI元素的基准点可以是电子设备或用户可配置的，从而基准点的位置可以是任何适当位置，本公开在此不受限制。由此，可以确定第一基准点与第二基准点之间的距离作为第一UI元素与第二UI元素之间的距离。
例如，假设第一基准点在屏幕上的位置坐标为(x0,y0)，而第二基准点在屏幕上的位置坐标为(x1,y1)。在这种情况下，距离可以通过如下等式(8)确定：
其中n表示距离，x0表示第一基准点的横坐标，y0表示第一基准点的纵坐标，x1表示第二基准点的横坐标，y1表示第二基准点的纵坐标。
如图10所示，以上述方式确定的UI元素5与其它UI元素之间的距离如下：UI元素5与其本身的距离为0，与UI元素3、7、8之间的距离为1，与UI元素2、4、6、9之间的距离为2，并且与UI元素1、10-13之间的距离为3。
图11A-11C示出了根据本公开的实施例的距离的确定的示例1100A-1100C的示意图。如图11A所示，在某些实施例中，可以确定第一UI元素的第一基准点。可以从第一基准点为圆心，确定具有各自半径的多个圆，例如圆1110A-1130A。应当理解，除了圆之外，还可以以第一基准点为中心，确定具有各自尺寸的任何其他适当形状，例如矩形、菱形等，本公开在此不受限制。
例如，如图11B所示，在某些实施例中，可以确定第一UI元素的第一基准点。可以从第一基准点为中心，确定具有各自尺寸的多个矩形，例如矩形1110B-1120B。此外，如图11C所示，在某些实施例中，可以确定第一UI元素的第一基准点。可以从第一基准点为中心，确定具有各自尺寸的多个菱形，例如矩形1110C-1140C。
在某些实施例中，多个圆的半径可以以预定大小或比例增大。备选地，多个圆的半径可以是电子设备或用户可配置的，本公开在此不受限制。
由此，可以从多个圆中，确定与第二UI元素相交的圆。由此，可以将相交的圆的半径确定为距离。在某些实施例中，如果存在多于一个圆与第二UI元素相交，则可以从这些圆中，确定与第二UI元素相交并且半径最小的目标圆。进一步地，在某些实施例中，如果没有圆与第二UI元素相交，则可以将与第二UI元素最接近的圆作为目标圆，由此，可以将目标圆的半径确定为距离。
如图11所示，以上述方式确定的UI元素5与其它UI元素之间的距离如下：UI元素5与其本身的距离为0。由于与UI元素3、4、7、8相交的半径最小的圆为圆1110，因此UI元素3、4、7、8与UI元素5之间的距离为1。由于圆1120与UI元素2、6、9相交，因此UI元素2、6、9与UI元素5之间的距离为2。此外，由于圆1130与UI元素1、10-13相交，因此UI元素1、10-13之间的距离为3。
图12示出了根据本公开的实施例的距离的确定的示例1200的示意图。如图12所示，在某些实施例中，可以确定第一UI元素与第二UI元素之间的横向间距，和/或确定第一UI元素与第二UI元素之间的纵向间距。在某些实施例中，横向间距可以表示第一UI元素与第二UI元素之间的一个或多个横向间隔的长度之和。横向间隔可以表示屏幕上的两个UI元素的纵向边界之间的间隔。类似于横向间距，纵向间距可以表示第一UI元素与第二UI元素之间的一个或多个纵向间隔的长度之和。纵向间隔可以表示屏幕上的两个UI元素的横向边界之间的间隔。在不规则布局的情况下，UI元素之间的横向间隔和纵向间隔的长度可以是不规则的。此外，UI元素之间的横向间隔和纵向间隔的长度可以是电子设备或用户可配置的。
由此，可以基于横向间距和/或纵向间距，来确定距离。例如，UI元素5与UI元素13之间存在两个纵向间隔。因此，UI元素5与UI元素13之间的距离可以是这两个纵向间隔的长度之和。作为另一示例，UI元素12与UI元素13之间存在一个横向间隔。因此，UI元素12与UI元素13之间的距离可以是该横向间隔的长度。
如图12所示，以上述方式确定的UI元素5与其它UI元素之间的距离如下：UI元素5与其本身的距离为0，与UI元素2-4和UI元素6-9之间的距离为1，并且与UI元素1、10-13之间的距离为2。
图13示出了根据本公开的实施例的距离的确定的示例1300的示意图。在某些实施例中，不同于图12仅将UI元素之间的中间间隔(例如，横向间隔、纵向间隔)考虑到横向间距和纵向间隔中，还可以将UI元素之间的中间UI元素的尺寸考虑到横向间距和纵向间隔中。如图13所示，横向间距可以表示第一UI元素与第二UI元素之间的一个或多个横向间隔的长度以及一个或多个中间UI元素的宽度之和。纵向间距可以表示第一UI元素与第二UI元素之间的一个或多个纵向间隔的长度以及一个或多个中间UI元素的高度之和。
由此，可以基于横向间距和/或纵向间距，来确定距离。例如，UI元素5与UI元素13之间存在两个纵向间隔和一个中间UI元素9。因此，UI元素5与UI元素13的距离可以是这两个纵向间隔的长度以及UI元素9的高度之和。作为另一示例，UI元素11与UI元素13之间存在一个横向间隔和一个中间UI元素12。因此，UI元素11与UI元素13的距离可以是该横向间隔的长度以及UI元素12的宽度之和。此外，UI元素3与UI元素5之间存在一个纵向间隔。因此UI元素3与UI元素5之间距离是该纵向间隔的长度。UI元素3与UI元素11之间存在三个纵向间隔和两个中间UI元素5和7。因此，UI元素3与UI元素11之间距离是该三个纵向间隔的长度和两个中间UI元素5和7的高度之和。UI元素3与UI元素2之间存在一个横向间隔。因此UI元素3与UI元素2之间的距离是该横向间隔的长度。
如图13所示，以上述方式确定的UI元素5与其它UI元素之间的距离如下：UI元素5与其本身的距离为0，与UI元素2-4和UI元素6-9之间的距离为1，并且与UI元素1、10-13与UI元素5之间的距离为2。
图14A和14B示出了根据本公开的实施例的距离的确定的示例1400A和1400B的示意图。在某些实施例中，除了考虑横向间隔和纵向间隔的长度以及中间UI元素的宽度和高度之外，还可以将操作方向考虑到横向间距和纵向间隔中。例如，在拖拽第一UI元素的情况下，操作方向可以是拖拽第一UI元素的方向。此外，虽然这里描述的是拖拽联动场景，然而如下文将要描述的，还存在深度联动场景和压力联动场景。在深度联动场景和压力联动场景中，也可以使用考虑操作方向的距离确定方式。具体地，在深度联动场景和压力联动场景中，UI元素可以被按压。在按压第一UI元素的情况下，虽然不存在操作方向，但是可以将是从第二UI元素指向第一UI元素的方向(诸如从第二基准点指向第一基准点的方向)视为操作方向，从而将操作方向考虑到横向间距和纵向间隔中。
在这种情况下，可以首先利用参考图12和13描述的距离的确定方式来确定横向间距和/或纵向间距。然后，可以确定操作方向与水平方向和/或竖直方向的夹角。由此，可以利用三角函数原理，确定在操作方向上的距离。
在某些实施例中，如图14A所示，由于横向间距、纵向间距、以及操作方向1410A与水平方向或竖直方向的夹角已知，因此可以利用三角函数原理，确定操作方向1410A上的距离。
备选地，还可以根据操作方向与水平方向和竖直方向的夹角，选择水平方向和竖直方向中更接近操作方向的一者作为参考方向来确定操作方向上的距离。例如，如图14B所示，由于操作方向1430B更接近竖直方向，则可以选择竖直方向作为参考方向，并且基于纵向间距以及操作方向1430B与竖直方向的夹角，利用三角函数原理来确定操作方向1430B上的距离。作为另一示例，由于操作方向1420B更接近水平方向，则可以选择水平基于横向间距以及操作方向1420B与水平方向的夹角，利用三角函数原理来确定操作方向1420B上的距离。此外，参考方向可以是电子设备或用户可配置的，本公开在此不受限制。例如，参考方向可以被设置为水平方向、竖直方向或任何其他适当方向。
以上利用横向间距和纵向间距来确定操作方向上的距离。然而，如上所述，横向间距和纵向间距可以是通过中间间隔和中间UI元素的尺寸确定的。因此，操作方向上的距离也可以针对每个中间间隔和中间UI元素来分段确定。具体地，对于每个中间间隔和中间UI元素，都可以确定该中间间隔或该中间UI元素的尺寸、以及操作方向与水平方向或竖直方向的夹角。由此，可以利用三角函数原理，确定操作方向上的距离。然后，可以对针对每个中间间隔和中间UI元素确定的操作方向上的距离求和，以确定操作方向上的总距离。
返回参考图8，在确定了第一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元素的动画效果。
返回参考图8，在确定了移动第二UI元素的动画效果之后，可以使第二UI元素以该动画效果移动，以从视觉上指示第二UI元素随着第一UI元素移动。对于N个UI元素，都可以使其以各自的动画效果移动，以在整个屏幕上或者屏幕的部分区域上从视觉上指示拖拽，从而呈现拖拽联动。
在某些实施例中，联动移动的UI元素的移动方向可以与拖拽方向相关联，从而在视觉上指示拖拽动作。为此，在某些实施例中，可以确定拖拽的方向，以及使第二UI元素与所确定的方向相关联地、以动画效果移动。
此外，在某些实施例中，为了更好地呈现动画效果的传导，并且改善用户体验，第一UI元素和第二UI元素并非同时开始移动。例如，第一UI元素可以在拖拽发生时开始移动，而第二UI元素可以在拖拽发生一段时间之后开始移动。为此，在某些实施例中，可以基于第一UI元素与第二UI元素之间的距离确定一个延迟时间，以及响应于拖拽发生后经过了延迟时间，使第二UI元素移动。进一步地，在某些实施例中，可以确定延迟系数，并且基于距离和延迟系数来确定延迟时间。例如，延迟时间可以是距离除以延迟系数的商。延迟系数可以是电子设备和用户可配置的。
图15示出了根据本公开的实施例的延迟时间1500的示例的示意图。如图15所示，第一UI元素(例如，UI元素5)在拖拽发生时开始移动，距离为1的UI元素(例如，UI元素3、4、7、8)的移动晚于第一UI元素，距离为2的UI元素(例如，UI元素2、6、9)的移动晚于距离为1的UI元素，并且距离为3的UI元素(例如，UI元素1、10-13)的移动晚于距离为2的UI元素。
以此方式，可以加强不同UI元素的动画效果之间的联系，并且突出各个独立UI元素之间的关系。相比于动画效果单一、每个UI元素都是独立的且无联系的传统动画，本公开的实施例能够使得动画效果更符合物理规律，并且考虑到了真实使用场景和用户使用习惯，从而可以显著提高用户体验。
在上文中，对实现拖拽联动的过程进行了详细描述，以下将进一步描述不同场景下的拖拽联动。这些场景包括：UI元素完全跟手移动的场景、UI元素不完全跟手移动的场景、UI元素在松手或抛滑后继续移动的场景、UI元素在松手或抛滑后继续移动并且回弹的场景。应当理解，这些场景可以相互组合，以合成更丰富的动画效果。例如，UI元素可以不完全跟手移动，并且在松手或抛滑后继续移动。作为另一示例，UI元素可以不完全跟手移动，并且在松手或抛滑后继续移动并且回弹。在下文中，将以UI元素5被拖拽并且UI元素2-4和6-9联动移动为例进行描述。
图16A示出了根据本公开的实施例的UI元素完全跟手移动的场景1600A的示例的示意图。图16B示出了根据本公开的实施例的UI元素完全跟手移动的场景的位移时间曲线1600B的示例的示意图。
如图16A和16B所示，在T11，UI元素5被拖拽。在T11a，UI元素5开始跟随手指的拖拽移动。在某些实施例中，如果UI元素5在拖拽发生时开始移动，则T11a可以等于T11。备选地，如果UI元素5在拖拽发生后开始移动，则T11a可以大于T11。此外，除了被拖拽的UI元素5以外，其他UI元素(例如，UI元素2-4和6-9)也联动移动。应当理解，为了清楚，其他UI元素被示出为与UI元素5同时开始移动。然而，如上所述，其他UI元素可以在各自延迟时间之后开始移动。
在T12，用户松手或抛滑，在这种情况下，结束拖拽UI元素5。在T12a，UI元素5停止移动。在某些实施例中，如果UI元素5在松手或抛滑时停止移动，T12a可以等于T12。备选地，如果UI元素5在松手或抛滑后停止移动，则T12a可以大于T12。此时，UI元素5在拖拽方向上的位移为S10。距离为1的UI元素3、4、7、8在拖拽方向上的位移为S11。距离为2的UI元素2、6、9在拖拽方向上的位移为S12。位移S10大于位移S11，并且位移S11大于位移S12。此时，UI元素5停止移动，而距离为1的UI元素3、4、7、8和距离为2的UI元素2、6、9继续以预定义曲线(例如，弹性力曲线)控制的动画效果移动。
在T13，UI元素5与距离为1的UI元素3、4、7、8之间的、在拖拽方向上的间距减小。此外，距离为1的UI元素3、4、7、8与在拖拽方向上的距离为2的UI元素9之间的、在拖拽方向上的间距减小。另外，距离为1的UI元素3、4、7、8与在拖拽方向相反方向上的距离为2的UI元素2、6之间的、在拖拽方向上的间距增大。
在T14，UI元素5在拖拽方向上的位移保持为S10。距离为1的UI元素3、4、7、8在拖拽方向上移动位移S10，并且停止移动。距离为2的UI元素2、6、9在拖拽方向上的位移尚未达到S10，并且继续以预定义曲线控制的动画效果移动。与T13相比，距离为1的UI元素3、4、7、8与在拖拽方向上的距离为2的UI元素9之间的、在拖拽方向上的间距增大。此外，距离为1的UI元素3、4、7、8与在拖拽方向相反方向上的距离为2的UI元素2、6之间的、在拖拽方向上的间距减小。
在T15，UI元素5以及距离为1的UI元素3、4、7、8在拖拽方向上的位移保持为S10。距离为2的UI元素2、6、9在拖拽方向上移动位移S10，并且停止移动。由此，完成拖拽联动。
图17A示出了根据本公开的实施例的UI元素不完全跟手移动的场景1700A的示例的示意图。图17B示出了根据本公开的实施例的UI元素不完全跟手移动的场景的位移时间曲线1700B的示例的示意图。
如图17A和17B所示，在T21，UI元素5被拖拽。在T21a，UI元素5开始跟随手指的拖拽移动。在某些实施例中，如果UI元素5在拖拽发生时开始移动，则T21a可以等于T21。备选地，如果UI元素5在拖拽发生后开始移动，则T21a可以大于T21。此外，除了被拖拽的UI元素5以外，其他UI元素(例如，UI元素2-4和6-9)也联动移动。应当理解，为了清楚，其他UI元素被示出为与UI元素5同时开始移动。然而，如上所述，其他UI元素可以在各自延迟时间之后开始移动。
在T22，用户松手或抛滑，在这种情况下，结束拖拽UI元素5。在T22a，UI元素5停止移动。在某些实施例中，如果UI元素5在松手或抛滑时停止移动，则T22a可以等于T22。备选地，如果UI元素5在松手或抛滑后停止移动，则T22a可以大于T22。此时，手指在拖拽方向上的位移为SF2。UI元素5在拖拽方向上的位移为S20。距离为1的UI元素3、4、7、8在拖拽方向上的位移为S21。距离为2的UI元素2、6、9在拖拽方向上的位移为S22。位移SF2大于位移S20，位移S20大于位移S21，并且位移S21大于位移S22。此时，UI元素5停止移动，而距离为1的UI元素3、4、7、8和距离为2的UI元素2、6、9继续以预定义曲线(例如，弹性力曲线)控制的动画效果移动。与T21相比，UI元素5与距离为1的UI元素3、4、7、8之间的、在拖拽方向上的间距增大。距离为1的UI元素3、4、7、8与在拖拽方向上的距离为2的UI元素9之间的、在拖拽方向上的间距减小。此外，距离为1的UI元素3、4、7、8与在拖拽方向相反方向上的距离为2的UI元素2、6之间的、在拖拽方向上的间距增大。
在T23，UI元素5与距离为1的UI元素3、4、7、8之间的、在拖拽方向上的间距减小。此外，距离为1的UI元素3、4、7、8与在拖拽方向上的距离为2的UI元素9之间的、在拖拽方向上的间距减小。另外，距离为1的UI元素3、4、7、8与在拖拽方向相反方向上的距离为2的UI元素2、6之间的、在拖拽方向上的间距增大。
在T24，UI元素5在拖拽方向上的位移保持为S20。距离为1的UI元素3、4、7、8在拖拽方向上移动位移S20，并且停止移动。距离为2的UI元素2、6、9在拖拽方向上的位移尚未达到S20，并且继续以预定义曲线控制的动画效果移动。与T23相比，距离为1的UI元素3、4、7、8与在拖拽方向上的距离为2的UI元素9之间的、在拖拽方向上的间距增大。此外，距离为1的UI元素3、4、7、8与在拖拽方向相反方向上的距离为2的UI元素2、6之间的、在拖拽方向上的间距减小。
在T25，UI元素5以及距离为1的UI元素3、4、7、8在拖拽方向上的位移保持为S20。距离为2的UI元素2、6、9在拖拽方向上移动位移S20，并且停止移动。由此，完成拖拽联动。
在参考图16A-17B描述的场景中，在停止拖拽之后，UI元素5都停止移动。然而，UI元素5还可以在停止拖拽之后，继续移动一段距离。在某些实施例中，该距离可以如上所述基于摩擦力模型确定。UI元素5在停止拖拽之后是否继续移动是电子设备和用户可配置的。例如，如果电子设备被配置为允许松手或抛滑后继续移动，则UI元素5可以继续移动。反之，UI元素5将随着拖拽停止而停止移动。
图18A示出了根据本公开的实施例的UI元素完全跟手移动的场景1800A的示例的示意图。图18B示出了根据本公开的实施例的UI元素完全跟手移动的场景的位移时间曲线1800B的示例的示意图。
如图18A和18B所示，在T31，UI元素5被拖拽。在T11a，UI元素5开始跟随手指的拖拽移动。在某些实施例中，如果UI元素5在拖拽发生时开始移动，则T31a可以等于T31。备选地，如果UI元素5在拖拽发生后开始移动，则T31a可以大于T31。此外，除了被拖拽的UI元素5以外，其他UI元素(例如，UI元素2-4和6-9)也联动移动。应当理解，为了清楚，其他UI元素被示出为与UI元素5同时开始移动。然而，如上所述，其他UI元素可以在各自延迟时间之后开始移动。
在T32，用户松手或抛滑，在这种情况下，结束拖拽UI元素5。在T32a，UI元素5继续以预定义曲线(例如，弹性力曲线)控制的动画效果移动。在某些实施例中，如果在结束拖拽时，UI元素5以预定义曲线控制的动画效果移动，则T32a可以等于T32。备选地，如果在结束拖拽之后，UI元素5以预定义曲线控制的动画效果移动，则T32a可以大于T32。此时，UI元素5在拖拽方向上的位移为SF3。距离为1的UI元素3、4、7、8在拖拽方向上的位移为S31。距离为2的UI元素2、6、9在拖拽方向上的位移为S32。位移SF3大于位移S31，并且位移S31大于位移S32。此外，距离为1的UI元素3、4、7、8和距离为2的UI元素2、6、9也继续以预定义曲线的动画效果移动。与T31相比，UI元素5与距离为1的UI元素3、4、7、8之间的、在拖拽方向上的间距增大。距离为1的UI元素3、4、7、8与在拖拽方向上的距离为2的UI元素9之间的、在拖拽方向上的间距减小。此外，距离为1的UI元素3、4、7、8与在拖拽方向相反方向上的距离为2的UI元素2、6之间的、在拖拽方向上的间距增大。
在T33，UI元素5与距离为1的UI元素3、4、7、8之间的、在拖拽方向上的间距增大。距离为1的UI元素3、4、7、8与在拖拽方向上的距离为2的UI元素9之间的、在拖拽方向上的间距减小。此外，距离为1的UI元素3、4、7、8与在拖拽方向相反方向上的距离为2的UI元素2、6之间的、在拖拽方向上的间距增大。
在T34，全部UI元素继续以预定义曲线控制的动画效果移动。与T33相比，UI元素5与距离为1的UI元素3、4、7、8之间的、在拖拽方向上的间距减小。距离为1的UI元素3、4、7、8与在拖拽方向上的距离为2的UI元素9之间的、在拖拽方向上的间距增大。此外，距离为1的UI元素3、4、7、8与在拖拽方向相反方向上的距离为2的UI元素2、6之间的、在拖拽方向上的间距减小。
在T35，全部UI元素在拖拽方向上移动位移S30，并且停止移动。停止移动的位置处的位移S30与松手或抛滑的位置处的位移SF3之间的、在拖拽方向上的距离可以如上所述基于摩擦力模型确定。由此，完成拖拽联动。
进一步地，在某些实施例中，在停止拖拽之后UI元素继续移动的情况下，UI元素可以回弹一段距离。如上所述，在欠阻尼状态下，弹簧的位移随时间在正负值之间震荡。因此，可以利用欠阻尼状态的弹性力曲线来控制UI元素的回弹。
应当理解，在图18A-18B中，UI元素被示出为允许彼此重叠，例如在时间T32-T34，UI元素8与UI元素9重叠。然而，可以不允许UI元素彼此重叠。是否允许重叠是电子设备或用户可配置的。在允许重叠的情况下，UI元素的移动遵循欠阻尼状态的弹性力曲线。在不允许重叠的情况下，UI元素的移动遵循过阻尼状态的弹性力曲线。进一步地，任何两个UI元素是否重叠还可以取决于这两个UI元素的相对移动幅度。例如，在两个UI元素的相对移动幅度小的情况下，UI元素通常不会重叠。而在两个UI元素的相对移动幅度大的情况下，UI元素可能重叠。
图19A示出了根据本公开的实施例的UI元素完全跟手移动的场景1900A的示例的示意图。图19B示出了根据本公开的实施例的UI元素完全跟手移动的场景的位移时间曲线1900B的示例的示意图。
如图19A和19B所示，在T41，UI元素5被拖拽。在T41a，UI元素5开始跟随手指的拖拽移动。在某些实施例中，如果UI元素5在拖拽发生时开始移动，则T41a可以等于T41。备选地，如果UI元素5在拖拽发生后开始移动，则T41a可以大于T41。此外，除了被拖拽的UI元素5以外，其他UI元素(例如，UI元素2-4和6-9)也联动移动。应当理解，为了清楚，其他UI元素被示出为与UI元素5同时开始移动。然而，如上所述，其他UI元素可以在各自延迟时间之后开始移动。
在T42，用户松手或抛滑，在这种情况下，结束拖拽UI元素5。在T42a，UI元素5继续以预定义曲线(例如，弹性力曲线)控制的动画效果移动。在某些实施例中，如果在结束拖拽时，UI元素5以预定义曲线控制的动画效果移动，则T42a可以等于T42。备选地，如果在结束拖拽之后，UI元素5以预定义曲线控制的动画效果移动，则T42a可以大于T42。此时，UI元素5在拖拽方向上的位移为SF4。距离为1的UI元素3、4、7、8在拖拽方向上的位移为S41。距离为2的UI元素2、6、9在拖拽方向上的位移为S42。位移SF4大于位移S41，并且位移S41大于位移S42。此外，距离为1的UI元素3、4、7、8和距离为2的UI元素2、6、9也继续以预定义曲线的动画效果移动。与T41相比，UI元素5与距离为1的UI元素3、4、7、8之间的、在拖拽方向上的间距增大。距离为1的UI元素3、4、7、8与在拖拽方向上的距离为2的UI元素9之间的、在拖拽方向上的间距减小。此外，距离为1的UI元素3、4、7、8与在拖拽方向相反方向上的距离为2的UI元素2、6之间的、在拖拽方向上的间距增大。
在T43，UI元素5在拖拽方向上移动位移S40，并且开始回弹。在某些实施例中，回弹的位置处在拖拽方向上的位移S40与松手或抛滑的位置处在拖拽方向上的位移SF4之间的距离可以如上所述基于摩擦力模型确定。
在T44，距离为2的UI元素9在拖拽方向上移动位移S40，并且也开始回弹。
在T45，全部UI元素在拖拽方向上回弹回位移SF4，并且停止移动。由此，完成拖拽联动。
应当理解，虽然UI元素5被示出为先于距离为1的UI元素3、4、7、8回弹，并且距离为1的UI元素3、4、7、8被示出为先于距离为2的UI元素2、6、9回弹，但是全部UI元素可以一起回弹。例如，UI元素5可以停止移动以等待其他UI元素移动位移S40，然后开始一起回弹。此外，虽然全部UI元素被示出为回弹到松手或抛滑的位置，但是全部UI元素可以更大幅度的回弹或者更小幅度的回弹，本公开的实施例不受此限制。
深度联动
本公开的实施例涉及UI中的UI元素在深度方向上的联动，也被称为深度联动。深度方向是指与电子设备的屏幕垂直的方向。在深度联动中，被按压的目标UI元素可以影响没有被按压的其他UI元素。具体地，在深度联动中，触发目标UI元素的动画效果可以联合地触发一个或多个其他UI元素、甚至整个UI中的其他UI元素的动画效果，使得其他UI元素都受到目标UI元素的影响。例如，在深度联动中，在一持续时间期间按压目标UI元素时，除了该目标UI元素随时间缩放之外，其他UI元素也可以以相应幅度缩放，从而在视觉上呈现联动地缩放。
由此，可以加强不同UI元素的动画效果之间的联系，并且突出各个独立UI元素之间的关系。相比于动画效果单一、每个UI元素都是独立的且无联系的传统动画，本公开的实施例能够使得动画效果更符合物理规律，并且考虑到了真实使用场景和用户使用习惯，从而可以显著提高用户体验。
以下将参考附图20至图33描述深度联动的一些示例实施例。
深度联动可以发生在具有任何适当的规则或不规则的布局的UI中，并且该UI中的UI元素可以具有任何适当的尺寸和形状。例如，深度联动可以发生在如图3A-3C所示的UI300A-300C中。
UI中的UI元素可以被按压。例如，在用户期望执行与UI元素相关联的操作时，用户可以按压UI元素。作为示例，在用户期望进入UI元素所表示的应用程序、打开与UI元素相关联的菜单等时，用户可以按压UI元素。在检测到UI元素处的按压的情况下，UI元素可以发生变化，例如UI元素可以缩放，以在深度方向上呈现按压动作。例如，UI元素可以缩小，以在深度方向上呈现远离。备选地，UI元素可以放大，以在深度方向上呈现靠近。在下文中，将以UI元素缩小为例来描述缩放。然而，应当理解，缩放也可以是放大UI元素。
图20示出了根据本公开的一些实施例的UI元素在被按压时的变化2000的示例的示意图。如图20所示，在检测到UI元素处的按压的情况下，UI元素可以缩小，以在深度方向上呈现远离。
UI元素的变化可以符合面压力模型。在面压力模型中，UI元素中的每个部分(例如，每个像素点或以任何其他适当方式划分的每个部分)处的压力相同。也就是说，无论按压在UI元素的哪个部分(例如，无论按压在UI元素中心还是按压在UI元素边缘)，对于UI元素的所有部分，压力都相同。因此，无论按压在UI元素的哪个部分，UI元素的变化将是相同的。
图21示出了根据本公开的一些实施例的UI元素在不同位置处被按压时的变化2100的示例的示意图。如图21所示，无论在UI元素中心还是UI元素边缘处检测到按压，UI元素都可以以相同幅度缩小，以在深度方向上呈现远离。
此外，如图21所示，在UI元素缩小之后，按压的位置可能不再处于缩小后的UI元素的范围内。在这种情况下，由于按压的位置仍然处于缩小前的UI元素的范围内，或者任何其他适当范围内，按压可以继续被检测为针对UI元素的按压。备选地，由于按压的位置不再处于缩小后的UI元素的范围内，按压将不被检测为针对UI元素的按压。在这种情况下，可以认为按压结束。
此外，在某些实施例中，为了使得UI元素的变化符合自然规律和用户使用习惯，变化的幅度可以取决于按压的力的大小。在真实世界中，力的大小通常是指真实的力的大小。在这种情况下，按压的力越大，在深度方向上的变化越大。在某些实施例中，按压的力可以是电子设备检测到的用户施加的按压的力。备选地，按压的力也可以是由电子设备或者用户设置预定按压力。
图22示出了根据本公开的一些实施例的UI元素在不同按压力时的变化2200的示例的示意图。如图22所示，在按压力大的情况下，UI元素可以以更大幅度缩小，以在深度方向上呈现更大程度的远离。在某些实施例中，UI元素甚至可以缩小到从UI中消失，即缩小到尺寸为0，从而在深度方向上呈现最大程度的远离。作为对照，在按压力小的情况下，UI元素可以以更小幅度缩小，以在深度方向上呈现更小程度的远离。
然而，本公开的实施例不限于此。UI元素响应于不同按压力的缩放方式是电子设备或用户可配置的。例如，在按压力大的情况下，UI元素可以以更小幅度缩小，而在按压力小的情况下，UI元素可以以更大幅度缩小。
进一步地，在电子设备中，完全基于真实的按压的力进行深度方向上的变化可能对用户要求较高，并且可能需要电子设备配备相关硬件。因此，在某些实施例中，可以用按压的时间来模拟或替换按压的力。例如，如果按压的时间越长，则可以认为按压的力越大，由此在深度方向上的变化越大。
图23示出了根据本公开的一些实施例的UI元素在不同按压持续时间时的变化2300的示例的示意图。如图23所示，在按压的持续时间长的情况下，UI元素可以以更大幅度缩小，以在深度方向上呈现更大程度的远离。在某些实施例中，UI元素甚至可以缩小到从UI中消失，即缩小到尺寸为0，从而在深度方向上呈现最大程度的远离。作为对照，在按压的持续时间短的情况下，UI元素可以以更小幅度缩小，以在深度方向上呈现更小程度的远离。
然而，本公开的实施例不限于此。UI元素响应于不同按压持续时间的缩放方式是电子设备或用户可配置的。例如，在按压的持续时间长的情况下，UI元素可以以更小幅度缩小，而在按压的持续时间短的情况下，UI元素可以以更大幅度缩小。
此外，在某些实施例中，为了进一步使得UI元素的变化符合自然规律和用户使用习惯，变化的幅度可以取决于UI元素的尺寸。例如，直观上，相同的按压可能难以按下较大的UI元素，而可以较轻松地按下较小的UI元素。在这种情况下，较大的UI元素受按压的影响可以较小，而较小的UI元素受按压的影响可以较大。
图24示出了根据本公开的一些实施例的UI元素在不同尺寸时的变化2400的示例的示意图。如图24所示，在UI元素的尺寸大的情况下，UI元素可以以更大幅度缩小，以在深度方向上呈现更大程度的远离。作为对照，在UI元素的尺寸小的情况下，UI元素可以以更小幅度缩小，以在深度方向上呈现更小程度的远离。
然而，本公开的实施例不限于此。UI元素在不同尺寸时的缩放方式是电子设备或用户可配置的。例如，为了使得缩放后的UI元素的尺寸更为均衡，较大的UI元素受按压的影响可以较大，而较小的UI元素受按压的影响可以较小。为此，在UI元素的尺寸大的情况下，UI元素可以以更小幅度缩小，而在UI元素的尺寸小的情况下，UI元素可以以更大缩放幅度缩小，以在深度方向上呈现更小程度的远离。
此外，在某些实施例中，为了改善用户体验，可以对UI元素能够缩放的幅度进行限制，使得UI元素只能在被允许的幅度范围内进行缩放。例如，幅度范围可以是任何适当范围，诸如UI元素的尺寸的10％-90％、100像素-10,000像素、或者屏幕占比的2％-50％等。作为示例，假设幅度范围为UI元素的尺寸的10％-90％。在这种情况下，无论按压力多大、按压的持续时间多长，被按压的UI元素至多只能缩小到原尺寸的10％，而不可能从屏幕上消失。
在上文中，详细描述了被按压的UI元素的缩放。如上所述，在深度联动中，被按压的目标UI元素可以影响没有被按压的其他UI元素。具体地，在深度联动中，触发目标UI元素的动画效果可以联合地触发一个或多个其他UI元素、甚至整个UI中的其他UI元素的动画效果，使得其他UI元素都受到目标UI元素的影响。例如，在深度联动中，在一持续时间期间按压目标UI元素时，除了该目标UI元素随时间缩放之外，其他UI元素也可以以相应幅度缩放，从而在视觉上呈现联动地缩放。因此，在下文中，将参考图25至图33详细描述深度联动。
图25示出了根据本公开的实施例的图形界面显示方法2500的流程图。应当理解，方法2500可以由以上参考图1所描述的电子设备100或者参考图2所描述的电子设备200来执行。在此参考图3A的UI 300A描述方法2500。然而，应当理解，UI 300A仅是示例，方法2500可以适用于任何适当界面，包括但不限于UI 300B-300C。
在框2510，在电子设备的屏幕上显示M个用户界面UI元素。M为大于1的正整数。例如，M个UI元素可以是UI元素1至13。
在框2520，检测M个UI元素中的第一UI元素处、保持一持续时间的按压。例如，第一UI元素可以是UI元素5。如上所述，在第一UI元素处的保持一持续时间的按压将使得第一UI元素随时间缩放，以在深度方向上呈现按压效果。
在框2530，响应于检测到第一UI元素处的、保持一持续时间的按压，使屏幕上的N个UI元素中的每个UI元素缩放。N为1与M-1之间的正整数。由此，从视觉上指示联动地按压。
图26示出了根据本公开的实施例的N个UI元素的深度联动2600的示例的示意图。如图26所示，UI元素5在一持续时间期间被按压，使得UI元素5随时间缩放，以在深度方向上呈现按压效果。此外，屏幕上的其他UI元素(例如，UI元素1至4、和6至13)也响应于按压随时间以不同幅度缩放，以在深度方向上呈现按压效果。由此，在视觉上呈现联动地按压。为了清楚，图26仅示出了UI 300A中的UI元素1-13的深度联动。应当理解，深度联动可以发生在任何UI中的任何至少两个UI元素处，例如，UI 300A-300C中的任何至少两个UI元素处。
在某些实施例中，深度联动可以作用于屏幕上的所有UI元素。在这种情况下，可以将M个UI元素中除第一UI元素以外的M-1个UI元素确定为N个UI元素。备选地，深度联动可以仅作用于屏幕上的部分UI元素。在这种情况下，可以基于第一UI元素的尺寸来确定第一UI元素的影响区域，以及将M个UI元素中在影响区域内的UI元素确定为N个UI元素。例如，第一UI元素的尺寸越大，其影响区域可以越大。备选地，影响区域也可以随着尺寸缩小，本公开在此不受限制。例如，影响区域可以是以第一UI元素的基准点为中心、具有预定半径的圆。应当理解，影响区域可以是具有任何形状的任何适当区域，例如具有预定尺寸的矩形、菱形等。影响区域可以是由电子设备和用户可配置的，本公开在此不受限制。
此外，在某些实施例中，与影响区域相交的UI元素可以被认为在影响区域内。备选地，在影响区域为具有预定半径的圆的情况下，如果UI元素与第一UI元素的距离小于影响区域的预定半径，该UI元素可以被认为在影响区域内。
图27示出了根据本公开的实施例的UI元素的影响区域2700的示例的示意图。如图27所示，由于UI元素3、4、7、8在UI元素5的影响区域2710内，因此UI元素3、4、7、8将随着UI元素5联动缩放。此外，由于UI元素1、2、6、9-13不在UI元素5的影响区域2710内，因此UI元素1、6、9-13不会随着UI元素5联动缩放。
返回参考图25，为了使N个UI元素以相应幅度缩放，可以确定第一UI元素与N个UI元素中的每个UI元素之间的距离。如上所述，在某些实施例中，可以根据距离所处于的范围，将距离划分为多个距离等级。例如被操作的UI元素本身可以处于距离等级0、联动的UI元素中的可以根据其与被操作的UI元素的相应距离而处于距离等级1、2、3……处于相同距离等级的UI元素可以被视为距离相同。由此，通过使用距离等级，可以简化UI元素的联动，使得处于相同距离等级的UI元素以相同方式联动，从而提高联动的统一性和协调性。然而，应当理解，在联动中，也可以使用距离本身，从而使得UI元素更精确地联动。在下文中，距离等级可互换地被称为距离。
在上文中，已经参考图10-14B描述了第一UI元素与N个UI元素中的第二UI元素之间的距离的确定方式，因此在此省略其描述。
返回参考图25，在确定了第一UI元素与第二UI元素之间的距离之后，可以基于距离，来确定缩放第二UI元素的幅度。例如，如果第一UI元素与第二UI元素之间的距离越大，则缩放第二UI元素的幅度可以越小，从而在视觉上指示按压对远处的UI元素的影响变小。备选地，如果第一UI元素与第二UI元素之间的距离越大，则缩放第二UI元素的幅度也可以越大，从而在视觉上指示按压对远处的UI元素的影响变大。
在某些实施例中，为了确定缩放第二UI元素的幅度，可以确定第一UI元素响应于按压而缩放的第一幅度。在某些实施例中，第一UI元素的缩放的第一幅度可以基于与第一UI元素相关联的各种因素来确定。这些因素可以包括但不限于第一UI元素的尺寸、第一UI元素能够发生变化的幅度范围、按压的持续时间和预定按压力。在上文中，详细描述了这些因素分别对UI元素的缩放幅度的影响，因此在此省略其描述。
然后，可以基于第一幅度和第一UI元素与第二UI元素之间的距离，来确定第二UI元素响应于按压而缩放的幅度。如何将缩放第一UI元素的幅度传导到第二UI元素，从而得到缩放第二UI元素的幅度可以利用上文中详细描述的传导方式实现。区别在于，在深度联动中，传导等式(7)和(8)中的xn表示联动缩放的UI元素(例如，第二UI元素)的缩放幅度，而x表示被按压的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元素的幅度。
返回参考图25，在确定了缩放第二UI元素的幅度之后，可以使第二UI元素以该幅度缩放，以从视觉上指示第二UI元素随着第一UI元素被按压而缩放。对于N个UI元素，都可以使其以各自的幅度缩放，以在整个屏幕上或者屏幕的部分区域上从视觉上指示按压，从而呈现按压联动。
图28示出了根据本公开的实施例的基于距离的UI元素的缩放2800的示例的示意图。如2800所示，距离为0的UI元素(例如，UI元素5本身)的缩放幅度大于距离为1的UI元素(例如，UI元素3、4、7、8)，距离为1的UI元素的缩放幅度大于距离为2的UI元素(例如，UI元素2、6、9)，并且距离为2的UI元素的缩放幅度大于距离为3的UI元素(例如，UI元素1、10-13)。
此外，在某些实施例中，为了更好地呈现动画效果的传导，并且改善用户体验，第一UI元素和第二UI元素并非同时开始缩放。例如，第一UI元素可以在按压发生时开始缩放，而第二UI元素可以在按压发生一段时间之后开始缩放。为此，在某些实施例中，可以基于第一UI元素与第二UI元素之间的距离确定一个延迟时间，以及响应于按压发生后经过了延迟时间，使第二UI元素缩放。进一步地，在某些实施例中，可以确定延迟系数，并且基于距离和延迟系数来确定延迟时间。例如，延迟时间可以是距离除以延迟系数的商。延迟系数可以是电子设备和用户可配置的。
图29示出了根据本公开的实施例的延迟时间2900的示例的示意图。如图29所示，距离为0的第一UI元素在按压发生时开始缩放，距离为1的UI元素的缩放晚于第一UI元素，距离为2的UI元素的缩放晚于距离为1的UI元素，并且距离为3的UI元素的缩放晚于距离为2的UI元素。
图30示出了根据本公开的具有延迟时间的UI元素的缩放3000的示例的示意图。如图30所示，距离为0的UI元素5在按压发生的时间T51开始缩放，距离为1的UI元素3、4、7、8在其后的时间T52开始缩放，距离为2的UI元素2、4、6、9在更晚的时间T53开始缩放，并且距离为3的UI元素1、10-13在最晚的T54开始缩放。
此外，在某些实施例中，UI元素的缩放的速度可以由幅度随时间变化的预定义曲线来控制。例如，预定义曲线可以为贝塞尔曲线或弹性力曲线。在弹性力曲线的情况下，可以通过控制弹簧的阻尼系数和刚性系数来控制缩放的速度。在贝塞尔曲线的情况下，可以通过控制贝塞尔曲线的至少一个控制点中的至少一者的坐标，来控制缩放的速度。
进一步地，在某些实施例中，为了改善用户体验，还可以使联动缩放的UI元素向被按压的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元素排斥。
图31示出了根据本公开的实施例的UI元素的移动的位移3100的示例的示意图。如3100所示，距离为1的UI元素(例如，UI元素3、4、7、8)的位移幅度大于距离为2的UI元素(例如，UI元素2、6、9)，并且距离为2的UI元素的位移幅度大于距离为3的UI元素(例如，UI元素1、10-13)
此外，在某些实施例中，在按压结束之后(例如，在用户将手指抬离屏幕之后)，经缩放的UI元素可以恢复。具体地，被按压的UI元素以及联动缩放的N个UI元素都可以恢复。为此，在某些实施例中，可以将经缩放的第二UI元素恢复为缩放前的第二UI元素。恢复过程可以是缩放的逆过程，因此在此省略其详细描述。
图32A示出了根据本公开的实施例的UI元素的恢复3200A的示例的示意图。如图32A所示，缩放后的UI元素(例如，UI元素1-13)都恢复为缩放前的初始尺寸。
进一步地，如上所述，在某些实施例中，UI元素还可能响应于按压而移动。在这种情况下，在按压结束之后，移动后的UI元素可以复位。具体地，向被按压的UI元素移动的N个UI元素都可以复位。为此，在某些实施例中，可以将第二UI元素从移动后的位置恢复为移动前的位置。
图32B示出了根据本公开的实施例的具有位移的UI元素的恢复3200B的示例的示意图。如图32B所示，移动并且缩放后的UI元素(例如，UI元素1-13)都恢复为移动前的位置和缩放前的初始尺寸。
在某些实施例中，缩放的恢复或移动的恢复可以存在回弹效果。例如，关于缩放的恢复，在用户松手后，UI元素的尺寸可以先增大到大于初始尺寸，再缩小为初始尺寸。此外，关于移动的恢复，在用户松手后，联动移动的UI元素可以先远离被按压的UI元素移动到比移动前的初始位置更远，再回到初始位置。
图33A-33B分别示出了根据本公开的实施例的具有回弹效果的UI元素的恢复的尺寸时间曲线3300A和位移时间曲线3300B的示例的示意图。
关于缩放回弹，如图33A所示，在T61，UI元素5被按压而缩小。此外，其他UI元素(例如，UI元素1-4、6-13)也联动缩小。
在T62，用户松手。此时，UI元素5缩小为初始尺寸的0.5倍。此外，距离为1的UI元素(例如，UI元素3、4、7、8)联动缩小，但是缩小幅度小于UI元素5。另外，距离为2的UI元素(例如，UI元素2、6、9)也联动缩小，但是缩小幅度小于距离为1的UI元素。进一步地，距离为3的UI元素(例如，UI元素1、10-13)也联动缩小，但是缩小幅度小于距离为2的UI元素。
在T62和T63期间，UI元素开始缩放回弹。
在T63，UI元素5的尺寸增大到初始尺寸的1.2倍。此外，距离为1的UI元素(例如，UI元素3、4、7、8)联动增大，但是增大幅度小于UI元素5。另外，距离为2的UI元素(例如，UI元素2、6、9)也联动增大，但是增大幅度小于距离为1的UI元素。进一步地，距离为3的UI元素(例如，UI元素1、10-13)也联动增大，但是增大幅度小于距离为2的UI元素。
在T64，全部UI元素的尺寸恢复为初始尺寸。
此外，关于移动回弹，如图33B所示，在T71，UI元素5被按压。其他UI元素朝向UI元素5移动。
在T72，用户松手。此时，距离为1的UI元素(例如，UI元素3、4、7、8)朝向UI元素5移动的位移为-1。另外，距离为2的UI元素(例如，UI元素2、6、9)也朝向UI元素5移动，但是位移幅度小于距离为1的UI元素。进一步地，距离为3的UI元素(例如，UI元素1、10-13)也朝向UI元素5移动，但是位移幅度小于距离为2的UI元素。
在T72和T73期间，UI元素开始移动回弹。
在T73，距离为1的UI元素(例如，UI元素3、4、7、8)的位移超过初始位置，并且为+0.7。另外，距离为2的UI元素(例如，UI元素2、6、9)的位移也超过初始位置，但是位移幅度小于距离为1的UI元素。进一步地，距离为3的UI元素(例如，UI元素1、10-13)的位移也超过初始位置，但是位移幅度小于距离为2的UI元素。
在T74，全部UI元素的位置恢复为初始位置。
应当理解，图33A-33B中的缩放尺寸(例如，0.5倍、1.2倍)和移动位移(例如，位移-1、位移0.7)仅是示例，UI元素可以以任何适当尺寸较小缩放或以任何适当位移移动。此外，虽然在图33A-33B中将回弹效果示出为仅回弹一次，但是可以实现具有多次回弹的回弹效果。回弹次数可以是任何适当的回弹次数，本公开在此不受限制。在某些实施例中，多次回弹的回弹幅度可以随时间减小。
图33C-33D分别示出了根据本公开的实施例的具有回弹幅度减小的多次回弹的回弹效果的UI元素的恢复的尺寸时间曲线3300C和位移时间曲线3300D的示例的示意图。
如图33C所示，UI元素经多次回弹后恢复为初始尺寸，其中距离为0的UI元素(例如，UI元素5)的回弹的缩放幅度大于距离为1的UI元素(例如，UI元素3、4、7、8)。距离为1的UI元素的回弹的缩放幅度大于距离为2的UI元素(例如，UI元素2、6、9)。距离为2的UI元素的回弹的缩放幅度大于距离为3的UI元素(例如，UI元素1、10-13)。
类似地，如图33D所示，UI元素经多次回弹后恢复为初始位置，其中距离为0的UI元素(例如，UI元素5)的回弹的位移幅度大于距离为1的UI元素(例如，UI元素3、4、7、8)。距离为1的UI元素的回弹的位移幅度大于距离为2的UI元素(例如，UI元素2、6、9)。距离为2的UI元素的回弹的位移幅度大于距离为3的UI元素(例如，UI元素1、10-13)。
进一步地，在某些实施例中，回弹效果也可以受预定义曲线(例如，弹性力曲线、贝塞尔曲线等)控制。例如，这些UI元素可以以预定义曲线控制的动画效果缩放回弹或移动回弹。
压力联动
本公开的实施例涉及UI中的UI元素在按压的动画效果上的联动，也被称为压力联动。在压力联动中，被按压的目标UI元素可以影响没有被按压的其他UI元素。具体地，在压力联动中，触发目标UI元素的动画效果可以联合地触发一个或多个其他UI元素、甚至整个UI中的其他UI元素的动画效果，使得其他UI元素都受到目标UI元素的影响。例如，在压力联动中，在按压目标UI元素时，除了该目标UI元素以一动画效果呈现按压效果之外，其他UI元素也可以以相应动画效果呈现按压效果，从而在视觉上呈现联动地按压。
由此，可以加强不同UI元素的动画效果之间的联系，并且突出各个独立UI元素之间的关系。相比于动画效果单一、每个UI元素都是独立的且无联系的传统动画，本公开的实施例能够使得动画效果更符合物理规律，并且考虑到了真实使用场景和用户使用习惯，从而可以显著提高用户体验。
以下将参考附图34至图46描述压力联动的一些示例实施例。
压力联动可以发生在具有任何适当的规则或不规则的布局的UI中，并且该UI中的UI元素可以具有任何适当的尺寸和形状。例如，压力联动可以发生在如图3A-3C所示的UI300A-300C中。
UI中的UI元素可以被按压。例如，在用户期望执行与UI元素相关联的操作时，用户可以按压UI元素。作为示例，在用户期望进入UI元素所表示的应用程序、打开与UI元素相关联的菜单等时，用户可以按压UI元素。在检测到UI元素处的按压的情况下，UI元素可以以一动画效果发生变化，例如UI元素可以视觉上相对于按压的位置以翘板方式移动位置(在下文中可替换地称为旋转)，或视觉上相对于按压的位置凹陷或突出，以呈现按压动作。在这种情况下，UI元素的变化可以符合点压力模型。在点压力模型中，UI元素在按压的位置处的压力大于其他部分的压力。
在某些实施例中，UI元素可以被视为刚体。在这种情况下，在检测到UI元素处的按压的情况下，UI元素可以在视觉上相对于按压的位置以翘板方式移动位置，以呈现按压效果。
图34示出了根据本公开的一些实施例的作为刚体的UI元素在被按压时的变化3400的示例的示意图。如图34所示，在检测到UI元素处的按压的情况下，UI元素可以从初始形状3410以一动画效果发生变化，以在视觉上相对于按压的位置以翘板方式移动位置。例如，当按压的位置位于UI元素的左侧时，UI元素在视觉上围绕其基准点(以“+”所示)向左侧旋转，从而变化为形状3420。变化后的形状3420类似于左侧被压下，而右侧被翘起的翘板。此外，当按压的位置位于UI元素的右侧时，UI元素在视觉上围绕其基准点向右侧旋转，从而变化为形状3430。变化后的形状3430类似于左侧被翘起，而右侧被压下的翘板。
在这种情况下，UI元素可以被视为两侧连接到弹簧的翘板，UI元素的按压可以被视为在一侧按压弹簧，而在另一侧拉伸弹簧，从而在整体上实现UI元素围绕其基准点旋转的动画效果。
图35示出了根据本公开的一些实施例的模拟UI元素的按压的弹簧的按压和拉伸3500的示例的示意图。3510示出了处于初始状态的两侧弹簧。3520示出了在按压的位置位于UI元素的左侧时，左侧的弹簧被按压，而右侧的弹簧被拉伸。3530示出了在按压的位置位于UI元素的右侧时，右侧的弹簧被按压，而左侧的弹簧被拉伸。
在这种情况下，弹簧的模型可以由如下等式(9)来表示：
其中L表示按压的位置与UI元素的基准点之间的水平距离，c表示按压的位置与基准点之间的直线距离，并且k’表示弹簧的弹性系数。
进一步地，上述等式(9)可以变换为如下等式(10)的形式：
其中k’表示弹簧的弹性系数，x’表示弹簧的形变量，g’表示弹簧的阻尼系数，T表示发生形变的时间，m’表示UI元素的尺寸。
此外，在某些实施例中，UI元素可以被视为非刚体。在这种情况下，在检测到UI元素处的按压的情况下，UI元素可以在视觉上相对于按压的位置凹陷或突出，以呈现按压效果。
图36示出了根据本公开的一些实施例的作为非刚体的UI元素在被按压时的变化3600的示例的示意图。如图36所示，UI元素可以被视为网格图。在检测到UI元素处的按压的情况下，初始UI元素3610可以以一动画效果发生变化，以在视觉上相对于按压的位置的凹陷或突出。例如，初始UI元素3610内的网格的坐标可以发生变化，从而变化为相对于按压的位置凹陷的UI元素3620。此外，在某些实施例中，还可以UI元素的颜色(例如，色调、明度、饱和度等)也可以发生变化，以突出按压。例如，初始UI元素3610还可以变化为相对于按压的位置凹陷并且颜色加深的UI元素3630。应当理解，颜色变化也可以适用于作为刚体的UI元素。
在某些实施例中，在UI元素发生变化之后，按压的位置可能不再处于变化后的UI元素的范围内。在这种情况下，由于按压的位置仍然处于变化前的UI元素的范围内，或者任何其他适当范围内，按压可以继续被检测为针对UI元素的按压。备选地，由于按压的位置不再处于变化后的UI元素的范围内，按压将不被检测为针对UI元素的按压。在这种情况下，可以认为按压结束。
在下文中，将以UI元素在视觉上相对于按压的位置以翘板方式移动位置为例来描述本公开的实施例。然而，应当理解，UI元素还可以以其他方式变化，例如视觉上相对于按压的位置的凹陷或突出。
此外，在某些实施例中，为了使得UI元素的变化符合自然规律和用户使用习惯，变化的幅度可以取决于按压的力的大小。在真实世界中，力的大小通常是指真实的力的大小。在这种情况下，按压的力越大，在UI元素的变化越大。在某些实施例中，按压的力可以是电子设备检测到的用户施加的按压的力。备选地，按压的力也可以是由电子设备或者用户设置预定按压力。
图37示出了根据本公开的一些实施例的UI元素在不同按压力时的变化3700的示例的示意图。如图37所示，在按压力大的情况下，UI元素可以以更大幅度变化(例如，旋转)。作为对照，在按压力小的情况下，UI元素可以以更小幅度变化。然而，本公开的实施例不限于此。UI元素响应于不同按压力的发生变化方式是电子设备或用户可配置的。例如，在按压力大的情况下，UI元素可以以更小幅度变化，而在按压力小的情况下，UI元素可以以更大幅度变化。
进一步地，在电子设备中，完全基于真实的按压的力进行变化可能对用户要求较高，并且可能需要电子设备配备相关硬件。因此，在某些实施例中，可以用按压的时间来模拟或替换按压的力。例如，如果按压的时间越长，则可以认为按压的力越大，由此变化越大。
图38示出了根据本公开的一些实施例的UI元素在不同按压持续时间时的变化3800的示例的示意图。如图38所示，在按压的持续时间长的情况下，UI元素可以以更大幅度变化(例如，旋转)。作为对照，在按压的持续时间短的情况下，UI元素可以以更小幅度变化。
然而，本公开的实施例不限于此。UI元素响应于不同按压持续时间的发生变化方式是电子设备或用户可配置的。例如，在按压的持续时间长的情况下，UI元素可以以更小幅度变化，而在按压的持续时间短的情况下，UI元素可以以更大幅度变化。
此外，在某些实施例中，为了进一步使得UI元素的变化符合自然规律和用户使用习惯，变化的幅度可以取决于UI元素的尺寸。例如，直观上，相同的按压可能难以按下较大的UI元素，而可以较轻松地按下较小的UI元素。在这种情况下，较大的UI元素受按压的影响可以较小，而较小的UI元素受按压的影响可以较大。
图39示出了根据本公开的一些实施例的UI元素在不同尺寸时的变化3900的示例的示意图。如图39所示，在UI元素的尺寸大的情况下，UI元素可以以更大幅度变化。作为对照，在UI元素的尺寸小的情况下，UI元素可以以更小幅度变化。
然而，本公开的实施例不限于此。UI元素在不同尺寸时的发生变化方式是电子设备或用户可配置的。例如，在UI元素的尺寸大的情况下，UI元素可以以更小幅度变化，而在UI元素的尺寸小的情况下，UI元素可以以更大幅度变化。
此外，在某些实施例中，为了改善用户体验，可以对UI元素能够变化的幅度进行限制，使得UI元素只能在被允许的幅度范围内进行变化。例如，幅度范围可以是任何适当范围，诸如UI元素的旋转角度在0-60度之间、UI元素的颜色变化的灰度在10％-50％之间、或者UI元素内的网格的坐标变化在100-10000像素之间等。作为示例，假设幅度范围为UI元素的旋转角度在0-60度之间。在这种情况下，无论预定按压力多大、按压的持续时间多长，被按压的UI元素至多只能围绕基准点旋转60度，而不可能被旋转更大幅度。
在上文中，详细描述了被按压的UI元素的变化。如上所述，在压力联动中，被按压的目标UI元素可以影响没有被按压的其他UI元素。具体地，在压力联动中，触发目标UI元素的动画效果可以联合地触发一个或多个其他UI元素、甚至整个UI中的其他UI元素的动画效果，使得其他UI元素都受到目标UI元素的影响。例如，在压力联动中，在一持续时间期间按压目标UI元素时，除了该目标UI元素以一动画效果发生变化之外，其他UI元素也可以以相应动画效果发生变化，从而在视觉上呈现联动地按压。因此，在下文中，将参考图40至图46详细描述压力联动。
图40示出了根据本公开的实施例的图形界面显示方法4000的流程图。应当理解，方法4000可以由以上参考图1所描述的电子设备100或者参考图2所描述的电子设备200来执行。在此参考图3A的UI 300A描述方法4000。然而，应当理解，UI 300A仅是示例，方法2500可以适用于任何适当界面，包括但不限于UI 300B-300C。
在框4010，在电子设备的屏幕上显示M个用户界面UI元素。M为大于1的正整数。例如，M个UI元素可以是UI元素1至13。
在框4020，检测M个UI元素中的第一UI元素处的按压。例如，第一UI元素可以是UI元素5。如上所述，在第一UI元素处的按压将使得第一UI元素旋转，以呈现按压效果。
在框4030，响应于检测到第一UI元素处的按压，使屏幕上的N个UI元素中的每个UI元素以相应动画效果发生变化。N为1与M-1之间的正整数。由此，从视觉上指示联动地按压。
在某些实施例中，N个UI元素相对于按压的位置发生变化的方向可以是从N个UI元素中的每个UI元素指向按压的位置的方向。在某些实施例中，该方向可以是从N个UI元素中的每个UI元素的相应基准点指向被按压的UI元素的基准点的方向。在这种情况下，按压的位置是N个元素的变化的变化基准点，也就是说，按压的位置在视觉上被指示为按压的中心。图41示出了根据本公开的实施例的N个UI元素的压力联动4000的示例的示意图。如图41所示，UI元素5被按压，使得UI元素5旋转，以呈现按压效果。此外，屏幕上的其他UI元素(例如，UI元素1至4、和6至13)也响应于按压相对于按压的位置以不同幅度旋转，以呈现按压效果。由此，在视觉上呈现联动地按压。
备选地，N个UI元素相对于按压的位置发生变化的方向可以与被按压的UI元素发生变化的方向相同。图42示出了根据本公开的实施例的N个UI元素的压力联动4000的另一示例的示意图。如图42所示，UI元素5被按压，使得UI元素5旋转，以呈现按压效果。此外，屏幕上的其他UI元素(例如，UI元素1至4、和6至13)也响应于按压在与UI元素5相同的方向上以不同幅度旋转，以呈现按压效果。在这种情况下，N个元素的变化的变化基准点为其自己的基准点。由此，在视觉上呈现联动地按压。
为了清楚，图41-42仅示出了UI 300A中的UI元素1-13的压力联动。应当理解，压力联动可以发生在任何UI中的任何至少两个UI元素处，例如，UI 300A-300C中的任何至少两个UI元素处。
在某些实施例中，压力联动可以作用于屏幕上的所有UI元素。在这种情况下，可以将M个UI元素中除第一UI元素以外的M-1个UI元素确定为N个UI元素。备选地，压力联动可以仅作用于屏幕上的部分UI元素。在这种情况下，可以基于第一UI元素的尺寸来确定第一UI元素的影响区域，以及将M个UI元素中在影响区域内的UI元素确定为N个UI元素。例如，第一UI元素的尺寸越大，其影响区域可以越大。备选地，影响区域也可以随着尺寸缩小，本公开在此不受限制。例如，影响区域可以是以第一UI元素的基准点为中心、具有预定半径的圆。应当理解，影响区域可以是具有任何形状的任何适当区域，例如具有预定尺寸的矩形、菱形等。影响区域可以是由电子设备和用户可配置的，本公开在此不受限制。
此外，在某些实施例中，与影响区域相交的UI元素可以被认为在影响区域内。备选地，在影响区域为具有预定半径的圆的情况下，如果UI元素与第一UI元素的距离小于影响区域的预定半径，该UI元素可以被认为在影响区域内。
图43示出了根据本公开的实施例的UI元素的影响区域4300的示例的示意图。如图43所示，由于UI元素3、4、7、8在UI元素5的影响区域4310内，因此UI元素3、4、7、8将随着UI元素5联动变化。此外，由于UI元素1、2、6、9-13不在UI元素5的影响区域4310内，因此UI元素1、6、9-13不会随着UI元素5联动变化。
返回参考图40，为了使N个UI元素以相应动画效果发生变化，可以确定第一UI元素与N个UI元素中的每个UI元素之间的距离。如上所述，在某些实施例中，可以根据距离所处于的范围，将距离划分为多个距离等级。例如被操作的UI元素本身可以处于距离等级0、联动的UI元素中的可以根据其与被操作的UI元素的相应距离而处于距离等级1、2、3……处于相同距离等级的UI元素可以被视为距离相同。由此，通过使用距离等级，可以简化UI元素的联动，使得处于相同距离等级的UI元素以相同方式联动，从而提高联动的统一性和协调性。然而，应当理解，在联动中，也可以使用距离本身，从而使得UI元素更精确地联动。在下文中，距离等级可互换地被称为距离。
在上文中，已经参考图10-14B描述了第一UI元素与N个UI元素中的第二UI元素之间的距离的确定方式，因此在此省略其描述。
返回参考图40，在确定了第一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元素发生变化的幅度可以利用上文中详细描述的传导方式实现。区别在于，在压力联动中，传导等式(7)和(8)中的xn表示联动变化的UI元素(例如，第二UI元素)的变化幅度，而x表示被按压的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元素发生变化的幅度。
返回参考图40，在确定了第二UI元素发生变化的动画效果之后，可以使第二UI元素以该动画效果发生变化，以从视觉上指示第二UI元素随着第一UI元素被按压而发生变化。对于N个UI元素，都可以使其以各自的动画效果发生变化，以在整个屏幕上或者屏幕的部分区域上从视觉上指示按压，从而呈现按压联动。
图44示出了根据本公开的实施例的基于距离的UI元素的变化4400的示例的示意图。如4400所示，距离为0的UI元素(例如，UI元素5本身)发生变化的幅度大于距离为1的UI元素(例如，UI元素3、4、7、8)，距离为1的UI元素发生变化的幅度大于距离为2的UI元素(例如，UI元素2、6、9)，并且距离为2的UI元素发生变化的幅度大于距离为3的UI元素(例如，UI元素1、10-13)。
此外，在某些实施例中，为了更好地呈现动画效果的传导，并且改善用户体验，第一UI元素和第二UI元素并非同时开始发生变化。例如，第一UI元素可以在按压发生时开始发生变化，而第二UI元素可以在按压发生一段时间之后开始发生变化。为此，在某些实施例中，可以基于第一UI元素与第二UI元素之间的距离确定一个延迟时间，以及响应于按压发生后经过了延迟时间，使第二UI元素发生变化。进一步地，在某些实施例中，可以确定延迟系数，并且基于距离和延迟系数来确定延迟时间。例如，延迟时间可以是距离除以延迟系数的商。延迟系数可以是电子设备和用户可配置的。
图45示出了根据本公开的实施例的延迟时间4500的示例的示意图。如图45所示，距离为0的第一UI元素(例如，UI元素5)在按压发生的时间T81开始发生变化，距离为1的UI元素(例如，UI元素3、4、7、8)在其后的时间T82开始发生变化，距离为2的UI元素(例如，UI元素2、4、6、9)在更晚的时间T83开始发生变化，并且距离为3的UI元素(例如，UI元素1、10-13)在最晚的T84开始发生变化。
此外，在某些实施例中，UI元素发生变化的速度可以由幅度随时间变化的预定义曲线来控制。例如，预定义曲线可以为贝塞尔曲线或弹性力曲线。在弹性力曲线的情况下，可以通过控制弹簧的阻尼系数和刚性系数来控制发生变化的速度。在贝塞尔曲线的情况下，可以通过控制贝塞尔曲线的至少一个控制点中的至少一者的坐标，来控制发生变化的速度。
此外，在某些实施例中，在按压结束之后(例如，在用户将手指抬离屏幕之后)，发生变化的UI元素可以恢复。具体地，被按压的UI元素以及联动变化的N个UI元素都可以恢复。为此，在某些实施例中，可以将发生变化的第二UI元素恢复为发生变化前的第二UI元素。恢复过程可以是变化的逆过程，因此在此省略其详细描述。
图46示出了根据本公开的实施例的UI元素的恢复4600的示例的示意图。如图46所示，发生变化后的UI元素(例如，UI元素1-13)都恢复为变化前的形态。
在某些实施例中，变化的恢复可以存在回弹效果。例如，在用户松手后，UI元素的变化可以从左侧被压下同时右侧被翘起，变为左侧被翘起同时右侧被压下，然后再变化为初始形状。也就是说，在用户松手后，在视觉上呈现出UI元素翻转后再恢复的效果。
图46B示出了根据本公开的实施例的具有回弹效果的UI元素的恢复的角度时间曲线4600B的示例的示意图。
如图46B所示，在T91，UI元素5被按压而变化。例如，UI元素5在左侧被按压，从而围绕其基准点旋转。具体地，UI元素5在左侧被压下，同时右侧被翘起。此外，其他UI元素(例如，UI元素1-4、6-13)也联动变化。
在T92，用户松手。此时，UI元素5旋转的角度为-60°。此外，距离为1的UI元素(例如，UI元素3、4、7、8)联动旋转，但是旋转幅度小于UI元素5。另外，距离为2的UI元素(例如，UI元素2、6、9)也联动旋转，但是旋转幅度小于距离为1的UI元素。进一步地，距离为3的UI元素(例如，UI元素1、10-13)也联动旋转，但是旋转幅度小于距离为2的UI元素。
在T92和T93期间，UI元素开始旋转回弹。
在T93，UI元素5旋转回弹的角度为45°。此外，距离为1的UI元素(例如，UI元素3、4、7、8)联动旋转回弹，但是旋转回弹幅度小于UI元素5。另外，距离为2的UI元素(例如，UI元素2、6、9)也联动旋转回弹，但是旋转回弹幅度小于距离为1的UI元素。进一步地，距离为3的UI元素(例如，UI元素1、10-13)也联动旋转回弹，但是旋转回弹幅度小于距离为2的UI元素。
在T94，全部UI元素恢复为初始形状。换句话说，全部UI元素的旋转角度恢复为0°。
应当理解，图46B中的旋转角度仅是示例，UI元素可以以任何适当模式变化。此外，虽然在图46B中将回弹效果示出为仅回弹一次，但是可以实现具有多次回弹的回弹效果。回弹次数可以是任何适当的回弹次数，本公开在此不受限制。在某些实施例中，多次回弹的回弹幅度可以随时间减小。
图46C示出了根据本公开的实施例的具有回弹幅度减小的多次回弹的回弹效果的UI元素的恢复的角度时间曲线4600C的示例的示意图。
如图46C所示，UI元素经多次回弹后恢复为初始形状，其中距离为0的UI元素(例如，UI元素5)的回弹的旋转幅度(例如，旋转角度)大于距离为1的UI元素(例如，UI元素3、4、7、8)。距离为1的UI元素的回弹的旋转幅度大于距离为2的UI元素(例如，UI元素2、6、9)。距离为2的UI元素的回弹的旋转幅度大于距离为3的UI元素(例如，UI元素1、10-13)。
进一步地，在某些实施例中，回弹效果也可以受预定义曲线(例如，弹性力曲线、贝塞尔曲线等)控制。例如，这些UI元素可以以预定义曲线控制的动画效果变化回弹。
下面介绍本公开的实施例提出的联动的动画实现原理和系统架构。
图47示出了根据本公开的实施例的动画实现原理4700。如上所述，动画本质上是基于刷新率实时显示UI或UI元素。由于人类的视觉暂留原理，使得用户感觉画面是运动的。如图47所示，动画从动画的初态在经过动画时间之后变换为动画的终态。在这个变换过程中，动画可以由动画类型和动画变换形式进行控制。例如，动画类型可以包括位移动画、旋转动画、缩放动画和透明动画等。而动画变换形式可以由插值器和估值器等控制器进行控制。这样的控制器可以用于在动画时间期间控制对动画进行变换的速度。
具体地，插值器用于设置动画属性值从初态过渡到终态的变化逻辑，从而控制动画变化的速率，使得动画能够以匀速、加速、减速、抛物线速率等速率中的一或多种速率变化。
在某些实施例中，电子设备100可以根据系统插值器或自定义插值器(例如弹性力插值器、摩擦力插值器)设置动画属性值的变化逻辑。动画运行时，当电子设备100根据上述变化逻辑确定动画属性值发生改变时，基于上述动画属性值绘制图像帧，并且刷新视图。
在某些实施例中，当电子设备100根据插值器的变化逻辑确定动画属性值发生改变时，基于上述动画属性值调用invalidate()函数刷新视图，即调用onDraw()函数重新绘制视图并显示。
在某些实施例中，电子设备100自定义了弹性力插值器。例如，弹性力插值器的函数的参数至少包括刚性系数(stiffness)和阻尼系数(damping)。作为示例，弹性力插值器的函数代码可以表示为以下其中一项：“SpringInterpolator(float stiffness,floatdamping)”、“SpringInterpolator(float stiffness,float damping,float endPos)”、“SpringInterpolator(float stiffness,float damping,float endPos,floatvelocity)”、“SpringInterpolator(float stiffness,float damping,float endPos,float velocity,float valueThreshold)”。
其中，参数endPos表示相对位移，即弹簧初始位置和静止位置差值。在某些实施例中，endPos可以表示UI元素的相对位移。
参数velocity表示初速度。在某些实施例中，velocity可以表示UI元素的初速度。
参数valueThreshold表示判断动画停止的阈值。当相邻两帧间的位移(或者其他属性)差值小于该阈值，动画停止运行。该阈值越大，动画越容易停止，运行时间也更短；反之，动画运行时间更长。该阈值的取值可以按照具体的动画属性进行设置。在一些实施例中，弹性插值器FloatValueHold参数缺省为1/1000，其他构造方法中该阈值取值为1。在一些实施例中，自定义该阈值时，按照动画属性可以使用表1所示的建议值。
表1
动画属性 valueThreshold
ROTATION/ROTATION_X/ROTATION_Y 1/10
ALPHA 1/256
SCALE_X/SCALE_Y 1/500
TRANSLATION_Y/TRANSLATION_X 1
此外，该阈值还可以直接使用DynamicAnimation类提供的如下常量：MIN_VISIBLE_CHANGE_PIXELS、IN_VISIBLE_CHANGE_ROTATION_DEGREES、MIN_VISIBLE_CHANGE_ALPHA、MIN_VISIBLE_CHANGE_SCALE。
作为示例，自定义弹性力插值器的动画类的具体代码可以表示如下：
“PhysicalInterpolatorBase interpolator＝new SpringInterpolator(400F,40F,200F,2600F,1F)；
ObjectAnimator animator＝ObjectAnimator.ofFloat(listView,“translationY”,0,346)；
animator.setDuration(interpolator.getDuration())；//获取动画时间
animator.setInterpolator(interpolator)；//将自定义插值器设置给动画类
animator.start()；//运行动画”。
在某些实施例中，电子设备100自定义了摩擦力插值器。作为示例，摩擦力插值器的函数代码可以表示为“FlingInterpolator(float initVelocity,float friction)”。其中，initVelocity表示初速度，friction表示摩擦力。
作为示例，使用摩擦力插值器的动画类的具体代码可以表示如下：
“PhysicalInterpolatorBase interpolator＝new FlingInterpolator(600F,0.5F)；
ObjectAnimator animator＝ObjectAnimator.ofFloat(listView,“translationY”,0,interpolator.getEndOffset())；
animator.setDuration(interpolator.getDuration())；//获取动画时间
animator.setInterpolator(interpolator)；//将自定义插值器设置给动画类animator.start()；”//运行动画。
在某些实施例中，电子设备100可以自行设置动画时间(Duration)以及起始位置；也可以调用引擎模型获取动画时间(Duration)以及终止位置，再设置给动画类(Animator类)。
作为示例，电子设备100调用引擎模型获取动画时间的代码可以表示为“com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#getDuration”。
作为示例，调用引擎模型获取弹簧的终止位置的代码可以表示为“com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#getEndOffset”。
作为示例，设置参数valueThreshold的代码可以表示为“com.xxx.dynamicanimation.interpolator.PhysicalInterpolatorBase#setValueThreshold”。
在某些实施例中，使用弹性引擎动画类的代码可以表示为如下代码的其中一项：“SpringAnimation(K object,FloatPropertyCompat<K>property,float stiffness,float damping,float startValue,float endValue,float velocity)”、“SpringAnimation(K object,FloatPropertyCompat<K>property,float stiffness,float damping,float endValue,float velocity)”。
其中，参数object表示动画对象；Property表示动画类或者插值器作用的属性对象。参见表1，该参数可以用于间接设置valueThreshold。插值器版本中该参数是可选的，当valueThreshold已通过其他方式设置，可不设置该参数，即直接使用无property参数的构造方法。动画类版本中该参数为必选参数。DynamicAnimation类已提供如下可直接使用的常量：
“TRANSLATION_X、TRANSLATION_Y、TRANSLATION_Z、SCALE_X、SCALE_Y、ROTATION、ROTATION_X、ROTATION_Y、X、Y、Z、ALPHA、SCROLL_X、SCROLL_Y”，电子设备100也可以自定义实现ViewProperty接口。
作为示例，使用弹簧引擎动画类的具体代码可以表示如下：
“SpringAnimation animation＝SpringAnimation(listView,DynamicAnimation.TRANSLATION_Y,400F,40F,0,1000F)；
animation.start()；”
在某些实施例中，使用摩擦力引擎动画类的代码可以表示为：“FlingAnimation(Kobject,FloatPropertyCompat<K>property,float initVelocity,float friction)”。
作为示例，使用摩擦力动画类的具体代码可以表示如下：
“FlingAnimation animation＝FlingAnimation(listView,DynamicAnimation.TRANSLATION_Y,2000F,0.5F)；
animation.start()；”。
图48示出了根据本公开的实施例的用于实现“联动”动画效果能力或功能的系统框架4800的示意图。UI框架的动效能力的是基于安卓或者鸿蒙的整体架构来实现的，包含了主流的4层的逻辑处理，数据处理的流程从底层往上呈现给用户。用户主要在应用层使用和体验动效的功能。在本公开的实施例中，桌面和UI框架的能力交互关系如图48所示。具体地，如图48所示，系统框架4800可以包括应用程序层4810、应用程序框架层4830、硬件抽象层4850、以及内核层4870。应用程序层4810可以包括桌面4812。桌面4812上可以实现UI元素操作4814。UI元素操作4814例如可以包括拖拽操作、按压操作、深度按压操作等。应用程序框架层4830可以包括系统服务4832和扩展服务4834。系统服务4832可以包括各种系统服务，例如Service 4833。扩展服务4834可以包括各种扩展服务，例如SDK 4835。硬件抽象层(HAL)4850可以包括HAL 3.0 4852和算法Algo 4854。内核层4870可以包括驱动4872和物理设备4874。物理设备4874可以向驱动4872提供原始参数流，而驱动4872可以向物理设备4874提供功能处理参数流。如图48进一步示出的，用于实现联动动效4825的UI框架4820可以实现在应用程序层4810与应用程序框架层4830之间。UI框架4820可以包括平台能力4822和系统能力4824，两者可以用于提供联动动效4825。联动动效4825进而可以提供给应用程序层4810的UI元素操作4814。
图49示出了根据本公开的实施例的“联动”动画效果能力或功能所涉及到的应用侧和UI框架侧之间的关系的示意图。如图49所示，应用侧4910可以包括桌面4915，桌面4915上的UI元素可以实现拖拽、按压、深度按压等操作。UI框架侧4950可以包括UI框架动效4952，UI框架动效4952可以实现联动动效能力4954，联动动效能力4954可以通过AAR格式4951、JAR格式4953和系统接口4955等方式来实现。应用侧4910可以通过集成4930和调用4940等方式来调用UI框架侧4950提供的“联动”动画效果能力或功能。通过应用侧4910和UI框架侧4950之间的交互，本公开的实施例实现了新型的联动“动画效果”，使得原本独立的UI元素(例如，图标、卡片、控件等)联系起来。
图50示出了根据本公开的实施例的“联动”动画效果能力或功能实现的三种方式的具体说明的示意图。如图50所示，AAR格式4951与电子设备100的系统之间的关系5001为：AAR格式4951是以二进制方式的能力打包的，提供给系统中应用侧集成的能力，可以自由控制版本节奏，不跟随系统。JAR格式4953与电子设备100的系统之间的关系5003为：JAR格式4953是以二进制方式的能力打包的，提供给系统中所有部件的能力，可以自由控制版本节奏，不跟随系统。系统接口4955与电子设备100的系统之间的关系5005为：系统接口4955是系统版本中的框架层的接口，提供给系统中所有部件的能力，跟随系统升级。本公开的重点就是联动动效能力的实现。其中，集成就是AAR和JAR的方式，调用就是系统接口的方式。场景不限，只是能力的展现方式不一致。也就是说，本公开在前文描述的各种方法的功能可以通过AAR格式文件、JAR格式文件和/或电子设备100的系统接口来实现。以此方式，“联动”动画效果的能力或功能可以简单和方便地被实现并提供给电子设备的应用程序，例如桌面。

Claims (15)

1.一种图形界面显示方法，包括：
在电子设备的屏幕上显示M个用户界面UI元素，M为大于1的正整数；
检测到作用于所述M个UI元素中的第一UI元素处的拖拽；
响应于所述拖拽，使所述屏幕上的N个UI元素中的每个UI元素以相应方式移动，N为1与M-1之间的正整数，其中使所述N个UI元素以相应方式移动包括：
确定所述第一UI元素与所述N个UI元素中的第二UI元素之间的距离；
基于所述距离确定移动所述第二UI元素的方式；以及
使所述第二UI元素以所述方式移动，以从视觉上指示所述第二UI元素随着所述第一UI元素移动。
2.根据权利要求1所述的方法，其中确定所述距离包括：
确定所述第一UI元素的第一基准点和所述第二UI元素的第二基准点；以及
确定所述第一基准点与所述第二基准点之间的距离作为所述距离。
3.根据权利要求1所述的方法，其中确定所述距离包括：
确定所述第一UI元素的第一基准点；
从以所述第一基准点为圆心的、具有各自半径的多个圆中，确定与所述第二UI元素相交并且半径最小的目标圆；以及
将所述目标圆的半径确定为所述距离。
4.根据权利要求1所述的方法，其中确定所述距离包括：
确定所述第一UI元素与所述第二UI元素之间的横向间距；
确定所述第一UI元素与所述第二UI元素之间的纵向间距；以及
基于如下任一项来确定所述距离：
所述横向间距和所述纵向间距中的至少一者，或
所述横向间距和所述纵向间距中的至少一者、以及从所述第二UI元素的第二基准点指向所述第一UI元素的第一基准点的方向。
5.根据权利要求1至4中任一项所述的方法，还包括：
基于所述第一UI元素的尺寸来确定所述第一UI元素的影响区域；以及
将所述M个UI元素中在所述影响区域内的UI元素确定为所述N个UI元素。
6.根据权利要求1至4中任一项所述的方法，还包括：
将所述M个UI元素中除所述第一UI元素以外的M-1个UI元素确定为所述N个UI元素。
7.根据权利要求1所述的方法，其中确定所述移动的方式包括：
确定所述第一UI元素响应于所述拖拽而移动的第一方式；以及
基于如下任一项来确定所述第二UI元素响应于所述拖拽而移动的方式：
所述第一方式和所述距离，或
所述第二UI元素的尺寸和所述第一UI元素的尺寸中的至少一者、所述第一方式、以及所述距离。
8.根据权利要求7所述的方法，其中所述第一UI元素的移动的第一方式基于位移随时间变化的预定义曲线来确定。
9.根据权利要求8所述的方法，其中所述预定义曲线为贝塞尔曲线或弹性力曲线。
10.根据权利要求1至9中任一项所述的方法，其中使所述第二UI元素以所述方式移动包括：
确定所述拖拽的方向；以及
使所述第二UI元素与所述方向相关联地、以所述方式移动。
11.根据权利要求1至10中任一项所述的方法，其中使所述第二UI元素以所述方式移动包括：
基于所述距离确定一个延迟时间；以及
响应于所述拖拽发生后经过了所述延迟时间，使所述第二UI元素以所述方式移动。
12.根据权利要求1至11中任一项所述的方法，其中所述方法通过AAR格式文件、JAR格式文件和系统接口中的至少一者来实现。
13.一种电子设备，其特征在于，包括：处理器、以及存储有指令的存储器，所述指令在被所述处理器执行时使得所述电子设备执行根据权利要求1至12中任一项所述的方法。
14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有指令，所述指令在被电子设备执行时使得所述电子设备执行根据权利要求1至12中任一项所述的方法。
15.一种计算机程序产品，其特征在于，所述计算机程序产品包括指令，所述指令在被电子设备执行时使得所述电子设备执行根据权利要求1至12中任一项所述的方法。
CN202210992582.0A 2021-04-20 2021-04-20 图形界面显示方法、电子设备、介质以及程序产品 Active CN115964106B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210992582.0A CN115964106B (zh) 2021-04-20 2021-04-20 图形界面显示方法、电子设备、介质以及程序产品

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110426820.7A CN113552987B (zh) 2021-04-20 2021-04-20 图形界面显示方法、电子设备、介质以及程序产品
CN202210992582.0A CN115964106B (zh) 2021-04-20 2021-04-20 图形界面显示方法、电子设备、介质以及程序产品

Related Parent Applications (1)

Application Number Title Priority Date Filing Date
CN202110426820.7A Division CN113552987B (zh) 2021-04-20 2021-04-20 图形界面显示方法、电子设备、介质以及程序产品

Publications (2)

Publication Number Publication Date
CN115964106A true CN115964106A (zh) 2023-04-14
CN115964106B CN115964106B (zh) 2024-02-13

Family

ID=78101748

Family Applications (2)

Application Number Title Priority Date Filing Date
CN202110426820.7A Active CN113552987B (zh) 2021-04-20 2021-04-20 图形界面显示方法、电子设备、介质以及程序产品
CN202210992582.0A Active CN115964106B (zh) 2021-04-20 2021-04-20 图形界面显示方法、电子设备、介质以及程序产品

Family Applications Before (1)

Application Number Title Priority Date Filing Date
CN202110426820.7A Active CN113552987B (zh) 2021-04-20 2021-04-20 图形界面显示方法、电子设备、介质以及程序产品

Country Status (5)

Country Link
US (1) US20240201839A1 (zh)
EP (1) EP4293488A4 (zh)
JP (1) JP2024516606A (zh)
CN (2) CN113552987B (zh)
WO (1) WO2022222738A1 (zh)

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114691002B (zh) * 2020-12-14 2023-10-20 华为技术有限公司 一种页面滑动的处理方法及相关装置
CN115469781B (zh) * 2021-04-20 2023-09-01 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN113552987B (zh) * 2021-04-20 2022-09-16 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN115220621A (zh) * 2021-04-20 2022-10-21 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN114995929B (zh) * 2021-11-17 2023-04-21 荣耀终端有限公司 一种弹窗的显示方法及装置
CN116431046A (zh) * 2022-01-04 2023-07-14 华为技术有限公司 用户界面显示方法、电子设备、介质以及程序产品
CN114428923A (zh) * 2022-01-26 2022-05-03 北京有竹居网络技术有限公司 弹窗效果的呈现方法、装置、电子设备及存储介质
CN114546568A (zh) * 2022-02-25 2022-05-27 重庆紫光华山智安科技有限公司 页面元素拖放方法、装置、电子设备及存储介质
CN114911406B (zh) * 2022-06-01 2023-10-17 北京字节跳动网络技术有限公司 一种动效生成方法、装置、介质及设备
CN116048361B (zh) * 2022-06-24 2024-04-12 荣耀终端有限公司 交互方法、可读存储介质和电子设备
CN117435097A (zh) * 2022-07-12 2024-01-23 荣耀终端有限公司 一种显示方法及电子设备
CN117472485A (zh) * 2022-07-22 2024-01-30 华为技术有限公司 一种界面显示的方法以及电子设备

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030184587A1 (en) * 2002-03-14 2003-10-02 Bas Ording Dynamically changing appearances for user interface elements during drag-and-drop operations
US20090113330A1 (en) * 2007-10-30 2009-04-30 John Michael Garrison Method For Predictive Drag and Drop Operation To Improve Accessibility
CN102375588A (zh) * 2010-08-19 2012-03-14 上海博泰悦臻电子设备制造有限公司 通过电子设备屏幕的手势控制设备操作的方法和装置
CN103488379A (zh) * 2013-09-16 2014-01-01 北京奇虎科技有限公司 一种智能终端的桌面元素调整方法和装置
CN106126036A (zh) * 2016-06-30 2016-11-16 北京奇虎科技有限公司 一种图标的批量处理方法、装置和移动终端
CN106155472A (zh) * 2015-04-28 2016-11-23 东莞酷派软件技术有限公司 一种操作应用图标的方法、装置及移动终端
CN106775782A (zh) * 2017-02-17 2017-05-31 广东小天才科技有限公司 应用图标移动方法及装置
CN112256165A (zh) * 2019-12-13 2021-01-22 华为技术有限公司 一种应用图标的显示方法及电子设备
CN113552987A (zh) * 2021-04-20 2021-10-26 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130111382A1 (en) * 2011-11-02 2013-05-02 Microsoft Corporation Data collection interaction using customized layouts
CN103870092A (zh) * 2012-12-10 2014-06-18 联想(北京)有限公司 一种桌面图标显示方法及电子设备
JP6188370B2 (ja) * 2013-03-25 2017-08-30 インターナショナル・ビジネス・マシーンズ・コーポレーションＩｎｔｅｒｎａｔｉｏｎａｌ Ｂｕｓｉｎｅｓｓ Ｍａｃｈｉｎｅｓ Ｃｏｒｐｏｒａｔｉｏｎ オブジェクト分類方法、装置及びプログラム。
CN103530052B (zh) * 2013-09-27 2017-09-29 华为技术有限公司 一种界面内容的显示方法和用户设备
WO2016029935A1 (en) * 2014-08-26 2016-03-03 Quizista GmbH Overlap-free positioning of graphical objects, in particular for knowledge quantification
US20180217722A1 (en) * 2017-01-31 2018-08-02 Wipro Limited Method and System for Establishing a Relationship Between a Plurality of User Interface Elements
US11210116B2 (en) * 2019-07-24 2021-12-28 Adp, Llc System, method and computer program product of navigating users through a complex computing system to perform a task
CN110569095B (zh) * 2019-08-09 2021-08-13 荣耀终端有限公司 显示页面元素的方法和电子设备
CN111176504B (zh) * 2019-12-18 2021-12-24 华为技术有限公司 一种界面元素的显示方法及电子设备
CN112286477B (zh) * 2020-11-16 2023-12-08 Oppo广东移动通信有限公司 投屏显示方法及相关产品

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030184587A1 (en) * 2002-03-14 2003-10-02 Bas Ording Dynamically changing appearances for user interface elements during drag-and-drop operations
US20090113330A1 (en) * 2007-10-30 2009-04-30 John Michael Garrison Method For Predictive Drag and Drop Operation To Improve Accessibility
CN102375588A (zh) * 2010-08-19 2012-03-14 上海博泰悦臻电子设备制造有限公司 通过电子设备屏幕的手势控制设备操作的方法和装置
CN103488379A (zh) * 2013-09-16 2014-01-01 北京奇虎科技有限公司 一种智能终端的桌面元素调整方法和装置
CN106155472A (zh) * 2015-04-28 2016-11-23 东莞酷派软件技术有限公司 一种操作应用图标的方法、装置及移动终端
CN106126036A (zh) * 2016-06-30 2016-11-16 北京奇虎科技有限公司 一种图标的批量处理方法、装置和移动终端
CN106775782A (zh) * 2017-02-17 2017-05-31 广东小天才科技有限公司 应用图标移动方法及装置
CN112256165A (zh) * 2019-12-13 2021-01-22 华为技术有限公司 一种应用图标的显示方法及电子设备
CN113552987A (zh) * 2021-04-20 2021-10-26 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN113552987B (zh) * 2021-04-20 2022-09-16 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品

Also Published As

Publication number Publication date
WO2022222738A1 (zh) 2022-10-27
EP4293488A4 (en) 2024-07-31
CN113552987A (zh) 2021-10-26
US20240201839A1 (en) 2024-06-20
EP4293488A1 (en) 2023-12-20
CN113552987B (zh) 2022-09-16
CN115964106B (zh) 2024-02-13
JP2024516606A (ja) 2024-04-16

Similar Documents

Publication Publication Date Title
CN113552987B (zh) 图形界面显示方法、电子设备、介质以及程序产品
WO2022222830A1 (zh) 图形界面显示方法、电子设备、介质以及程序产品
EP4224831A1 (en) Image processing method and electronic device
WO2021115194A1 (zh) 一种应用图标的显示方法及电子设备
CN113132526B (zh) 一种页面绘制方法及相关装置
CN113805745A (zh) 一种悬浮窗的控制方法及电子设备
WO2022247541A1 (zh) 一种应用程序动效衔接的方法及装置
WO2022222931A1 (zh) 图形界面显示方法、电子设备、介质以及程序产品
US20230351665A1 (en) Animation Processing Method and Related Apparatus
CN113760137A (zh) 光标显示方法及电子设备
CN116048361B (zh) 交互方法、可读存储介质和电子设备
WO2022222831A1 (zh) 图形界面显示方法、电子设备、介质以及程序产品
CN114691002B (zh) 一种页面滑动的处理方法及相关装置
WO2023130977A1 (zh) 用户界面显示方法、电子设备、介质以及程序产品
EP4390668A1 (en) Method for displaying switch control, and electronic device
US20240353972A1 (en) User interface display method, electronic device, medium, and program product
WO2024099206A1 (zh) 一种图形界面处理方法以及装置
CN116700655B (zh) 一种界面显示方法及电子设备
WO2023124227A9 (zh) 帧率切换方法及装置
CN117472482A (zh) 一种界面切换的显示方法以及电子设备
CN115700444A (zh) 光标显示方法及电子设备
CN117472485A (zh) 一种界面显示的方法以及电子设备
CN116137047A (zh) 一种加速渲染的方法及装置
CN117667276A (zh) 一种页面刷新的方法以及电子设备
CN118314000A (zh) 图像预测方法、装置、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant